/*
 * CarTraceAI semantic icon system, revised 2026-09-01.
 *
 * Exact Tabler Outline SVGs are rendered inline by Icon.php. This final
 * cascade layer owns the shared size, colour and restrained-motion contracts
 * so report, product and generic UI glyphs remain one coherent family.
 */

:root {
    --icon-size-compact: 1rem;
    --icon-size-inline: 1.125rem;
    --icon-size-control: 1.25rem;
    --icon-size-feature: 1.5rem;
    --icon-size-prominent: 1.5rem;
    --icon-size-hero: 1.5rem;
    --icon-container-feature: 2.5rem;
    --icon-color-primary: var(--color-primary, #1262f3);
    --icon-color-neutral: var(--color-ink, #0b2239);
    --icon-color-success: var(--color-positive, #137a4a);
    --icon-color-source-verified: var(--color-positive, #137a4a);
    --icon-color-warning: var(--color-caution, #9a5b08);
    --icon-color-pending: var(--color-caution, #9a5b08);
    --icon-color-danger: var(--color-critical, #b42318);
    --icon-color-information: var(--color-primary, #1262f3);
    --icon-color-unknown: var(--color-muted, #52677d);
    --icon-color-no-data: var(--color-muted, #52677d);
    --icon-color-not-checked: var(--color-muted, #52677d);
    --icon-color-disabled: var(--color-muted, #52677d);
}

svg.ui-icon {
    display: block;
    inline-size: var(--ui-icon-size, var(--icon-size-inline));
    block-size: var(--ui-icon-size, var(--icon-size-inline));
    min-inline-size: var(--ui-icon-size, var(--icon-size-inline));
    max-inline-size: none;
    aspect-ratio: 1;
    overflow: visible;
    color: inherit;
    flex: 0 0 auto;
    pointer-events: none;
    vertical-align: -0.2em;
}

svg.ui-icon[data-icon-role="report-section"] {
    color: var(--icon-color-primary);
}

svg.ui-icon[data-icon-role="status"][data-icon="verified"] {
    color: var(--icon-color-success);
}

svg.ui-icon[data-icon-role="status"][data-icon="source-verified"] {
    color: var(--icon-color-source-verified);
}

svg.ui-icon[data-icon-role="status"][data-icon="warning"] {
    color: var(--icon-color-warning);
}

svg.ui-icon[data-icon-role="status"][data-icon="pending"] {
    color: var(--icon-color-pending);
}

svg.ui-icon[data-icon-role="status"][data-icon="critical"] {
    color: var(--icon-color-danger);
}

svg.ui-icon[data-icon-role="status"][data-icon="unknown"] {
    color: var(--icon-color-unknown);
}

svg.ui-icon[data-icon-role="status"][data-icon="no-data"] {
    color: var(--icon-color-no-data);
}

svg.ui-icon[data-icon-role="status"][data-icon="not-checked"] {
    color: var(--icon-color-not-checked);
}

svg.ui-icon[data-icon="unlicensed"],
svg.ui-icon[data-icon-role="status"][data-icon="lock"] {
    color: var(--icon-color-disabled);
}

svg.ui-icon[data-icon-role="status"][data-icon="information"] {
    color: var(--icon-color-information);
}

.ops-status > .ui-icon {
    --ui-icon-size: var(--icon-size-compact);
}

.pricing-offer__state {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
}

.pricing-offer__state > .ui-icon,
.pricing-offer__list-mark .ui-icon {
    --ui-icon-size: var(--icon-size-compact);
}

.site-footer__status .site-footer__status-icon {
    display: inline-grid;
    width: var(--icon-size-compact);
    height: var(--icon-size-compact);
    flex: 0 0 var(--icon-size-compact);
    margin-block-start: 0.1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    place-items: center;
}

.site-footer__status-glyph {
    --ui-icon-size: var(--icon-size-compact);
}

.ops-expense__status > svg.ui-icon {
    --ui-icon-size: var(--icon-size-compact);
    color: currentColor;
}

.ops-expense__row-link {
    display: inline-grid;
    min-width: 2.75rem;
    min-height: 2.75rem;
    place-items: center;
}

.ops-expense__row-link > .ui-icon {
    --ui-icon-size: var(--icon-size-inline);
}

.checkout-status__state,
.checkout-status__notice--symbol,
.checkout-review__availability {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.checkout-status__notice--symbol {
    align-items: flex-start;
}

.checkout-status__state-icon,
.checkout-status__notice-icon,
.checkout-review__availability-icon {
    --ui-icon-size: var(--icon-size-compact);
}

svg.brand-icon {
    display: block;
    aspect-ratio: 1;
    flex: 0 0 auto;
}

svg.ui-icon:is(.icon--process, .icon--coverage) {
    --ui-icon-size: var(--icon-size-control);
}

svg.ui-icon.sample-report__report-icon {
    --ui-icon-size: var(--icon-size-feature);
}

/* Restore the selected homepage layer's flat 24px proof treatment. A legacy
   selector loaded earlier had enough specificity to put the old border and
   fractional 24.8px box back around these icons. */
.page-home .hero-proof .hero-proof__icon {
    width: var(--icon-size-control);
    height: var(--icon-size-control);
    flex: 0 0 var(--icon-size-control);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #1262f3;
    line-height: 0;
}

.page-home .hero-proof__icon .ui-icon {
    --ui-icon-size: var(--icon-size-control);
}

/* Short translated labels must wrap before they compress a square glyph. */
.page-home .hero-scan__status-icon {
    inline-size: var(--icon-size-control);
    block-size: var(--icon-size-control);
    min-inline-size: var(--icon-size-control);
    flex: 0 0 var(--icon-size-control);
}

.page-home .hero-scan__status-icon .ui-icon {
    --ui-icon-size: var(--icon-size-control);
    inline-size: var(--icon-size-control);
    block-size: var(--icon-size-control);
}

.page-home .price-card__feature-icon {
    inline-size: var(--icon-size-feature);
    block-size: var(--icon-size-feature);
    min-inline-size: var(--icon-size-feature);
    flex: 0 0 var(--icon-size-feature);
}

.page-home .price-card__feature-icon .ui-icon {
    --ui-icon-size: var(--icon-size-inline);
}

:is(
    .hero-proof__icon,
    .process-grid__icon,
    .coverage-grid__icon,
    .price-card__feature-icon,
    .pricing-card__list-mark,
    .report-source-card__icon-wrap,
    .sample-report__report-mark,
    .sample-report__state-mark,
    .sample-report__item-node,
    .coverage__mark
) {
    line-height: 0;
}

/* Disclosure controls use the same SVG vocabulary. */
.language-menu__chevron,
.faq-list__chevron {
    --ui-icon-size: var(--icon-size-inline);
    color: currentColor;
    transition: transform 160ms ease;
}

:is(a, button, summary):hover > .ui-icon,
:is(a, button, summary):hover > :is(span, div) > .ui-icon {
    transition: color 140ms ease;
}

[dir="rtl"] svg.ui-icon:is([data-icon="arrow"], [data-icon="back"]) {
    transform: scaleX(-1);
}

.language-menu[open] .language-menu__chevron,
.page-home .faq-list details[open] .faq-list__chevron {
    transform: rotate(180deg);
}

:is(.ops-expense__disclosure, .clearvin-vehicle-preview__source, .history-preview__source) > summary {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    list-style: none;
}

:is(.ops-expense__disclosure, .clearvin-vehicle-preview__source, .history-preview__source) > summary::-webkit-details-marker {
    display: none;
}

.shared-disclosure__chevron {
    --ui-icon-size: var(--icon-size-inline);
    transition: transform 160ms ease;
}

:is(.ops-expense__disclosure, .clearvin-vehicle-preview__source, .history-preview__source)[open] > summary .shared-disclosure__chevron {
    transform: rotate(180deg);
}

.page-home .faq-list summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding-inline-end: 0;
}

.page-home .faq-list summary:focus-visible {
    outline: 3px solid var(--color-focus, #2f6fed);
    outline-offset: 3px;
}

.button:focus-visible,
.primary-nav a:focus-visible,
.site-footer a:focus-visible,
.search-panel .vin-entry .button--search:focus-visible,
.sample-report__contents a:focus-visible,
.sample-report__summary-card:focus-visible,
.sample-report__source a:focus-visible,
.sample-report__links a:focus-visible,
.page-home .process-grid a:focus-visible,
.report-source-intent:focus-visible,
.report-source-card a:focus-visible,
.history-preview__source > summary:focus-visible,
.ops-expense__disclosure > summary:focus-visible,
.clearvin-vehicle-preview__source > summary:focus-visible {
    outline: 3px solid var(--color-focus, #2f6fed);
    outline-offset: 3px;
    box-shadow: var(--shadow-focus, 0 0 0 4px rgb(47 111 237 / 20%));
}

/* Preserve the compact admin navigation contract. The general SVG rule above
   must not turn intentionally hidden mobile navigation icons back on. */
@media (max-width: 46rem) {
    svg.ui-icon.admin__nav-icon {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .language-menu__chevron,
    .faq-list__chevron,
    .shared-disclosure__chevron,
    :is(a, button, summary) .ui-icon {
        transition: none;
    }
}

@media (forced-colors: active) {
    .language-menu__chevron,
    .faq-list__chevron {
        color: LinkText;
    }

    .site-footer__status .site-footer__status-icon {
        outline: 0;
    }
}