/**
 * Tyre detail page v2 (tyre-page-v2 branch) - tyd- prefix.
 *
 * Loads AFTER tyres-for.css: the page runs on the tf- design language
 * (tokens from --tr-* / --tf-*, hero band, verdict panel, section grammar)
 * and this sheet adds the tyre-page-specific components plus a reskin of
 * the legacy .summary-section chrome so the existing section renderers can
 * sit on full-bleed tf-sec bands unchanged.
 *
 * Scope: everything is under .tyd (the page wrapper carries "tf tyd").
 */

/* =========================================================================
   Hero
   ========================================================================= */

.tyd-head { padding-bottom: 30px; }

/* Answer-first source order on phones; retain the desktop photo column. */
.tyd-headgrid > .tyd-verdict { margin-top: 18px; }
.tyd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.tyd-actions a, .tyd-actions a:link, .tyd-actions a:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #667887;
    border-radius: 5px;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
}
.tyd-actions a:first-child { background: #0db1e7; border-color: #0db1e7; color: #07151c; }
.tyd-actions a:hover { border-color: #0db1e7; text-decoration: underline; }
.tyd-actions a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 879px) {
    .tsz-headgrid.tyd-headgrid { display: block; }
    .tyd-headgrid > .tyd-photo { margin-top: 18px; }
}
@media (min-width: 880px) {
    .tyd-headgrid > .tsz-headgrid__main { grid-column: 1; grid-row: 1; }
    .tyd-headgrid > .tyd-facts { grid-column: 1; grid-row: 2; margin-top: 0; }
    .tyd-headgrid > .tyd-photo { grid-column: 2; grid-row: 1 / span 2; }
    .tyd-headgrid > .tyd-verdict { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
}

.tyd-titlerow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

/* Context chips under the title */
.tyd-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

a.tyd-chip, a.tyd-chip:link, a.tyd-chip:visited,
span.tyd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--tf-mono, monospace);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #cfd8de;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    padding: 5px 12px;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
a.tyd-chip:hover, a.tyd-chip:focus {
    border-color: var(--tf-cyan, #0db1e7);
    color: #fff;
    text-decoration: none;
}
a.tyd-chip--tr, a.tyd-chip--tr:link, a.tyd-chip--tr:visited {
    background: var(--tf-cyan, #0db1e7);
    border-color: var(--tf-cyan, #0db1e7);
    color: #fff;
    font-weight: 700;
}
a.tyd-chip--tr:hover, a.tyd-chip--tr:focus { background: #0a9bcc; color: #fff; }
.tyd-chip--warn { color: #ffb4a8; border-color: rgba(255, 180, 168, 0.4); }

/* Lineage line */
.tyd-lineage {
    margin: 12px 0 0;
    font-size: 0.82rem;
    color: var(--tf-muted-on-ink, #9fadb9);
}
.tyd-lineage a, .tyd-lineage a:link, .tyd-lineage a:visited {
    color: var(--tf-cyan, #0db1e7);
    font-weight: 700;
    text-decoration: none;
}
.tyd-lineage a:hover { text-decoration: underline; color: var(--tf-cyan, #0db1e7); }

/* Lede clamp + read more */
.tyd-lede.truncated {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tyd-readmore {
    background: none;
    border: 0;
    padding: 0;
    margin-top: 6px;
    color: var(--tf-cyan, #0db1e7);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.tyd-readmore:hover { text-decoration: underline; }

/* Facts strip: the clickable mileage fact keeps the plain-fact look */
.tyd-facts { margin-top: 20px; }
.tyd-fact-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
}
.tyd-fact-btn .tf-facts__n,
.tyd-fact-btn .tf-facts__label { display: block; }
.tyd-fact-btn .tf-facts__label i { opacity: 0.7; }
.tyd-fact-btn:hover .tf-facts__label { color: var(--tf-cyan, #0db1e7); }

/* The product photo column */
.tyd-photo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}
.tyd-photo__imglink {
    position: relative;
    display: block;
    flex: 0 0 auto;
}
.tyd-photo__glow {
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.14), transparent 72%);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--tyd-brand, #0db1e7) 30%, transparent), transparent 72%);
}
.tyd-photo__img {
    position: relative;
    display: block;
    width: 104px;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.45);
}
a.tyd-photo__gallery, a.tyd-photo__gallery:link, a.tyd-photo__gallery:visited {
    font-family: var(--tf-mono, monospace);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #dbe4ea;
    background: rgba(11, 14, 18, 0.55);
    border-radius: 999px;
    padding: 5px 12px;
    text-decoration: none;
}
a.tyd-photo__gallery:hover { color: var(--tf-cyan, #0db1e7); text-decoration: none; }

@media (min-width: 880px) {
    .tsz-headgrid.tyd-headgrid { grid-template-columns: minmax(0, 1fr) 300px; }
    .tyd-photo {
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        margin-top: 0;
        align-self: center;
    }
    .tyd-photo__img { width: 210px; }
}

/* =========================================================================
   The quick answer
   ========================================================================= */

.tyd-verdict { max-width: none; }

.tyd-verdict__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
}
@media (min-width: 768px) {
    .tyd-verdict__grid { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
}
@media (min-width: 1100px) {
    .tyd-verdict__grid { grid-template-columns: 240px 1fr 1fr; }
    .tyd-verdict__grid--4 { grid-template-columns: 220px 1fr 1fr 1.25fr; }
    .tyd-verdict__grid--noscore { grid-template-columns: 1fr 1fr; }
}

.tyd-verdict__scorecell {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
    background: rgba(13, 177, 231, 0.12);
    border: 1px solid rgba(13, 177, 231, 0.4);
    border-radius: 6px;
    padding: 14px 16px;
    color: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.tyd-verdict__scorecell:hover {
    border-color: var(--tf-cyan, #0db1e7);
    background: rgba(13, 177, 231, 0.2);
}

.tyd-verdict__cell {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    padding: 14px 16px;
}

.tyd-verdict__eyebrow {
    font-family: var(--tf-mono, monospace);
    font-size: 0.66rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--tf-muted-on-ink, #9fadb9);
}
.tyd-verdict__scorecell .tyd-verdict__eyebrow { color: var(--tf-cyan, #0db1e7); }

.tyd-verdict__big {
    font-family: var(--tf-mono, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
    color: #fff;
}
.tyd-verdict__big small {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tf-muted-on-ink, #9fadb9);
    margin-left: 3px;
    letter-spacing: 0;
}

.tyd-verdict__num {
    font-family: var(--tf-mono, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #fff;
}

.tyd-verdict__conf {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--tf-cyan, #0db1e7);
}

.tyd-verdict__sub {
    font-size: 0.79rem;
    line-height: 1.45;
    color: #cfd8de;
}
.tyd-verdict__sub a, .tyd-verdict__sub a:link, .tyd-verdict__sub a:visited {
    color: var(--tf-cyan, #0db1e7) !important;
    text-decoration: none;
}
.tyd-verdict__sub a:hover { text-decoration: underline; }

a.tyd-verdict__jump, a.tyd-verdict__jump:link, a.tyd-verdict__jump:visited,
span.tyd-verdict__jump {
    margin-top: auto;
    padding-top: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--tf-cyan, #0db1e7);
    text-decoration: none;
}
a.tyd-verdict__jump:hover { text-decoration: underline; color: var(--tf-cyan, #0db1e7); }
.tyd-verdict__jump i { font-size: 0.66rem; }

.tyd-verdict__empty { margin-top: 10px; }
.tyd-verdict__empty p { margin: 0 0 14px; }

/* Slim hero for review pages 2+ */
.tyd-head--slim { padding-bottom: 22px; }
.tyd-head--slim .tyd-slimtitle {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    color: #fff;
}
.tyd-head--slim .tyd-slimtitle a,
.tyd-head--slim .tyd-slimtitle a:link,
.tyd-head--slim .tyd-slimtitle a:visited { color: #fff; text-decoration: none; }
.tyd-head--slim .tyd-slimtitle a:hover { color: var(--tf-cyan, #0db1e7); }

/* Watchlist button on the dark ground */
.tyd-titlerow .btn,
.tyd-titlerow button {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* =========================================================================
   Jump nav seating (inserted after #tyretitle by tyre-jump-nav.js)
   ========================================================================= */

.tyd .tyre-jump-nav { margin-bottom: 0; }
.tyd .tyre-jump-nav__scroller {
    max-width: var(--tf-wrap, 1180px);
    margin: 0 auto;
    padding: 0 20px;
}

/* The hidden stand-ins header.php prints until the script builds the bar: the
   bar's own classes, so its exact height (the chips are line-height 1, so no
   font changes it). One shows per width, where the script will put the bar. */
.tyd .tyre-jump-nav--slot { position: static; visibility: hidden; box-shadow: none; }
.tyd .tyre-jump-nav--slot-early { display: none; }
@media (max-width: 879px) {
    .tyd .tyre-jump-nav--slot-early { display: block; }
    .tyd .tyre-jump-nav--slot-late { display: none; }
}

/* A tyre page always ends up taller than the window, but a first paint from
   part of the HTML is not, so on Windows the scrollbar arrived mid-load and the
   centred column jumped ~8px sideways. Hold the scrollbar's room from the start. */
html { scrollbar-gutter: stable; }

/* =========================================================================
   Body bands: reskin of the legacy .summary-section chrome
   ========================================================================= */

/* The old boxed-panel chrome goes away; each section sits directly on its band */
.tyd .summary-section {
    padding: 0;
    background: transparent;
}
.tyd .summary-section + .summary-section {
    border-top: 0;
    margin-top: 30px;
}

.tyd .summary-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: 0;
}

.tyd .summary-section-title {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-transform: none;
    color: var(--tr-text, #17202a);
}
@media (min-width: 768px) {
    .tyd .summary-section-title { font-size: 1.8rem; }
}
.tyd .summary-section-title .fa { display: none; }
.tyd .summary-section-title .text-muted { font-size: 1.05rem; font-weight: 600; }

.tyd .summary-section-body {
    padding: 16px 0 0;
    background: transparent;
}

.tyd .summary-empty {
    border: 1px dashed var(--tr-line, #dde3e9);
    background: var(--tr-paper, #fff);
}

/* Section action buttons: cyan outline chips instead of white-on-dark */
.tyd .summary-section-header .btn.summary-section-action {
    background: var(--tr-cyan, #0db1e7);
    border: 1px solid var(--tr-cyan, #0db1e7);
    color: #fff;
    font-weight: 700;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 0.85rem;
}
.tyd .summary-section-header .btn.summary-section-action:hover,
.tyd .summary-section-header .btn.summary-section-action:focus {
    background: #0a9bcc;
    border-color: #0a9bcc;
    color: #fff;
}

/* Videos section heading joins the same grammar */
.tyd .tyre-videos-section { margin: 0; }
.tyd .tyre-videos-heading {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--tr-text, #17202a);
}
@media (min-width: 768px) {
    .tyd .tyre-videos-heading { font-size: 1.8rem; }
}
.tyd .tyre-videos-heading .fa { display: none; }

/* The reviews section sits on its own band */
.tyd .tr-reviews { margin-top: 0; }
.tyd .tyre-jump-anchor { display: block; }

/* In-band ad row */
.tyd-adrow {
    max-width: var(--tf-wrap, 1180px);
    margin: 0 auto;
    padding: 18px 20px 0;
    text-align: center;
}

/* =========================================================================
   Verdict: strengths & weaknesses cell
   ========================================================================= */

.tyd-verdict__swline {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
}
.tyd-verdict__swline .fa {
    font-size: 0.68rem;
    color: #58d68d;
    flex: 0 0 auto;
    position: relative;
    top: -1px;
}
.tyd-verdict__swline--weak .fa { color: #ffb4a8; }
.tyd-verdict__jumpbtn {
    background: none;
    border: 0;
    padding: 6px 0 0;
    margin-top: auto;
    text-align: left;
    cursor: pointer;
    color: var(--tf-cyan, #0db1e7);
    font-size: 0.76rem;
    font-weight: 700;
}
.tyd-verdict__jumpbtn:hover { text-decoration: underline; }

/* =========================================================================
   All Tests: latest-test callout + full history table
   ========================================================================= */

.tyd-latest {
    background: var(--tr-paper, #fff);
    border: 1px solid var(--tr-line, #dde3e9);
    border-left: 3px solid var(--tr-cyan, #0db1e7);
    border-radius: 8px;
    padding: 16px 18px;
    margin: 16px 0 0;
}
.tyd-latest__eyebrow {
    display: block;
    font-family: var(--tr-mono, monospace);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--tr-cyan, #0db1e7);
}
.tyd-latest__head {
    margin: 8px 0 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}
.tyd-latest__res {
    font-family: var(--tr-mono, monospace);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tr-muted, #5d6a75);
    margin-left: 6px;
    white-space: nowrap;
}
.tyd-latest__quote {
    margin: 10px 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--tr-text, #17202a);
    max-width: var(--tr-measure);
}
.tyd-latest__meta {
    margin: 10px 0 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--tr-muted, #5d6a75);
}

.tyd-tests { margin-top: 16px; }
.tyd-tests-table__year {
    font-family: var(--tr-mono, monospace);
    white-space: nowrap;
    width: 1%;
    color: var(--tr-muted, #5d6a75);
}
.tyd-tests-table__test a { font-weight: 600; }
.tyd-tests-table__res { white-space: nowrap; }
.tyd-tests-table__of {
    font-family: var(--tr-mono, monospace);
    font-size: 0.85rem;
    color: var(--tr-muted, #5d6a75);
}
.tyd-tests-table__award { max-width: 220px; }
.tyd-tests-table__award .tf-chip { margin-left: 0; }
.tyd-tests-table__award .badge { font-size: 0.68rem; vertical-align: 1px; }
/* The pointer to what the Test-Results sub-page adds beyond this list */
.tyd-tests-more {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 14px 0 0;
    font-size: 0.86rem;
    color: var(--tr-muted, #5d6a75);
}
.tyd-tests-more__label { font-weight: 600; color: var(--tr-text, #17202a); }
.tyd-tests-more a, .tyd-tests-more a:link, .tyd-tests-more a:visited {
    color: var(--tr-cyan, #0db1e7);
    font-weight: 600;
    text-decoration: none;
}
.tyd-tests-more a:hover { text-decoration: underline; }
.tyd-tchip {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--tr-cyan, #0db1e7);
    color: #fff;
    border-radius: 3px;
    padding: 2px 7px;
}

/* =========================================================================
   Dimensions & Label Scores (tdl-)

   One panel on the reviews-masthead grammar: the size range beside the EU
   label, popular sizes along the foot. The size range reads the way a
   sidewall does, each part captioned; the label is drawn as the label is,
   an A-E ladder per graded metric with the black pointer at each grade the
   range carries. The EU grade colours appear on the ladders and nowhere
   else. Every link keeps its own colour rules: style.css paints a:link navy.
   ========================================================================= */

.tdl {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--tr-line, #dde3e9);
    border-radius: 8px;
    background: var(--tr-paper, #fff);
    color: var(--tr-text, #17202a);
}

.tdl__zone {
    min-width: 0;
    padding: 16px;
}

.tdl__zone + .tdl__zone {
    border-top: 1px solid var(--tr-line, #dde3e9);
}

@media (min-width: 760px) {
    .tdl__zone { padding: 18px 24px 20px; }
}

/* Side by side only where both halves get their full width; below this the
   halves stack, which keeps the ladders legible on tablets. */
@media (min-width: 1100px) {
    .tdl--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .tdl--split .tdl__zone + .tdl__zone {
        border-top: 0;
        border-left: 1px solid var(--tr-line, #dde3e9);
    }
}

/* The page's mono eyebrow with its scope beside it (as .tr-rv-eyebrow). */
.tdl-eyebrow {
    margin: 0 0 12px;
    font-family: var(--tr-mono, monospace);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tr-muted, #5d6a75);
}

.tdl-eyebrow__scope {
    margin-left: 8px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.76rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

a.tdl-eyebrow__scope,
a.tdl-eyebrow__scope:link,
a.tdl-eyebrow__scope:visited {
    color: #0a7ea8;
    font-weight: 600;
    text-decoration: none;
}

a.tdl-eyebrow__scope:hover,
a.tdl-eyebrow__scope:focus { color: #0a7ea8; text-decoration: underline; }

/* --- Size range, as a sidewall reads: 195-235/40-65 R16-20 89-106 H-V --- */
.tdl-sw {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 16px;
    margin: 0;
}

.tdl-sw__grp {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
}

.tdl-sw__seg {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.tdl-sw__v,
.tdl-sw__sep {
    font-family: var(--tr-mono, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 1.3rem;
    line-height: 1.1;
    white-space: nowrap;
}

.tdl-sw__v {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tr-text, #17202a);
}

.tdl-sw__sep {
    font-weight: 400;
    color: #9aa6b1;
}

/* A caption may overhang its value by 8px a side, so a short part ("45"
   under PROFILE) keeps the string tight; the separators leave room. The
   load/speed caption, the one that runs long in translation, wraps under
   its value instead of pushing the line onto two. */
.tdl-sw__c {
    margin: 0 -8px;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    color: var(--tr-muted, #5d6a75);
}

.tdl-sw__seg--ls { width: min-content; min-width: 7.5rem; }
.tdl-sw__seg--since .tdl-sw__c { max-width: 11em; }

.tdl-sw__seg--since {
    margin-left: 12px;
    padding-left: 16px;
    border-left: 1px solid var(--tr-line, #dde3e9);
}

/* --- Sizes per rim: a small histogram, each column a link to that rim --- */
.tdl-rims {
    display: flex;
    align-items: flex-end;
    margin-top: 18px;
}

.tdl-rims__key {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    padding-right: 10px;
    font-family: var(--tr-mono, monospace);
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tr-muted, #5d6a75);
}

.tdl-rims__key span:last-child { padding-bottom: 1px; }

a.tdl-rim,
a.tdl-rim:link,
a.tdl-rim:visited {
    flex: 0 1 58px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
    color: var(--tr-text, #17202a);
    text-decoration: none;
}

.tdl-rim__n {
    font-family: var(--tr-mono, monospace);
    font-size: 0.72rem;
    line-height: 1;
    color: var(--tr-muted, #5d6a75);
}

.tdl-rim__bar {
    display: block;
    height: calc(3px + var(--v, 0) * 33px);
    margin: 0 6px;
    border-radius: 3px 3px 0 0;
    background: #bfe6f5;
    transition: background-color 0.15s;
}

/* The diameters sit on one continuous baseline under the bars. */
.tdl-rim__d {
    margin-top: -4px;
    padding-top: 6px;
    border-top: 1px solid #c9d2da;
    font-family: var(--tr-mono, monospace);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

a.tdl-rim:hover .tdl-rim__bar,
a.tdl-rim:focus-visible .tdl-rim__bar { background: var(--tr-cyan, #0db1e7); }

a.tdl-rim:hover .tdl-rim__d,
a.tdl-rim:focus-visible .tdl-rim__d,
a.tdl-rim:hover .tdl-rim__n,
a.tdl-rim:focus-visible .tdl-rim__n { color: #0a7ea8; }

a.tdl-rim:focus-visible {
    outline: 2px solid var(--tr-cyan, #0db1e7);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --- EU label: A-E ladders, noise, winter marks --- */
.tdl-label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 18px 22px;
    max-width: 640px;
}

.tdl-scale,
.tdl-side { min-width: 0; }

.tdl-scale__name {
    margin: 0 0 7px;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--tr-text, #17202a);
}

.tdl-step {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 16px;
}

.tdl-step + .tdl-step { margin-top: 4px; }

.tdl-step__g {
    flex: 0 0 11px;
    font-family: var(--tr-mono, monospace);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    color: #8a96a1;
}

/* Bar lengths step up from A to E (--w), leaving room after the longest for
   the pointer; a grade the range does not carry keeps its shape, not its
   colour. */
.tdl-step__bar {
    flex: 0 0 auto;
    width: calc((100% - 60px) * var(--w, 1));
    height: 14px;
    background: #e4e9ee;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%);
}

.tdl-step.is-on .tdl-step__g { color: var(--tr-text, #17202a); }
.tdl-step.is-on .tdl-step__bar { background: var(--c, #64748b); }

/* The label's black class arrow, carrying the share of sizes on the grade. */
.tdl-step__ptr {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 40px;
    height: 16px;
    padding: 0 5px 0 10px;
    background: var(--tr-ink, #0e1216);
    color: #fff;
    font-family: var(--tr-mono, monospace);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
}

.tdl-noise__db {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 0;
    line-height: 1;
}

.tdl-noise__db .fa {
    align-self: center;
    margin-right: 2px;
    font-size: 0.95rem;
    color: var(--tr-muted, #5d6a75);
}

.tdl-noise__db > span:not(.visually-hidden) {
    font-family: var(--tr-mono, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tr-text, #17202a);
}

.tdl-noise__db small {
    font-family: var(--tr-mono, monospace);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--tr-muted, #5d6a75);
}

.tdl-noise__cls {
    display: flex;
    gap: 3px;
    margin: 9px 0 0;
}

.tdl-nc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border: 1px solid var(--tr-line, #dde3e9);
    border-radius: 4px;
    font-family: var(--tr-mono, monospace);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    color: #8a96a1;
}

.tdl-nc.is-on {
    background: var(--tr-ink, #0e1216);
    border-color: var(--tr-ink, #0e1216);
    color: #fff;
}

.tdl-mark {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 14px 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    color: #0b6aa2;
}

.tdl-side > .tdl-mark:first-child { margin-top: 0; }
.tdl-mark + .tdl-mark { margin-top: 6px; }

.tdl-mark__3pmsf {
    flex: 0 0 auto;
    width: 22px;
    height: 18px;
}

.tdl-mark .fa {
    flex: 0 0 auto;
    width: 22px;
    font-size: 0.95rem;
    text-align: center;
}

/* --- Popular sizes along the foot of the panel --- */
.tdl__foot {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--tr-line, #dde3e9);
}

.tdl__foot-label {
    margin-right: 6px;
    font-family: var(--tr-mono, monospace);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tr-muted, #5d6a75);
}

a.tdl-size,
a.tdl-size:link,
a.tdl-size:visited {
    padding: 5px 10px;
    border: 1px solid var(--tr-line, #dde3e9);
    border-radius: 6px;
    background: var(--tr-paper, #fff);
    color: var(--tr-text, #17202a);
    font-family: var(--tr-mono, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

a.tdl-size:hover,
a.tdl-size:focus {
    border-color: var(--tr-cyan, #0db1e7);
    color: #0a7ea8;
    text-decoration: none;
}

@media (min-width: 760px) {
    .tdl__foot { padding: 12px 24px; }
}

/* Phones: fuel and wet side by side, noise and the winter marks on one
   line beneath, popular sizes on a single scrolling row. */
@media (max-width: 559px) {
    .tdl__zone { padding: 14px; }
    .tdl-sw { gap: 8px 14px; }
    .tdl-sw__v,
    .tdl-sw__sep { font-size: 1.12rem; }
    .tdl-rims { margin-top: 14px; }
    /* Ten or more rims leave ~25px a column: drop the inch marks, the RIM
       key already says what the numbers are. */
    .tdl-rims--dense .tdl-rim__in { display: none; }
    .tdl-rims--dense .tdl-rim__bar { margin: 0 3px; }
    .tdl-label { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
    .tdl-side {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 22px;
    }
    .tdl-noise {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .tdl-noise .tdl-scale__name,
    .tdl-noise__cls,
    .tdl-side .tdl-mark { margin: 0; }
    .tdl__foot {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 10px 14px;
        scrollbar-width: none;
    }
    .tdl__foot::-webkit-scrollbar { display: none; }
    .tdl__foot > * { flex: 0 0 auto; }
}

/* =========================================================================
   Articles about this tyre: thumbnail-left cards

   The .tyre-articles rules in style.css are scoped to .summary-unified, the
   old boxed panel this page no longer has, so none of them apply here.
   ========================================================================= */

.tyd .tyre-articles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
@media (min-width: 900px) {
    .tyd .tyre-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

.tyd a.tyre-articles__row,
.tyd a.tyre-articles__row:link,
.tyd a.tyre-articles__row:visited {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px;
    background: var(--tr-paper, #fff);
    border: 1px solid var(--tr-line, #dde3e9);
    border-radius: 6px;
    color: var(--tr-text, #17202a);
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.tyd a.tyre-articles__row:hover,
.tyd a.tyre-articles__row:focus {
    border-color: var(--tr-cyan, #0db1e7);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(14, 18, 22, 0.08);
    color: var(--tr-text, #17202a);
    text-decoration: none;
}

.tyd .tyre-articles__thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--tr-mist, #eef1f4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tyd .tyre-articles__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* A catalogue shot of the tyre is shown whole: cropping one to fill the box
   cuts the top and bottom off the tread. */
.tyd .tyre-articles__thumb--product { background: var(--tr-paper, #fff); }
.tyd .tyre-articles__thumb--product img { object-fit: contain; }
.tyd .tyre-articles__thumb--empty {
    color: var(--tr-muted, #5d6a75);
    font-size: 1.5rem;
}

.tyd .tyre-articles__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.tyd .tyre-articles__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    font-family: var(--tr-mono, monospace);
    font-size: 0.68rem;
    color: var(--tr-muted, #5d6a75);
}
.tyd .tyre-articles__badge {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--tr-cyan, #0db1e7);
}
.tyd .tyre-articles__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.tyd a.tyre-articles__row:hover .tyre-articles__title { color: var(--tr-cyan, #0db1e7); }
.tyd .tyre-articles__blurb {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--tr-muted, #5d6a75);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tyd .tyre-articles__chevron {
    flex: 0 0 auto;
    align-self: center;
    color: var(--tr-muted, #5d6a75);
}

@media (max-width: 575.98px) {
    .tyd .tyre-articles__thumb { flex-basis: 72px; width: 72px; height: 72px; }
    .tyd .tyre-articles__blurb { -webkit-line-clamp: 2; }
    .tyd .tyre-articles__chevron { display: none; }
}

/* =========================================================================
   Media gallery sub-page (/view_media/) - tmg-
   Video reviews, owner-review photo cards, official strip, and the lightbox.
   ========================================================================== */

.tmg-head { padding-bottom: 26px; }
.tmg-title { font-size: 1.7rem; }
@media (min-width: 880px) { .tmg-title { font-size: 2.1rem; } }
.tmg-title--slim { font-size: 1.3rem; margin-top: 2px; }
@media (min-width: 880px) { .tmg-title--slim { font-size: 1.5rem; } }
.tmg-facts { margin-top: 16px; }

.tmg-none { color: var(--tf-muted); margin: 0; }

.tmg-claim {
    margin: 8px 0 20px;
    max-width: var(--tr-measure);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--tf-muted);
}

/* --- Video reviews --- */
.tmg-vidgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 18px;
}
@media (min-width: 640px) { .tmg-vidgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tmg-vidgrid { grid-template-columns: repeat(3, 1fr); } }

.tmg-vid { cursor: pointer; }
.tmg-vid__thumb {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: var(--tf-ink);
}
.tmg-vid__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s;
}
.tmg-vid:hover .tmg-vid__thumb img, .tmg-vid:focus .tmg-vid__thumb img { transform: scale(1.03); }
.tmg-vid__title {
    display: block;
    margin-top: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tmg-vid:hover .tmg-vid__title, .tmg-vid:focus .tmg-vid__title { color: var(--tf-cyan); }

.tmg-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(10, 15, 20, 0.72);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background 0.15s;
}
.tmg-play i { margin-left: 3px; }
.tmg-vid:hover .tmg-play, .tmg-vid:focus .tmg-play { background: var(--tf-cyan); }

/* --- Owner-review photo cards --- */
.tmg-ownergrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 18px;
    align-items: start;
}
@media (min-width: 680px) { .tmg-ownergrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tmg-ownergrid { grid-template-columns: repeat(3, 1fr); } }

.tmg-owner {
    background: var(--tf-paper);
    border: 1px solid var(--tf-line);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tmg-owner:hover { border-color: var(--tf-cyan); box-shadow: 0 2px 10px rgba(16, 24, 32, 0.08); }

.tmg-owner__lead {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--tf-mist);
    overflow: hidden;
}
.tmg-owner__lead img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tmg-owner__strip {
    display: flex;
    gap: 3px;
    margin-top: 3px;
}
.tmg-owner__strip a {
    flex: 1 1 0;
    min-width: 0;
    display: block;
    height: 62px;
    overflow: hidden;
}
.tmg-owner__strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tmg-owner__body { padding: 12px 14px 14px; }
.tmg-owner__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.tmg-owner__what { min-width: 0; }
.tmg-owner__car {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
}
.tmg-owner__meta {
    display: block;
    margin-top: 3px;
    font-family: var(--tf-mono);
    font-size: 0.7rem;
    color: var(--tf-muted);
}
.tmg-owner__quote {
    margin: 10px 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
a.tmg-owner__link,
a.tmg-owner__link:link,
a.tmg-owner__link:visited {
    display: inline-block;
    margin-top: 9px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tf-cyan);
    text-decoration: none;
}
a.tmg-owner__link:hover { text-decoration: underline; }

/* --- Official strip --- */
.tmg-offgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 18px;
    align-items: start;
}
@media (min-width: 640px) { .tmg-offgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .tmg-offgrid { grid-template-columns: repeat(5, 1fr); } }

.tmg-off {
    display: block;
    background: #fff;
    border: 1px solid var(--tf-line);
    border-radius: 10px;
    overflow: hidden;
    color: var(--tf-muted);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tmg-off:hover, .tmg-off:focus {
    color: var(--tf-muted);
    text-decoration: none;
    border-color: var(--tf-cyan);
    box-shadow: 0 2px 10px rgba(16, 24, 32, 0.08);
}
.tmg-off__img {
    display: block;
    aspect-ratio: 1 / 1;
    padding: 12px;
}
.tmg-off__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.tmg-off__cap {
    display: block;
    padding: 0 12px 10px;
    font-size: 0.75rem;
    line-height: 1.4;
}

/* --- Lightbox --- */
.tmg-lb {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(8, 12, 16, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 64px;
}
.tmg-lb[hidden] { display: none; }
.tmg-lb__fig {
    margin: 0;
    max-width: min(1100px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.tmg-lb__fig img {
    max-width: 100%;
    max-height: 82vh;
    border-radius: 8px;
    background: #fff;
}
.tmg-lb__fig figcaption {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    text-align: center;
}
.tmg-lb__close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.9rem;
    line-height: 1;
    padding: 10px;
    cursor: pointer;
}
.tmg-lb__close:hover { color: var(--tr-cyan, #0db1e7); }
.tmg-lb__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tmg-lb__nav:hover { background: var(--tr-cyan, #0db1e7); border-color: var(--tr-cyan, #0db1e7); }
.tmg-lb__nav[hidden] { display: none; }
.tmg-lb__prev { left: 12px; }
.tmg-lb__next { right: 12px; }
@media (max-width: 640px) {
    .tmg-lb { padding: 24px 10px 60px; }
    .tmg-lb__nav { top: auto; bottom: 8px; transform: none; }
    .tmg-lb__prev { left: 18%; }
    .tmg-lb__next { right: 18%; }
}

/* --- Single view --- */
.tmg-singlewrap { max-width: 880px; }
.tmg-single { margin: 0; }
.tmg-single img, .tmg-single video {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--tf-line);
    border-radius: 12px;
    background: var(--tf-mist);
}
.tmg-single--pad img { background: #fff; padding: 18px; }
.tmg-ytembed {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: var(--tf-ink);
}
.tmg-ytembed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.tmg-single figcaption {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 0.9rem;
    color: var(--tf-muted);
}

.tmg-chip {
    display: inline-block;
    font-family: var(--tf-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 20px;
    border: 1px solid var(--tf-line);
    color: var(--tf-muted);
    white-space: nowrap;
}
.tmg-chip--official { color: #0b7fa6; border-color: rgba(13, 177, 231, 0.45); background: rgba(13, 177, 231, 0.07); }
.tmg-chip--owner { color: #2e7d32; border-color: rgba(46, 125, 50, 0.35); background: rgba(46, 125, 50, 0.06); }
.tmg-chip--video { color: var(--tf-ink); border-color: rgba(16, 24, 32, 0.3); background: rgba(16, 24, 32, 0.05); }

.tmg-reviewbox {
    margin-top: 22px;
    border: 1px solid var(--tf-line);
    border-radius: 12px;
    background: var(--tf-mist);
    padding: 16px 18px;
}
.tmg-reviewbox__meta {
    font-family: var(--tf-mono);
    font-size: 0.78rem;
    color: var(--tf-muted);
    margin: 0;
}
.tmg-reviewbox__label {
    margin: 12px 0 4px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tf-muted);
}
.tmg-reviewbox__quote {
    margin: 0;
    padding: 0 0 0 12px;
    border-left: 3px solid var(--tf-cyan);
    font-size: 0.92rem;
    line-height: 1.55;
}
.tmg-reviewbox__action { margin: 14px 0 0; }

.tmg-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0 0;
}
.tmg-nav a,
.tmg-nav a:link,
.tmg-nav a:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--tf-line);
    border-radius: 6px;
    background: var(--tf-paper);
    color: var(--tf-text);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.tmg-nav a:hover { border-color: var(--tf-cyan); color: var(--tf-cyan); text-decoration: none; }

/* =========================================================================
   Sizes & EU Label sub-page (/sizes-label) - tsl-
   Per-rim tf-tables of every real size variant with its EU label grades.
   ========================================================================== */

.tsl-head { padding-bottom: 26px; }

.tsl .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* --- Filter toolbar --- */
.tsl-toolbar-band { padding: 18px 0; border-bottom: 1px solid var(--tf-line); }
.tsl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
}
.tsl-toolbar__search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--tf-line);
    border-radius: 6px;
    background: var(--tf-paper);
    color: var(--tf-muted);
    margin: 0;
    font-weight: 400;
    flex: 1 1 220px;
    max-width: 320px;
}
.tsl-toolbar__search input {
    border: 0;
    outline: 0;
    background: none;
    width: 100%;
    font-size: 0.9rem;
    color: var(--tf-text);
}
.tsl-toolbar__group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tf-text);
}
.tsl-toolbar__group select {
    padding: 6px 8px;
    border: 1px solid var(--tf-line);
    border-radius: 6px;
    background: var(--tf-paper);
    color: var(--tf-text);
    font-size: 0.85rem;
}
.tsl-toolbar__count {
    font-family: var(--tf-mono);
    font-size: 0.78rem;
    color: var(--tf-muted);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.tsl-toolbar__count button {
    border: 1px solid var(--tf-line);
    border-radius: 20px;
    background: var(--tf-paper);
    color: var(--tf-text);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 12px;
    cursor: pointer;
}
.tsl-toolbar__count button:hover { border-color: var(--tf-cyan); color: var(--tf-cyan); }

/* --- Per-rim sections --- */
.tsl-sechead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 18px;
}
.tsl-sechead__n {
    font-family: var(--tf-mono);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--tf-muted);
    margin-left: 8px;
}
a.tsl-sechead__link,
a.tsl-sechead__link:link,
a.tsl-sechead__link:visited {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tf-cyan);
    text-decoration: none;
    white-space: nowrap;
}
a.tsl-sechead__link:hover { text-decoration: underline; }

.tsl-table { min-width: 640px; }
/* The table scrolls inside .tf-tablewrap, but the visually-hidden 3PMSF label
   (.tsl .sr-only, position: absolute) took the page container as its containing
   block and escaped the scroller, widening the whole page to ~480px on a phone.
   Making the wrapper the containing block keeps it inside. */
.tsl .tf-tablewrap { position: relative; }
.tsl-spec {
    font-family: var(--tf-mono);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}
.tsl-th-c, .tsl-td-c { text-align: center; }
.tsl-db {
    font-family: var(--tf-mono);
    font-size: 0.8rem;
    white-space: nowrap;
}
.tsl-nc {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    border: 1px solid var(--tf-line);
    border-radius: 4px;
    padding: 0 4px;
    margin-left: 3px;
    color: var(--tf-muted);
}
.tsl-snow { color: #0b6aa2; }
.tsl-sizelink { text-align: right; }
.tsl-sizelink a,
.tsl-sizelink a:link,
.tsl-sizelink a:visited {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tf-cyan);
    text-decoration: none;
    white-space: nowrap;
}
.tsl-sizelink a:hover { text-decoration: underline; }

.tsl-grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    border-radius: 6px;
    color: #fff;
    font-family: var(--tf-mono);
    font-size: 0.82rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.tsl-grade--na { color: var(--tf-muted); }

/* --- Filtering --- */
tr.tsl-hide { display: none !important; }
section.tsl-hide { display: none !important; }
.tsz-collapse.tsl-filtered tr.tsz-more { display: table-row; }
.tsz-collapse.tsl-filtered tr.tsz-more.tsl-hide { display: none !important; }
.tsz-collapse.tsl-filtered .tsz-showall { display: none; }

/* --- Legend --- */
.tsl-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 48px;
    align-items: flex-start;
    margin-top: 6px;
}
.tsl-legend__scale {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.tsl-legend__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.tsl-legend__cap {
    font-size: 0.72rem;
    color: var(--tf-muted);
}
.tsl-legend__metrics {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--tf-text);
}


/* =========================================================================
   Test Results sub-page (/Test-Results/) - ttr- dialect

   Same shell as the tyre page; this block only holds what the sub-page adds:
   the six-fact strip, the record timeline, the discipline / rival / lineage
   tables' bars, the analysis columns, the filter toolbar and the test rows.
   ========================================================================= */

.ttr-head { padding-bottom: 26px; }

.ttr-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    margin-top: 20px;
}
@media (min-width: 768px) {
    .ttr-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .ttr-facts { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 18px; }
}

/* Numbers in tables: right-aligned, tabular; the header keeps the table's
   small-caps look and only takes the alignment */
.tf-table td.ttr-num {
    text-align: right;
    font-family: var(--tr-mono, monospace);
    font-size: 0.86rem;
    white-space: nowrap;
}
.tf-table th.ttr-num { text-align: right; }
/* Columns a phone can do without: the tables keep discipline/tyre, the test
   count and the share-of-field bar; the rest returns from 640px */
@media (max-width: 639px) {
    .tf-table .ttr-col--wide { display: none; }
    .tf-table.ttr-disc__table, .tf-table.ttr-rivals__table, .tf-table.ttr-lineage__table { min-width: 0; }
    .ttr-disc__table th, .ttr-disc__table td,
    .ttr-rivals__table th, .ttr-rivals__table td,
    .ttr-lineage__table th, .ttr-lineage__table td { padding-left: 8px; padding-right: 8px; }
    .ttr-disc__table thead th, .ttr-rivals__table thead th, .ttr-lineage__table thead th { white-space: normal; }
    .ttr-bar { width: 48px; }
    .ttr-disc__beat .tf-pct, .ttr-rivals__rec .tf-pct { margin-left: 4px; font-size: 0.82rem; }
}
.ttr-head .tyd-photo { display: none; }
@media (min-width: 880px) { .ttr-head .tyd-photo { display: flex; } }
.ttr-num--good { color: var(--tr-good, #1f8f4e); font-weight: 600; }
.ttr-num--poor { color: var(--tr-poor, #c0392b); font-weight: 600; }
.ttr-dash { color: var(--tr-muted, #5d6a75); }

/* Share-of-field bars: a thin rail with a cyan fill, the % beside it */
.ttr-bar {
    display: inline-block;
    vertical-align: middle;
    width: 90px;
    height: 6px;
    border-radius: 3px;
    background: var(--tr-line, #dde3e9);
    overflow: hidden;
}
.ttr-bar i {
    display: block;
    height: 100%;
    background: var(--tr-cyan, #0db1e7);
    border-radius: 3px;
}
.ttr-disc__beat, .ttr-rivals__rec { white-space: nowrap; }
/* The phone-only one-line record under a rival's name */
.ttr-rivals__mobrec {
    display: none;
    margin-top: 3px;
    font-family: var(--tr-mono, monospace);
    font-size: 0.74rem;
    color: var(--tr-muted, #5d6a75);
}
@media (max-width: 639px) { .ttr-rivals__mobrec { display: block; } }
.ttr-disc__beat .tf-pct, .ttr-rivals__rec .tf-pct {
    font-family: var(--tr-mono, monospace);
    font-size: 0.86rem;
    margin-left: 6px;
}

/* --- Timeline ------------------------------------------------------------ */

.ttr-timeline { margin: 18px 0 0; }
.ttr-timeline__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--tr-paper, #fff);
    border: 1px solid var(--tr-line, #dde3e9);
    border-radius: 8px;
    padding: 12px 6px 4px;
}
.ttr-timeline__svg {
    display: block;
    width: 100%;
    height: auto;
    min-width: 760px;
    font-family: var(--tr-mono, monospace);
}
.ttr-timeline__grid { stroke: var(--tr-line, #dde3e9); stroke-width: 1; }
.ttr-timeline__grid--base { stroke: #b9c3cc; }
.ttr-timeline__ydiv { stroke: var(--tr-line, #dde3e9); stroke-width: 1; stroke-dasharray: 2 3; }
.ttr-timeline__axis, .ttr-timeline__year, .ttr-timeline__avglabel {
    font-size: 12px;
    fill: var(--tr-muted, #5d6a75);
}
.ttr-timeline__year { font-weight: 600; fill: var(--tr-text, #17202a); }
.ttr-timeline__area { fill: rgba(13, 177, 231, 0.09); }
.ttr-timeline__line { fill: none; stroke: var(--tr-cyan, #0db1e7); stroke-width: 2; stroke-linejoin: round; }
.ttr-timeline__avg { stroke: var(--tr-text, #17202a); stroke-width: 1; stroke-dasharray: 5 4; opacity: 0.55; }
.ttr-timeline__avglabel {
    font-size: 11px;
    paint-order: stroke;
    stroke: var(--tr-paper, #fff);
    stroke-width: 4px;
    stroke-linejoin: round;
}
.ttr-timeline__pt circle { stroke: #fff; stroke-width: 1.5; transition: r 0.12s; }
.ttr-timeline__pt:hover circle, .ttr-timeline__pt:focus circle { r: 7; }
.ttr-timeline__cap {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: var(--tr-muted, #5d6a75);
}
.ttr-timeline__legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 8px 0 0;
    padding: 0;
    font-size: 0.78rem;
    color: var(--tr-muted, #5d6a75);
}
.ttr-timeline__legend li { display: inline-flex; align-items: center; gap: 6px; }
.ttr-timeline__legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px var(--tr-line, #dde3e9);
}
.ttr-timeline__legend .ttr-timeline__legend-avg {
    width: 18px;
    height: 0;
    border: 0;
    border-top: 2px dashed var(--tr-text, #17202a);
    border-radius: 0;
    box-shadow: none;
    opacity: 0.6;
}

/* --- Discipline table ---------------------------------------------------- */

.ttr-disc { margin-top: 18px; }
.ttr-disc__table tbody .ttr-disc__group th {
    text-align: left;
    padding: 8px 12px;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    background: var(--tr-mist, #eef1f4);
    color: var(--tr-text, #17202a);
    border-top: 1px solid var(--tr-line, #dde3e9);
}
.ttr-disc__table tbody tr.ttr-disc__group:hover { background: none; }
.ttr-disc__name { font-weight: 600; }
.ttr-tag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 3px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: 1px;
}
.ttr-tag--best { color: var(--tr-good, #1f8f4e); background: rgba(31, 143, 78, 0.12); }
.ttr-tag--worst { color: var(--tr-poor, #c0392b); background: rgba(192, 57, 43, 0.12); }

/* --- Rivals + lineage ---------------------------------------------------- */

.ttr-rivals { margin-top: 18px; }
.ttr-rivals__table .tf-table__tyre a { font-weight: 600; }
.ttr-rivals__table .tf-table__succ { margin-left: 44px; }
.ttr-rivals__table .tf-table__succ a { font-weight: 500; }
.ttr-rivals__table .ttr-rivals__mobrec { margin-left: 44px; }
@media (max-width: 639px) {
    /* The phone gets name + record + compare in one cell, the bar beside it */
    .ttr-rivals__table .tf-table__tyre { width: 100%; }
    .ttr-rivals__table .tf-table__tyre img { display: none; }
    .ttr-rivals__table .tf-table__succ, .ttr-rivals__table .ttr-rivals__mobrec { margin-left: 0; }
    .ttr-rivals__table th.ttr-rivals__rec { white-space: normal; text-align: right; }
    .ttr-rivals__table td.ttr-rivals__rec { text-align: right; }
}

.ttr-lineage { margin-top: 18px; }
.ttr-lineage--after { margin-top: 34px; }
.ttr-subtitle {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--tr-text, #17202a);
}
.ttr-lineage__table { margin-top: 14px; }
.ttr-lineage__table .tf-table__succ { margin-top: 2px; }
.ttr-lineage__table tbody tr.ttr-lineage__self td { background: rgba(13, 177, 231, 0.07); }
.ttr-lineage__name a { font-weight: 600; }

/* --- Analysis ------------------------------------------------------------ */

.ttr-analysis {
    margin-top: 16px;
    max-width: var(--tr-measure);
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--tr-text, #17202a);
}
.ttr-analysis p { margin: 0 0 12px; }
.ttr-analysis p:last-child { margin-bottom: 0; }

.ttr-swgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 20px;
}
@media (min-width: 768px) {
    .ttr-swgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ttr-sw {
    background: var(--tr-paper, #fff);
    border: 1px solid var(--tr-line, #dde3e9);
    border-top: 3px solid var(--tr-good, #1f8f4e);
    border-radius: 8px;
    padding: 14px 16px;
}
.ttr-sw--weak { border-top-color: var(--tr-poor, #c0392b); }
.ttr-sw__title {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tr-text, #17202a);
}
.ttr-sw--strong .ttr-sw__title .fa { color: var(--tr-good, #1f8f4e); }
.ttr-sw--weak .ttr-sw__title .fa { color: var(--tr-poor, #c0392b); }
.ttr-sw__list { list-style: none; margin: 10px 0 0; padding: 0; }
.ttr-sw__list > li { padding: 8px 0; border-top: 1px solid var(--tr-line, #dde3e9); font-size: 0.92rem; }
.ttr-sw__cat { font-weight: 600; }
.ttr-sig {
    display: inline-block;
    font-family: var(--tr-mono, monospace);
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 3px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: 1px;
    color: var(--tr-muted, #5d6a75);
    border: 1px solid var(--tr-line, #dde3e9);
}
.ttr-sw--strong .ttr-sig--strong { color: var(--tr-good, #1f8f4e); border-color: rgba(31, 143, 78, 0.4); }
.ttr-sw--weak .ttr-sig--strong { color: var(--tr-poor, #c0392b); border-color: rgba(192, 57, 43, 0.4); }
.ttr-sw__evidence { margin-top: 4px; font-size: 0.82rem; color: var(--tr-muted, #5d6a75); }
.ttr-sw__evidence summary { cursor: pointer; color: var(--tr-cyan, #0db1e7); font-weight: 600; }
.ttr-sw__evidence ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.5; }
/* Tester verdicts counted from the tagged write-ups: the count beside the aspect, the quotes below */
.ttr-sw__n { display: inline-block; margin-left: 6px; font-size: 0.78rem; color: var(--tr-muted, #5d6a75); }
.ttr-sw__tests q { quotes: "\201C" "\201D"; font-style: italic; }
.ttr-sw__tests a { color: inherit; }

/* Owners vs testers */
.ttr-ovt { margin-top: 22px; }
.ttr-ovt__title { font-size: 1rem; margin: 0 0 8px; }
.ttr-ovt__head,
.ttr-ovt__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: start; }
.ttr-ovt__head { font-family: var(--tr-mono, monospace); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tr-muted, #5d6a75); padding-bottom: 6px; }
.ttr-ovt__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tr-line, #dde3e9); }
.ttr-ovt__row { padding: 10px 0; border-bottom: 1px solid var(--tr-line, #dde3e9); font-size: 0.92rem; }
.ttr-ovt__aspect { font-weight: 600; }
.ttr-ovt__cell .fa { width: 1.1em; }
.ttr-ovt__cell--pos .fa { color: var(--tr-good, #1f8f4e); }
.ttr-ovt__cell--neg .fa { color: var(--tr-poor, #c0392b); }
.ttr-ovt__cell--none { color: var(--tr-muted, #5d6a75); font-style: italic; }
.ttr-ovt__cell small { display: block; color: var(--tr-muted, #5d6a75); font-size: 0.78rem; margin-top: 2px; }
@media (max-width: 640px) {
    .ttr-ovt__head { display: none; }
    .ttr-ovt__row { grid-template-columns: 1fr; gap: 4px; }
}

/* --- Every test: toolbar ------------------------------------------------- */

.ttr-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--tr-paper, #fff);
    border: 1px solid var(--tr-line, #dde3e9);
    border-radius: 8px;
}
.ttr-toolbar__group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.ttr-toolbar__group--sort { margin-left: auto; }
.ttr-chip {
    border: 1px solid var(--tr-line, #dde3e9);
    border-radius: 20px;
    background: var(--tr-paper, #fff);
    color: var(--tr-text, #17202a);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 12px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.ttr-chip:hover { border-color: var(--tr-cyan, #0db1e7); color: var(--tr-cyan, #0db1e7); }
.ttr-chip.is-active {
    background: var(--tr-ink, #0b0e12);
    border-color: var(--tr-ink, #0b0e12);
    color: #fff;
}
.ttr-chip .fa { margin-right: 2px; }
.ttr-toolbar__count, .ttr-toolbar__empty {
    flex: 1 0 100%;
    margin: 0;
    font-family: var(--tr-mono, monospace);
    font-size: 0.78rem;
    color: var(--tr-muted, #5d6a75);
}
.ttr-toolbar__count:empty { display: none; }
.ttr-toolbar__empty { font-family: inherit; color: var(--tr-poor, #c0392b); }

/* --- Every test: rows ---------------------------------------------------- */

.ttr-list {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}
.ttr-year {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 22px 0 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--tr-ink, #0b0e12);
}
.ttr-list .ttr-year:first-child { margin-top: 0; }
.ttr-year__n {
    font-family: var(--tr-mono, monospace);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tr-text, #17202a);
}
.ttr-year__count {
    font-family: var(--tr-mono, monospace);
    font-size: 0.74rem;
    color: var(--tr-muted, #5d6a75);
}
.ttr-test {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 22px;
    padding: 14px 16px;
    margin-top: 10px;
    background: var(--tr-paper, #fff);
    border: 1px solid var(--tr-line, #dde3e9);
    border-radius: 8px;
}
.ttr-test__rank {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}
.ttr-test__pos {
    font-family: var(--tr-mono, monospace);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tr-text, #17202a);
    white-space: nowrap;
}
.ttr-test__rank--p1 .ttr-test__pos { color: #a37b12; }
.ttr-test__rank--p2 .ttr-test__pos { color: #6b7883; }
.ttr-test__rank--p3 .ttr-test__pos { color: #8f6f3e; }
/* A test that ranked nothing: a note, not a result */
.ttr-test__pos.ttr-test__pos--unranked {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tr-muted, #5d6a75);
    white-space: normal;
}
.ttr-bar--rank { width: 80px; }
/* The class a grouped test's placing is out of (ttr_class_chip) */
.ttr-test__rank .ttr-class { margin-left: 0; }
.tyd-tests-table__res .ttr-class { margin-left: 6px; }
.ttr-test__beat {
    font-family: var(--tr-mono, monospace);
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}
.ttr-test__title {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
}
.ttr-test__title a { color: var(--tr-text, #17202a); text-decoration: none; }
.ttr-test__title a:hover { color: var(--tr-cyan, #0db1e7); }
.ttr-test__meta {
    margin: 4px 0 0;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--tr-muted, #5d6a75);
}
.ttr-test__meta .tyd-tchip, .ttr-test__meta .badge { margin-left: 6px; vertical-align: 1px; }
.ttr-test__meta .badge { font-size: 0.66rem; }
.ttr-test__meta .tf-chip { margin-left: 6px; }
.ttr-quote { margin-top: 8px; }
.ttr-quote__text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--tr-text, #17202a);
    max-width: var(--tr-measure);
}
.ttr-quote__text.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ttr-quote__toggle {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tr-cyan, #0db1e7);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.ttr-quote__toggle:hover { text-decoration: underline; }
.ttr-test__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 10px 0 0;
    font-size: 0.78rem;
}
.ttr-pillgroup { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ttr-pillgroup__label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
    margin-right: 2px;
}
.ttr-pillgroup--strong .ttr-pillgroup__label { color: var(--tr-good, #1f8f4e); }
.ttr-pillgroup--weak .ttr-pillgroup__label { color: var(--tr-poor, #c0392b); }
.ttr-pillgroup--winner .ttr-pillgroup__label { color: #a37b12; }
.ttr-pill {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 9px;
    background: var(--tr-mist, #eef1f4);
    color: var(--tr-text, #17202a);
}
.ttr-pillgroup--strong .ttr-pill { background: rgba(31, 143, 78, 0.1); }
.ttr-pillgroup--weak .ttr-pill { background: rgba(192, 57, 43, 0.1); }

@media (min-width: 768px) {
    .ttr-test { grid-template-columns: 150px minmax(0, 1fr); padding: 16px 20px; }
    .ttr-test__rank {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding-right: 18px;
        border-right: 1px solid var(--tr-line, #dde3e9);
    }
    .ttr-test__pos { font-size: 1.2rem; }
    .ttr-bar--rank { width: 100%; }
}

/* --- Third-party awards -------------------------------------------------- */

.ttr-awards {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 768px) {
    .ttr-awards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
.ttr-award {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    background: var(--tr-paper, #fff);
    border: 1px solid var(--tr-line, #dde3e9);
    border-radius: 8px;
}
.ttr-award__tier {
    font-family: var(--tr-mono, monospace);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #a37b12;
}
.ttr-award__name { font-weight: 700; font-size: 0.95rem; }
.ttr-award__meta { font-size: 0.8rem; color: var(--tr-muted, #5d6a75); }

/* --- Closing CTA --------------------------------------------------------- */

a.ttr-cta__brand, a.ttr-cta__brand:link, a.ttr-cta__brand:visited {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
a.ttr-cta__brand:hover { color: var(--tr-cyan, #0db1e7); }