/* Total Cost of Ownership widgets
   - test pages: .tco-widget additions to the v2 bar chart (legend, footnote)
   - tyre pages: .tco-compare running-costs section (self-contained rows) */

/* Shared: stacked-bar legend + methodology footnote */
.tco-widget__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    margin: 0.25rem 0 0.5rem;
    font-size: 0.78rem;
    color: #6c757d;
}

.tco-widget__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.tco-widget__legend-unit {
    margin-left: auto;
    font-style: italic;
}

.tco-widget__swatch {
    width: 14px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.tco-widget__swatch--purchase {
    background: var(--chart-hue, #23a455);
}

.tco-widget__swatch--fuel {
    background: color-mix(in srgb, var(--chart-hue, #23a455) 40%, transparent);
}

.tco-widget__note {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #8a939b;
}

/* Warranty-based tests: unmissable "maker's promise, not measured wear" note */
.tco-widget__warranty-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.25rem 0 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #7a5d00;
    background: #fff8e1;
    border: 1px solid #f0dc9a;
    border-radius: 6px;
}

.tco-widget__warranty-note .fa {
    margin-top: 0.15rem;
}

/* Test-page widget: sits directly below the Value/Wear chart card */
.tco-widget {
    margin-top: 0.75rem;
}

/* Tyre-page running-costs comparison */
.tco-compare__lead {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.tco-compare__rows {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    --chart-hue: #23a455;
}

.tco-compare__row {
    display: grid;
    grid-template-columns: minmax(120px, 220px) 1fr 70px;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
}

.tco-compare__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

a.tco-compare__name:hover {
    text-decoration: underline;
}

.tco-compare__row--anchor .tco-compare__name,
.tco-compare__row--anchor .tco-compare__val {
    font-weight: 700;
}

.tco-compare__rail {
    background: #eef1f3;
    border-radius: 4px;
    height: 14px;
    overflow: hidden;
    display: block;
}

.tco-compare__fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--chart-hue, #23a455) 0 var(--tco-purchase, 100%),
        color-mix(in srgb, var(--chart-hue, #23a455) 40%, transparent) var(--tco-purchase, 100%) 100%
    );
}

.tco-compare__val {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575px) {
    .tco-compare__row {
        grid-template-columns: 1fr 60px;
    }
    .tco-compare__rail {
        grid-column: 1 / -1;
        order: 3;
    }
}