/* =====================================================================
   Гонки Сочи — таблица результатов TraqChallenge
   /table_result/ и /sochiautodrom-results/ (общий код). Подключается из table_result/index.php.
   «Гоночный протокол» на светлом листе: белый лист на светло-сером фоне сайта, тонкая кромка
   финишного флага с красной полосой, чёрные линейки протокола, красный — только акцент.
   Шрифты Jost и Manrope — из /assets/fonts/fonts.css сайта.
   Разметка: index.php (шапка, модалки) и ajax_table_direct.php (легенда, таблица).
   JS ставит инлайн display у #admin-btn/#logout-btn/#add-btn-container, .delete-btn,
   tr.details-row и модалок — правила ниже рассчитаны на это.
   ===================================================================== */
:root {
    --ink: #1b1c1f;
    --graphite: #222427;
    --muted: #54585d;          /* 7.3:1 на белом */
    --soft: #64686d;           /* ≥ 4.8:1 на белом и на розовой подсветке: подписи, ведущие «00:» */
    --faint: #a4a8ad;          /* только декор и рамки */
    --page: #f2f2f2;           /* фон страницы — как светлые секции сайта */
    --sheet: #ffffff;          /* лист протокола */
    --tint: #f6f6f6;           /* наведение, раскрытая строка */
    --tint-2: #f2f2f2;
    --rule: #e6e6e6;           /* волосяная линейка между строками */
    --rule-mid: #c9ccd0;       /* только декоративные линейки и подчёркивания */
    --ctl-line: #8a8e93;       /* рамки полей, таблеток и кнопок: 3.3:1 на белом */
    --arrow-idle: #7d8186;     /* неактивные стрелки сортировки: 3.9:1 на белом */
    --red-line: rgba(208,20,43,.75);   /* красная обводка кнопок: 4:1 на белом */
    --red: #e61830;
    --red-text: #d0142b;
    --red-dark: #c3122a;
    --red-soft: #fdeeef;
    --extra-bg: #fdf3f4;       /* подсветка «доп. круга» — лёгкая, чтобы подряд не было сплошного розового */
    --extra-hover: #fbe9eb;
    --head: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pad: 32px;
    --radius: 16px;
    --checker: repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%);
    /* слоты кнопок строки на компьютере */
    --slot-video: 126px;
    --slot-analysis: 112px;
    --sum-w: 66px;

    --i-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 2.6v10.8L13.2 8z'/%3E%3C/svg%3E");
    --i-pulse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 8.5h3l2-5 3.2 9 2-5.5 1.1 1.5H15'/%3E%3C/svg%3E");
    --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5l7-7M6 4.5h5.5V10'/%3E%3C/svg%3E");
    --i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v8.2M4.6 7l3.4 3.4L11.4 7M2.8 13.6h10.4'/%3E%3C/svg%3E");
    --i-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M1.8 4.2c0-.6.4-1 1-1h3.4l1.6 1.7h5.4c.6 0 1 .4 1 1v6.6c0 .6-.4 1-1 1H2.8c-.6 0-1-.4-1-1z'/%3E%3C/svg%3E");
    --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.2l4 4 4-4'/%3E%3C/svg%3E");
    --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='10' height='7.2' rx='1.6'/%3E%3Cpath d='M5.3 7V5.2a2.7 2.7 0 0 1 5.4 0V7'/%3E%3C/svg%3E");
    --i-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 2.8H3.3v10.4h3.2M10.2 5l3 3-3 3M13 8H6.6'/%3E%3C/svg%3E");
    --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E");
    --i-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M10.6 2.6l2.8 2.8-8 8H2.6v-2.8z'/%3E%3C/svg%3E");
    --i-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 4.3h10.4M6.2 4.3V2.8h3.6v1.5M4.2 4.3l.7 9h6.2l.7-9'/%3E%3C/svg%3E");
    --i-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M1.5 6.5L5 2.5l3.5 4zM1.5 9.5L5 13.5l3.5-4z'/%3E%3C/svg%3E");
    --i-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M1 10L5 4.5 9 10z'/%3E%3C/svg%3E");
    --i-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M1 6L5 11.5 9 6z'/%3E%3C/svg%3E");
    --i-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 0h4v4H0zM8 0h4v4H8zM4 4h4v4H4zM12 4h4v4h-4zM0 8h4v4H0zM8 8h4v4H8zM4 12h4v4H4zM12 12h4v4h-4z'/%3E%3Cpath d='M.5.5h15v15H.5z' fill='none' stroke='black'/%3E%3C/svg%3E");
    --i-car-blank: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 30'%3E%3Cpath fill='%23e6e6e6' d='M4 22.6c0-2.3 1.2-3.7 4-4.3l13.6-2.7c4.3-4.5 10.4-8 19.6-8 9.6 0 15.8 3.1 21.4 7.6l15.3 2c4 .6 6.1 2.5 6.1 5.6v2.6c0 .9-.6 1.4-1.4 1.4H5.4c-.9 0-1.4-.5-1.4-1.4z'/%3E%3Ccircle cx='22' cy='24.6' r='5.2' fill='%23d6d8db'/%3E%3Ccircle cx='70' cy='24.6' r='5.2' fill='%23d6d8db'/%3E%3C/svg%3E");
    --chev-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231b1c1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.2l4 4 4-4'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; padding: 0;
    background: var(--page);
    color: var(--ink);
    font: 500 15px/1.5 var(--body);
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }

/* Общий фокус для всего, что нажимается (включая заголовки сортировки) */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}
.results-table th[data-sort]:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

/* ---------- Лист протокола ---------- */
.main_block { padding: 40px 24px 72px; min-height: 100vh; }
.container {
    max-width: 1392px; margin: 0 auto;
    padding: 0 var(--pad);
    background: var(--sheet);
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px rgba(17,18,20,.05), 0 1px 2px rgba(17,18,20,.04), 0 30px 60px -36px rgba(17,18,20,.26);
    display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px;
    position: relative;
    isolation: isolate;
}
/* кромки листа: тонкая шахматка финишного флага + красная полоса */
.container::before,
.container::after {
    content: "";
    flex: 0 0 calc(100% + var(--pad) * 2);
    margin: 0 calc(var(--pad) * -1);
    height: 10px;
    background: var(--checker) 0 0 / 10px 10px;
}
.container::before { order: -1; height: 13px; border-bottom: 3px solid var(--red); border-radius: var(--radius) var(--radius) 0 0; }
.container::after  { order: 10; height: 13px; margin-top: 10px; border-top: 3px solid var(--red); border-radius: 0 0 var(--radius) var(--radius); }

/* ---------- Шапка ---------- */
h1.page_headline {
    flex: 0 0 100%;
    order: 0;
    margin: 0;
    padding: 46px max(0px, calc(100% - 12.5em)) 26px 0;   /* ширина текста ≈ 12.5em → две строки, кнопки — под заголовком */
    font: italic 800 clamp(30px, 4vw, 56px)/1.02 var(--head);
    letter-spacing: -0.012em;
    color: var(--ink);
}
h1.page_headline::before {          /* красная чёрточка, как у надзаголовков сайта */
    content: "";
    display: block;
    width: 40px; height: 4px;
    margin: 0 0 20px;
    background: var(--red);
}
/* светлый декор справа: косые красные и серые полосы + тающая шахматка финиша.
   Высота не больше листа (без нижней кромки): пока таблица не пришла по ajax, лист короче декора */
h1.page_headline::after {
    content: "";
    position: absolute; z-index: -1;
    top: 13px; right: 0;
    width: min(48%, 660px); height: min(460px, calc(100% - 26px));
    pointer-events: none;
    background:
        linear-gradient(110deg,
            transparent 0 calc(50% - 64px),
            var(--red) calc(50% - 64px) calc(50% - 30px),
            transparent calc(50% - 30px) calc(50% - 18px),
            #d4d6d9 calc(50% - 18px) calc(50% - 13px),
            transparent calc(50% - 13px) calc(50% - 1px),
            rgba(230,24,48,.26) calc(50% - 1px) calc(50% + 11px),
            transparent calc(50% + 11px)),
        linear-gradient(90deg, #fff 0, rgba(255,255,255,0) 72%),
        linear-gradient(0deg, #fff 22%, rgba(255,255,255,0) 62%),
        repeating-conic-gradient(rgba(17,18,20,.055) 0 25%, transparent 0 50%) right 0 top 0 / 24px 24px;
}

/* Кнопки шапки — под заголовком, как кнопки главного экрана сайта */
#admin-btn, #logout-btn, #add-result-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 46px; padding: 0 22px 0 19px; margin: 0 0 38px;
    border: 1.5px solid var(--ink); border-radius: 999px;
    background: #fff; color: var(--ink);
    font: 800 12.5px/1 var(--body); letter-spacing: .08em; text-transform: uppercase;
    cursor: pointer; white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* JS ставит кнопкам инлайн display:block — оставляем им flex, чтобы иконка стояла в строке */
#admin-btn[style*="block"], #logout-btn[style*="block"] { display: inline-flex !important; }
#admin-btn::before, #logout-btn::before, #add-result-btn::before {
    content: ""; width: 15px; height: 15px; flex: none;
    background: currentColor;
    -webkit-mask: var(--i-lock) center / contain no-repeat; mask: var(--i-lock) center / contain no-repeat;
}
#logout-btn::before { -webkit-mask-image: var(--i-logout); mask-image: var(--i-logout); }
#add-result-btn::before { -webkit-mask-image: var(--i-plus); mask-image: var(--i-plus); }
@media (hover: hover) { #admin-btn:hover, #logout-btn:hover { background: var(--ink); color: #fff; } }
#admin-btn, #logout-btn { order: 1; flex: none; }
#logout-btn { display: none; }
#add-btn-container { order: 2; flex: none; }
#add-result-btn { background: var(--red); border-color: var(--red); color: #fff; }
@media (hover: hover) { #add-result-btn:hover { background: var(--red-dark); border-color: var(--red-dark); } }

/* ---------- Содержимое: примечания, таблица ---------- */
#results-container {
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
    background: var(--sheet);           /* закрывает хвост декора шапки… */
    box-shadow: var(--pad) 0 0 0 var(--sheet), calc(var(--pad) * -1) 0 0 0 var(--sheet);   /* …и в полях листа */
    border-top: 1.5px solid var(--ink);
    padding: 22px 0 34px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
}
#results-container > * { grid-column: 1 / -1; min-width: 0; }

/* «Архивы заездов» (только админ): ajax_table_direct.php отдаёт <p class="results-archive"> — таблетка справа */
#results-container > .results-archive {
    margin: 0 0 16px;
    display: flex; justify-content: flex-end;
}
#results-container > .results-archive a {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 0 16px;
    border: 1px solid var(--ctl-line); border-radius: 999px;
    font: 700 13px/1 var(--body); text-decoration: none; color: var(--ink);
    transition: border-color .18s ease, background-color .18s ease;
}
#results-container > .results-archive a::before {
    content: ""; width: 15px; height: 15px; background: currentColor;
    -webkit-mask: var(--i-folder) center / contain no-repeat; mask: var(--i-folder) center / contain no-repeat;
}
@media (hover: hover) { #results-container > .results-archive a:hover { border-color: var(--ink); background: var(--tint); } }

#results-container > .results-legend {
    grid-column: 1;
    display: flex; align-items: flex-start; gap: 14px;
    margin: 0; padding: 2px 0 0;
    font: 600 14px/1.5 var(--body); color: var(--ink);
}
/* «ключ»: миниатюра подсвеченной строки */
.results-legend .legend-dot {
    flex: none;
    width: 34px; height: 22px;
    border-radius: 3px;
    background: var(--extra-bg);
    box-shadow: inset 3px 0 0 var(--red), inset 0 0 0 1px rgba(230,24,48,.22);
}
/* Подсказка о телеметрии (.telemetry-help) на живом сайте пока не выводится — стили оставлены на будущее.
   Абзац приходит с инлайн font-size / line-height / margin — перебиваем прицельно */
#results-container > .telemetry-help {
    grid-column: 2;
    padding: 0 0 0 18px;
    border-left: 1px solid var(--rule);
    color: var(--muted);
    font-weight: 500;
}
#results-container > .telemetry-help, .telemetry-help[style] { margin: 0 !important; font-size: 14px !important; line-height: 1.55 !important; }
.telemetry-help a {
    color: var(--red-text); font-weight: 700;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
@media (hover: hover) { .telemetry-help a:hover { color: var(--red-dark); text-decoration-thickness: 2px; } }

/* ---------- Таблица (компьютер) ---------- */
.results-table {
    width: 100%;
    margin: 26px 0 0;
    border-collapse: separate; border-spacing: 0;
    table-layout: fixed;
    font-family: var(--body);
}
/* Ширины подобраны по данным: самое длинное имя водителя (≈ 202 px) и «Subaru BRZ Rocket Bu» — в одну строку,
   «Общий балл» — балл + Телеметрия + Превью видео + Разбор заезда в один ряд. Водитель — остаток (≈ 230 px на 1440). */
.results-table th:nth-child(1) { width: 104px; }
.results-table th:nth-child(3) { width: 256px; }
.results-table th:nth-child(4) { width: 112px; }
.results-table th:nth-child(5) { width: 126px; }
.results-table th:nth-child(6) { width: 500px; }

.results-table thead th {
    position: sticky; top: 0; z-index: 3;     /* шапка колонок липкая при прокрутке */
    padding: 14px 12px 13px;
    background: var(--sheet);
    border-top: 2px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
    text-align: left; vertical-align: top;
    font: 800 11.5px/1.2 var(--body); letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink);
    cursor: pointer; user-select: none; -webkit-user-select: none;
    white-space: nowrap;
    transition: background-color .18s ease;
}
.results-table thead th:first-child { padding-left: 16px; }
@media (hover: hover) {
    .results-table thead th:hover { background: var(--tint); }
    .results-table thead th:not(.asc):not(.desc):hover .th-label::after { background-color: var(--ink); }
}
.th-label { display: inline-flex; align-items: center; gap: 6px; }
.th-label::after {
    content: ""; width: 9px; height: 14px; flex: none;
    background-color: var(--arrow-idle);
    -webkit-mask: var(--i-sort) center / contain no-repeat; mask: var(--i-sort) center / contain no-repeat;
    transition: background-color .18s ease;
}
.results-table th.asc .th-label::after,
.results-table th.desc .th-label::after { background-color: var(--red); }
.results-table th.asc .th-label::after { -webkit-mask-image: var(--i-up); mask-image: var(--i-up); }
.results-table th.desc .th-label::after { -webkit-mask-image: var(--i-down); mask-image: var(--i-down); }
.results-table th.asc, .results-table th.desc { box-shadow: inset 0 -3px 0 var(--red); }

/* фильтр по автомобилю — под подписью «Автомобиль», во всю ширину колонки: выбранная машина видна целиком */
.results-table th select {
    -webkit-appearance: none; appearance: none;
    display: block;
    width: 100%; min-width: 0; max-width: none;
    height: 32px; margin: 8px 0 -3px; padding: 0 30px 0 12px;
    border: 1px solid var(--ctl-line); border-radius: 999px;
    background: #fff var(--chev-bg) no-repeat right 10px center / 14px 14px;
    font: 700 13px/1 var(--body); letter-spacing: 0; text-transform: none;
    color: var(--ink); text-overflow: ellipsis;
    cursor: pointer;
    transition: border-color .18s ease;
}
@media (hover: hover) { .results-table th select:hover { border-color: var(--ink); } }

.results-table tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top; text-align: left;
    font: 500 14px/1.35 var(--body);
    color: var(--ink);
    background: var(--sheet);
    transition: background-color .15s ease;
    overflow-wrap: anywhere;
}
.results-table tbody td:first-child { padding-left: 16px; }
.results-table tbody tr.clickable { cursor: pointer; }
@media (hover: hover) { .results-table tbody tr.clickable:hover > td { background: var(--tint); } }

/* Дата */
.date-d { display: block; font-weight: 700; font-size: 13.5px; line-height: 16px; letter-spacing: .01em; white-space: nowrap; }
.date-t { display: block; font-weight: 600; font-size: 12.5px; line-height: 14px; color: var(--soft); }

/* Водитель */
.results-table td.driver-name { padding-top: 20px; }
.results-table td.driver-name strong {
    display: block;
    font: 800 14px/18px var(--body); letter-spacing: .02em; text-transform: uppercase;
    overflow-wrap: normal; word-break: normal;
}
/* часть имени не рвётся на дефисе и переходит на новую строку целиком;
   переносится внутри, только если сама шире ячейки (иначе вылезла бы за ячейку) */
.name-part { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* Автомобиль */
.car-cell { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 30px; }
.car-icon-box { width: 72px; height: 30px; display: flex; align-items: center; justify-content: center; }
.car-icon { width: 100%; height: auto; max-height: 30px; object-fit: contain; display: block; filter: drop-shadow(0 2px 1px rgba(17,18,20,.14)); }
.car-name { display: block; font: 600 14px/1.25 var(--body); color: var(--ink); overflow-wrap: normal; text-wrap: balance; }
.car-icon-box:not(:has(img)) {
    background: var(--i-car-blank) center / contain no-repeat;
}

/* Вождение */
.results-table td.skill-td { line-height: 30px; }
.skill-td > strong { font: italic 700 18px/30px var(--head); letter-spacing: .01em; }
.skill-pill {                       /* чистый красный бейдж с двумя знаками */
    display: inline-flex; align-items: center;
    padding: 5px 11px 5px 10px;
    border-radius: 999px;
    background: var(--red); color: #fff;
    font: italic 800 16px/1 var(--head); letter-spacing: .01em;
    white-space: nowrap; vertical-align: middle;
}

/* Время круга: «00:» приглушён, остальное полужирным.
   Без nowrap: в обычном времени нет пробелов — оно в одну строку; нестандартный текст из окна правки переносится */
.results-table td.time-td { font: 600 16.5px/30px var(--head); letter-spacing: .02em; }
.lap-lead { color: var(--soft); font-weight: 500; }
.estimated-lap-time .lap-lead { color: inherit; }

/* Общий балл + действия.
   Балл — в левом верхнем углу ячейки; кнопки — у правого края в постоянных слотах
   и в порядке PHP: Телеметрия заезда → Превью видео / Видео → Разбор заезда. */
.results-table td.sum-td { position: relative; }
.sum-td > strong {
    position: absolute; left: 12px; top: 14px; width: var(--sum-w);
    font: italic 800 24px/30px var(--head); white-space: nowrap; letter-spacing: .005em;
}
.row-actions {
    display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
    gap: 6px;
    min-height: 30px;
}
.results-table .row-actions > :first-child { margin-left: var(--sum-w); }   /* место под балл (перенос, если тесно) */
.row-actions > .telemetry-link { order: 1; }
.row-actions > .video-btn[data-public-video],
.row-actions > .video-unavailable { order: 2; width: var(--slot-video); }
.row-actions > .analysis-link { order: 3; width: var(--slot-analysis); }
/* нет «Разбора заезда» — слот остаётся пустым, чтобы «Превью видео» стояло на своей вертикали */
.row-actions:not(:has(> .analysis-link))::before { content: ""; order: 3; width: var(--slot-analysis); }

.results-table .video-btn,
.results-table .telemetry-link,
.results-table .video-unavailable,
.results-table .details-btn,
.results-table .delete-btn,
.results-table .edit-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 30px; margin: 0; padding: 0 11px 0 9px;
    border: 1px solid var(--ink); border-radius: 999px;
    background: transparent; color: var(--ink);
    font: 700 12px/1 var(--body); letter-spacing: .01em;
    text-decoration: none; white-space: nowrap;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.results-table .video-btn::before,
.results-table .telemetry-link::before,
.results-table .video-unavailable::before,
.results-table .details-btn::before,
.results-table .delete-btn::before,
.results-table .edit-btn::before {
    content: ""; width: 12px; height: 12px; flex: none; background: currentColor;
    -webkit-mask: var(--i-play) center / contain no-repeat; mask: var(--i-play) center / contain no-repeat;
}
/* Превью видео — главная кнопка строки */
.results-table a.video-btn[data-public-video] { background: var(--ink); color: #fff; }
@media (hover: hover) { .results-table a.video-btn[data-public-video]:hover { background: var(--red); border-color: var(--red); } }
/* Телеметрия */
.results-table .telemetry-link { padding: 0 10px 0 9px; }
.results-table .telemetry-link::before { -webkit-mask-image: var(--i-pulse); mask-image: var(--i-pulse); width: 15px; }
@media (hover: hover) { .results-table .telemetry-link:hover { background: var(--ink); color: #fff; } }
/* Видео ещё не загружено: кнопка неактивна (disabled), прозрачность не нужна — контраст держит цвет */
.results-table .video-unavailable {
    border: 1px dashed var(--ctl-line); color: var(--muted); background: transparent;
    cursor: not-allowed;
}
.results-table .video-unavailable[style] { opacity: 1 !important; }   /* на случай старой разметки с инлайн opacity */
.results-table .video-unavailable::before { opacity: .55; }
/* Разбор заезда — красная ссылка со стрелкой */
.results-table .analysis-link {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 30px; margin: 0; padding: 0 2px 0 4px;
    color: var(--red-text);
    font: 800 12px/1 var(--body); letter-spacing: .01em; white-space: nowrap;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
    transition: color .16s ease;
}
.results-table .analysis-link::after {
    content: ""; width: 12px; height: 12px; flex: none; background: currentColor;
    -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat;
}
@media (hover: hover) { .results-table .analysis-link:hover { color: var(--red-dark); text-decoration-thickness: 2px; } }

/* Админ-инструменты: второй ряд под пунктиром, тише публичных кнопок, «Удалить» — последней справа */
.results-table[data-admin="1"] .row-actions::after {
    content: ""; order: 4;
    flex: 0 0 100%; margin: 2px 0 0;
    height: 0; border-top: 1px dashed var(--rule-mid);
}
.results-table .row-actions > a.video-btn[href*="download=1"] { order: 5; }
.results-table .row-actions > a.video-btn[href*="run-files"] { order: 6; }
.results-table .row-actions > .details-btn { order: 7; }
.results-table .row-actions > .delete-btn { order: 8; }
.results-table a.video-btn:not([data-public-video]),
.results-table .details-btn,
.results-table .delete-btn {
    min-height: 26px; padding: 0 6px; gap: 5px;
    border: 0; border-radius: 6px; background: none;
    color: var(--graphite);
    font: 700 11.5px/1 var(--body); letter-spacing: .01em;
    text-decoration: underline; text-decoration-color: var(--rule-mid);
    text-decoration-thickness: 1px; text-underline-offset: 4px;
}
/* JS ставит «Удалить» инлайн display:inline-block — держим её в строке как остальные */
.results-table .delete-btn[style*="inline-block"] { display: inline-flex !important; }
.results-table a.video-btn:not([data-public-video])::before,
.results-table .details-btn::before,
.results-table .delete-btn::before { width: 11px; height: 11px; }
@media (hover: hover) {
    .results-table a.video-btn:not([data-public-video]):hover,
    .results-table .details-btn:hover { color: var(--ink); background: var(--tint-2); text-decoration-color: currentColor; }
}
.results-table a.video-btn[href*="download=1"]::before { -webkit-mask-image: var(--i-download); mask-image: var(--i-download); }
.results-table a.video-btn[href*="run-files"]::before { -webkit-mask-image: var(--i-folder); mask-image: var(--i-folder); }
.results-table .details-btn::before { -webkit-mask-image: var(--i-chevron); mask-image: var(--i-chevron); }
.results-table .delete-btn::before { -webkit-mask-image: var(--i-trash); mask-image: var(--i-trash); }
.results-table .delete-btn { color: var(--red-text); text-decoration-color: rgba(208,20,43,.45); margin-left: 6px; }
/* на розовой подсветке красный текст чуть темнее */
.results-table tr.extra-lap .analysis-link, .results-table tr.extra-lap .delete-btn { color: var(--red-dark); }
@media (hover: hover) { .results-table .delete-btn:hover { color: #fff; background: var(--red); text-decoration-color: transparent; } }
/* на строке доп. круга текст «Удалить» тёмно-красный (правило выше по специфичности сильнее :hover) — при наведении белый, как в остальных строках */
@media (hover: hover) { .results-table tr.extra-lap .delete-btn:hover { color: #fff; } }

/* Подсветка «доп. круга» (вождение ≥ 8.7) */
.results-table tbody tr.extra-lap > td { background: var(--extra-bg); }
.results-table tbody tr.extra-lap > td:first-child { box-shadow: inset 3px 0 0 var(--red); }
@media (hover: hover) { .results-table tbody tr.extra-lap:hover > td { background: var(--extra-hover); } }

/* Время без GPS (только админ): пунктирное подчёркивание и маленькая метка «GPS» */
.results-table td.estimated-time-td {
    background-image: repeating-linear-gradient(135deg, rgba(27,28,31,.05) 0 2px, transparent 2px 7px);
}
.estimated-lap-time {
    text-decoration: underline dotted var(--muted);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    cursor: help;
}
.gps-estimated-mark {
    display: table; margin: 4px 0 0; padding: 2px 5px 1px;
    border: 1px solid var(--ink); border-radius: 3px;
    background: #fff;
    font: 700 11px/1.15 var(--body); font-style: normal; letter-spacing: .08em;
    color: var(--ink);
    cursor: help;
}

/* Раскрытая строка и детали */
.results-table tbody tr.clickable:has(+ tr.details-row[style*="table-row"]) > td {
    background: var(--tint); border-bottom-color: transparent;
}
.results-table tbody tr.extra-lap:has(+ tr.details-row[style*="table-row"]) > td { background: var(--extra-hover); }
.results-table tbody tr.details-row > td {
    padding: 0 12px 16px 16px;
    background: var(--tint);
    border-bottom: 1.5px solid var(--ink);
}
.results-table tbody tr.extra-lap + tr.details-row > td { background: var(--extra-hover); box-shadow: inset 3px 0 0 var(--red); }
.details-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px dashed var(--rule-mid);
}
.details-grid { display: flex; flex-wrap: wrap; gap: 0; }
.details-item {
    display: flex; align-items: baseline; gap: 10px;
    padding: 2px 28px 2px 0; margin-right: 28px;
    border-right: 1px solid var(--rule-mid);
}
.details-item:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.details-item strong {
    font: 800 11.5px/1 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
    white-space: nowrap;
}
.details-item span { font: italic 800 22px/1 var(--head); color: var(--ink); }
.results-table .edit-btn {
    min-height: 38px; padding: 0 18px 0 15px;
    background: var(--ink); color: #fff; font-size: 13px;
}
.results-table .edit-btn::before { -webkit-mask-image: var(--i-pencil); mask-image: var(--i-pencil); }
@media (hover: hover) { .results-table .edit-btn:hover { background: var(--red); border-color: var(--red); } }

/* Вывести больше — с флажком финиша */
.show-more-btn {
    justify-self: center;
    display: inline-flex; align-items: center; gap: 12px;
    min-height: 52px; margin: 32px auto 0; padding: 0 30px 0 24px;
    border: 1.5px solid var(--ink); border-radius: 999px;
    background: #fff; color: var(--ink);
    font: 800 13px/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}
.show-more-btn::before {
    content: ""; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: var(--i-flag) center / contain no-repeat; mask: var(--i-flag) center / contain no-repeat;
}
@media (hover: hover) { .show-more-btn:hover { background: var(--ink); color: #fff; } }

/* ---------- Модальные окна ---------- */
.modal {
    display: none; position: fixed; z-index: 1000; top: 0; left: 0; inset: 0;   /* top/left — для браузеров без inset */
    width: 100%; height: 100%;
    /* светлая матовая подложка — без тёмных плашек */
    background: rgba(242,242,242,.8);
    -webkit-backdrop-filter: blur(6px) saturate(.85); backdrop-filter: blur(6px) saturate(.85);
    justify-content: center; align-items: center;
    padding: 16px;
}
.modal-content {
    position: relative;
    width: 100%; max-width: 540px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 0 32px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px rgba(17,18,20,.1), 0 2px 4px rgba(17,18,20,.05), 0 36px 80px -24px rgba(17,18,20,.34);
    font-size: 14px;
}
#admin-modal .modal-content { max-width: 440px; }
/* ровный верхний край: та же кромка, что у листа (обрезана скруглением окна) */
.modal-content::before {
    content: ""; display: block;
    height: 13px; margin: 0 -32px 26px;
    background: var(--checker) 0 0 / 10px 10px;
    border-bottom: 3px solid var(--red);
}
.modal-header h3 {
    margin: 0 52px 22px 0;
    font: italic 800 26px/1.1 var(--head); letter-spacing: -.005em; color: var(--ink);
}
.modal-close {
    position: absolute; top: 28px; right: 20px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--ctl-line); border-radius: 50%;
    font: 600 18px/1 var(--body); color: var(--ink);
    cursor: pointer; user-select: none;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
@media (hover: hover) { .modal-close:hover { background: var(--ink); border-color: var(--ink); color: #fff; } }
/* если на проде крестику дадут tabindex/role=button — фокус будет виден */
.modal-close:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.modal form {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 12px 16px; align-items: center;
}
#admin-modal form { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.modal label {
    font: 800 11px/1.25 var(--body); letter-spacing: .09em; text-transform: uppercase;
    color: var(--muted);
}
.modal input, .modal select {
    width: 100%; height: 44px; margin: 0; padding: 0 12px;
    border: 1px solid var(--ctl-line); border-radius: 10px;
    background: #fff; color: var(--ink);
    font: 600 15px/1.2 var(--body);
    font-variant-numeric: tabular-nums;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.modal select {
    -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
    background: #fff var(--chev-bg) no-repeat right 12px center / 14px 14px;
}
@media (hover: hover) { .modal input:hover, .modal select:hover { border-color: var(--ink); } }
.modal input:focus, .modal select:focus {
    outline: none; border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(230,24,48,.22);
}
.modal input[readonly] { background: var(--tint); color: var(--ink); font-family: var(--head); font-style: italic; font-weight: 800; font-size: 17px; }
.modal input::placeholder { color: var(--soft); font-weight: 500; }
.password-wrapper { position: relative; }
/* у поля пароля в index.php инлайн padding-right:40px — даём место кнопке Show/Hide */
.password-wrapper input[style] { padding-right: 82px !important; }
#admin-modal .password-wrapper input { height: 48px; }
.password-toggle {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    height: 40px; min-width: 66px; padding: 0 14px;
    border: 0; border-radius: 999px; background: var(--tint-2);
    font: 800 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
    cursor: pointer;
}
@media (hover: hover) { .password-toggle:hover { background: var(--rule); } }
.modal-actions {
    grid-column: 1 / -1;
    position: sticky; bottom: 0; z-index: 2;
    display: flex; gap: 10px;
    margin: 10px 0 0; padding: 16px 0 26px;
    background: #fff;
    border-top: 1px solid var(--rule);
}
.modal button[type="submit"], .modal .btn-cancel {
    flex: 1;
    height: 48px; padding: 0 18px;
    border-radius: 999px;
    font: 800 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.modal button[type="submit"] { background: var(--red); border: 1.5px solid var(--red); color: #fff; }
@media (hover: hover) { .modal button[type="submit"]:hover { background: var(--red-dark); border-color: var(--red-dark); } }
.modal .btn-cancel { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }
@media (hover: hover) { .modal .btn-cancel:hover { background: var(--ink); color: #fff; } }
.error-message {
    display: none;
    margin: 0 0 22px; padding: 10px 12px;
    border-left: 3px solid var(--red); border-radius: 0 8px 8px 0;
    background: var(--red-soft);
    color: var(--red-text); font: 700 13px/1.4 var(--body);
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    -webkit-text-fill-color: #000; transition: background-color 9999s ease-out 0s; caret-color: #000;
}

/* =====================================================================
   Ноутбуки 1240–1366: та же таблица, плотнее
   ===================================================================== */
@media (min-width: 1280px) and (max-width: 1439px) {
    :root { --pad: 22px; --slot-video: 114px; --slot-analysis: 104px; --sum-w: 58px; }
    .main_block { padding: 28px 12px 56px; }
    /* на 1280: водитель ≈ 206 px, автомобиль 226, вождение 104, время 118, балл с кнопками 462 */
    .results-table th:nth-child(1) { width: 96px; }
    .results-table th:nth-child(3) { width: 226px; }
    .results-table th:nth-child(4) { width: 104px; }
    .results-table th:nth-child(5) { width: 118px; }
    .results-table th:nth-child(6) { width: 462px; }
    .results-table thead th, .results-table tbody td { padding-left: 10px; padding-right: 10px; }
    .results-table thead th:first-child, .results-table tbody td:first-child { padding-left: 12px; }
    .results-table thead th { font-size: 11px; letter-spacing: .06em; }
    .th-label { gap: 5px; }
    .date-d { font-size: 13px; }
    .results-table td.driver-name strong { font-size: 13px; letter-spacing: .015em; }
    .car-cell { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
    .car-icon-box { width: 56px; height: 24px; }
    .car-name { font-size: 13px; }
    .results-table td.time-td { font-size: 15.5px; }
    .sum-td > strong { left: 10px; font-size: 22px; }
    .row-actions { column-gap: 6px; }
    .results-table .telemetry-link { padding: 0 9px 0 8px; gap: 5px; font-size: 11.5px; }
    .results-table .telemetry-link::before { width: 14px; }
    .results-table .video-btn[data-public-video], .results-table .video-unavailable, .results-table .analysis-link { font-size: 11.5px; }
    .results-table a.video-btn:not([data-public-video])::before,
    .results-table .details-btn::before,
    .results-table .delete-btn::before { display: none; }
}

/* =====================================================================
   До 1279 px: записи протокола (карточки) на той же разметке table/tr/td
   ===================================================================== */
@media (max-width: 1279px) {
    :root { --pad: 32px; }
    .main_block { padding: 24px 16px 48px; }
    h1.page_headline { padding-top: 36px; padding-bottom: 20px; }
    h1.page_headline::before { margin-bottom: 16px; width: 34px; }
    #admin-btn, #logout-btn, #add-result-btn { height: 44px; margin-bottom: 28px; }

    #results-container { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding-top: 20px; }
    #results-container > .results-legend, #results-container > .telemetry-help { grid-column: 1; }
    #results-container > .telemetry-help { padding: 0 0 0 48px; border-left: 0; color: var(--soft); }
    #results-container > .telemetry-help, .telemetry-help[style] { font-size: 13.5px !important; line-height: 1.5 !important; }

    .results-table, .results-table thead, .results-table tbody { display: block; width: 100%; }
    .results-table { margin-top: 12px; }

    /* Заголовки → панель: сначала фильтр по автомобилю, ниже «таблетки» сортировки */
    .results-table thead tr {
        display: flex; flex-wrap: wrap; gap: 8px;
        padding: 14px 0;
        border-top: 1.5px solid var(--ink);
        border-bottom: 1px solid var(--rule);
    }
    .results-table thead th, .results-table thead th:nth-child(n) {
        position: static;
        display: flex; align-items: center;
        width: auto; padding: 0; border: 0;
        min-height: 40px;
        font-size: 11.5px; letter-spacing: .07em;
        background: none; box-shadow: none;
    }
    .results-table thead th:first-child { padding-left: 0; }
    .results-table thead th:hover, .results-table th.asc, .results-table th.desc { background: none; box-shadow: none; }
    /* одна рамка фокуса — у «таблетки» (та же специфичность, что у общего правила) */
    .results-table th[data-sort]:focus-visible { outline: 0; }
    .results-table th[data-sort]:focus-visible .th-label { outline: 2px solid var(--red); outline-offset: 2px; }
    .results-table thead .th-label {
        height: 40px; padding: 0 11px 0 12px;
        border: 1px solid var(--ctl-line); border-radius: 999px;
        background: #fff;
        transition: border-color .16s ease, background-color .16s ease, color .16s ease;
    }
    @media (hover: hover) { .results-table thead .th-label:hover { border-color: var(--ink); } }
    .results-table th.asc .th-label, .results-table th.desc .th-label {
        background: var(--ink); border-color: var(--ink); color: #fff;
    }
    .results-table th.asc .th-label::after, .results-table th.desc .th-label::after { background-color: #ff6b7c; }
    /* «Автомобиль» — третья таблетка, как в таблице; его фильтр — отдельной строкой во всю ширину под панелью */
    .results-table thead th[data-sort="car_type"] { display: contents; }
    .results-table th[data-sort="car_type"] select {
        order: 1; flex: 1 1 100%;
        width: 100%; min-width: 0; max-width: none; height: 42px; margin: 2px 0 0; font-size: 14px;
    }

    /* Строка → запись протокола.
       Порядок как в таблице: Дата → Водитель → Автомобиль → Вождение · Время круга · Общий балл → действия */
    .results-table tbody tr.clickable {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, 1fr);
        grid-template-areas:
            "date date date"
            "drv  drv  drv"
            "car  car  car"
            "skill time sum"
            "act  act  act";
        padding: 13px 16px 15px;
        border-bottom: 1px solid var(--rule);
        background: var(--sheet);
        transition: background-color .15s ease;
    }
    .results-table tbody tr.clickable > td {
        display: block; padding: 0; border: 0; background: none; box-shadow: none;
    }
    /* два правила, а не одно: браузер без :has() отбросил бы весь список селекторов вместе с правилом для доп. круга */
    .results-table tbody tr.extra-lap > td,
    .results-table tbody tr.extra-lap > td:first-child { background: none; box-shadow: none; }
    .results-table tbody tr.clickable:has(+ tr.details-row[style*="table-row"]) > td { background: none; box-shadow: none; }
    @media (hover: hover) {
        .results-table tbody tr.clickable:hover { background: var(--tint); }
        .results-table tbody tr.clickable:hover > td, .results-table tbody tr.extra-lap:hover > td { background: none; }
    }
    /* полоса цифр: тонкие линейки сверху и снизу */
    .results-table tbody tr.clickable::before {
        content: "";
        grid-row: 4; grid-column: 1 / -1;
        margin-top: 12px;
        border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    }
    /* значок раскрытия: подсказка, что запись открывается по нажатию */
    .results-table tbody tr.clickable::after {
        content: "";
        position: absolute; top: 10px; right: 12px;
        width: 28px; height: 28px; border-radius: 50%;
        background: var(--tint-2) var(--chev-bg) center / 14px no-repeat;
        transition: transform .2s ease, background-color .15s ease;
    }
    .results-table tbody tr.extra-lap::after { background-color: #fff; }
    .results-table tbody tr.clickable:has(+ tr.details-row[style*="table-row"])::after { transform: rotate(180deg); }

    .results-table tbody tr.clickable > td.date-td {
        grid-area: date; padding-right: 44px;
        font-size: 12.5px; line-height: 18px; color: var(--muted);
    }
    .date-d, .date-t { display: inline; font-size: 12.5px; line-height: inherit; }
    .date-d { font-weight: 700; margin-right: 4px; }
    .date-t { color: var(--muted); }
    .results-table tbody tr.clickable > td.driver-name { grid-area: drv; margin-top: 3px; padding-right: 40px; }
    .results-table td.driver-name strong { font-size: 15px; line-height: 20px; }
    .results-table tbody tr.clickable > td.car-td { grid-area: car; margin-top: 6px; }
    .car-cell { grid-template-columns: 66px minmax(0, 1fr); gap: 10px; min-height: 24px; }
    .car-icon-box { width: 66px; height: 24px; }
    .car-name { font-size: 13.5px; }

    /* Вождение · Время круга · Общий балл: подписи — названия колонок */
    .results-table tbody tr.clickable > td.skill-td,
    .results-table tbody tr.clickable > td.time-td {
        margin-top: 12px; padding: 10px 0 10px;
        line-height: 26px; white-space: nowrap;
    }
    .results-table tbody tr.clickable > td.skill-td { grid-area: skill; }
    .results-table tbody tr.clickable > td.time-td { grid-area: time; padding-left: 12px; font: 600 16px/26px var(--head); white-space: normal; }   /* нестандартное время переносится */
    .results-table td.skill-td::before, .results-table td.time-td::before, .results-table td.sum-td::before {
        content: attr(data-label);
        display: block; margin-bottom: 3px;
        font: 800 10px/14px var(--body); letter-spacing: .08em; text-transform: uppercase;
        color: var(--soft); white-space: nowrap; font-style: normal;
    }
    .skill-td > strong { font-size: 18px; line-height: 26px; }
    .skill-pill { font-size: 14.5px; padding: 4px 9px; vertical-align: 1px; }

    /* Общий балл: ячейка «раскрывается» — подпись и число встают в полосу, кнопки — ниже */
    .results-table tbody tr.clickable > td.sum-td { display: contents; }
    .results-table td.sum-td::before {
        grid-area: sum; align-self: start; justify-self: end;
        margin: 22px 0 0;
    }
    .results-table td.sum-td > strong {
        grid-area: sum; align-self: start; justify-self: end;
        position: static; width: auto;
        margin: 39px 0 10px;
        font-size: 28px; line-height: 28px;
    }

    /* Действия: публичные — первым рядом, админские — вторым под пунктиром */
    .results-table td.sum-td .row-actions {
        grid-area: act;
        margin-top: 12px; padding: 0;
        display: flex; flex-wrap: wrap; justify-content: flex-start;
        gap: 8px;
    }
    .results-table .row-actions > :first-child { margin-left: 0; }
    .row-actions:not(:has(> .analysis-link))::before { content: none; }
    .results-table .row-actions > .telemetry-link { flex: 1 1 100%; }
    .results-table .row-actions > .video-btn[data-public-video],
    .results-table .row-actions > .video-unavailable,
    .results-table .row-actions > .analysis-link { flex: 0 0 calc(50% - 4px); width: auto; min-width: 0; }
    .results-table .video-btn, .results-table .telemetry-link, .results-table .video-unavailable,
    .results-table .analysis-link {
        min-height: 42px; padding: 0 14px 0 12px; font-size: 13px;
    }
    /* Разбор заезда — таблетка с красной обводкой: понятно, что это кнопка */
    .results-table .analysis-link {
        justify-content: center; gap: 6px;
        border: 1.5px solid var(--red-line); border-radius: 999px;
        text-decoration: none;
    }
    @media (hover: hover) { .results-table .analysis-link:hover { border-color: var(--red-dark); background: var(--red-soft); } }
    .results-table tr.extra-lap .analysis-link { background: #fff; }

    .results-table[data-admin="1"] .row-actions::after { flex: 0 0 100%; margin: 4px 0 2px; }
    .results-table a.video-btn:not([data-public-video]), .results-table .details-btn, .results-table .delete-btn {
        min-height: 42px; margin: 0; padding: 0 12px; gap: 7px;
        border: 1px solid var(--ctl-line); border-radius: 999px; background: #fff;
        font-size: 12.5px; text-decoration: none;
    }
    .results-table .row-actions > a.video-btn:not([data-public-video]),
    .results-table .row-actions > .details-btn { flex: 1 1 auto; }
    .results-table .row-actions > .delete-btn { flex: 0 0 auto; margin-left: auto; min-width: 104px; border-color: var(--red-line); }
    @media (hover: hover) {
        .results-table a.video-btn:not([data-public-video]):hover,
        .results-table .details-btn:hover { background: var(--tint-2); border-color: var(--ink); }
        .results-table .delete-btn:hover { color: #fff; background: var(--red); border-color: var(--red); }
    }

    .results-table tbody tr.extra-lap { background: var(--extra-bg); box-shadow: inset 3px 0 0 var(--red); }
    .results-table tbody tr.extra-lap::before { border-color: rgba(230,24,48,.14); }
    @media (hover: hover) { .results-table tbody tr.extra-lap:hover { background: var(--extra-hover); } }
    .results-table tbody tr.clickable > td.estimated-time-td { background-image: none; }
    .gps-estimated-mark { display: inline-block; margin: 0 0 0 2px; vertical-align: 3px; }

    /* раскрытая запись */
    .results-table tbody tr.clickable:has(+ tr.details-row[style*="table-row"]) { background: var(--tint); border-bottom-color: transparent; }
    .results-table tbody tr.extra-lap:has(+ tr.details-row[style*="table-row"]) { background: var(--extra-hover); }
    .results-table tr.details-row[style*="table-row"] { display: block !important; }
    .results-table tbody tr.details-row > td { display: block; padding: 0 16px 16px; border-bottom: 1px solid var(--rule); }
    .results-table tbody tr.extra-lap + tr.details-row { box-shadow: inset 3px 0 0 var(--red); }
    .results-table tbody tr.extra-lap + tr.details-row > td { box-shadow: none; }
    .details-inner { display: block; padding-top: 12px; }
    .details-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .details-item {
        flex-direction: column; align-items: flex-start; gap: 6px;
        margin: 0; padding: 0 8px 0 12px;
        border-right: 0; border-left: 1px solid var(--rule-mid);
    }
    .details-item:first-child { padding-left: 0; border-left: 0; }
    .details-item strong { font-size: 10px; letter-spacing: .07em; }
    .details-item span { font-size: 22px; }
    .details-actions { margin-top: 14px; }
    .results-table .edit-btn { width: 100%; min-height: 44px; }

    .show-more-btn { width: 100%; justify-content: center; margin-top: 24px; }
    #results-container > .results-archive { justify-content: flex-start; margin: 0 0 4px; }
    #results-container > .results-archive a { min-height: 40px; }

    .modal form { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .modal form label:not(:first-of-type) { margin-top: 8px; }
}

/* Планшет: полоса «Автомобиль · Вождение · Время круга · Общий балл», кнопки в одну линию */
@media (min-width: 760px) and (max-width: 1279px) {
    .results-table tbody tr.clickable {
        grid-template-columns: minmax(0, 1.75fr) minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, .9fr);
        grid-template-areas:
            "date date date date"
            "drv  drv  drv  drv"
            "car  skill time sum"
            "act  act  act  act";
        padding: 16px 20px 18px;
    }
    .results-table tbody tr.clickable::before { grid-row: 3; }
    .results-table tbody tr.clickable::after { top: 14px; right: 18px; }
    .results-table tbody tr.clickable > td.car-td { margin-top: 12px; padding: 10px 12px 10px 0; align-self: stretch; }
    .results-table td.car-td::before {
        content: attr(data-label);
        display: block; margin-bottom: 3px;
        font: 800 10px/14px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--soft);
    }
    .car-cell { grid-template-columns: 72px minmax(0, 1fr); min-height: 26px; }
    .car-icon-box { width: 72px; height: 26px; }
    .results-table tbody tr.clickable > td.skill-td { padding-left: 12px; }
    .results-table td.sum-td > strong { font-size: 30px; }

    .results-table .row-actions > .telemetry-link { flex: 0 0 auto; }
    .results-table .row-actions > .video-btn[data-public-video],
    .results-table .row-actions > .video-unavailable { flex: 0 0 auto; min-width: 156px; }
    .results-table .row-actions > .analysis-link { flex: 0 0 auto; min-width: 150px; }
    .results-table .row-actions > a.video-btn:not([data-public-video]),
    .results-table .row-actions > .details-btn { flex: 0 0 auto; }
    .results-table tbody tr.details-row > td { padding: 0 20px 18px; }
    .details-actions { display: flex; justify-content: flex-end; }
    .results-table .edit-btn { width: auto; }
}

/* Телефон, админ: ровная сетка кнопок, не зависящая от длины текста.
   «Подробнее» и «Удалить» — всегда парой последним рядом; «Скачать полное видео» и «Файлы заезда» —
   вместе, когда помещаются, иначе (или если кнопка одна) — во всю ширину. */
@media (max-width: 759px) {
    .results-table .row-actions > a.video-btn[href*="download=1"],
    .results-table .row-actions > a.video-btn[href*="run-files"] { flex: 1 1 auto; }
    .results-table .row-actions:not(:has(> a.video-btn[href*="run-files"])) > a.video-btn[href*="download=1"],
    .results-table .row-actions:not(:has(> a.video-btn[href*="download=1"])) > a.video-btn[href*="run-files"] { flex-basis: 100%; }
    .results-table .row-actions > .details-btn,
    .results-table .row-actions > .delete-btn { flex: 1 1 calc(50% - 4px); min-width: 0; margin-left: 0; }
}
@media (max-width: 383px) {
    .results-table .row-actions > a.video-btn[href*="download=1"],
    .results-table .row-actions > a.video-btn[href*="run-files"] { flex-basis: 100%; }
}

@media (max-width: 599px) {
    :root { --pad: 16px; }
    .main_block { padding: 0; }
    .container { border-radius: 0; box-shadow: none; }
    .container::before, .container::after { border-radius: 0; }
    h1.page_headline { padding: 26px 0 16px; font-size: clamp(27px, 8vw, 34px); }
    h1.page_headline::before { margin-bottom: 14px; width: 30px; height: 3px; }
    /* декор на телефоне — только узкие косые полосы у правого края, рядом с кнопками */
    h1.page_headline::after { content: none; }
    #results-container { position: relative; }
    #results-container::before {
        content: ""; position: absolute; right: 0; bottom: 100%;
        width: 84px; height: 62px; pointer-events: none;
        background:
            linear-gradient(110deg,
                transparent 0 calc(50% - 22px),
                var(--red) calc(50% - 22px) calc(50% - 6px),
                transparent calc(50% - 6px) calc(50% + 2px),
                #d4d6d9 calc(50% + 2px) calc(50% + 5px),
                transparent calc(50% + 5px) calc(50% + 12px),
                rgba(230,24,48,.26) calc(50% + 12px) calc(50% + 18px),
                transparent calc(50% + 18px));
    }
    #admin-btn, #logout-btn, #add-result-btn { height: 42px; margin-bottom: 20px; font-size: 12px; padding: 0 18px 0 16px; }
    .container { column-gap: 8px; }

    #results-container { padding: 16px 0 28px; border-top-width: 1px; row-gap: 8px; }
    #results-container > .results-legend { gap: 12px; font-size: 13.5px; line-height: 1.45; }
    .results-legend .legend-dot { width: 28px; height: 18px; margin-top: 1px; }
    #results-container > .telemetry-help { padding-left: 40px; }
    #results-container > .telemetry-help, .telemetry-help[style] { font-size: 13px !important; line-height: 1.7 !important; }
    .telemetry-help a { padding: 5px 0; }   /* зона нажатия выше, текст не сдвигается */
    .results-table { margin-top: 8px; }
    .results-table thead tr { padding: 12px 0; border-top-width: 1px; }
    .results-table thead .th-label { padding: 0 11px 0 12px; font-size: 11px; letter-spacing: .06em; }
}

/* Узкие телефоны: детали — списком «подпись — число», кнопки — ровной сеткой */
@media (max-width: 400px) {
    h1.page_headline { font-size: clamp(24px, 7.4vw, 29px); }
    #results-container > .telemetry-help { padding-left: 0; }
    .results-table thead tr { gap: 6px; }
    .results-table thead .th-label { padding: 0 8px 0 9px; font-size: 10.5px; letter-spacing: .05em; gap: 4px; }
    .results-table tbody tr.clickable { padding: 13px 12px 14px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr) minmax(0, 1fr); }
    .results-table tbody tr.clickable::after { right: 10px; }
    .results-table tbody tr.clickable > td.time-td { padding-left: 8px; font-size: 15px; }
    .results-table td.sum-td > strong { font-size: 26px; }
    .results-table .video-btn, .results-table .telemetry-link, .results-table .video-unavailable,
    .results-table .analysis-link { padding: 0 8px; font-size: 12.5px; gap: 5px; }
    .results-table tbody tr.details-row > td { padding: 0 12px 14px; }
    .details-grid { display: block; }
    .details-item {
        flex-direction: row; align-items: baseline; justify-content: space-between;
        padding: 8px 0; border-left: 0; border-bottom: 1px solid var(--rule);
    }
    .details-item:first-child { padding-left: 0; }
    .details-item:last-child { border-bottom: 0; }
    .details-item strong { font-size: 10.5px; }
    .details-item span { font-size: 20px; }
    .modal-content { padding: 0 20px; }
    .modal-content::before { margin: 0 -20px 22px; }
}

@media (max-width: 360px) {
    #results-container::before { content: none; }    /* на самых узких экранах полосам негде стоять */
}
/* Админ-режим: «Выйти из админ-режима» и «Добавить результат» стоят в один ряд и доходят до правой трети —
   крупные полосы убираем, узкие ставим только туда, где есть свободное место справа от кнопок */
@media (min-width: 500px) and (max-width: 599px) {
    .container:has(> #logout-btn[style*="block"]) #results-container::before { content: none; }
}
@media (min-width: 600px) and (max-width: 899px) {
    .container:has(> #logout-btn[style*="block"]) h1.page_headline::after { content: none; }
}
@media (min-width: 720px) and (max-width: 899px) {
    .container:has(> #logout-btn[style*="block"]) #results-container { position: relative; }
    .container:has(> #logout-btn[style*="block"]) #results-container::before {
        content: ""; position: absolute; right: 0; bottom: 100%;
        width: 96px; height: 72px; pointer-events: none;
        background:
            linear-gradient(110deg,
                transparent 0 calc(50% - 24px),
                var(--red) calc(50% - 24px) calc(50% - 7px),
                transparent calc(50% - 7px) calc(50% + 1px),
                #d4d6d9 calc(50% + 1px) calc(50% + 4px),
                transparent calc(50% + 4px) calc(50% + 11px),
                rgba(230,24,48,.26) calc(50% + 11px) calc(50% + 18px),
                transparent calc(50% + 18px));
    }
}

@media (max-width: 480px) {
    .gps-estimated-mark { display: table; margin: 3px 0 0; }     /* метка «GPS» — под временем, не выходит из ячейки */
    .modal { padding: 0; align-items: flex-end; }
    .modal-content { padding: 0 20px; max-height: calc(100dvh - 24px); border-radius: var(--radius) var(--radius) 0 0; }
    .modal-content::before { margin: 0 -20px 22px; }
    .modal-close { top: 24px; right: 14px; }
    .modal-header h3 { font-size: 23px; margin-bottom: 18px; }
    .modal-actions { padding-bottom: 20px; }
}

/* Автообновление (раз в 5 с) пересоздаёт всё внутри #results-container. Новый элемент под курсором сначала
   рисуется без :hover, а потом получает его — с плавным переходом это выглядит как мигание.
   Поэтому наведение на элементы таблицы включается сразу, а плавным остаётся только уход курсора. */
.results-table thead th:hover,
.results-table thead th:hover .th-label,
.results-table thead th:hover .th-label::after,
.results-table th select:hover,
.results-table tbody tr.clickable:hover,
.results-table tbody tr.clickable:hover > td,
.results-table a:hover,
.results-table button:hover,
#results-container > .results-archive a:hover,
.show-more-btn:hover { transition: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}