/* Стили, часть 12 из 12: вкладка «А/Б тесты» — список, мастер, страница теста
   (по образцу Sellmetra, владелец 30.09.2026). Подключаются в base.html по
   порядку. Файл держать меньше 15 КБ: Cloudflare отдавал крупные обрезанными. */

.ab-zagolovok { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
.ab-zagolovok h1 { margin-bottom: 0; }
.ab-beydzh { padding: var(--space-2xs) var(--space-sm); border-radius: var(--r-pill);
    background: var(--accent-lime); color: var(--text-primary); font-weight: 600; font-size: var(--font-size-small); }
.ab-spravka-knopka { width: var(--ab-knopka); height: var(--ab-knopka); padding: 0; border-radius: var(--r-pill);
    background: var(--bg-surface); color: var(--text-secondary); border: var(--border-width) solid var(--border-strong); }
.ab-parametry { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); color: var(--text-secondary); }

.ab-kartochki { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--ab-kartochka), 1fr));
    gap: var(--space-sm); margin: var(--space-md) 0; }
.ab-kartochka { padding: var(--space-sm) var(--space-md); border-radius: var(--r-sm); background: var(--bg-canvas); }
.ab-kartochka-podpis { font-size: var(--font-size-table-head); color: var(--text-muted); }

.ab-obertka-tablicy { overflow-x: auto; }
.ab-tablica { width: auto; font-variant-numeric: tabular-nums; }
.ab-tablica th, .ab-tablica td { padding: var(--space-2xs) var(--space-sm); vertical-align: middle; }
.ab-tablica .num { text-align: right; white-space: nowrap; }
.ab-tablica tr.ab-luchshiy td { background: var(--ab-luchshiy-fon); }
.ab-tablica tr.ab-dolgiy td { background: var(--state-warn-bg); }
.ab-variant-foto { width: var(--ab-variant); height: auto; border-radius: var(--r-kletka); display: block; }
.ab-mini-ryad img, .ab-mini { width: var(--ab-mini); height: auto; border-radius: var(--r-kletka); margin-right: var(--space-2xs); vertical-align: middle; }
.ab-tochka { display: inline-block; width: var(--space-xs); height: var(--space-xs); border-radius: var(--r-pill);
    margin-right: var(--space-2xs); background: var(--ab-v-drugoy); }
.ab-t1 { background: var(--ab-v1); } .ab-t2 { background: var(--ab-v2); } .ab-t3 { background: var(--ab-v3); }
.ab-t4 { background: var(--ab-v4); } .ab-t5 { background: var(--ab-v5); } .ab-t6 { background: var(--ab-v6); }

.ab-shagi { display: flex; gap: var(--space-md); }
.ab-shag-nomer { color: var(--text-muted); font-weight: 600; }
.ab-shag-nomer.active { color: var(--text-primary); border-bottom: var(--ab-podcherk) solid var(--accent-violet); }
.ab-shag, .ab-raspisanie { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.ab-stroka { display: block; margin: var(--space-2xs) 0; }
.ab-foto-setka { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ab-foto), 1fr)); gap: var(--space-sm); }
.ab-foto { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-2xs);
    background: var(--bg-surface); color: var(--text-primary); border: var(--border-width) solid var(--border);
    border-radius: var(--r-sm); font-size: var(--font-size-small); font-weight: 500; }
.ab-foto.ab-vybrano { border-color: var(--accent-violet); box-shadow: 0 0 0 var(--ab-podcherk) var(--accent-violet); }
.ab-foto img { width: 100%; border-radius: var(--r-kletka); background: var(--bg-canvas); cursor: pointer; }
.ab-vybrannye { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-sm) 0; }
.ab-vybrannyy { position: relative; width: var(--ab-foto); font-size: var(--font-size-small); }
.ab-vybrannyy img { width: 100%; border-radius: var(--r-kletka); display: block; }
.ab-ubrat { position: absolute; top: var(--space-2xs); right: var(--space-2xs); width: var(--ab-knopka);
    height: var(--ab-knopka); padding: 0; border-radius: var(--r-pill); }
.ab-zona { padding: var(--space-md); border: var(--ab-podcherk) dashed var(--border-strong); border-radius: var(--r-sm); text-align: center; }
.ab-zona.ab-zona-nad { border-color: var(--accent-violet); background: var(--bg-canvas); }

.ab-zaglushka { padding: var(--space-xs) var(--space-sm); border-radius: var(--r-sm); background: var(--state-warn-bg); color: var(--state-warn-text); }
.ab-grafik-upr { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-bottom: var(--space-xs); }
.ab-grafik { width: 100%; max-width: var(--ab-grafik-shirina); }
.ab-svg { width: 100%; height: auto; }
.ab-setka { stroke: var(--line); stroke-width: 1; }
.ab-os { font-size: var(--font-size-table-head); fill: var(--text-muted); }
.ab-liniya { fill: none; stroke-width: 2; }
.ab-legenda { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--font-size-small); }

.ab-spravka { max-width: var(--ab-spravka); border: none; border-radius: var(--r-card); padding: var(--pad-card); box-shadow: var(--shadow-pop); }
.ab-spravka::backdrop { background: var(--ab-zatemnenie); }
.ab-spravka h3 { margin-bottom: var(--space-2xs); }

.ab-foto { position: relative; }
.ab-foto label { display: flex; align-items: center; gap: var(--space-2xs); }
.ab-razmery { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.ab-razmer { padding: var(--space-2xs) var(--space-sm); border-radius: var(--r-pill); background: var(--bg-canvas); font-size: var(--font-size-small); }
.ab-razmer-net { background: var(--state-bad-bg); color: var(--state-bad-text); }
.ab-grafiki { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; }
.ab-grafiki .ab-grafik { flex: 2 1 var(--ab-foto); }
.ab-stolbcy-blok { flex: 1 1 var(--ab-foto); }
.ab-stolbcy { display: flex; align-items: flex-end; gap: var(--space-2xs); height: var(--ab-grafik); overflow-x: auto; }
.ab-stolbcy .ab-stolbec { flex: 0 0 var(--ab-stolbec); min-height: var(--space-2xs); border-radius: var(--r-kletka) var(--r-kletka) 0 0; }

/* Хронология теста: вертикальная линия с точками (06.10.2026). Состояние
   видно не только цветом: сделано — закрашенный кружок с галочкой,
   сейчас — крупное кольцо и слово «сейчас», впереди — пунктирный кружок
   и «примерно», проблема — ромб с «!». На телефоне время — под текстом. */
.ab-hron { margin: var(--space-md) 0; }
.ab-hron ol { list-style: none; margin: 0; padding: 0; }
.ab-hron-tochka { position: relative; display: grid; grid-template-columns: var(--ab-hron-vremya) 1fr;
    gap: var(--space-2xs) var(--space-sm); padding: 0 0 var(--space-sm) calc(var(--ab-hron-tochka-seychas) + var(--space-sm)); }
.ab-hron-tochka::before { content: ""; position: absolute; left: calc((var(--ab-hron-tochka-seychas) - var(--ab-hron-liniya)) / 2);
    top: 0; bottom: 0; border-left: var(--ab-hron-liniya) solid var(--line); }
.ab-hron-tochka:last-child::before { bottom: auto; height: var(--ab-hron-tochka); }
.ab-hron-znak { position: absolute; left: calc((var(--ab-hron-tochka-seychas) - var(--ab-hron-tochka)) / 2); top: 0.15em;
    width: var(--ab-hron-tochka); height: var(--ab-hron-tochka); border-radius: var(--r-pill);
    display: flex; align-items: center; justify-content: center; font-size: var(--font-size-table-head); line-height: 1; }
.ab-hron-vremya { color: var(--text-muted); font-size: var(--font-size-small); font-variant-numeric: tabular-nums; }
.ab-hron-tekst { min-width: 0; }
.ab-hron-podrobno { display: block; color: var(--text-secondary); font-size: var(--font-size-small); overflow-wrap: anywhere; }
.ab-hron-metka { padding: 0 var(--space-2xs); border-radius: var(--r-pill); background: var(--accent-lime);
    color: var(--text-primary); font-size: var(--font-size-table-head); font-weight: 600; }

.ab-hron-sdelano .ab-hron-znak { background: var(--text-primary); color: var(--text-on-inverse); }
.ab-hron-seychas .ab-hron-znak { left: 0; top: 0; width: var(--ab-hron-tochka-seychas); height: var(--ab-hron-tochka-seychas);
    background: var(--bg-surface); border: calc(var(--ab-hron-liniya) * 2) solid var(--accent-violet); }
.ab-hron-vperedi .ab-hron-znak { background: var(--bg-surface); border: var(--ab-hron-liniya) dashed var(--border-strong); }
.ab-hron-vperedi .ab-hron-tekst, .ab-hron-vperedi .ab-hron-vremya { color: var(--text-muted); }
.ab-hron-vperedi::before { border-left-style: dashed; }
.ab-hron-problema .ab-hron-znak { border-radius: var(--ab-hron-romb); transform: rotate(45deg);
    background: var(--state-bad-bg); color: var(--state-bad-text); border: var(--ab-hron-liniya) solid var(--state-bad-text); }
.ab-hron-problema .ab-hron-znak span { transform: rotate(-45deg); font-weight: 700; }
.ab-hron-problema .ab-hron-tekst strong { color: var(--state-bad-text); }
.ab-hron-set .ab-hron-znak, .ab-hron-set-byla .ab-hron-znak,
.ab-hron-stoyat .ab-hron-znak, .ab-hron-pereryv .ab-hron-znak { background: var(--state-warn-bg); color: var(--state-warn-text);
    border: var(--ab-hron-liniya) dashed var(--state-warn-text); }
.ab-hron-set .ab-hron-znak, .ab-hron-stoyat .ab-hron-znak { left: 0; top: 0; width: var(--ab-hron-tochka-seychas); height: var(--ab-hron-tochka-seychas); }
.ab-hron-set .ab-hron-tekst strong, .ab-hron-stoyat .ab-hron-tekst strong { color: var(--state-warn-text); }
.ab-hron-set-byla .ab-hron-tekst strong, .ab-hron-pereryv .ab-hron-tekst strong { font-weight: 400; color: var(--text-secondary); }
.ab-hron-svernuto summary { cursor: pointer; color: var(--text-secondary); }
.ab-hron-dlya-chteca { position: absolute; width: var(--border-width); height: var(--border-width); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 600px) {
    .ab-hron-tochka { grid-template-columns: 1fr; }
    .ab-hron-vremya { order: 2; }
}