/**
 * «Авто в наличии»: «Проверка состояния» (the inspection section of the detail view, spec §11.3), the dialog of one
 * part and the extra facts of «Характеристики» (the checks as chips, the diagnostic report note).
 *
 * Loaded after stock-catalog.css (elements/stock-catalog.php) and under the same rules:
 *   - px only, Rubik 400/600 (the site's Rubik 500 is the italic file);
 *   - colours only as var(--cz-*, today's dark value); the one theme-neutral literal ends its line with «allowlisted
 *     literal: <why>» and is pinned in tests/frontend/stock-selectors.test.js;
 *   - the section is scoped under .czs; the part dialog lives in <body> (stock-catalog.js moves it there, like the power
 *     modal), so its rules are scoped under .czs-part; its frame (overlay, panel, close button, title) is car-detail.css's
 *     .hp-calculator-modal;
 *   - nothing here is sticky or fixed (the price panel never is, the dialog's position comes from car-detail.css).
 *
 * Tones (data-tone, CZStockCore.partTone / tagTone): ok green, minor yellow, paint orange (painted, dirty), bad red,
 * none grey. Fills and marks read --czs-t; text in a tone reads --czs-tx (the text tokens where the fill colour would
 * be under 4.5:1 on the page: red; the yellow and the orange pass as they are).
 *
 * State hooks the script sets: #czs-insp[data-state] loading | ready | empty | error; .czs-insp__tab[aria-selected];
 * .is-hot on a part of the diagram and its line in the list while the other one is pointed at or focused.
 */

/* ==========================================================================
   Tones
   ========================================================================== */

.czs,
.czs-part {
    --czs-t-ok: var(--cz-ok, #2eb06a);
    --czs-t-minor: var(--cz-caution-text, #f0c66b);
    --czs-t-paint: #f0782c; /* allowlisted literal: the painted tier's orange (no site token), between the yellow and the red in both themes */
    --czs-t-bad: var(--cz-danger, #e5484d);
    --czs-t-none: var(--cz-dot, #6b6b72);
}

.czs [data-tone="ok"],
.czs-part [data-tone="ok"] {
    --czs-t: var(--czs-t-ok);
    --czs-tx: var(--cz-ok-text, #5fd394);
}

.czs [data-tone="minor"],
.czs-part [data-tone="minor"] {
    --czs-t: var(--czs-t-minor);
    --czs-tx: var(--czs-t-minor);
}

.czs [data-tone="paint"],
.czs-part [data-tone="paint"] {
    --czs-t: var(--czs-t-paint);
    --czs-tx: var(--czs-t-paint);
}

.czs [data-tone="bad"],
.czs-part [data-tone="bad"] {
    --czs-t: var(--czs-t-bad);
    --czs-tx: var(--cz-danger-text, #ff7b7f);
}

.czs [data-tone="none"],
.czs-part [data-tone="none"] {
    --czs-t: var(--czs-t-none);
    --czs-tx: var(--cz-text-3, #8b8e96);
}

/* ==========================================================================
   «Характеристики»: the checks and the report note
   ========================================================================== */

.czs .czs-checks {
    margin: 20px 0 0;
}

.czs .czs-report {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    color: var(--cz-text-2, #a3a6ae);
    font-size: 14px;
    line-height: 20px;
}

.czs .czs-report .czc-ico {
    flex: none;
    color: var(--cz-text-3, #8b8e96);
}

/* ==========================================================================
   «Проверка состояния»
   ========================================================================== */

.czs .czs-insp__counts {
    margin: -8px 0 6px;
    color: var(--cz-text-2, #a3a6ae);
    font-size: 14px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

.czs .czs-insp__summary {
    margin: 0 0 14px;
    color: var(--cz-text, #f2f2f0);
    font-size: 15px;
    line-height: 22px;
}

/* ---- Legend ---- */

.czs .czs-insp__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.czs .czs-insp__key {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--cz-text-2, #a3a6ae);
    font-size: 13px;
    line-height: 18px;
}

.czs .czs-insp__key::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--czs-t);
}

.czs .czs-insp__key[data-tone="none"]::before {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--czs-t-none);
}

/* ---- Tabs (the ARIA tabs pattern; the selected one underlined in brand red) ---- */

.czs .czs-insp__tabs {
    display: flex;
    gap: 2px;
    margin: 0 0 20px;
    overflow-x: auto;
    box-shadow: inset 0 -1px 0 var(--cz-line, #37373c);
    scrollbar-width: none;
}

.czs .czs-insp__tabs::-webkit-scrollbar {
    display: none;
}

.czs .czs-insp__tab {
    position: relative;
    flex: none;
    min-height: 44px;
    margin: 0;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--cz-r-sm) var(--cz-r-sm) 0 0;
    background: none;
    color: var(--cz-text-2, #a3a6ae);
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: color 0.12s ease;
}

.czs .czs-insp__tab[aria-selected="true"] {
    color: var(--cz-text, #f2f2f0);
    font-weight: 600;
}

.czs .czs-insp__tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 0;
    left: 10px;
    height: 2px;
    border-radius: 2px;
    background: var(--cz-red, #e51515);
}

/* Focus of the section's and the dialog's controls: a 2px brand-red ring on any focus, removed only where the browser
   knows :focus-visible and the focus is not one (the catalog's pattern): Safari before 15.4 ignores the :not() rule
   and keeps the ring for the keyboard. */
.czs .czs-insp__item:focus,
.czs .czs-insp__tab:focus,
.czs .czs-insp__more:focus,
.czs .czs-insp__retry:focus,
.czs .czs-insp__thumb:focus,
.czs-part .czs-insp__thumb:focus,
.czs-part .hp-calculator-close:focus {
    outline: 2px solid var(--cz-red, #e51515);
    outline-offset: 2px;
}

.czs .czs-insp__tab:focus {
    outline-offset: -2px;
}

.czs .czs-insp__item:focus:not(:focus-visible),
.czs .czs-insp__tab:focus:not(:focus-visible),
.czs .czs-insp__more:focus:not(:focus-visible),
.czs .czs-insp__retry:focus:not(:focus-visible),
.czs .czs-insp__thumb:focus:not(:focus-visible),
.czs-part .czs-insp__thumb:focus:not(:focus-visible),
.czs-part .hp-calculator-close:focus:not(:focus-visible) {
    outline: none;
}

@media (hover: hover) {
    .czs .czs-insp__tab:hover {
        color: var(--cz-text, #f2f2f0);
    }
}

/* ---- Кузов: the diagram beside the list from 1024 px, above it below ---- */

.czs .czs-insp__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.czs .czs-insp__map {
    justify-self: center;
    width: min(100%, 248px);
}

@media (min-width: 1024px) {
    .czs .czs-insp__body {
        grid-template-columns: 232px minmax(0, 1fr);
        gap: 28px;
        align-items: start;
    }

    .czs .czs-insp__map {
        width: 100%;
    }
}

/* ---- The body diagram (stock-car-map.js); user units of its 200 × 430 viewBox ---- */

.czs .czs-map {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.czs .czs-map__body {
    fill: var(--cz-surface, #222225);
    stroke: var(--cz-line-strong, #4a4a51);
    stroke-width: 1;
}

.czs .czs-map__glass {
    fill: var(--cz-raised, #2a2a2e);
}

.czs .czs-map__part {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.czs .czs-map__part[role="button"] {
    cursor: pointer;
}

.czs .czs-map__shape {
    fill: var(--czs-t);
    fill-opacity: 0.26;
    stroke: var(--czs-t);
    stroke-width: 1;
    stroke-linejoin: round;
    transition: fill-opacity 0.12s ease;
}

.czs .czs-map__deco {
    fill: none;
    stroke: var(--czs-t);
    stroke-opacity: 0.6;
    stroke-width: 0.8;
}

.czs .czs-map__part.is-hot .czs-map__shape {
    fill-opacity: 0.5;
    stroke-width: 1.6;
}

@media (hover: hover) {
    .czs .czs-map__part[tabindex]:hover .czs-map__shape {
        fill-opacity: 0.5;
        stroke-width: 1.6;
    }
}

/* A part takes the focus only when its dialog gives it back (tabindex -1, out of the Tab order). The ring shows on any
   focus; a browser with :focus-visible drops it for a pointer's, one without (Safari before 15.4) ignores the :not()
   rule and keeps it. */
.czs .czs-map__part:focus .czs-map__shape {
    fill-opacity: 0.5;
    stroke: var(--cz-text, #f2f2f0);
    stroke-width: 2.2;
}

.czs .czs-map__part:focus:not(:focus-visible) .czs-map__shape {
    fill-opacity: 0.26;
    stroke: var(--czs-t);
    stroke-width: 1;
}

.czs .czs-map__label {
    fill: var(--cz-text, #f2f2f0);
    font-family: var(--cz-font);
    font-size: 9px;
    font-weight: 600;
    pointer-events: none;
}

.czs .czs-map__label--axis {
    fill: var(--cz-text-3, #8b8e96);
    font-size: 7.5px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Not inspected yet: the drawing, quiet */
.czs .czs-map--static .czs-map__shape {
    fill-opacity: 0.12;
    stroke-opacity: 0.75;
}

.czs .czs-map--static .czs-map__label--part {
    fill: var(--cz-text-3, #8b8e96);
}

/* ---- The lists of the tabs ---- */

.czs .czs-insp__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 216px), 1fr));
    align-content: start;
    gap: 0 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.czs .czs-insp__row {
    min-width: 0;
    border-bottom: 1px solid var(--cz-line, #37373c);
}

/* The rows past the script's INSP_VISIBLE carry .is-extra (the one place the threshold lives) */
.czs .czs-insp__list.is-collapsed .czs-insp__row.is-extra {
    display: none;
}

.czs .czs-insp__col {
    min-width: 0;
}

.czs .czs-insp__more {
    margin-top: 12px;
}

.czs .czs-insp__item {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--cz-text, #f2f2f0);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

.czs .czs-insp__mark {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--czs-t);
    color: var(--cz-page, #1a1a1a);
}

.czs .czs-insp__mark[data-tone="none"] {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--czs-t-none);
    color: var(--cz-text-3, #8b8e96);
}

.czs .czs-insp__text {
    min-width: 0;
}

.czs .czs-insp__name {
    display: block;
    overflow-wrap: anywhere;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.12s ease;
}

.czs .czs-insp__item.is-hot .czs-insp__name {
    text-decoration-color: var(--cz-red, #e51515);
}

@media (hover: hover) {
    .czs .czs-insp__item:hover .czs-insp__name {
        text-decoration-color: var(--cz-red, #e51515);
    }
}

.czs .czs-insp__note {
    display: block;
    margin-top: 2px;
    color: var(--czs-tx);
    font-size: 13px;
    line-height: 18px;
}

.czs .czs-insp__count {
    color: var(--cz-text-3, #8b8e96);
    font-size: 13px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.czs .czs-insp__nothing {
    color: var(--cz-text-2, #a3a6ae);
    font-size: 14px;
    line-height: 20px;
}

/* ---- Пробег ---- */

.czs .czs-insp__mileage-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 8px;
    color: var(--cz-text-2, #a3a6ae);
    font-size: 15px;
    line-height: 22px;
}

.czs .czs-insp__mileage-odo,
.czs .czs-insp__mileage-comment {
    margin: 0 0 16px;
    color: var(--cz-text-2, #a3a6ae);
    font-size: 14px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

/* ---- Chips (a part's tags, the mileage verdict) ---- */

.czs .czs-ichip,
.czs-part .czs-ichip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--cz-chip-fill, rgba(255, 255, 255, 0.07));
    color: var(--cz-text, #f2f2f0);
    font-size: 13px;
    line-height: 20px;
}

.czs .czs-ichip::before,
.czs-part .czs-ichip::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--czs-t, var(--czs-t-none));
}

/* ---- Photo thumbnails (the mileage tab, the part dialog) ---- */

.czs .czs-insp__photos,
.czs-part .czs-insp__photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.czs .czs-insp__photo,
.czs-part .czs-insp__photo {
    min-width: 0;
}

.czs .czs-insp__thumb,
.czs-part .czs-insp__thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--cz-r-sm);
    background: var(--cz-photo-bg, #121214);
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
}

@supports not (aspect-ratio: 1 / 1) {
    .czs .czs-insp__thumb,
    .czs-part .czs-insp__thumb {
        height: 0;
        padding-top: 75%;
    }
}

.czs .czs-insp__thumb img,
.czs-part .czs-insp__thumb img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.12s ease;
}

@media (hover: hover) {
    .czs .czs-insp__thumb:hover img,
    .czs-part .czs-insp__thumb:hover img {
        opacity: 0.85;
    }
}

/* A thumbnail that failed twice (stock-catalog.js watchPhoto): the same tile, a neutral note, nothing to open */
.czs .czs-insp__nophoto,
.czs-part .czs-insp__nophoto {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px dashed var(--cz-line, #37373c);
    border-radius: var(--cz-r-sm);
    background: var(--cz-photo-bg, #121214);
    color: var(--cz-text-3, #8b8e96);
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

@supports not (aspect-ratio: 1 / 1) {
    .czs .czs-insp__nophoto,
    .czs-part .czs-insp__nophoto {
        height: 0;
        padding-top: 75%;
    }
}

.czs .czs-insp__nophoto > span,
.czs-part .czs-insp__nophoto > span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

/* The fullscreen viewer (in <body>, car-detail.css's frame) when an inspection photo failed twice: the text in its place */
.czs-viewer .czs-viewer__broken {
    margin: 0;
    padding: 0 24px;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}

.czs .czs-insp__group,
.czs-part .czs-insp__group {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 16px 0 8px;
    color: var(--cz-text-2, #a3a6ae);
    font-size: 13px;
    line-height: 18px;
}

.czs-part .czs-insp__gallery > .czs-insp__group:first-child {
    margin-top: 0;
}

.czs .czs-insp__group::before,
.czs-part .czs-insp__group::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--czs-t, var(--czs-t-none));
}

/* ---- Loading, not inspected, error ---- */

.czs .czs-insp__skel--line {
    width: min(420px, 80%);
    height: 18px;
    margin: 0 0 18px;
}

.czs .czs-insp__skel--tabs {
    width: min(320px, 100%);
    height: 36px;
    margin: 0 0 20px;
}

.czs .czs-insp__skel-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.czs .czs-insp__skel--map {
    justify-self: center;
    width: min(100%, 248px);
    height: 520px;
}

.czs .czs-insp__skel-list {
    display: grid;
    align-content: start;
    gap: 12px;
}

.czs .czs-insp__skel--row {
    height: 36px;
}

@media (min-width: 1024px) {
    .czs .czs-insp__skel-body {
        grid-template-columns: 232px minmax(0, 1fr);
        gap: 28px;
    }

    .czs .czs-insp__skel--map {
        width: 100%;
        height: 500px;
    }
}

.czs .czs-insp__empty {
    display: flex;
    align-items: center;
    gap: 20px;
}

.czs .czs-insp__empty-map {
    flex: none;
    width: 92px;
}

.czs .czs-insp__empty-title {
    color: var(--cz-text, #f2f2f0);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.czs .czs-insp__empty-note {
    margin: 4px 0 0;
    color: var(--cz-text-2, #a3a6ae);
    font-size: 14px;
    line-height: 20px;
}

.czs .czs-insp__error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.czs .czs-insp__error-text {
    color: var(--cz-text-2, #a3a6ae);
    font-size: 15px;
    line-height: 22px;
}

.czs .czs-insp__retry {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 14px;
}

/* ==========================================================================
   The part dialog (in <body>; its frame is car-detail.css's .hp-calculator-modal)
   ========================================================================== */

.czs-part .czs-part__content {
    max-width: 560px;
}

.czs-part .czs-part__title {
    overflow-wrap: anywhere;
}

.czs-part .czs-part__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 16px;
    padding: 0;
    list-style: none;
}

.czs-part .czs-part__comment {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-left: 2px solid var(--cz-line-strong, #4a4a51);
    border-radius: 0 var(--cz-r-sm) var(--cz-r-sm) 0;
    background: var(--cz-raised, #2a2a2e);
    color: var(--cz-text, #f2f2f0);
    font-size: 15px;
    line-height: 22px;
    overflow-wrap: anywhere;
}

.czs-part .czs-part__empty,
.czs-part .czs-part__videos {
    margin: 12px 0 0;
    color: var(--cz-text-2, #a3a6ae);
    font-size: 14px;
    line-height: 20px;
}

.czs-part .czs-part__empty {
    margin-top: 0;
}

/* ==========================================================================
   User preferences
   ========================================================================== */

@media (forced-colors: active) {
    .czs .czs-map__shape,
    .czs .czs-map__body {
        stroke: CanvasText;
    }

    .czs .czs-map__part:focus .czs-map__shape {
        stroke: Highlight;
    }

    .czs .czs-insp__mark,
    .czs .czs-insp__key::before,
    .czs .czs-ichip::before,
    .czs-part .czs-ichip::before {
        forced-color-adjust: none;
    }

    .czs .czs-insp__tab[aria-selected="true"]::after {
        background: Highlight;
    }
}

@media (prefers-reduced-motion: reduce) {
    .czs-part *,
    .czs-part *::before,
    .czs-part *::after {
        transition-duration: 0.001ms !important;
    }
}