/* «About this test» под тестами (раздел строит gen/tests/build-about.py).
 * Отдельный файл, чтобы не менять версию tests.css на 19 страницах. Только токены.
 * v4 (01.10.2026): «оживить пергамент». Цвет берётся из восьми семейств tokens.css
 * (sage, mauve, mint, peach, sand, mist, rose: основа, mid, dark): цветные плитки цифр,
 * круглые значки у разделов, голубой градиент сверху карточки, основной текст не серый,
 * а обычный (--text). В тёмной теме те же семейства смешиваются с тёмной подложкой. */
.f-sage{--fb:var(--sage);--fm:var(--sage-mid);--fd:var(--sage-dark)}
.f-mauve{--fb:var(--mauve);--fm:var(--mauve-mid);--fd:var(--mauve-dark)}
.f-peach{--fb:var(--peach);--fm:var(--peach-mid);--fd:var(--peach-dark)}
/* --mint переопределён в другом месте как зелёный (#2FA56A), поэтому основа бирюзы считается от mid */
.f-mint{--fb:color-mix(in srgb,var(--mint-mid) 22%,var(--surface));--fm:var(--mint-mid);--fd:var(--mint-dark)}
.f-sand{--fb:var(--sand);--fm:var(--sand-mid);--fd:var(--sand-dark)}
.f-mist{--fb:var(--mist);--fm:var(--mist-mid);--fd:var(--mist-dark)}
.f-rose{--fb:var(--rose);--fm:var(--rose-mid);--fd:var(--rose-dark)}

.test-about{margin:48px 0 8px;padding:32px;border-radius:var(--radius-inner);
  background:linear-gradient(180deg,color-mix(in srgb,var(--sage-mid) 11%,var(--surface)) 0,var(--surface) 300px);
  border:1px solid color-mix(in srgb,var(--sage-mid) 22%,var(--border));
  box-shadow:0 14px 34px color-mix(in srgb,var(--sage-mid) 11%,transparent)}
.test-about h2{font-family:var(--display);font-size:30px;font-weight:300;line-height:1.2;color:var(--head);margin:0 0 6px}
.test-about p{color:var(--text,var(--ink));line-height:1.7;margin:0 0 12px;font-size:16px}
.test-about a{color:var(--accent)}
.ta-head{display:flex;gap:16px;align-items:flex-start}
.ta-head>div{min-width:0}
.ta-measures{font-size:17.5px!important;color:var(--muted)!important;margin:0!important}

/* Круглые значки: цветная подложка семейства и штриховая иконка */
.ta-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--fb);color:var(--fd)}
.ta-ico.lg{width:48px;height:48px;background:var(--sage-dark);color:#fff}
.ta-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ta-ico.lg svg{width:24px;height:24px}

/* Крупные цифры: у каждой плитки своё семейство цвета */
.ta-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:24px 0 8px}
.ta-stats>div{padding:16px 18px;border-radius:16px;background:var(--fb);color:var(--fd)}
.ta-stats>div:nth-child(1){--fb:var(--sage);--fm:var(--sage-mid);--fd:var(--sage-dark)}
.ta-stats>div:nth-child(2){--fb:var(--mauve);--fm:var(--mauve-mid);--fd:var(--mauve-dark)}
.ta-stats>div:nth-child(3){--fb:var(--peach);--fm:var(--peach-mid);--fd:var(--peach-dark)}
.ta-stats>div:nth-child(4){--fb:color-mix(in srgb,var(--mint-mid) 22%,var(--surface));--fm:var(--mint-mid);--fd:var(--mint-dark)}
.ta-stats b{display:block;font-family:var(--display);font-size:34px;font-weight:300;line-height:1.05;letter-spacing:-.015em;color:var(--fd)}
.ta-stats>div{min-width:0}
.ta-stats b{white-space:nowrap}
.ta-stats .long b{font-size:27px}
.ta-stats span{display:block;margin-top:6px;font-size:13.5px;font-weight:500;line-height:1.3;color:var(--fd)}

/* Кто, на ком, как */
.ta-facts{margin:10px 0 4px}
.ta-facts>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px solid color-mix(in srgb,var(--sage-mid) 14%,var(--border))}
.ta-facts dt{padding-top:2px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--sage-dark)}
.ta-facts dd{margin:0;font-size:15.5px;line-height:1.55;color:var(--head)}

/* Раскрывающиеся разделы */
.ta-acc{border-top:1px solid color-mix(in srgb,var(--sage-mid) 14%,var(--border))}
.ta-acc summary{display:flex;align-items:center;gap:14px;padding:15px 8px;margin:0 -8px;cursor:pointer;list-style:none;border-radius:12px;transition:background .15s ease}
.ta-acc summary::-webkit-details-marker{display:none}
.ta-acc summary:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.ta-acc summary h3{flex:1;margin:0;font-family:var(--sans);font-size:17.5px;font-weight:600;line-height:1.3;color:var(--head)}
.ta-acc summary::after{content:"";flex:none;width:9px;height:9px;margin-right:6px;border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.ta-acc[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.ta-acc summary:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ta-body{padding:2px 0 20px 48px}
.ta-count{font-size:14px;font-weight:600;color:var(--accent)}

/* Полоса диапазонов и строки таблицы: точка в плашке совпадает с сегментом полосы */
.ta-scale{margin:4px 0 14px}
.ta-bar{display:flex;gap:4px;height:12px}
.ta-seg{display:block;border-radius:7px}
.ta-ticks{position:relative;height:18px;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--muted)}
.ta-ticks span{position:absolute;transform:translateX(-50%)}
.ta-ticks span:first-child{transform:none}
.ta-ticks span:last-child{transform:translateX(-100%)}
.ta-seg.s1,.ta-pill.s1{--c:var(--mist-mid);opacity:1}
.ta-seg.s2,.ta-pill.s2{--c:var(--sage-mid)}
.ta-seg.s3,.ta-pill.s3{--c:var(--blue-mid)}
.ta-seg.s4,.ta-pill.s4{--c:var(--blue)}
.ta-seg.s5,.ta-pill.s5{--c:var(--mauve-dark)}
.ta-seg{background:var(--c)}
.ta-bands-wrap{margin:6px 0}
.ta-bands{width:100%;border-collapse:collapse;font-size:15.5px}
.ta-bands caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ta-bands th,.ta-bands td{padding:13px 14px 13px 0;text-align:left;vertical-align:top;border-top:1px solid color-mix(in srgb,var(--sage-mid) 14%,var(--border));color:var(--text,var(--ink));line-height:1.55}
.ta-bands thead th{padding-bottom:8px;border-top:0;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--sage-dark)}
.ta-bands tbody th{white-space:nowrap}
.ta-pill{display:inline-flex;align-items:center;gap:8px;padding:5px 13px 5px 11px;border-radius:999px;font-size:14px;font-weight:700;color:var(--head);
  background:color-mix(in srgb,var(--c,var(--accent)) 16%,var(--surface))}
.ta-pill::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c,var(--accent))}
.ta-bands td.ta-lbl{font-weight:700;color:var(--head)}
.test-about p.ta-note{font-size:14.5px;color:var(--muted)}
.ta-sources{padding-left:20px;margin:0}
.ta-sources li{margin:9px 0;color:var(--text,var(--ink));line-height:1.55;font-size:15px}
.test-about p.ta-meta{margin:8px 0 0;font-size:13.5px;color:var(--faint)}

/* Тёмная тема: семейства смешиваются с тёмной подложкой, текст светлеет */
html[data-theme="dark"] .test-about{
  background:linear-gradient(180deg,color-mix(in srgb,var(--sage-mid) 16%,var(--dark-surface)) 0,var(--dark-surface) 300px);
  border-color:color-mix(in srgb,var(--sage-mid) 30%,var(--dark-line));box-shadow:none}
html[data-theme="dark"] .test-about p,html[data-theme="dark"] .ta-bands th,html[data-theme="dark"] .ta-bands td,
html[data-theme="dark"] .ta-sources li{color:var(--dark-ink-warm)}
html[data-theme="dark"] .ta-measures{color:var(--dark-muted-cool)!important}
html[data-theme="dark"] .ta-facts dt,html[data-theme="dark"] .ta-bands thead th{color:var(--dark-accent)}
html[data-theme="dark"] .ta-ico{background:color-mix(in srgb,var(--fm) 26%,var(--dark-surface-2));color:color-mix(in srgb,var(--fm) 55%,var(--dark-ink))}
html[data-theme="dark"] .ta-ico.lg{background:color-mix(in srgb,var(--sage-mid) 45%,var(--dark-surface-2));color:var(--dark-ink)}
html[data-theme="dark"] .ta-stats>div{background:color-mix(in srgb,var(--fm) 22%,var(--dark-surface-2));color:color-mix(in srgb,var(--fm) 50%,var(--dark-ink))}
html[data-theme="dark"] .ta-stats b,html[data-theme="dark"] .ta-stats span{color:color-mix(in srgb,var(--fm) 50%,var(--dark-ink))}
html[data-theme="dark"] .ta-pill{background:color-mix(in srgb,var(--c,var(--accent)) 24%,var(--dark-surface-2));color:var(--dark-ink)}
html[data-theme="dark"] .ta-count,html[data-theme="dark"] .ta-acc summary::after{color:var(--dark-accent)}
html[data-theme="dark"] .ta-acc summary::after{border-color:var(--dark-accent)}

@media(max-width:680px){
  .test-about{margin-top:36px;padding:22px 18px;border-radius:18px}
  .test-about h2{font-size:25px}
  .ta-ico.lg{width:40px;height:40px}
  .ta-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ta-stats b{font-size:29px}
  .ta-stats .long b{font-size:23px}
  .ta-facts>div{grid-template-columns:1fr;gap:3px;padding:11px 0}
  .ta-body{padding-left:0}
  .ta-bands,.ta-bands tbody,.ta-bands tr,.ta-bands th,.ta-bands td{display:block}
  .ta-bands thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ta-bands tbody tr{padding:10px 0;border-top:1px solid color-mix(in srgb,var(--sage-mid) 14%,var(--border))}
  .ta-bands th,.ta-bands td{border:0;padding:2px 0}
  .ta-bands td.ta-lbl{padding-top:6px}
}

/* Строка фактов под лидом: кто создал, на первом экране. */
main.doc .ta-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:6px 8px; margin:12px 0 4px; padding:0 }
main.doc .ta-chips li{ margin:0 }
.ta-chips li{ font-size:13px; line-height:1.3; color:var(--text,var(--ink)); background:var(--surface-2); border:.5px solid var(--border);
  border-radius:var(--radius-pill); padding:5px 12px }
.ta-chips li:last-child{ background:color-mix(in srgb,var(--accent) 12%,var(--surface)); border-color:color-mix(in srgb,var(--accent) 35%,var(--border)) }
.ta-chips a{ color:var(--accent); font-weight:600; text-decoration:none }
.ta-chips a:hover{ text-decoration:underline; text-underline-offset:2px }