/* ============================================================
Design tokens (colors, fonts, type scale, spacing, shadows, radii)
live in /css/colors_and_type.css — imported via in HTML
before this file. This file holds ONLY component styles.
============================================================ */
/* ============================================================
Base
============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--font-body);color:var(--fg-1);scroll-behavior:smooth}
body{font-size:var(--fs-body);line-height:var(--lh-relaxed);background:var(--bg-2);margin:0;padding:0;-webkit-font-smoothing:antialiased}
/* Centered article container */
.page{max-width:1080px;margin:0 auto;padding:var(--s-10) var(--s-8) var(--s-16);background:var(--bg-1);box-shadow:var(--shadow-1)}
h1{font-family:var(--font-display);font-weight:900;font-size:var(--fs-h1);text-transform:uppercase;letter-spacing:var(--tracking-display);line-height:var(--lh-tight);color:var(--brand-dark);margin:0 0 var(--s-3) 0;padding-bottom:var(--s-5);border-bottom:3px solid var(--brand)}
h2{font-family:var(--font-display);font-weight:900;font-size:var(--fs-h2);text-transform:uppercase;letter-spacing:var(--tracking-display);line-height:var(--lh-tight);color:var(--brand-dark);margin:var(--s-12) 0 var(--s-5) 0;padding-bottom:var(--s-3);border-bottom:2px solid var(--brand);scroll-margin-top:var(--s-16)}
h3{font-family:var(--font-body);font-weight:700;font-size:var(--fs-h3);line-height:var(--lh-snug);color:var(--brand-dark);margin:var(--s-8) 0 var(--s-3) 0}
h4{font-family:var(--font-body);font-weight:700;font-size:var(--fs-h4);line-height:var(--lh-snug);color:var(--fg-1);margin:var(--s-5) 0 var(--s-2) 0}
p{margin:0 0 var(--s-3) 0;line-height:var(--lh-relaxed);color:var(--fg-1)}
.subtitle{font-family:var(--font-display-mixed);font-weight:200;font-style:italic;font-size:var(--fs-h4);color:var(--fg-2);line-height:var(--lh-snug);margin:0 0 var(--s-4) 0}
.discl{font-size:var(--fs-small);color:var(--fg-3);line-height:var(--lh-normal);margin:0 0 var(--s-10) 0;padding:var(--s-4) var(--s-5);background:var(--bg-2);border-left:3px solid var(--brand)}
a{color:var(--brand);text-decoration:none;border-bottom:1px solid color-mix(in oklab, var(--brand) 35%, transparent);transition:color .15s ease,border-color .15s ease}
a:hover{color:var(--brand-dark);border-bottom-color:var(--brand-dark)}
/* External link marker */
a[target="_blank"]::after{content:" \2197";font-size:.85em;color:var(--brand-light);margin-left:1px}
.overline{font-family:var(--font-body);font-size:var(--fs-overline);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-overline);color:var(--fg-2)}
/* ============================================================
Toolbar (sticky)
============================================================ */
.toolbar{position:sticky;top:0;background:var(--bg-1);border-bottom:1px solid var(--border-1);padding:var(--s-3) var(--s-8);z-index:50;display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;font-size:var(--fs-small);box-shadow:var(--shadow-1)}
.toolbar-label{color:var(--fg-3);text-transform:uppercase;letter-spacing:var(--tracking-overline);font-size:var(--fs-overline);font-weight:700;margin-right:var(--s-2)}
.toolbar button{background:var(--brand);color:var(--white);border:none;padding:var(--s-2) var(--s-4);cursor:pointer;font-size:var(--fs-small);font-weight:500;font-family:inherit;letter-spacing:.02em;transition:background .15s ease}
.toolbar button:hover{background:var(--brand-dark)}
.toolbar button.secondary{background:var(--bg-1);color:var(--brand-dark);border:1px solid var(--border-2)}
.toolbar button.secondary:hover{background:var(--bg-2);border-color:var(--brand)}
/* ============================================================
Оглавление (TOC)
============================================================ */
.toc{background:var(--bg-2);border:1px solid var(--border-1);padding:var(--s-5) var(--s-6);margin-bottom:var(--s-10);font-size:var(--fs-small)}
.toc-head{font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-overline);font-size:var(--fs-overline);color:var(--brand-dark);margin-bottom:var(--s-3)}
.toc ul{margin:0;padding-left:var(--s-5);list-style:none;line-height:var(--lh-normal)}
.toc ul ul{padding-left:var(--s-5);margin-top:var(--s-1)}
.toc ul li{margin-bottom:var(--s-1);position:relative}
.toc ul li::before{content:"›";position:absolute;left:-14px;color:var(--brand-light);font-weight:700}
.toc a{color:var(--brand-dark);border-bottom:none}
.toc a:hover{color:var(--brand);border-bottom:1px solid var(--brand)}
.toc-meta{color:var(--fg-3);font-size:var(--fs-caption)}
/* ============================================================
Диагностика — Q-блоки
============================================================ */
.q-block{background:var(--bg-2);padding:var(--s-4) var(--s-5);margin-bottom:var(--s-3);border-left:3px solid var(--brand)}
.q-row{display:flex;gap:var(--s-4);align-items:flex-start}
.q-num{flex-shrink:0;background:var(--brand);color:var(--white);width:28px;height:28px;text-align:center;line-height:28px;font-family:var(--font-display);font-size:var(--fs-small);font-weight:900}
.q-bold{font-weight:700;color:var(--fg-1);font-size:var(--fs-body)}
.q-opts{font-size:var(--fs-small);color:var(--fg-2);margin-top:var(--s-1);line-height:var(--lh-normal)}
.dot{color:var(--brand);margin:0 var(--s-2);font-weight:700}
/* ============================================================
Блоки-предупреждения / инфо / опасность
============================================================ */
.note-block{background:#FEF7E0;border-left:4px solid var(--accent-yellow-700);padding:var(--s-4) var(--s-5);margin:var(--s-4) 0;font-size:var(--fs-small);color:#5E5306;line-height:var(--lh-relaxed)}
.note-block strong{color:var(--accent-yellow-900)}
.info-block{background:#E5F1FF;border-left:4px solid var(--accent-blue-700);padding:var(--s-4) var(--s-5);margin:var(--s-4) 0;font-size:var(--fs-small);color:var(--accent-blue-900);line-height:var(--lh-relaxed)}
.info-block strong{color:var(--accent-blue-900)}
.danger-block{background:#FEE9E3;border-left:4px solid var(--accent-red-700);padding:var(--s-4) var(--s-5);margin:var(--s-4) 0;font-size:var(--fs-small);color:var(--accent-red-900);line-height:var(--lh-relaxed)}
/* ============================================================
Таблицы
============================================================ */
table{width:100%;border-collapse:collapse;font-size:var(--fs-small);margin:var(--s-4) 0;background:var(--bg-1)}
th{background:var(--brand-dark);color:var(--white);padding:var(--s-3) var(--s-4);text-align:left;font-weight:600;border:1px solid var(--brand-dark);font-family:var(--font-body);line-height:var(--lh-snug)}
td{padding:var(--s-3) var(--s-4);border:1px solid var(--border-1);vertical-align:top;line-height:var(--lh-normal);color:var(--fg-1)}
tr:nth-child(even) td{background:var(--bg-2)}
/* Шпаргалка F1 — синий акцент */
.cheat-table th{background:var(--accent-blue-700);border-color:var(--accent-blue-700)}
.cheat-table tr:nth-child(even) td{background:#F0F7FF}
.cheat-method{font-weight:600;color:var(--accent-blue-900)}
.cheat-method a{color:var(--accent-blue-900);border-bottom-color:color-mix(in oklab, var(--accent-blue-700) 35%, transparent)}
.cheat-method a:hover{color:var(--accent-blue-700)}
/* Калькулятор — пурпурный акцент */
.calc-table th{background:var(--accent-purple-700);border-color:var(--accent-purple-700)}
.calc-table tr:nth-child(even) td{background:#F7EFFD}
/* ============================================================
Карточки методов
============================================================ */
.card{border:1px solid var(--border-1);padding:var(--s-5) var(--s-6);margin-bottom:var(--s-5);background:var(--bg-1);box-shadow:var(--shadow-1);scroll-margin-top:var(--s-16);transition:box-shadow .15s ease}
.card:hover{box-shadow:var(--shadow-2)}
.card-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:var(--s-3);border-bottom:2px solid var(--brand);margin-bottom:var(--s-4);flex-wrap:wrap;gap:var(--s-3)}
.card-title{font-family:var(--font-display-mixed);font-weight:900;font-size:var(--fs-h4);color:var(--brand-dark);line-height:var(--lh-snug)}
.card-stars{font-size:var(--fs-small);color:var(--brand);white-space:nowrap;font-weight:700;cursor:help;position:relative}
.card-row{display:grid;grid-template-columns:180px 1fr;gap:var(--s-3);font-size:var(--fs-small);color:var(--fg-1);line-height:var(--lh-relaxed);margin-bottom:var(--s-3)}
.card-label{font-weight:700;color:var(--brand-dark);text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-caption)}
.card-risk{color:var(--accent-red-700);font-weight:700}
.card-stop{background:#FEE9E3;border-left:4px solid var(--accent-red-700);padding:var(--s-3) var(--s-4);font-size:var(--fs-small);color:var(--accent-red-900);margin-top:var(--s-3);line-height:var(--lh-relaxed)}
/* Подкат «Как объяснить» в карточках */
.interview{background:#E5F4F2;border:1px solid var(--brand-tint-3);padding:var(--s-4) var(--s-5);margin-top:var(--s-4);font-size:var(--fs-small);color:var(--brand-dark);line-height:var(--lh-relaxed)}
.interview-row{display:grid;grid-template-columns:180px 1fr;gap:var(--s-3);margin-bottom:var(--s-2)}
.interview-row:last-child{margin-bottom:0}
.interview-label{font-weight:700;color:var(--brand-dark);text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-caption)}
/* ============================================================
CSS-tooltip (звёзды и пр.)
============================================================ */
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus::after{
content:attr(data-tip);
position:absolute;
bottom:calc(100% + 8px);
right:0;
width:320px;
max-width:90vw;
background:var(--brand-deepest);
color:var(--white);
font-family:var(--font-body);
font-weight:400;
font-size:var(--fs-caption);
line-height:var(--lh-normal);
text-transform:none;
letter-spacing:0;
padding:var(--s-3) var(--s-4);
white-space:normal;
z-index:100;
box-shadow:var(--shadow-3);
pointer-events:none
}
[data-tip]:hover::before,[data-tip]:focus::before{
content:"";position:absolute;bottom:calc(100% + 2px);right:16px;
border:6px solid transparent;border-top-color:var(--brand-deepest);
z-index:100
}
/* ============================================================
Техники
============================================================ */
.tech-card{border:1px solid var(--border-1);padding:var(--s-5) var(--s-6);margin-bottom:var(--s-5);background:var(--bg-1);box-shadow:var(--shadow-1);scroll-margin-top:var(--s-16)}
.tech-head{font-family:var(--font-display-mixed);font-weight:900;font-size:var(--fs-h4);color:var(--brand-dark);padding-bottom:var(--s-3);border-bottom:2px solid var(--brand);margin-bottom:var(--s-4)}
.tech-row{display:grid;grid-template-columns:200px 1fr;gap:var(--s-3);font-size:var(--fs-small);color:var(--fg-1);line-height:var(--lh-relaxed);margin-bottom:var(--s-3)}
.tech-label{font-weight:700;color:var(--brand-dark);text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-caption)}
.tech-warn{color:var(--accent-red-700);font-weight:700}
.tech-stop{background:#FEE9E3;border-left:4px solid var(--accent-red-700);padding:var(--s-3) var(--s-4);font-size:var(--fs-small);color:var(--accent-red-900);margin-top:var(--s-3)}
/* ============================================================
Протокол
============================================================ */
.proto{background:var(--bg-3);border:1px solid var(--brand-tint-3);padding:var(--s-5) var(--s-6);margin-bottom:var(--s-5);box-shadow:var(--shadow-1)}
.proto-head{font-family:var(--font-display);font-weight:900;font-size:var(--fs-h5);text-transform:uppercase;letter-spacing:var(--tracking-overline);color:var(--brand-dark);padding-bottom:var(--s-3);border-bottom:2px solid var(--brand);margin-bottom:var(--s-4)}
.proto-row{display:grid;grid-template-columns:32px 1fr;gap:var(--s-3);font-size:var(--fs-small);color:var(--fg-1);line-height:var(--lh-relaxed);margin-bottom:var(--s-3)}
.proto-num{font-family:var(--font-display);font-weight:900;color:var(--brand);background:var(--white);text-align:center;width:28px;height:28px;line-height:28px;font-size:var(--fs-small)}
/* ============================================================
Принципы
============================================================ */
.principle{background:var(--bg-1);border:1px solid var(--border-1);padding:var(--s-5) var(--s-6);margin-bottom:var(--s-5);font-size:var(--fs-body);color:var(--fg-1);line-height:var(--lh-relaxed);box-shadow:var(--shadow-1)}
.principle-head{display:flex;gap:var(--s-4);align-items:center;margin-bottom:var(--s-3)}
.p-num{flex-shrink:0;background:var(--brand);color:var(--white);width:36px;height:36px;text-align:center;line-height:36px;font-family:var(--font-display);font-size:var(--fs-h5);font-weight:900}
.p-title{font-family:var(--font-display-mixed);font-weight:900;color:var(--brand-dark);font-size:var(--fs-h4);line-height:var(--lh-snug)}
.p-thesis{font-size:var(--fs-body);color:var(--fg-1);margin:var(--s-3) 0;font-weight:500;font-style:italic}
.p-fail{background:#FEE9E3;border-left:4px solid var(--accent-red-700);padding:var(--s-3) var(--s-4);font-size:var(--fs-small);color:var(--accent-red-900);margin:var(--s-3) 0;line-height:var(--lh-relaxed)}
/* ============================================================
Сценарии
============================================================ */
.scenario{border:1px solid var(--border-1);padding:var(--s-5) var(--s-6);margin-bottom:var(--s-5);background:var(--bg-1);box-shadow:var(--shadow-1)}
.scenario-title{font-family:var(--font-display-mixed);font-weight:900;font-size:var(--fs-h4);color:var(--brand-dark);margin-bottom:var(--s-3);padding-bottom:var(--s-3);border-bottom:2px solid var(--brand)}
.scenario-row{display:grid;grid-template-columns:160px 1fr;gap:var(--s-3);font-size:var(--fs-small);color:var(--fg-1);line-height:var(--lh-relaxed);margin-bottom:var(--s-2)}
.scenario-label{font-weight:700;color:var(--brand-dark);text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-caption)}
/* ============================================================
Антипаттерны
============================================================ */
.anti{background:var(--bg-1);border:1px solid var(--border-1);border-left:4px solid var(--accent-red-700);padding:var(--s-4) var(--s-5);margin-bottom:var(--s-3);font-size:var(--fs-small);line-height:var(--lh-relaxed)}
.anti-bad{color:var(--accent-red-900);font-weight:700;margin-bottom:var(--s-2)}
.anti-good{color:var(--brand-dark)}
/* ============================================================
Формулы и калькулятор
============================================================ */
.formula{background:var(--brand-deepest);color:var(--brand-tint-3);padding:var(--s-3) var(--s-4);font-family:var(--font-mono);font-size:var(--fs-small);margin:var(--s-3) 0;display:block;line-height:var(--lh-normal);font-weight:500}
.formula-block{background:var(--bg-1);border:1px solid var(--border-1);padding:var(--s-5) var(--s-6);margin-bottom:var(--s-5);box-shadow:var(--shadow-1)}
.formula-block .formula{margin-top:0}
.formula-row{display:grid;grid-template-columns:120px 1fr;gap:var(--s-3);font-size:var(--fs-small);color:var(--fg-1);line-height:var(--lh-relaxed);margin-top:var(--s-3)}
.formula-label{font-weight:700;color:var(--brand-dark);text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-caption)}
/* ============================================================
Источники путаницы
============================================================ */
.confuse{background:var(--bg-1);border:1px solid var(--border-1);border-left:4px solid var(--accent-yellow-700);padding:var(--s-4) var(--s-5);margin-bottom:var(--s-3);box-shadow:var(--shadow-1)}
.confuse-title{font-family:var(--font-display-mixed);font-weight:900;color:var(--brand-dark);font-size:var(--fs-h5);margin-bottom:var(--s-2)}
.confuse-text{font-size:var(--fs-small);color:var(--fg-1);line-height:var(--lh-relaxed)}
/* ============================================================
Легенда звёзд
============================================================ */
.legend{background:var(--bg-2);border:1px solid var(--border-1);padding:var(--s-5) var(--s-6);margin:var(--s-5) 0 var(--s-8);box-shadow:var(--shadow-1)}
.legend-row{display:grid;grid-template-columns:120px 1fr;gap:var(--s-4);margin-bottom:var(--s-3);color:var(--fg-1);line-height:var(--lh-relaxed);font-size:var(--fs-small)}
.legend-row:last-child{margin-bottom:0}
.legend-stars{font-weight:700;color:var(--brand)}
/* ============================================================
Источники
============================================================ */
.src-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.src{background:var(--bg-2);border:1px solid var(--border-1);padding:var(--s-4) var(--s-5);font-size:var(--fs-small);color:var(--fg-1);line-height:var(--lh-relaxed)}
.src-h{font-family:var(--font-body);font-weight:700;color:var(--brand-dark);text-transform:uppercase;letter-spacing:var(--tracking-overline);font-size:var(--fs-overline);display:block;margin-bottom:var(--s-2)}
/* ============================================================
details / cut
============================================================ */
details{margin:var(--s-3) 0}
details > summary{cursor:pointer;font-size:var(--fs-small);color:var(--brand);padding:var(--s-2) 0;list-style:none;user-select:none;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-caption)}
details > summary::-webkit-details-marker{display:none}
details > summary::before{content:"\25B8";color:var(--brand);display:inline-block;width:16px;transition:transform .15s}
details[open] > summary::before{content:"\25BE"}
details > summary:hover{color:var(--brand-dark)}
.cut-content{padding:var(--s-3) 0 var(--s-3) var(--s-5);border-left:2px solid var(--brand-tint-3);margin-left:var(--s-1);margin-top:var(--s-2)}
/* details в карточке */
.card details > summary{margin-top:var(--s-3);color:var(--brand-dark)}
.card details > summary:hover{color:var(--brand)}
/* ============================================================
Глоссарий
============================================================ */
.gloss-grid{column-count:2;column-gap:var(--s-6);font-size:var(--fs-small);line-height:var(--lh-relaxed);color:var(--fg-1)}
.gloss-term{margin:0 0 var(--s-4) 0;break-inside:avoid}
.gloss-term strong{color:var(--brand-dark);font-weight:700}
.gloss-term em{color:var(--fg-3);font-style:italic}
.gloss-index{font-size:var(--fs-small);line-height:var(--lh-relaxed);color:var(--fg-1)}
.gloss-index a{color:var(--brand-dark);border-bottom:none;padding:1px 4px}
.gloss-index a:hover{background:var(--brand);color:var(--white);border-bottom:none}
/* ============================================================
Responsive
============================================================ */
@media (max-width:900px){
:root{--fs-h1:34px; --fs-h2:24px; --fs-h3:19px; --fs-h4:17px;}
.page{padding:var(--s-6) var(--s-5) var(--s-10)}
.card-row,.interview-row,.tech-row,.scenario-row,.formula-row{grid-template-columns:1fr;gap:var(--s-1)}
.card-label,.interview-label,.tech-label,.scenario-label,.formula-label{font-size:var(--fs-overline);margin-bottom:var(--s-1)}
.src-grid{grid-template-columns:1fr}
.gloss-grid{column-count:1}
.card-head{flex-direction:column;align-items:flex-start}
[data-tip]:hover::after,[data-tip]:focus::after{width:280px;right:auto;left:0}
[data-tip]:hover::before,[data-tip]:focus::before{right:auto;left:16px}
}
/* ============================================================
Печать
============================================================ */
@media print{
@page{size:A4 portrait;margin:14mm}
body{background:var(--white)}
.page{box-shadow:none;padding:0;max-width:100%}
.toolbar,.no-print{display:none}
details{margin:0}
details > summary{display:none}
details > .cut-content{padding:0;border:none;margin:0}
a[target="_blank"]::after{display:none}
}
/* ============================================================
v4 OVERRIDES — режимы чтения, свёрнутые карточки, поиск
============================================================ */
/* ── Толбар: новые элементы ─────────────────────────────── */
.toolbar{
padding:var(--s-3) var(--s-6);
gap:var(--s-3);
}
.mode-toggle{
display:inline-flex; background:var(--bg-2);
border:1px solid var(--border-1); padding:2px;
}
.mode-toggle button{
background:transparent; color:var(--fg-2);
padding:6px 14px; font-size:var(--fs-small); font-weight:600;
text-transform:none; letter-spacing:0; border:0; cursor:pointer;
font-family:inherit; transition:background .12s, color .12s;
}
.mode-toggle button:hover{ background:transparent; color:var(--brand-dark) }
.mode-toggle button.active{ background:var(--brand-dark); color:var(--white) }
.mode-toggle button.active:hover{ background:var(--brand-dark); color:var(--white) }
.tb-search{
position:relative; flex:1 1 240px; min-width:200px; max-width:420px;
}
.tb-search input{
width:100%; padding:7px 28px 7px 32px;
border:1px solid var(--border-2); background:var(--bg-1);
font-family:inherit; font-size:var(--fs-small); color:var(--fg-1); outline:none;
transition:border-color .12s;
}
.tb-search input:focus{ border-color:var(--brand) }
.tb-search::before{
content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%);
width:14px; height:14px;
background-image:url('data:image/svg+xml;utf8,');
background-size:contain; background-repeat:no-repeat; pointer-events:none;
}
.tb-search-clear{
position:absolute; right:6px; top:50%; transform:translateY(-50%);
background:transparent; border:0; cursor:pointer; color:var(--fg-3);
font-size:18px; line-height:1; padding:2px 6px; font-family:inherit;
}
.tb-search-clear:hover{ color:var(--fg-1) }
.tb-btn{
background:var(--brand); color:var(--white); border:0; padding:var(--s-2) var(--s-3);
font-size:var(--fs-small); font-weight:500; cursor:pointer; font-family:inherit;
letter-spacing:.02em;
}
.tb-btn:hover{ background:var(--brand-dark) }
.tb-btn.secondary{ background:var(--bg-1); color:var(--brand-dark); border:1px solid var(--border-2) }
.tb-btn.secondary:hover{ background:var(--bg-2); border-color:var(--brand) }
.tb-section{
margin-left:auto; padding-left:var(--s-3);
font-size:var(--fs-caption); color:var(--fg-3);
text-transform:none; letter-spacing:0; white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; max-width:280px;
display:flex; align-items:center; gap:6px;
}
.tb-section .tb-sec-kicker{ color:var(--fg-3); font-weight:400 }
.tb-section .tb-sec-label{ color:var(--brand-dark); font-weight:700 }
@media (max-width:900px){
.tb-section{ display:none }
.tb-search{ order:10; flex-basis:100%; max-width:none }
.toolbar{ padding:var(--s-2) var(--s-5) }
}
/* ── Скролл-прогресс под толбаром ────────────────────────── */
.tb-progress{
position:sticky; top:0; height:2px; background:var(--brand);
width:0%; z-index:51; transition:width .1s linear; pointer-events:none;
}
/* ── Сокращаем капс на лейблах строк (главный шум) ──────── */
.card-label, .tech-label, .interview-label, .scenario-label,
.formula-label, .explain-label{
text-transform:none !important;
letter-spacing:0 !important;
color:var(--brand-dark);
font-weight:600;
font-size:var(--fs-small);
}
/* ── Уплотняем мелкий текст: lh-relaxed на 14px — растяжка ─ */
.card-row, .tech-row, .scenario-row, .formula-row,
.interview-row, .explain-row, .proto-row,
.src, .gloss-term, .anti, .confuse-text, .note-block, .info-block,
.danger-block, .card-stop, .tech-stop, .p-fail{
line-height:1.5;
}
/* ── Звёзды как компактный чип ──────────────────────────── */
.card-stars{
font-family:var(--font-body) !important;
font-weight:700 !important;
color:var(--brand-dark) !important;
background:var(--bg-2);
padding:4px 10px;
border:1px solid var(--border-1);
white-space:nowrap;
font-size:var(--fs-caption);
letter-spacing:1px;
}
.card-stars[data-tip]{ cursor:help }
/* ── Визуальная типизация: цветная вертикальная риска ──── */
.card{
position:relative;
padding-left:calc(var(--s-6) + 6px);
}
.card::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
background:var(--brand);
}
.tech-card{
position:relative;
padding-left:calc(var(--s-6) + 6px);
background:linear-gradient(180deg, var(--bg-2) 0, var(--bg-1) 56px);
}
.tech-card::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
background:var(--accent-purple-700);
}
.tech-head{ color:var(--accent-purple-900) !important; border-bottom-color:var(--accent-purple-700) !important }
.scenario{
position:relative;
padding-left:calc(var(--s-6) + 6px);
}
.scenario::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
background:var(--accent-blue-700);
}
.scenario-title{ color:var(--accent-blue-900) !important; border-bottom-color:var(--accent-blue-700) !important }
.principle{
/* stripe lives in ::before — no extra border-left needed */
}
/* ── Тип-чип в шапке карточки (через ::before на .card-title) ── */
.card-head{ position:relative }
.card-head::before{
content:"МЕТОД"; position:absolute; top:-22px; left:0;
font-size:var(--fs-overline); font-weight:700; color:var(--brand);
letter-spacing:var(--tracking-overline); text-transform:uppercase;
}
.tech-head{ position:relative; padding-top:var(--s-3) }
.tech-head::before{
content:"ТЕХНИКА"; position:absolute; top:-18px; left:0;
font-size:var(--fs-overline); font-weight:700; color:var(--accent-purple-700);
letter-spacing:var(--tracking-overline); text-transform:uppercase;
}
.scenario-title{ position:relative; padding-top:var(--s-3) }
.scenario-title::before{
content:"СЦЕНАРИЙ"; position:absolute; top:-18px; left:0;
font-size:var(--fs-overline); font-weight:700; color:var(--accent-blue-700);
letter-spacing:var(--tracking-overline); text-transform:uppercase;
}
.principle-head{ position:relative; padding-top:var(--s-3) }
.principle-head::before{
content:"ПРИНЦИП"; position:absolute; top:-14px; left:0;
font-size:var(--fs-overline); font-weight:700; color:var(--brand);
letter-spacing:var(--tracking-overline); text-transform:uppercase;
}
.card, .tech-card, .scenario, .principle{ margin-top:var(--s-8) }
/* ── Сворачиваемые карточки методов ────────────────────── */
.card-head{
align-items:center;
}
.card.collapsed > .card-row:not(:first-of-type),
.card.collapsed > .card-stop,
/* В свёрнутой карточке скрываем лейбл "Что оценивает" */
/* Stars chip — позиционирование рядом с кнопкой */
.card-head{
gap:var(--s-3);
}
.card-head .card-title{ flex:1 1 auto; min-width:0 }
.card-head .card-stars{ order:2 }
/* ── Режим "Карта": скрываем глубину ───────────────────── */
/* mode-map removed in v4.4 */
body.mode-map #cheat ~ * .info-block:first-of-type{ /* keep */ }
/* В режиме "Карта" карточки начинают в свёрнутом виде, но
управление collapsed/expanded — независимо от mode-map */
/* ── Поиск: подсветка совпадений ───────────────────────── */
.search-hide{ display:none !important }
mark.search-hit{
background:#FFF6B8; color:var(--ink);
padding:0 1px; font-weight:600;
}
/* ── Глоссарий: открыт по умолчанию через JS ───────────── */
/* ── Floating "наверх" кнопка ──────────────────────────── */
.fab-top{
position:fixed; right:24px; bottom:24px;
width:44px; height:44px;
background:var(--brand-dark); color:var(--white);
border:0; cursor:pointer; font-size:20px;
box-shadow:var(--shadow-2);
display:flex; align-items:center; justify-content:center;
z-index:40; opacity:0; pointer-events:none;
transition:opacity .18s ease;
font-family:inherit;
}
.fab-top.visible{ opacity:1; pointer-events:auto }
.fab-top:hover{ background:var(--brand) }
/* ── В мобильной: тулбар двухрядный ─────────────────────── */
@media (max-width:640px){
.toolbar{ flex-wrap:wrap }
.mode-toggle{ flex:0 0 auto }
.tb-btn{ display:none }
.tb-btn.show-mobile{ display:inline-flex }
.card-head::before, .tech-head::before, .scenario-title::before, .principle-head::before{
position:static; display:block; margin-bottom:4px;
}
.card, .tech-card, .scenario, .principle{ margin-top:var(--s-5) }
}
/* ── Печать: всё развёрнуто, без переключателей ────────── */
@media print{
.card.collapsed > .card-row,
.card.collapsed > .card-stop,
.card.collapsed > details,
/* mode-map removed in v4.4 */
details{ open:true }
.card-head::before, .tech-head::before,
.scenario-title::before, .principle-head::before{
position:static; display:block; margin-bottom:4px;
color:var(--ink) !important;
}
}
/* ============================================================
v4.1 — кикеры в потоке, header grid, звёзды-виджет,
связанные методы, плитки шпаргалки
============================================================ */
/* ── Убираем старые absolute-кикеры ────────────────────── */
.card-head::before, .tech-head::before,
.scenario-title::before, .principle-head::before{
content:none !important;
display:none !important;
}
/* ── Новые кикеры в потоке: чип над шапкой ─────────────── */
.card-kicker{
display:flex; align-items:center; gap:8px;
margin-bottom:var(--s-3);
font-size:var(--fs-overline);
font-weight:700;
letter-spacing:var(--tracking-overline);
text-transform:uppercase;
}
.card-kicker-num{
display:inline-block;
background:var(--brand); color:var(--white);
width:30px; height:24px; line-height:24px; text-align:center;
font-family:var(--font-display);
font-size:var(--fs-caption);
letter-spacing:0;
}
.card-kicker-type{ color:var(--brand) }
.card-kicker-tech .card-kicker-num{ background:var(--accent-purple-700) }
.card-kicker-tech .card-kicker-type{ color:var(--accent-purple-700) }
.card-kicker-scenario .card-kicker-num{ background:var(--accent-blue-700) }
.card-kicker-scenario .card-kicker-type{ color:var(--accent-blue-700) }
/* На свёрнутой карточке кикер плотнее */
/* ── Шапка карточки на grid: title flex, stars+toggle справа ─ */
.card-head{
display:grid !important;
grid-template-columns:1fr auto auto;
grid-template-areas:"title stars toggle";
align-items:center;
gap:var(--s-3) var(--s-4);
}
.card-head .card-title{ grid-area:title; min-width:0 }
.card-head .card-stars{ grid-area:stars }
@media (max-width:640px){
.card-head{
grid-template-columns:1fr auto;
grid-template-areas:
"title toggle"
"stars stars";
}
}
/* ── Звёзды-виджет ──────────────────────────────────────── */
.card-stars{
background:transparent !important;
border:0 !important;
padding:0 !important;
display:inline-flex !important;
align-items:center;
gap:10px;
font-family:var(--font-body) !important;
white-space:nowrap;
letter-spacing:0 !important;
}
.rating{
display:inline-flex; align-items:center; gap:8px;
background:var(--bg-2);
border:1px solid var(--border-1);
padding:5px 10px;
cursor:help;
position:relative;
}
.rating:focus{ outline:2px solid var(--brand); outline-offset:1px }
.rating-stars{
display:inline-flex; gap:2px;
}
.rating-stars .star{
width:11px; height:11px;
background:var(--grey-300);
-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask:url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.rating-stars .star.filled{ background:var(--brand) }
.rating-stars .star.half{
background:linear-gradient(90deg, var(--brand) 50%, var(--grey-300) 50%);
}
.rating-label{
font-size:var(--fs-caption);
color:var(--fg-2);
font-weight:600;
letter-spacing:0;
text-transform:none;
}
.rating-sep{
color:var(--grey-300);
font-weight:300;
font-size:14px;
}
.rating-na{
display:inline-flex; align-items:center; gap:6px;
font-size:var(--fs-caption);
color:var(--fg-3);
padding:5px 10px;
background:var(--bg-2);
border:1px solid var(--border-1);
border-style:dashed;
}
/* ── Связанные методы ──────────────────────────────────── */
.card-related, .tech-related{
display:flex; align-items:center; gap:6px; flex-wrap:wrap;
margin-top:var(--s-4);
padding-top:var(--s-3);
border-top:1px dashed var(--border-1);
font-size:var(--fs-caption);
}
.card-related-label{
color:var(--fg-3);
font-weight:600;
margin-right:var(--s-1);
text-transform:uppercase;
letter-spacing:var(--tracking-overline);
}
.rel-chip{
display:inline-flex; align-items:center;
padding:3px 9px;
background:var(--bg-2);
color:var(--brand-dark);
border:1px solid var(--border-1);
font-size:var(--fs-caption);
font-weight:500;
text-decoration:none;
border-bottom:1px solid var(--border-1) !important;
transition:background .12s, border-color .12s, color .12s;
}
.rel-chip:hover{
background:var(--brand);
color:var(--white) !important;
border-color:var(--brand) !important;
}
.rel-chip.rel-tech{
color:var(--accent-purple-900);
}
.rel-chip.rel-tech:hover{
background:var(--accent-purple-700);
border-color:var(--accent-purple-700) !important;
}
/* Скрываем связанные в свёрнутой карточке */
/* ── ШПАРГАЛКА — переработанная сетка ──────────────────── */
.cheat-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:var(--s-4);
margin:var(--s-5) 0 var(--s-6);
}
@media (max-width:760px){
.cheat-grid{ grid-template-columns:1fr }
}
.cheat-group{
background:var(--bg-1);
border:1px solid var(--border-1);
padding:var(--s-5) var(--s-5) var(--s-4);
position:relative;
}
.cheat-group::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
background:var(--brand);
}
.cheat-group[data-axis="cluster"]::before,
.cheat-group[data-axis="time"]::before,
.cheat-group[data-axis="staged"]::before{ background:var(--accent-blue-700) }
.cheat-group[data-axis="invite"]::before{ background:var(--accent-yellow-700) }
.cheat-group[data-axis="none"]::before{ background:var(--accent-purple-700) }
.cheat-group[data-axis="other"]::before{ background:var(--accent-red-700) }
.cheat-group-title{
font-family:var(--font-display-mixed);
font-weight:900;
font-size:var(--fs-h5);
color:var(--brand-dark);
margin:0 0 var(--s-1) 0;
padding-bottom:0;
border-bottom:0;
text-transform:none;
letter-spacing:0;
line-height:var(--lh-snug);
}
.cheat-group[data-axis="cluster"] .cheat-group-title,
.cheat-group[data-axis="time"] .cheat-group-title,
.cheat-group[data-axis="staged"] .cheat-group-title{ color:var(--accent-blue-900) }
.cheat-group[data-axis="invite"] .cheat-group-title{ color:var(--accent-yellow-900) }
.cheat-group[data-axis="none"] .cheat-group-title{ color:var(--accent-purple-900) }
.cheat-group[data-axis="other"] .cheat-group-title{ color:var(--accent-red-900) }
.cheat-group-hint{
font-size:var(--fs-caption);
color:var(--fg-3);
margin-bottom:var(--s-4);
line-height:1.5;
}
.cheat-tiles{
list-style:none; padding:0; margin:0;
display:flex; flex-direction:column; gap:var(--s-3);
}
.cheat-tile{
display:grid;
grid-template-columns:1fr;
gap:4px;
padding:var(--s-3) 0;
border-top:1px solid var(--border-1);
}
.cheat-tile:first-child{ border-top:0; padding-top:0 }
.cheat-tile-when{
font-size:var(--fs-small);
color:var(--fg-1);
margin:0;
font-weight:500;
}
.cheat-tile-method{
font-size:var(--fs-caption);
color:var(--brand);
font-weight:600;
text-decoration:none;
border-bottom:1px solid color-mix(in oklab, var(--brand) 35%, transparent);
align-self:start;
justify-self:start;
}
.cheat-tile-method:hover{ color:var(--brand-dark) }
.cheat-tile-warn{
font-size:var(--fs-caption);
color:var(--fg-3);
margin:0;
line-height:1.4;
}
.cheat-tile-warn::before{ content:"⚠ "; color:var(--accent-yellow-700) }
/* Скрываем старую таблицу шпаргалки (на случай рендеринга) */
.cheat-table.legacy{ display:none }
/* ── Подпись «Шпаргалка» */
.cheat-intro{
font-size:var(--fs-small);
color:var(--fg-2);
margin:var(--s-3) 0 var(--s-2);
line-height:1.5;
}
/* ============================================================
v4.2 — fix Защита-режима (explain*) + дерево решений
============================================================ */
/* «Как объяснить» внутри карточки — отсутствовали стили */
.card details .explain,
.tech-card details .explain{
background:#E5F4F2;
border:1px solid var(--brand-tint-3);
padding:var(--s-4) var(--s-5);
margin-top:var(--s-3);
font-size:var(--fs-small);
color:var(--brand-dark);
line-height:1.55;
}
.explain-row{
display:grid;
grid-template-columns:180px 1fr;
gap:var(--s-3);
margin-bottom:var(--s-3);
}
.explain-row:last-child{ margin-bottom:0 }
.explain-label{
font-weight:700 !important;
color:var(--brand-dark);
font-size:var(--fs-caption);
text-transform:none !important;
letter-spacing:0 !important;
}
@media (max-width:760px){
.explain-row{ grid-template-columns:1fr; gap:var(--s-1) }
.explain-label{ margin-bottom:var(--s-1) }
}
/* ── Переключатель вида шпаргалки ──────────────────────── */
.cheat-views{
display:inline-flex;
background:var(--bg-2);
border:1px solid var(--border-1);
padding:2px;
margin:var(--s-2) 0 var(--s-3);
}
.cheat-views button{
background:transparent; color:var(--fg-2);
padding:6px 14px; font-size:var(--fs-small); font-weight:600;
border:0; cursor:pointer; font-family:inherit;
text-transform:none; letter-spacing:0;
transition:background .12s, color .12s;
}
.cheat-views button:hover{ color:var(--brand-dark) }
.cheat-views button.active{ background:var(--brand-dark); color:var(--white) }
.cheat-view{ display:none }
.cheat-view.active{ display:block }
/* ── ДЕРЕВО РЕШЕНИЙ ────────────────────────────────────── */
.cheat-tree{
background:var(--bg-1);
border:1px solid var(--border-1);
padding:var(--s-6) var(--s-6) var(--s-5);
margin:var(--s-3) 0 var(--s-6);
}
.tree-step-root{
display:flex; align-items:baseline; gap:var(--s-3);
margin-bottom:var(--s-5);
padding-bottom:var(--s-3);
border-bottom:2px solid var(--brand);
}
.tree-step-root .tree-q-kicker{
font-size:var(--fs-overline);
font-weight:700;
letter-spacing:var(--tracking-overline);
text-transform:uppercase;
color:var(--brand);
flex-shrink:0;
}
.tree-step-root .tree-q-text{
font-family:var(--font-display-mixed);
font-weight:900;
font-size:var(--fs-h4);
color:var(--brand-dark);
line-height:var(--lh-snug);
}
.tree-branches{
list-style:none; padding:0; margin:0;
display:flex; flex-direction:column; gap:0;
}
.tree-branch{
position:relative;
padding:var(--s-4) 0 var(--s-4) var(--s-8);
border-top:1px solid var(--border-1);
}
.tree-branch:first-child{ border-top:0 }
/* Connector — горизонтальная линия от родителя */
.tree-branch::before{
content:"";
position:absolute;
left:0; top:calc(var(--s-4) + 12px);
width:var(--s-6); height:2px;
background:var(--brand-tint-1);
}
.tree-branch::after{
content:"";
position:absolute;
left:0; top:0; bottom:0;
width:2px; background:var(--brand-tint-1);
}
.tree-branch:first-child::after{ top:calc(var(--s-4) + 12px) }
.tree-branch:last-child::after{ bottom:calc(50% + 0px); height:auto;
/* keep line until midpoint */
bottom:auto; height:calc(var(--s-4) + 12px); }
.tree-branch-head{
display:flex; align-items:baseline; gap:var(--s-3);
margin-bottom:var(--s-3);
flex-wrap:wrap;
}
.tree-branch-name{
font-family:var(--font-display-mixed);
font-weight:900;
font-size:var(--fs-h5);
color:var(--brand-dark);
line-height:var(--lh-snug);
}
.tree-branch-q{
font-size:var(--fs-caption);
color:var(--fg-3);
font-weight:500;
}
/* Листья — конкретные методы */
.tree-leaves{
list-style:none; padding:0; margin:0;
display:flex; flex-direction:column;
}
.tree-leaf{
display:grid;
grid-template-columns:1fr auto;
gap:var(--s-3) var(--s-4);
padding:var(--s-2) 0;
align-items:center;
border-top:1px dashed var(--border-1);
position:relative;
padding-left:var(--s-5);
}
.tree-leaf::before{
content:"";
position:absolute;
left:0; top:50%; width:14px; height:2px;
background:var(--brand-tint-2);
}
.tree-leaf:first-child{ border-top:0 }
.tree-leaf-cond{
font-size:var(--fs-small);
color:var(--fg-1);
line-height:1.45;
}
.tree-leaf-cond .tree-leaf-warn{
display:block;
font-size:var(--fs-caption);
color:var(--fg-3);
margin-top:2px;
line-height:1.4;
}
.tree-leaf-method{
display:inline-flex; align-items:center; gap:6px;
font-weight:600;
color:var(--brand);
white-space:nowrap;
font-size:var(--fs-small);
text-decoration:none;
border-bottom:1px solid color-mix(in oklab, var(--brand) 35%, transparent);
padding:2px 0;
}
.tree-leaf-method:hover{ color:var(--brand-dark); border-bottom-color:var(--brand-dark) }
.tree-leaf-method::after{ content:"→"; font-weight:400 }
/* Цветовые оттенки веток — наследуют логику плиток */
.tree-branch[data-axis="full"] .tree-branch-name{ color:var(--brand-dark) }
.tree-branch[data-axis="cluster"] .tree-branch-name,
.tree-branch[data-axis="time"] .tree-branch-name,
.tree-branch[data-axis="staged"] .tree-branch-name{ color:var(--accent-blue-900) }
.tree-branch[data-axis="cluster"]::before,
.tree-branch[data-axis="time"]::before,
.tree-branch[data-axis="staged"]::before{ background:var(--accent-blue-300) }
.tree-branch[data-axis="invite"] .tree-branch-name{ color:var(--accent-yellow-900) }
.tree-branch[data-axis="invite"]::before{ background:var(--accent-yellow-300) }
.tree-branch[data-axis="none"] .tree-branch-name{ color:var(--accent-purple-900) }
.tree-branch[data-axis="none"]::before{ background:var(--accent-purple-300) }
.tree-branch[data-axis="other"] .tree-branch-name{ color:var(--accent-red-900) }
.tree-branch[data-axis="other"]::before{ background:var(--accent-red-300) }
@media (max-width:760px){
.tree-branch{ padding-left:var(--s-6) }
.tree-branch::before{ width:var(--s-4) }
.tree-leaf{ grid-template-columns:1fr }
.tree-leaf-method{ justify-self:start }
}
@media print{
.cheat-views{ display:none }
.cheat-view{ display:block !important }
.cheat-view + .cheat-view{ page-break-before:always }
}
/* ============================================================
v4.3 — двухрядный тулбар, сворачиваемые разделы,
унифицированный collapse для техник/принципов/сценариев
============================================================ */
/* ── Тулбар двухрядный ─────────────────────────────────── */
.toolbar{
padding:0 !important;
flex-direction:column !important;
align-items:stretch !important;
gap:0 !important;
}
.toolbar-row{
display:flex; align-items:center; gap:var(--s-3);
padding:var(--s-2) var(--s-6);
}
.toolbar-row.toolbar-main{
padding:var(--s-3) var(--s-6);
border-bottom:1px solid var(--border-1);
}
.toolbar-row.toolbar-crumb{
background:var(--bg-2);
padding:6px var(--s-6);
min-height:32px;
font-size:var(--fs-caption);
}
.toolbar-row.toolbar-crumb .tb-section{
margin:0;
padding:0;
max-width:none;
color:var(--fg-3);
display:flex;
align-items:center;
gap:6px;
flex-wrap:nowrap;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.toolbar-row.toolbar-crumb .tb-section:empty::before{
content:"Карта методов экспериментирования";
color:var(--fg-3);
font-weight:400;
}
/* ── Иконочные кнопки тулбара ──────────────────────────── */
.tb-icon{
background:transparent;
border:1px solid var(--border-1);
width:34px; height:34px;
display:inline-flex; align-items:center; justify-content:center;
cursor:pointer;
color:var(--fg-2);
flex-shrink:0;
font-family:inherit;
transition:background .12s, color .12s, border-color .12s;
}
.tb-icon:hover{
background:var(--bg-2);
color:var(--brand-dark);
border-color:var(--brand);
}
@media (max-width:640px){
.toolbar-row{ padding:var(--s-2) var(--s-4); gap:var(--s-2) }
.toolbar-row.toolbar-main{ flex-wrap:wrap }
.tb-search{ order:10; flex-basis:100% }
}
/* ── Сворачиваемые H2-секции ───────────────────────────── */
h2.h2-collapsible{
display:flex;
align-items:baseline;
gap:var(--s-3);
cursor:pointer;
user-select:none;
}
h2.h2-collapsible > .h2-text{ flex:1 1 auto }
h2.h2-collapsible > .h2-meta{
font-family:var(--font-body);
font-weight:400;
font-size:var(--fs-caption);
color:var(--fg-3);
text-transform:none;
letter-spacing:0;
}
h2.h2-collapsible > .h2-toggle{
background:transparent;
border:0;
cursor:pointer;
padding:6px 8px;
color:var(--brand-dark);
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
font-family:inherit;
}
h2.h2-collapsible > .h2-toggle svg{
transition:transform .18s ease;
}
h2.h2-collapsible.section-collapsed > .h2-toggle svg{
transform:rotate(-90deg);
}
h2.h2-collapsible.section-collapsed{
margin-bottom:var(--s-4);
}
h2.h2-collapsible:hover > .h2-text{ color:var(--brand) }
.section-body{ display:block }
.section-body.section-body-collapsed{ display:none }
/* ── Унификация: техники сворачиваемые как методы ──────── */
.tech-head{
display:grid !important;
grid-template-columns:1fr auto;
gap:var(--s-3) var(--s-4);
align-items:center;
}
.tech-head .tech-title{
font-family:var(--font-display-mixed);
font-weight:900;
font-size:var(--fs-h4);
color:var(--accent-purple-900);
line-height:var(--lh-snug);
min-width:0;
}
.tech-card.collapsed > .tech-row,
.tech-card.collapsed > .tech-stop,
/* ── Сценарии сворачиваемые ────────────────────────────── */
.scenario-title{
display:grid !important;
grid-template-columns:1fr auto;
gap:var(--s-3) var(--s-4);
align-items:center;
}
.scenario-title .scenario-title-text{
font-family:var(--font-display-mixed);
font-weight:900;
font-size:var(--fs-h4);
color:var(--accent-blue-900);
line-height:var(--lh-snug);
min-width:0;
}
.scenario.collapsed > .scenario-row,
/* ── Принципы сворачиваемые ────────────────────────────── */
.principle-head{
flex-wrap:nowrap;
gap:var(--s-4);
}
.principle-head .p-title{ flex:1 1 auto; min-width:0 }
.principle.collapsed > .p-thesis,
.principle.collapsed > .p-fail,
/* ── Согласование размеров шрифта между типами карточек ── */
.card-row, .tech-row, .scenario-row{
font-size:var(--fs-small);
line-height:1.5;
margin-bottom:var(--s-3);
}
.card-label, .tech-label, .scenario-label{
font-weight:600;
}
/* ── Кнопка toggle: чуть меньше в шапках техник/сценариев/принципов ── */
.tech-head .card-toggle,
.scenario-title .card-toggle,
/* ── Печать — всё развёрнуто ───────────────────────────── */
@media print{
h2.h2-collapsible.section-collapsed > .h2-toggle{ display:none }
.section-body, .section-body.section-body-collapsed{ display:revert !important }
.tech-card.collapsed > .tech-row,
.tech-card.collapsed > .tech-stop,
.scenario.collapsed > .scenario-row,
.principle.collapsed > .p-thesis,
.h2-toggle, .tb-icon{ display:none !important }
}
/* ============================================================
v4.4 — иконки тулбара с подписью, легенда сворачиваемая
============================================================ */
.tb-icon{
width:auto !important;
padding:0 var(--s-3);
height:34px;
gap:6px;
color:var(--fg-1);
}
.tb-icon-label{
font-size:var(--fs-caption);
font-weight:600;
letter-spacing:0;
text-transform:none;
font-family:inherit;
}
@media (max-width:760px){
.tb-icon-label{ display:none }
.tb-icon{ width:38px; padding:0 }
}
/* Mode-toggle no longer used — hide if it ever appears */
.mode-toggle{ display:none !important }
/* Legend as details */
details.legend-details{
margin:var(--s-5) 0 var(--s-8);
background:var(--bg-2);
border:1px solid var(--border-1);
}
details.legend-details > summary.legend-summary{
list-style:none;
cursor:pointer;
display:flex; align-items:center; gap:var(--s-3);
padding:var(--s-4) var(--s-6);
font-family:var(--font-display-mixed);
font-weight:900;
font-size:var(--fs-h5);
color:var(--brand-dark);
text-transform:none;
letter-spacing:0;
}
details.legend-details > summary.legend-summary::-webkit-details-marker{ display:none }
details.legend-details > summary.legend-summary::before{ content:none }
.legend-summary-icon{
display:inline-block;
transition:transform .18s ease;
color:var(--brand);
font-size:14px;
}
details.legend-details[open] > .legend-summary .legend-summary-icon,
details.legend-details[open] > summary.legend-summary .legend-summary-icon{
transform:rotate(90deg) !important;
}
.legend-summary-hint{
font-family:var(--font-body);
font-weight:400;
font-size:var(--fs-caption);
color:var(--fg-3);
margin-left:auto;
text-transform:none;
letter-spacing:0;
}
details.legend-details .legend{
margin:0;
border:0;
background:transparent;
box-shadow:none;
padding:0 var(--s-6) var(--s-5);
}
details.legend-details summary.legend-summary:hover{ color:var(--brand) }
/* ============================================================
v4.5 — Интерактивный селектор «Выбор метода»
============================================================ */
.selector-intro{
font-size:var(--fs-body);
color:var(--fg-2);
margin:var(--s-3) 0 var(--s-5);
line-height:1.55;
}
.selector-intro strong{ color:var(--fg-1) }
.selector{
display:grid;
grid-template-columns:minmax(320px, 380px) 1fr;
gap:var(--s-6);
margin:var(--s-3) 0 var(--s-6);
align-items:start;
}
@media (max-width:900px){
.selector{ grid-template-columns:1fr; gap:var(--s-5) }
}
.selector-questions{
display:flex; flex-direction:column; gap:var(--s-3);
}
.sq{
background:var(--bg-1);
border:1px solid var(--border-1);
padding:var(--s-4) var(--s-4);
}
.sq.advisory-q{
border-style:dashed;
border-color:var(--accent-yellow-700);
background:#FFFBE8;
}
.sq-head{
display:flex; align-items:baseline; gap:var(--s-2);
margin-bottom:var(--s-3);
}
.sq-num{
background:var(--brand); color:var(--white);
font-family:var(--font-display);
font-size:var(--fs-caption);
padding:2px 8px;
flex-shrink:0;
letter-spacing:0;
}
.advisory-q .sq-num{ background:var(--accent-yellow-700) }
.sq-title{
font-weight:700;
color:var(--fg-1);
font-size:var(--fs-small);
line-height:1.25;
}
.sq-hint{
font-size:var(--fs-caption);
color:var(--fg-3);
font-weight:400;
margin-left:6px;
}
.sq-opts{
display:flex; flex-wrap:wrap; gap:5px;
}
.sq-opt{
background:var(--bg-2);
border:1px solid var(--border-1);
padding:5px 10px;
font-size:var(--fs-caption);
font-family:inherit;
color:var(--fg-1);
cursor:pointer;
line-height:1.3;
transition:background .12s, border-color .12s, color .12s;
}
.sq-opt:hover{
border-color:var(--brand);
color:var(--brand-dark);
}
.sq-opt.active{
background:var(--brand-dark);
color:var(--white);
border-color:var(--brand-dark);
font-weight:600;
}
.advisory-q .sq-opt.active{
background:var(--accent-yellow-700);
border-color:var(--accent-yellow-700);
}
.sq-reset-row{
display:flex; align-items:center; gap:var(--s-3);
margin-top:var(--s-2);
}
.sq-reset{
background:transparent;
border:1px solid var(--border-2);
color:var(--fg-2);
padding:6px 14px;
font-size:var(--fs-caption);
font-family:inherit;
cursor:pointer;
font-weight:500;
}
.sq-reset:hover{ color:var(--fg-1); border-color:var(--brand) }
.sq-reset:disabled{ opacity:.4; cursor:default }
.sq-reset-hint{
font-size:var(--fs-caption);
color:var(--fg-3);
}
/* RESULTS column */
.selector-results{
background:var(--bg-2);
border:1px solid var(--border-1);
padding:var(--s-5);
position:sticky;
top:96px;
align-self:start;
max-height:calc(100vh - 120px);
overflow-y:auto;
}
@media (max-width:900px){
.selector-results{ position:static; max-height:none; overflow:visible }
}
.results-summary{
display:flex; align-items:baseline; gap:var(--s-3);
margin:0 0 var(--s-4);
padding-bottom:var(--s-3);
border-bottom:2px solid var(--brand);
flex-wrap:wrap;
}
.results-count{
font-family:var(--font-display);
font-size:24px;
color:var(--brand-dark);
line-height:1;
letter-spacing:0;
}
.results-of{
font-size:var(--fs-small);
color:var(--fg-3);
}
.results-hint{
font-size:var(--fs-caption);
color:var(--fg-3);
margin-left:auto;
}
.candidates{
list-style:none; padding:0; margin:0;
display:flex; flex-direction:column; gap:var(--s-3);
}
.candidate{
background:var(--bg-1);
border:1px solid var(--border-1);
border-left:4px solid var(--brand);
padding:var(--s-3) var(--s-4);
transition:transform .12s ease, box-shadow .12s ease;
}
.candidate:hover{ transform:translateX(2px); box-shadow:var(--shadow-2) }
.candidate-link{
display:block;
color:inherit;
text-decoration:none;
border:0 !important;
}
.candidate-head{
display:flex; align-items:baseline; gap:var(--s-2);
margin-bottom:6px;
flex-wrap:wrap;
}
.candidate-num{
font-family:var(--font-display);
font-size:11px;
color:var(--brand);
background:var(--bg-2);
padding:1px 6px;
flex-shrink:0;
letter-spacing:0;
}
.candidate-name{
font-weight:700;
color:var(--brand-dark);
flex:1 1 auto;
font-size:var(--fs-small);
line-height:1.25;
min-width:0;
}
.candidate-stars{
color:var(--brand);
font-size:11px;
font-weight:700;
letter-spacing:1px;
white-space:nowrap;
flex-shrink:0;
}
.candidate-note{
font-size:var(--fs-caption);
color:var(--fg-2);
line-height:1.45;
margin:0 0 6px;
}
.candidate-tags{
display:flex; flex-wrap:wrap; gap:4px;
}
.ctag{
font-size:11px;
padding:2px 7px;
background:#E6F4F1;
color:var(--brand-dark);
white-space:nowrap;
font-weight:500;
}
.ctag::before{ content:"✓ "; color:var(--brand) }
.results-empty{
font-size:var(--fs-small);
color:var(--fg-3);
line-height:1.5;
padding:var(--s-3) 0;
text-align:center;
font-style:italic;
}
.advisory{
background:#FEF7E0;
border-left:3px solid var(--accent-yellow-700);
padding:var(--s-3) var(--s-4);
margin:var(--s-3) 0 0;
font-size:var(--fs-caption);
color:#5E5306;
line-height:1.5;
}
.advisory strong{ color:var(--accent-yellow-900) }
.rejected{
margin-top:var(--s-5);
padding-top:var(--s-3);
border-top:1px dashed var(--border-2);
}
.rejected > summary{
cursor:pointer;
color:var(--fg-3);
font-size:var(--fs-caption);
font-weight:600;
list-style:none;
text-transform:none;
letter-spacing:0;
padding:6px 0;
user-select:none;
}
.rejected > summary::-webkit-details-marker{ display:none }
.rejected > summary::before{ content:"▸ "; color:var(--fg-3); font-weight:400 }
.rejected[open] > summary::before{ content:"▾ " }
.rejected > summary:hover{ color:var(--fg-1) }
.rejected ul{
list-style:none;
padding:0; margin:var(--s-2) 0 0;
}
.reject{
font-size:var(--fs-caption);
color:var(--fg-3);
line-height:1.4;
padding:5px 0;
border-top:1px dashed var(--border-1);
}
.reject:first-child{ border-top:0 }
.reject a{
color:var(--fg-2);
font-weight:600;
border-bottom:none;
}
.reject a:hover{ color:var(--brand) }
.reject-reason{
display:block;
color:var(--fg-3);
font-size:11px;
margin-top:1px;
}
@media print{
.selector-results{ position:static; max-height:none; overflow:visible }
.rejected{ display:none }
}
/* ============================================================
v4.6 — слияние селектора с карточками
============================================================ */
.selector-questions{
position:sticky;
top:96px;
max-height:calc(100vh - 130px);
overflow-y:auto;
padding-right:6px;
align-self:start;
}
.selector-results{
position:static !important;
max-height:none !important;
overflow:visible !important;
background:transparent !important;
border:0 !important;
padding:0 !important;
}
.results-summary{
position:sticky;
top:96px;
z-index:3;
background:var(--bg-1);
margin:0;
padding:var(--s-3) var(--s-4);
border:1px solid var(--border-1);
border-bottom:2px solid var(--brand);
}
.results-summary .results-hint{
font-size:var(--fs-caption);
}
.advisory{
margin-top:var(--s-3);
}
#candidates-stream{
display:flex; flex-direction:column;
gap:var(--s-5);
margin-top:var(--s-5);
}
#candidates-stream .card,
#candidates-stream details.legend-details{
margin-top:0; /* selector controls spacing via gap */
}
/* Hide card when filtered out */
.card.selector-hidden{ display:none !important }
/* Match-criteria tags on each visible card */
.candidate-tags{
display:flex; flex-wrap:wrap; gap:4px;
margin:0 0 var(--s-2);
padding:0;
}
.ctag{
font-size:11px;
padding:2px 7px;
background:#E6F4F1;
color:var(--brand-dark);
white-space:nowrap;
font-weight:500;
letter-spacing:0;
text-transform:none;
}
.ctag::before{ content:"✓ "; color:var(--brand) }
@media (max-width:900px){
.selector-questions{
position:static; max-height:none; overflow:visible;
}
.results-summary{ position:static }
}
/* ============================================================
v5 — Табы и контентные секции
============================================================ */
/* ── Body / page baseline reset ─────────────────────────── */
body{
background:var(--bg-2);
margin:0;
padding:0;
}
/* ── Site header ────────────────────────────────────────── */
.site-header{
background:var(--bg-1);
border-bottom:1px solid var(--border-1);
padding:var(--s-8) var(--s-8) 0;
max-width:1200px;
margin:0 auto;
}
.site-h1{
font-family:var(--font-display);
font-weight:900;
font-size:var(--fs-h1);
text-transform:uppercase;
letter-spacing:var(--tracking-display);
line-height:var(--lh-tight);
color:var(--brand-dark);
margin:0 0 var(--s-3);
padding-bottom:0;
border-bottom:0;
}
.site-hook{
font-family:var(--font-display-mixed);
font-weight:200;
font-style:italic;
font-size:var(--fs-h4);
color:var(--fg-2);
line-height:var(--lh-snug);
margin:0 0 var(--s-6);
max-width:780px;
}
/* ── Site tabs ──────────────────────────────────────────── */
.site-tabs{
display:flex;
gap:0;
border-bottom:1px solid var(--border-1);
margin-top:var(--s-4);
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
}
.tab-link{
display:inline-flex;
align-items:baseline;
gap:8px;
padding:var(--s-4) var(--s-5);
font-family:inherit;
color:var(--fg-2);
border-bottom:3px solid transparent;
margin-bottom:-1px;
text-decoration:none !important;
border:0 !important;
border-bottom:3px solid transparent !important;
white-space:nowrap;
transition:color .12s ease, border-color .12s ease, background .12s ease;
position:relative;
}
.tab-link::after{ content:none !important }
.tab-link:hover{
color:var(--brand-dark);
background:var(--bg-2);
}
.tab-link.active{
color:var(--brand-dark);
border-bottom-color:var(--brand) !important;
background:var(--bg-2);
}
.tab-num{
font-family:var(--font-display);
font-size:var(--fs-caption);
color:var(--fg-3);
letter-spacing:0;
font-weight:900;
}
.tab-link.active .tab-num{ color:var(--brand) }
.tab-name{
font-family:var(--font-body);
font-size:var(--fs-small);
font-weight:600;
letter-spacing:0;
text-transform:none;
}
/* Phase separators (subtle) */
.tab-link[data-tab="pitfalls"]::before,
.tab-link[data-tab="theory"]::before{
content:"";
position:absolute;
left:0; top:25%; bottom:25%;
width:1px;
background:var(--border-1);
}
@media (max-width:760px){
.site-header{ padding:var(--s-5) var(--s-5) 0 }
.site-h1{ font-size:28px }
.site-hook{ font-size:var(--fs-small) }
.tab-link{ padding:var(--s-3) var(--s-4) }
}
/* ── Main + Tab panes ───────────────────────────────────── */
.site-main{
max-width:1200px;
margin:0 auto;
padding:0;
background:transparent;
}
.tab-pane{
background:var(--bg-1);
padding:var(--s-8) var(--s-8) var(--s-16);
min-height:60vh;
}
.tab-pane[hidden]{ display:none }
@media (max-width:760px){
.tab-pane{ padding:var(--s-5) var(--s-5) var(--s-10) }
}
/* ── Tab header (per-tab) ───────────────────────────────── */
.tab-header{
margin-bottom:var(--s-6);
padding-bottom:var(--s-4);
border-bottom:2px solid var(--brand);
}
.tab-header-main{
display:flex; align-items:baseline; gap:var(--s-3);
}
.tab-header-num{
font-family:var(--font-display);
font-size:var(--fs-h4);
color:var(--brand);
letter-spacing:0;
}
.tab-header-title{
font-family:var(--font-display);
font-weight:900;
font-size:var(--fs-h2);
text-transform:uppercase;
letter-spacing:var(--tracking-display);
line-height:var(--lh-tight);
color:var(--brand-dark);
margin:0;
padding:0;
border:0;
flex:1 1 auto;
min-width:0;
}
.tab-info-btn{
background:transparent;
border:1px solid var(--border-2);
width:28px; height:28px;
border-radius:50%;
cursor:pointer;
color:var(--brand);
font-family:inherit;
font-size:14px;
font-weight:700;
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
line-height:1;
padding:0;
transition:background .12s, color .12s, border-color .12s;
}
.tab-info-btn:hover,
.tab-info-btn[aria-expanded="true"]{
background:var(--brand);
color:var(--white);
border-color:var(--brand);
}
.tab-intro{
margin-top:var(--s-4);
padding:var(--s-3) var(--s-4);
background:var(--bg-2);
border-left:3px solid var(--brand);
font-size:var(--fs-small);
color:var(--fg-1);
line-height:1.55;
max-width:880px;
}
.tab-intro[hidden]{ display:none }
/* ── Внутрисекционные H3 (под-заголовки внутри таба) ───── */
.tab-section-h{
font-family:var(--font-display);
font-weight:900;
font-size:var(--fs-h3);
text-transform:uppercase;
letter-spacing:var(--tracking-display);
color:var(--brand-dark);
margin:var(--s-10) 0 var(--s-5);
padding-bottom:var(--s-2);
border-bottom:1px solid var(--border-1);
}
.tab-section-h:first-child{ margin-top:0 }
/* ── Timeline detail (для табы Теория) ──────────────────── */
.timeline-details{
background:var(--bg-2);
border:1px solid var(--border-1);
padding:var(--s-4) var(--s-5);
}
.timeline-details > summary{
font-family:var(--font-display-mixed);
font-weight:700;
color:var(--brand-dark);
font-size:var(--fs-small);
text-transform:none;
letter-spacing:0;
cursor:pointer;
list-style:none;
}
.timeline-details > summary::-webkit-details-marker{ display:none }
.timeline-details > summary::before{ content:"▸ "; color:var(--brand); font-weight:400 }
.timeline-details[open] > summary::before{ content:"▾ " }
.timeline{ margin-top:var(--s-4) }
.tl-row{
display:grid;
grid-template-columns:90px 1fr;
gap:var(--s-4);
padding:var(--s-3) 0;
border-bottom:1px dashed var(--border-1);
font-size:var(--fs-small);
line-height:1.55;
}
.tl-row:last-child{ border-bottom:none }
.tl-year{
font-family:var(--font-display);
font-weight:900;
color:var(--brand);
font-size:var(--fs-h5);
letter-spacing:0;
}
.tl-event strong{ color:var(--brand-dark) }
@media (max-width:760px){
.tl-row{ grid-template-columns:1fr; gap:var(--s-1) }
}
/* ── Глоссарий: чипы-фильтры ────────────────────────────── */
.gloss-filter{
display:flex; flex-wrap:wrap; gap:6px;
margin:0 0 var(--s-5);
padding:var(--s-3);
background:var(--bg-2);
border:1px solid var(--border-1);
position:sticky;
top:0;
z-index:5;
}
.gloss-chip{
background:var(--bg-1);
border:1px solid var(--border-1);
color:var(--fg-1);
font-family:inherit;
font-size:var(--fs-caption);
padding:5px 12px;
cursor:pointer;
transition:background .12s, color .12s, border-color .12s;
}
.gloss-chip:hover{
border-color:var(--brand);
color:var(--brand-dark);
}
.gloss-chip.active{
background:var(--brand-dark);
color:var(--white);
border-color:var(--brand-dark);
font-weight:600;
}
.gloss-chip-count{
opacity:.7;
font-weight:400;
margin-left:4px;
}
.gloss-section{ display:block }
.gloss-section.hidden{ display:none }
.gloss-section > .gloss-section-h{
font-family:var(--font-display);
font-weight:900;
font-size:var(--fs-h4);
text-transform:uppercase;
letter-spacing:var(--tracking-display);
color:var(--brand-dark);
margin:var(--s-6) 0 var(--s-4);
padding-bottom:var(--s-2);
border-bottom:1px solid var(--border-1);
}
/* Force all glossary to render as plain sections in v5 */
.tab-pane[data-tab="ref"] details.gloss-cat{
margin:0;
background:transparent;
border:0;
padding:0;
}
.tab-pane[data-tab="ref"] details.gloss-cat > summary{
display:none;
}
/* ── Опорные источники: дать заголовку «Опорные источники» больший воздух ── */
.tab-pane[data-tab="ref"] .src-grid{
margin-bottom:var(--s-3);
}
/* ── Drop legacy elements ───────────────────────────────── */
.toolbar, .tb-progress, .fab-top, .h2-toggle{ display:none !important }
.section-body{ display:block !important }
.section-body-collapsed{ display:block !important }
h2.h2-collapsible{
display:block !important;
cursor:default !important;
padding-bottom:var(--s-3);
}
h2.h2-collapsible > .h2-text{ display:contents !important }
/* ── Selector inside tab-method: tweak sticky offsets ──── */
.selector-questions, .results-summary{ top: 8px !important }
/* ── Print ──────────────────────────────────────────────── */
@media print{
.site-tabs, .no-print, .tab-info-btn{ display:none !important }
.tab-pane{ display:block !important; page-break-before:always; padding:0; min-height:0 }
.tab-pane:first-child{ page-break-before:auto }
.tab-intro{ display:block !important }
}
/* ============================================================
v5.1 — Унификация: компактная шапка, единая цветовая логика
============================================================ */
/* ── Site header (compact, sticky) ──────────────────────── */
.site-header{
background:var(--bg-1);
border-bottom:1px solid var(--border-1);
padding:0;
max-width:none;
margin:0;
position:sticky;
top:0;
z-index:30;
display:flex;
align-items:stretch;
box-shadow:var(--shadow-1);
}
.site-brand{
display:flex; align-items:center; gap:var(--s-3);
padding:0 var(--s-5);
border-right:1px solid var(--border-1);
flex-shrink:0;
}
.site-brand-logo{
display:inline-flex;
align-items:center;
text-decoration:none !important;
border:0 !important;
padding:4px 0;
}
.site-brand-logo::after{ content:none !important }
.site-brand-logo-img{
display:block;
height:28px;
width:auto;
max-width:140px;
}
.site-brand-logo:hover .site-brand-logo-img{ opacity:.8 }
.site-brand-mark{
font-family:var(--font-display);
font-weight:900;
font-size:14px;
color:var(--white);
background:var(--brand-dark);
padding:4px 8px;
letter-spacing:1px;
}
.site-brand-name{ display:none }
@media (max-width:760px){
.site-brand{ padding:0 var(--s-3); gap:8px }
.site-brand-logo{ font-size:10px }
}
/* Override site-h1 and site-hook in old positions */
.site-h1{ display:none !important }
.site-header > .site-hook{ display:none !important }
/* ── Tabs: fit without scroll ───────────────────────────── */
.site-tabs{
display:flex;
flex:1 1 auto;
border-bottom:0;
margin-top:0;
overflow-x:visible;
flex-wrap:nowrap;
}
.tab-link{
padding:14px 14px;
border-bottom:3px solid transparent !important;
}
.tab-link.active{
background:transparent;
border-bottom-color:var(--brand) !important;
}
.tab-link:hover{ background:var(--bg-2) }
.tab-num{
font-family:var(--font-display);
font-size:11px;
letter-spacing:0;
}
.tab-name{
font-size:var(--fs-small);
}
.tab-link[data-tab="pitfalls"]::before,
.tab-link[data-tab="theory"]::before{
top:30%; bottom:30%;
}
@media (max-width:760px){
.tab-link{ padding:10px 8px }
.tab-name{ font-size:var(--fs-caption) }
}
/* ── Tab hook (only on method tab, above selector) ──────── */
.tab-hook{
font-family:var(--font-display-mixed);
font-weight:200;
font-style:italic;
font-size:var(--fs-h5);
color:var(--fg-2);
line-height:var(--lh-snug);
margin:0 0 var(--s-5);
max-width:760px;
border-left:3px solid var(--brand);
padding:6px 0 6px var(--s-4);
}
/* ── Main: max-width holds at 1200, but page is full-bleed now ── */
.site-main{ max-width:1200px; margin:0 auto }
.tab-pane{ padding:var(--s-6) var(--s-8) var(--s-12) }
@media (max-width:760px){
.tab-pane{ padding:var(--s-5) var(--s-5) var(--s-10) }
}
/* ── Tab header: единый формат ──────────────────────────── */
.tab-header{
margin-bottom:var(--s-5);
padding-bottom:var(--s-3);
border-bottom:1px solid var(--border-1);
}
.tab-header-main{ align-items:center }
.tab-header-num{
font-size:18px;
color:var(--brand);
}
.tab-header-title{
font-size:24px;
}
.tab-intro{
font-size:var(--fs-small);
background:transparent;
border-left:0;
padding:var(--s-3) 0 0;
margin-top:var(--s-2);
color:var(--fg-2);
}
/* ── ЦВЕТОВАЯ УНИФИКАЦИЯ: всё тиловое ──────────────────── */
/* Tech cards (Корректировки) — переводим в тил */
.tech-card{
background:var(--bg-1) !important;
padding-left:calc(var(--s-6) + 6px);
}
.tech-card::before{
background:var(--brand) !important;
}
.tech-head{
color:var(--brand-dark) !important;
border-bottom-color:var(--brand) !important;
}
.tech-head .tech-title{
color:var(--brand-dark) !important;
}
.card-kicker-tech .card-kicker-num{ background:var(--brand) !important }
.card-kicker-tech .card-kicker-type{ color:var(--brand) !important }
/* Scenarios — переводим в тил */
.scenario::before{
background:var(--brand) !important;
}
.scenario-title{
color:var(--brand-dark) !important;
border-bottom-color:var(--brand) !important;
}
.scenario-title .scenario-title-text{
color:var(--brand-dark) !important;
}
.card-kicker-scenario .card-kicker-num{ background:var(--brand) !important }
.card-kicker-scenario .card-kicker-type{ color:var(--brand) !important }
/* ── Антипаттерны: переверстаем визуально как красные карточки ── */
.anti{
background:var(--bg-1);
border:1px solid var(--border-1);
border-left:4px solid var(--accent-red-700);
padding:var(--s-4) var(--s-5);
margin-bottom:var(--s-3);
font-size:var(--fs-small);
line-height:1.5;
position:relative;
padding-left:calc(var(--s-5) + 6px);
}
.anti::before{
content:"АНТИПАТТЕРН";
position:relative;
display:inline-block;
background:var(--accent-red-700);
color:var(--white);
padding:2px 8px;
font-family:var(--font-display);
font-size:10px;
letter-spacing:0;
margin-bottom:8px;
margin-right:auto;
}
.anti-bad{
color:var(--accent-red-900);
font-weight:700;
font-size:var(--fs-body);
margin-bottom:var(--s-2);
display:block;
}
.anti-good{
color:var(--fg-1);
font-size:var(--fs-small);
}
.anti-good strong{ color:var(--brand-dark) }
/* ── Источники путаницы: тиловые карточки ────────────── */
.confuse{
background:var(--bg-1);
border:1px solid var(--border-1);
border-left:4px solid var(--brand);
padding:var(--s-4) var(--s-5);
margin-bottom:var(--s-3);
position:relative;
padding-left:calc(var(--s-5) + 6px);
}
.confuse::before{
content:"ПУТАНИЦА";
display:inline-block;
background:var(--brand);
color:var(--white);
padding:2px 8px;
font-family:var(--font-display);
font-size:10px;
letter-spacing:0;
margin-bottom:8px;
}
.confuse-title{
font-family:var(--font-display-mixed);
font-weight:900;
color:var(--brand-dark);
font-size:var(--fs-h5);
margin:0 0 var(--s-2);
}
/* ── Tab intro unification: жирная зачинная фраза ──────── */
.tab-intro strong:first-child{ color:var(--fg-1) }
.tab-intro{ max-width:880px }
/* ── Tab pane background nicer ─────────────────────────── */
body{ background:var(--bg-2) }
.tab-pane{ background:var(--bg-1); margin-bottom:0 }
/* ── Drop the legacy h1/hook in header ─────────────────── */
.site-header > .site-h1, .site-header > .site-hook{ display:none !important }
/* ── ⓘ кнопка: подкрутить размер ────────────────────────── */
.tab-info-btn{ font-size:13px; width:24px; height:24px }
/* ============================================================
v5.2 — Горизонтальный селектор + sub-filter + унификация Подробно
============================================================ */
/* ── Селектор: горизонтальный — фильтр сверху, карточки снизу ─ */
.selector{
display:block !important;
margin:0 0 var(--s-5) !important;
}
.selector-questions{
position:static !important;
max-height:none !important;
overflow:visible !important;
padding:0 !important;
margin:0 0 var(--s-4) !important;
background:var(--bg-2);
border:1px solid var(--border-1);
border-radius:0;
}
.selector-questions > .sq{
background:transparent !important;
border:0 !important;
border-top:1px solid var(--border-1) !important;
padding:var(--s-3) var(--s-4) !important;
display:grid !important;
grid-template-columns:auto minmax(220px, 1fr) 1fr !important;
gap:var(--s-3) var(--s-4) !important;
align-items:center;
}
.selector-questions > .sq:first-child{ border-top:0 !important }
.sq.advisory-q{
background:#FFFBE8 !important;
border-style:solid !important;
}
.sq-head{
display:flex !important; align-items:center !important; gap:8px !important;
margin-bottom:0 !important;
}
.sq-num{
font-family:var(--font-display);
background:var(--brand-dark);
color:var(--white);
padding:3px 8px;
letter-spacing:0;
font-size:11px;
}
.advisory-q .sq-num{ background:var(--accent-yellow-700) }
.sq-title{
font-weight:600;
color:var(--fg-1);
font-size:var(--fs-small);
white-space:nowrap;
}
.sq-hint{
font-size:11px;
color:var(--fg-3);
font-weight:400;
}
.sq-opts{
display:flex; flex-wrap:wrap;
gap:4px;
grid-column:3;
justify-self:end;
}
.sq-opt{
background:var(--bg-1);
border:1px solid var(--border-1);
padding:4px 10px;
font-size:var(--fs-caption);
font-family:inherit;
color:var(--fg-1);
cursor:pointer;
line-height:1.3;
transition:background .12s, border-color .12s, color .12s;
}
.sq-opt:hover{
border-color:var(--brand);
color:var(--brand-dark);
}
.sq-opt.active{
background:var(--brand-dark);
color:var(--white);
border-color:var(--brand-dark);
font-weight:600;
}
.advisory-q .sq-opt.active{
background:var(--accent-yellow-700);
border-color:var(--accent-yellow-700);
}
@media (max-width:760px){
.selector-questions > .sq{
grid-template-columns:1fr !important;
gap:8px !important;
}
.sq-opts{
grid-column:1;
justify-self:start;
}
}
/* ── Reset bar row — sticky horizontal under filter ─────── */
.sq-reset-row{
display:flex; align-items:center; gap:var(--s-3);
padding:8px var(--s-4);
background:var(--bg-2);
border:1px solid var(--border-1);
border-top:0;
margin-top:0;
}
.sq-reset{ font-size:11px; padding:4px 10px }
/* ── Results stream — full width ───────────────────────── */
.selector-results{
display:block !important;
background:transparent !important;
padding:0 !important;
margin:0 !important;
}
.results-summary{
position:sticky !important;
top:50px !important;
background:var(--bg-1) !important;
border:1px solid var(--border-1) !important;
border-bottom:2px solid var(--brand) !important;
padding:var(--s-3) var(--s-4) !important;
z-index:5;
display:flex; align-items:baseline; gap:var(--s-3); flex-wrap:wrap;
}
.results-count{
font-family:var(--font-display);
font-size:22px;
color:var(--brand-dark);
line-height:1;
}
.results-of, .results-hint{
font-size:var(--fs-caption);
color:var(--fg-3);
}
#candidates-stream{
margin-top:var(--s-4);
display:block;
}
#candidates-stream > * + *{ margin-top:var(--s-4) }
/* ── Sub-filter chips (Протокол / Принципы) ────────────── */
.sub-filter{
display:flex; flex-wrap:wrap; gap:6px;
margin:0 0 var(--s-5);
padding:var(--s-3);
background:var(--bg-2);
border:1px solid var(--border-1);
position:sticky;
top:50px;
z-index:5;
}
.sub-chip{
background:var(--bg-1);
border:1px solid var(--border-1);
color:var(--fg-1);
font-family:inherit;
font-size:var(--fs-caption);
padding:5px 12px;
cursor:pointer;
transition:background .12s, color .12s, border-color .12s;
}
.sub-chip:hover{
border-color:var(--brand);
color:var(--brand-dark);
}
.sub-chip.active{
background:var(--brand-dark);
color:var(--white);
border-color:var(--brand-dark);
font-weight:600;
}
.sub-section{ display:block }
.sub-section.hidden{ display:none }
/* ── Унификация Подробно: одинаковые стили для всех развёрток ── */
.card details, .tech-card details, .scenario details, .principle details{
margin-top:var(--s-4);
border-top:1px dashed var(--border-1);
padding-top:var(--s-3);
}
.card details > summary,
.tech-card details > summary,
.scenario details > summary,
.principle details > summary{
color:var(--brand-dark);
font-weight:600;
font-size:var(--fs-caption);
letter-spacing:0;
text-transform:none;
cursor:pointer;
list-style:none;
padding:4px 0;
}
.card details > summary::-webkit-details-marker,
.tech-card details > summary::-webkit-details-marker,
.scenario details > summary::-webkit-details-marker,
.principle details > summary::-webkit-details-marker{ display:none }
.card details > summary::before,
.tech-card details > summary::before,
.scenario details > summary::before,
.principle details > summary::before{
content:"▸ "; color:var(--brand); font-weight:400;
}
.card details[open] > summary::before,
.tech-card details[open] > summary::before,
.scenario details[open] > summary::before,
.principle details[open] > summary::before{
content:"▾ ";
}
.card details > summary:hover,
.tech-card details > summary:hover,
.scenario details > summary:hover,
.principle details > summary:hover{ color:var(--brand) }
/* All explain/cut blocks same look */
.card details .explain, .tech-card details .explain,
.card details .cut-content, .principle details .cut-content{
background:var(--bg-2);
border:0;
border-left:3px solid var(--brand-tint-1);
padding:var(--s-3) var(--s-4);
margin-top:var(--s-2);
font-size:var(--fs-small);
color:var(--fg-1);
line-height:1.55;
}
.explain-row{
display:grid;
grid-template-columns:160px 1fr;
gap:var(--s-2) var(--s-3);
margin-bottom:var(--s-3);
}
.explain-row:last-child{ margin-bottom:0 }
.explain-label{
font-weight:600 !important;
color:var(--brand-dark) !important;
font-size:var(--fs-caption) !important;
text-transform:none !important;
letter-spacing:0 !important;
}
@media (max-width:760px){
.explain-row{ grid-template-columns:1fr; gap:4px }
}
/* ── Single-name "Подробно" — replace varying summary text via CSS data attr trick is hard,
but we'll do it via JS in next step. CSS for now just unifies appearance. ── */
/* ============================================================
v5.3 — Финальная унификация: толщина рисок, номера антипаттернов
и путаниц, единое Подробно
============================================================ */
/* Принципы: 6px → 4px риска (rules above set border-left for legacy reasons; left stripe now lives in ::before like other cards) */
/* Унифицируем «Подробно» внутри принципов — убираем голубую полосу cut-content */
.principle details .cut-content{
background:var(--bg-2);
border:0;
border-left:3px solid var(--brand-tint-1);
padding:var(--s-3) var(--s-4);
margin-top:var(--s-2);
font-size:var(--fs-small);
color:var(--fg-1);
line-height:1.55;
}
/* Антипаттерны: показываем номер в кикере через ::before, дублирующий data-attr */
.anti{
border-left:4px solid var(--accent-red-700) !important;
}
.anti::before{
content:attr(data-anti-num) " АНТИПАТТЕРН";
display:inline-block;
background:var(--accent-red-700);
color:var(--white);
padding:2px 8px;
font-family:var(--font-display);
font-size:10px;
letter-spacing:.5px;
margin-bottom:8px;
}
/* Путаницы: номер в кикере */
.confuse{
border-left:4px solid var(--brand) !important;
}
.confuse::before{
content:attr(data-confuse-num) " ПУТАНИЦА";
display:inline-block;
background:var(--brand);
color:var(--white);
padding:2px 8px;
font-family:var(--font-display);
font-size:10px;
letter-spacing:.5px;
margin-bottom:8px;
}
/* ── Единый кикер для всех типов: жирность шрифта */
.card-kicker-num{
font-weight:900;
letter-spacing:.5px;}
/* ============================================================
v5.4 — Финальная унификация всех типов карточек
============================================================ */
/* ── Базовый .card гарантированно сворачивается через .collapsed ── */
.card.collapsed > .card-row,
.card.collapsed > .card-stop,
.card.collapsed > details,
.card.collapsed > .card-related,
.card.collapsed > .formula,
/* ── ANTI-CARDS: красная риска и кикер ──────────────────── */
.card.anti-card::before{ background:var(--accent-red-700) }
.card-kicker-anti .card-kicker-num{ background:var(--accent-red-700) }
.card-kicker-anti .card-kicker-type{ color:var(--accent-red-700) }
.card.anti-card .card-title{ color:var(--accent-red-900) }
/* ── CONFUSE-CARDS: тил, как обычные ────────────────────── */
.card.confuse-card::before{ background:var(--brand) }
/* ── PROTO-CARDS (фазы) ─────────────────────────────────── */
.card.proto-card{ background:var(--bg-3) }
.card.proto-card::before{ background:var(--brand) }
.card-kicker-proto .card-kicker-num{ background:var(--brand-dark) }
.card-kicker-proto .card-kicker-type{ color:var(--brand-dark) }
.card.proto-card .proto-row{
display:grid; grid-template-columns:32px 1fr; gap:var(--s-3);
font-size:var(--fs-small); color:var(--fg-1); line-height:1.55;
margin-bottom:var(--s-3);
}
.card.proto-card .proto-num{
font-family:var(--font-display); font-weight:900; color:var(--brand);
background:var(--white); text-align:center; width:28px; height:28px;
line-height:28px; font-size:var(--fs-small); flex-shrink:0;
}
/* ── FORMULA-CARDS ──────────────────────────────────────── */
.card.formula-card::before{ background:var(--brand) }
.card-kicker-formula .card-kicker-num{ background:var(--brand-dark) }
.card-kicker-formula .card-kicker-type{ color:var(--brand-dark) }
.card.formula-card .formula{ margin-top:0; margin-bottom:var(--s-3) }
.card.formula-card .formula-row{
display:grid; grid-template-columns:120px 1fr;
gap:var(--s-3); font-size:var(--fs-small);
color:var(--fg-1); line-height:1.55; margin-top:var(--s-3);
}
.card.formula-card .formula-label{
font-weight:600 !important;
color:var(--brand-dark) !important;
font-size:var(--fs-caption) !important;
text-transform:none !important;
letter-spacing:0 !important;
}
.card.formula-card.collapsed > .formula,
@media (max-width:760px){
.card.formula-card .formula-row{ grid-template-columns:1fr; gap:4px }
}
/* ── PRINCIPLES: kicker всегда сверху, как у методов ────── */
.principle .card-kicker{
margin-bottom:var(--s-3);
}
/* ── GLOSSARY TERMS как мини-карточки ───────────────────── */
.gloss-grid{ column-count:auto !important; display:grid !important; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)) !important; gap:var(--s-3) !important }
.gloss-term{
display:block !important;
background:var(--bg-1);
border:1px solid var(--border-1);
border-left:3px solid var(--brand);
padding:var(--s-3) var(--s-4);
margin:0 !important;
font-size:var(--fs-small);
line-height:1.5;
position:relative;
break-inside:avoid;
}
.gloss-term::before{
content:"ТЕРМИН";
display:inline-block;
background:var(--brand);
color:var(--white);
padding:1px 6px;
font-family:var(--font-display);
font-size:9px;
letter-spacing:.5px;
margin-bottom:6px;
}
.gloss-term strong{
display:block;
color:var(--brand-dark);
font-size:var(--fs-body);
margin-bottom:4px;
}
.gloss-term em{
display:block;
margin-top:6px;
padding-top:6px;
border-top:1px dashed var(--border-1);
color:var(--fg-3);
font-style:italic;
font-size:var(--fs-caption);
}
/* ── SOURCES как мини-карточки тоже ─────────────────────── */
.src-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
gap:var(--s-3);
margin-top:var(--s-4);
}
.src{
background:var(--bg-1) !important;
border:1px solid var(--border-1) !important;
border-left:3px solid var(--brand) !important;
padding:var(--s-3) var(--s-4) !important;
position:relative;
}
.src::before{
content:"ИСТОЧНИКИ";
display:inline-block;
background:var(--brand);
color:var(--white);
padding:1px 6px;
font-family:var(--font-display);
font-size:9px;
letter-spacing:.5px;
margin-bottom:6px;
}
.src-h{
display:block !important;
font-family:var(--font-display-mixed) !important;
font-weight:900 !important;
font-size:var(--fs-small) !important;
color:var(--brand-dark) !important;
text-transform:none !important;
letter-spacing:0 !important;
margin-bottom:6px !important;
}
/* ── Принципы: единый стиль с другими карточками ────────── */
.principle{
position:relative;
}
.principle::before{
content:"";
position:absolute;
left:0; top:0; bottom:0;
width:4px;
background:var(--brand);
}
.principle{ padding-left:calc(var(--s-6) + 6px) }
/* ── Толщина кикер-чипа единая ──────────────────────────── */
.card-kicker-num{
padding:0 8px !important;
height:30px !important;
min-width:30px !important;
font-size:11px !important;
letter-spacing:.5px !important;
font-weight:900 !important;
background:var(--brand);
color:var(--white);
font-family:var(--font-display);
display:inline-flex !important;
align-items:center;
justify-content:center;
box-sizing:border-box;
}
/* Q-numbers in selector — same square dimensions */
.sq-num{
height:30px !important;
min-width:30px !important;
padding:0 8px !important;
display:inline-flex !important;
align-items:center;
justify-content:center;
box-sizing:border-box;
}
.card-kicker-type{
font-size:var(--fs-overline) !important;
letter-spacing:var(--tracking-overline);
font-weight:700;
text-transform:uppercase;
color:var(--brand);
}
/* ── Старые ::before для .anti и .confuse — отменяем (теперь они .card.) ─ */
.anti::before, .confuse::before{ content:none !important; display:none !important }
/* ── Удалить кастомные стили старого .anti/.confuse ─────── */
.anti{ all:revert }
.confuse{ all:revert }
/* ============================================================
v5.5 — Финал: единая ширина колонки лейблов, "См. также" везде
============================================================ */
/* Все варианты строк в карточках — одна сетка */
.card-row, .tech-row, .scenario-row, .interview-row,
.explain-row, .formula-row{
grid-template-columns:160px 1fr !important;
gap:var(--s-3) !important;
}
@media (max-width:760px){
.card-row, .tech-row, .scenario-row, .interview-row,
.explain-row, .formula-row{
grid-template-columns:1fr !important;
gap:4px !important;
}
}
/* «См. также» на технике и сценарии */
.tech-card .card-related,
.scenario .card-related{
display:flex; align-items:center; gap:6px; flex-wrap:wrap;
margin-top:var(--s-4); padding-top:var(--s-3);
border-top:1px dashed var(--border-1);
font-size:var(--fs-caption);
}
.tech-card.collapsed > .card-related,
.scenario.collapsed > .card-related{ display:none }
/* ============================================================
v7 — Слим-hero, манифест в табе теории, 2D-карта со звёздной лестницей
============================================================ */
/* ── HERO (slim) ──────────────────────────────────────────── */
.hero{background:var(--bg-1);border-bottom:1px solid var(--border-1);padding:var(--s-8) var(--s-6) var(--s-6)}
.hero-inner{max-width:1080px;margin:0 auto}
.hero-eyebrow{font-family:var(--font-body);font-size:var(--fs-overline);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-overline);color:var(--brand);margin-bottom:var(--s-3)}
.hero-title{font-family:var(--font-display);font-weight:900;font-size:clamp(28px,4.2vw,46px);text-transform:uppercase;letter-spacing:var(--tracking-display);line-height:1;color:var(--brand-dark);margin:0 0 var(--s-3);padding:0;border:none}
.hero-lead{font-family:var(--font-display-mixed);font-weight:200;font-style:italic;font-size:clamp(18px,2vw,24px);color:var(--brand);line-height:1.25;margin:0;max-width:780px}
/* ── Манифест внутри таба «Основы причинности» ──────────── */
.manifest{background:var(--bg-3);border-left:3px solid var(--brand);padding:var(--s-5) var(--s-6);margin-bottom:var(--s-5)}
.manifest-lead{font-family:var(--font-display-mixed);font-weight:200;font-style:italic;font-size:var(--fs-h4);color:var(--brand-dark);line-height:1.3;margin:0 0 var(--s-4);max-width:760px}
.manifest-thesis{max-width:760px;margin:0 0 var(--s-4)}
.manifest-thesis p{font-size:var(--fs-small);line-height:var(--lh-relaxed);color:var(--fg-1);margin:0 0 var(--s-3)}
.manifest-thesis p:last-child{margin-bottom:0}
.manifest-thesis strong{color:var(--brand-dark);font-weight:700}
.manifest-audience{display:flex;align-items:baseline;gap:var(--s-3);padding-top:var(--s-3);border-top:1px dashed var(--brand-tint-3);flex-wrap:wrap}
.manifest-audience-label{font-family:var(--font-body);font-size:var(--fs-overline);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-overline);color:var(--brand-dark);white-space:nowrap}
.manifest-audience-list{font-size:var(--fs-caption);color:var(--fg-2);line-height:var(--lh-normal)}
.manifest-audience-sep{color:var(--brand);margin:0 var(--s-2);font-weight:700}
/* ── Два входа над картой/селектором ──────────────────────── */
.dual-intro{font-size:var(--fs-small);color:var(--fg-2);margin:0 0 var(--s-5);line-height:var(--lh-relaxed)}
.dual-link{color:var(--brand);font-weight:600}
.dual-link:hover{color:var(--brand-dark)}
/* ── VISUAL 2D MAP ─────────────────────────────────────────── */
.vismap{background:var(--bg-2);padding:var(--s-5);margin:0 0 var(--s-8);border:1px solid var(--border-1)}
.vismap-head{margin-bottom:var(--s-4)}
.vismap-title{font-family:var(--font-display);font-weight:900;font-size:var(--fs-h4);text-transform:uppercase;letter-spacing:var(--tracking-display);color:var(--brand-dark);margin:0 0 var(--s-2);padding:0;border:none}
.vismap-intro{font-size:var(--fs-caption);color:var(--fg-2);line-height:var(--lh-relaxed);max-width:760px;margin:0}
.vismap-intro strong{color:var(--brand-dark)}
.vismap-grid{display:grid;grid-template-columns:130px 1fr 1fr 1fr;gap:0;background:var(--bg-1);border:1px solid var(--border-1);margin-bottom:var(--s-3)}
.vismap-corner{background:var(--bg-2);border-right:1px solid var(--border-1);border-bottom:1px solid var(--border-1)}
.vismap-xlabel{background:var(--brand-dark);color:var(--white);font-family:var(--font-body);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-overline);padding:var(--s-2) var(--s-3);text-align:center;border-right:1px solid var(--brand-dark);border-bottom:1px solid var(--brand-dark);line-height:1.2}
.vismap-xlabel:last-of-type{border-right:none}
.vismap-ylabel{background:var(--bg-2);font-family:var(--font-body);font-size:var(--fs-caption);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-overline);color:var(--brand-dark);padding:var(--s-3);display:flex;flex-direction:column;justify-content:center;gap:2px;border-right:1px solid var(--border-1);border-bottom:1px solid var(--border-1);line-height:1.2}
.vismap-ylabel:last-of-type{border-bottom:none}
.vismap-yhint{font-weight:400;font-size:10px;color:var(--fg-3);text-transform:none;letter-spacing:0}
.vismap-cell{display:flex;flex-direction:column;gap:6px;padding:var(--s-2);border-right:1px solid var(--border-1);border-bottom:1px solid var(--border-1);min-height:84px;background:var(--bg-1)}
.vismap-cell:nth-child(4n){border-right:none}
.vismap-cell-empty{background:repeating-linear-gradient(45deg,var(--bg-2) 0,var(--bg-2) 8px,var(--bg-1) 8px,var(--bg-1) 16px);min-height:84px}
/* Унифицированный чип: один цвет на всех, тиры показаны звёздами */
.vchip{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-2);align-items:center;padding:6px 10px;font-size:var(--fs-caption);text-decoration:none;color:var(--fg-1);background:var(--bg-1);border:1px solid var(--border-2);transition:border-color .12s,box-shadow .12s,transform .12s,background .12s;line-height:1.2;border-bottom:1px solid var(--border-2)}
.vchip:hover{transform:translateY(-1px);box-shadow:var(--shadow-2);color:var(--brand-dark);border-color:var(--brand);background:var(--white)}
.vchip-num{font-family:var(--font-display);font-weight:900;font-size:10px;color:var(--brand-dark);background:var(--bg-3);padding:2px 5px;letter-spacing:.04em;border:1px solid var(--brand-tint-3);line-height:1.2}
.vchip:hover .vchip-num{background:var(--brand);color:var(--white);border-color:var(--brand)}
.vchip-name{font-weight:600;font-size:var(--fs-caption);line-height:1.15;color:var(--fg-1)}
/* Звёздная лестница: 5 SVG-звёзд, закрашены по data-rating */
.vchip-ladder{display:inline-flex;gap:1px;align-items:center}
.vchip-ladder i{display:inline-block;width:10px;height:10px;background-image:url("data:image/svg+xml;utf8,");background-size:contain;background-repeat:no-repeat;font-style:normal}
.vchip-ladder[data-rating="1"] i:nth-child(-n+1),
.vchip-ladder[data-rating="2"] i:nth-child(-n+2),
.vchip-ladder[data-rating="3"] i:nth-child(-n+3),
.vchip-ladder[data-rating="4"] i:nth-child(-n+4),
.vchip-ladder[data-rating="5"] i:nth-child(-n+5){
background-image:url("data:image/svg+xml;utf8,")
}
/* Качественные методы — отдельный label вместо звёзд */
.vchip-mech .vchip-mech-label{font-family:var(--font-body);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-overline);color:var(--accent-yellow-900);background:var(--accent-yellow-100);padding:2px 6px;border:1px solid var(--accent-yellow-700);line-height:1.2;white-space:nowrap}
.vismap-note{font-size:var(--fs-caption);color:var(--fg-3);line-height:var(--lh-relaxed);max-width:760px;margin:var(--s-2) 0 0;font-style:italic}
.vismap-note em{font-style:normal;color:var(--brand-dark);font-weight:600}
/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:900px){
.hero{padding:var(--s-6) var(--s-4)}
.vismap{padding:var(--s-4)}
.vismap-grid{grid-template-columns:1fr;background:transparent;border:none;box-shadow:none}
.vismap-corner,.vismap-xlabel{display:none}
.vismap-ylabel{border:none;background:var(--brand-dark);color:var(--white);padding:var(--s-3) var(--s-4);margin-top:var(--s-3)}
.vismap-ylabel:first-of-type{margin-top:0}
.vismap-yhint{color:var(--brand-tint-3)}
.vismap-cell{border:1px solid var(--border-1);margin-bottom:var(--s-2)}
.vismap-cell-empty{display:none}
.manifest{padding:var(--s-4)}
}
@media print{
.hero,.vismap,.dual-intro,.manifest{display:none}
}
/* ============================================================
v8 — Двухстрочная шапка (крошки + табы) + главная раздела
============================================================ */
/* ── HEADER (две строки) ─────────────────────────────────── */
.site-header{
display:block !important; /* override старых flex-правил */
padding:0 !important;
background:var(--bg-1);
border-bottom:1px solid var(--border-1);
box-shadow:var(--shadow-1);
position:sticky;
top:0;
z-index:50;
}
/* ── Crumbs (1-я строка) ─────────────────────────────────── */
.site-crumbs{
display:flex;
align-items:center;
gap:var(--s-3);
padding:var(--s-3) var(--s-6);
background:var(--bg-1);
border-bottom:1px solid var(--border-1);
flex-wrap:wrap;
font-family:var(--font-body);
font-size:var(--fs-small);
line-height:1.2;
}
.crumb{
display:inline-flex;
align-items:center;
gap:var(--s-2);
color:var(--fg-2);
text-decoration:none;
border-bottom:none;
transition:color .15s ease;
font-weight:500;
}
.crumb:hover{ color:var(--brand-dark); border-bottom:none }
.crumb::after{ display:none !important } /* убрать ↗ для внешних ссылок */
.crumb-brand{
display:inline-flex;
align-items:center;
padding:2px 0;
transition:opacity .15s ease;
}
.crumb-brand:hover{ opacity:.75 }
.crumb-brand-logo{
width:auto; height:36px;
display:block;
flex-shrink:0;
}
.crumb-sep{
color:var(--brand-light);
font-weight:400;
font-size:var(--fs-body);
user-select:none;
}
.crumb-section{
font-family:var(--font-display);
font-weight:900;
font-size:var(--fs-body);
text-transform:uppercase;
letter-spacing:var(--tracking-overline);
color:var(--brand-dark);
}
.crumb-section:hover{ color:var(--brand) }
.crumb-section.active{ color:var(--brand) } /* когда мы на home */
.crumb-current{
font-family:var(--font-body);
font-weight:500;
font-size:var(--fs-small);
color:var(--fg-2);
}
/* ── Tabs (2-я строка) — переопределяем старые правила ─── */
.site-tabs{
display:flex;
align-items:stretch;
gap:0;
padding:0 var(--s-6);
background:var(--bg-1);
flex-wrap:wrap;
font-family:var(--font-body);
}
.tab-link{
display:inline-flex;
align-items:center;
gap:var(--s-2);
padding:var(--s-3) var(--s-4);
color:var(--fg-2);
text-decoration:none;
border-bottom:3px solid transparent;
transition:color .15s,border-color .15s,background .15s;
font-size:var(--fs-small);
line-height:1.2;
font-weight:500;
}
.tab-link:hover{
color:var(--brand-dark);
background:var(--bg-2);
border-bottom-color:var(--brand-tint-3);
}
.tab-link.active{
color:var(--brand-dark);
border-bottom-color:var(--brand);
background:var(--bg-2);
}
.tab-link::after{ display:none !important }
.tab-num{
font-family:var(--font-display);
font-weight:900;
font-size:11px;
color:var(--brand);
letter-spacing:.04em;
}
.tab-name{
font-weight:500;
}
.tab-link.active .tab-num{ color:var(--brand-dark) }
/* ── MAIN ─────────────────────────────────────────────────── */
.site-main{
max-width:1080px;
margin:0 auto;
padding:var(--s-8) var(--s-6) var(--s-16);
background:var(--bg-1);
}
/* ══════════════════════════════════════════════════════════
ГЛАВНАЯ РАЗДЕЛА (data-tab="home")
══════════════════════════════════════════════════════════ */
#tab-home > section{ margin-bottom:var(--s-10) }
#tab-home > section:last-child{ margin-bottom:0 }
/* ── Hero ────────────────────────────────────────────────── */
.home-hero{
padding-bottom:var(--s-8);
border-bottom:1px solid var(--border-1);
}
.home-eyebrow{
font-family:var(--font-body);
font-size:var(--fs-overline);
font-weight:700;
text-transform:uppercase;
letter-spacing:var(--tracking-overline);
color:var(--brand);
margin-bottom:var(--s-4);
}
.home-title{
font-family:var(--font-display);
font-weight:900;
font-size:clamp(32px,5vw,52px);
text-transform:uppercase;
letter-spacing:var(--tracking-display);
line-height:.95;
color:var(--brand-dark);
margin:0 0 var(--s-5);
padding:0;
border:none;
}
.home-lead{
font-family:var(--font-display-mixed);
font-weight:200;
font-style:italic;
font-size:clamp(20px,2.4vw,28px);
color:var(--brand);
line-height:1.25;
margin:0;
max-width:780px;
}
/* ── H2 общая для секций главной ─────────────────────────── */
.home-h2{
font-family:var(--font-display);
font-weight:900;
font-size:var(--fs-h3);
text-transform:uppercase;
letter-spacing:var(--tracking-display);
color:var(--brand-dark);
margin:0 0 var(--s-5);
padding-bottom:var(--s-2);
border-bottom:2px solid var(--brand);
}
/* ── Манифест (карточка с тезой + аудиторией) ─────────────── */
.home-manifest .manifest-card{
background:var(--bg-3);
border-left:3px solid var(--brand);
padding:var(--s-6) var(--s-6);
}
.home-manifest .manifest-lead{
font-family:var(--font-display-mixed);
font-weight:200;
font-style:italic;
font-size:var(--fs-h4);
color:var(--brand-dark);
line-height:1.3;
margin:0 0 var(--s-4);
max-width:760px;
}
.home-manifest .manifest-thesis{ max-width:760px; margin:0 0 var(--s-4) }
.home-manifest .manifest-thesis p{
font-size:var(--fs-body);
line-height:var(--lh-relaxed);
color:var(--fg-1);
margin:0 0 var(--s-3);
}
.home-manifest .manifest-thesis p:last-child{ margin-bottom:0 }
.home-manifest .manifest-thesis strong{ color:var(--brand-dark); font-weight:700 }
.home-manifest .manifest-audience{
display:flex; align-items:baseline; gap:var(--s-3);
padding-top:var(--s-4);
border-top:1px dashed var(--brand-tint-3);
flex-wrap:wrap;
}
.home-manifest .manifest-audience-label{
font-family:var(--font-body);
font-size:var(--fs-overline);
font-weight:700;
text-transform:uppercase;
letter-spacing:var(--tracking-overline);
color:var(--brand-dark);
white-space:nowrap;
}
.home-manifest .manifest-audience-list{
font-size:var(--fs-small);
color:var(--fg-2);
line-height:var(--lh-normal);
}
.home-manifest .manifest-audience-sep{ color:var(--brand); margin:0 var(--s-2); font-weight:700 }
/* ── 3 точки входа ───────────────────────────────────────── */
.home-paths-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:var(--s-4);
}
.home-path{
display:flex;
flex-direction:column;
background:var(--bg-1);
border:1px solid var(--border-1);
padding:var(--s-5) var(--s-6);
text-decoration:none;
color:inherit;
transition:border-color .15s,box-shadow .15s,transform .15s;
border-bottom:1px solid var(--border-1);
}
.home-path:hover{
border-color:var(--brand);
box-shadow:var(--shadow-2);
color:inherit;
transform:translateY(-1px);
}
.home-path::after{ display:none !important }
.home-path-num{
font-family:var(--font-display);
font-weight:900;
font-size:var(--fs-h3);
color:var(--brand-light);
letter-spacing:var(--tracking-display);
line-height:1;
margin-bottom:var(--s-3);
}
.home-path-body{ display:flex; flex-direction:column; gap:var(--s-2) }
.home-path-title{
font-family:var(--font-display-mixed);
font-weight:900;
font-size:var(--fs-h5);
color:var(--brand-dark);
line-height:1.2;
}
.home-path-desc{ font-size:var(--fs-small); color:var(--fg-2); line-height:var(--lh-normal) }
.home-path-cta{
margin-top:var(--s-3);
font-family:var(--font-body);
font-size:var(--fs-overline);
font-weight:700;
text-transform:uppercase;
letter-spacing:var(--tracking-overline);
color:var(--brand);
transition:color .15s;
}
.home-path:hover .home-path-cta{ color:var(--brand-dark) }
/* ── Обёртка для 2D-карты на home ─────────────────────────── */
.home-vismap-wrap .vismap{ margin:0; padding:var(--s-5) }
.home-vismap-wrap .vismap-head{ margin-bottom:var(--s-4) }
/* ── Sectmap (мини-сетка 6 разделов на home) ──────────────── */
.home-sectmap-intro{
font-size:var(--fs-small);
color:var(--fg-2);
line-height:var(--lh-relaxed);
max-width:760px;
margin:0 0 var(--s-5);
}
.home-sectmap-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:var(--s-3);
margin-bottom:var(--s-4);
}
.home-sect-card{
display:flex;
flex-direction:column;
gap:var(--s-2);
padding:var(--s-4) var(--s-5);
background:var(--bg-2);
border:1px solid var(--border-1);
text-decoration:none;
color:inherit;
transition:border-color .15s,background .15s,box-shadow .15s,transform .15s;
border-bottom:1px solid var(--border-1);
}
.home-sect-card:hover{
border-color:var(--brand);
background:var(--bg-1);
box-shadow:var(--shadow-2);
color:inherit;
transform:translateY(-1px);
}
.home-sect-card::after{ display:none !important }
.home-sect-num{
font-family:var(--font-display);
font-weight:900;
font-size:var(--fs-h4);
color:var(--brand);
letter-spacing:var(--tracking-display);
line-height:1;
}
.home-sect-name{
font-family:var(--font-display-mixed);
font-weight:900;
font-size:var(--fs-h5);
color:var(--brand-dark);
line-height:1.2;
}
.home-sect-desc{ font-size:var(--fs-caption); color:var(--fg-2); line-height:var(--lh-normal) }
.home-sect-ref{
display:flex;
align-items:center;
gap:var(--s-3);
padding:var(--s-4) var(--s-5);
background:var(--bg-3);
border:1px solid var(--brand-tint-3);
text-decoration:none;
color:var(--brand-dark);
transition:border-color .15s,background .15s;
border-bottom:1px solid var(--brand-tint-3);
}
.home-sect-ref:hover{
border-color:var(--brand);
background:var(--brand-tint-3);
color:var(--brand-dark);
}
.home-sect-ref::after{ display:none !important }
.home-sect-ref-icon{
font-size:var(--fs-h3);
color:var(--brand);
line-height:1;
flex-shrink:0;
}
.home-sect-ref-text{
font-size:var(--fs-small);
line-height:var(--lh-normal);
}
/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:900px){
.site-crumbs{ padding:var(--s-2) var(--s-4) }
.crumb-brand-logo{ height:30px }
.site-tabs{ padding:0 var(--s-4); overflow-x:auto; flex-wrap:nowrap }
.site-main{ padding:var(--s-5) var(--s-4) var(--s-10) }
.home-paths-grid, .home-sectmap-grid{ grid-template-columns:1fr }
}
@media print{
.site-crumbs{ display:none }
.home-paths, .home-sectmap, .home-vismap-wrap, .home-manifest{ display:none }
}
/* ============================================================
v9 — Унификация фильтров (01 как 03/04) + Q5 как advisor
============================================================ */
/* ── Selector контейнер — теперь вертикальный, не 2-кол ─────── */
.selector{
display:block !important; /* override старые grid/flex */
margin:0 0 var(--s-8);
}
.selector-questions, .selector-results{
/* Старые wrapper-классы больше не используются; на всякий */
display:block; max-width:none; padding:0; background:transparent;
}
/* ── Filter-bar (вертикальная полоса с 4 вопросами над результатами) ─ */
.filter-bar{
background:var(--bg-2);
border:1px solid var(--border-1);
padding:var(--s-4) var(--s-5);
margin-bottom:var(--s-5);
display:flex;
flex-direction:column;
gap:var(--s-3);
}
/* Одна строка вопроса: label сверху, chips ниже */
.filter-bar .sq{
display:flex;
flex-direction:column;
gap:var(--s-2);
padding:0;
background:transparent;
border:none;
margin:0;
}
.filter-bar .sq + .sq{
padding-top:var(--s-3);
border-top:1px dashed var(--border-1);
}
/* Подпись вопроса в overline-стиле (без «Q1») */
.filter-bar .sq-label{
font-family:var(--font-body);
font-size:var(--fs-overline);
font-weight:700;
text-transform:uppercase;
letter-spacing:var(--tracking-overline);
color:var(--brand-dark);
line-height:1.2;
}
/* Скрываем старые элементы (sq-head, sq-num, sq-title, sq-hint) если они вдруг где-то остались */
.filter-bar .sq-head, .filter-bar .sq-num, .filter-bar .sq-title, .filter-bar .sq-hint{
display:none;
}
/* Чипы Q-опций — стилизованы как .sub-chip, без override */
.filter-bar .sq-opts{
display:flex;
flex-wrap:wrap;
gap:6px;
padding:0;
margin:0;
}
.filter-bar .sq-opt{
display:inline-flex;
align-items:center;
padding:6px 12px;
background:var(--bg-1);
border:1px solid var(--border-2);
color:var(--fg-2);
font-family:var(--font-body);
font-size:var(--fs-caption);
font-weight:500;
line-height:1.2;
cursor:pointer;
transition:background .12s,border-color .12s,color .12s;
text-align:left;
}
.filter-bar .sq-opt:hover{
background:var(--bg-2);
border-color:var(--brand);
color:var(--brand-dark);
}
.filter-bar .sq-opt.active{
background:var(--brand);
border-color:var(--brand);
color:var(--white);
font-weight:600;
}
.filter-bar .sq-opt.active:hover{
background:var(--brand-dark);
border-color:var(--brand-dark);
}
/* Reset-строка */
.filter-bar .sq-reset-row{
display:flex;
align-items:center;
gap:var(--s-3);
padding-top:var(--s-3);
border-top:1px solid var(--border-1);
margin:0;
}
.filter-bar .sq-reset{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
background:var(--bg-1);
border:1px solid var(--border-2);
color:var(--fg-2);
font-family:var(--font-body);
font-size:var(--fs-caption);
font-weight:500;
line-height:1.2;
cursor:pointer;
transition:background .12s,border-color .12s,color .12s;
}
.filter-bar .sq-reset:not(:disabled):hover{
background:var(--bg-2);
border-color:var(--brand-dark);
color:var(--brand-dark);
}
.filter-bar .sq-reset:disabled{
opacity:.4;
cursor:not-allowed;
}
.filter-bar .sq-reset-hint{
font-family:var(--font-body);
font-size:var(--fs-caption);
color:var(--fg-3);
line-height:1.2;
}
/* ── Results summary под фильтром ──────────────────────────── */
.selector .results-summary{
display:flex;
align-items:baseline;
gap:var(--s-2);
flex-wrap:wrap;
padding:var(--s-3) var(--s-5);
margin-bottom:var(--s-4);
background:var(--bg-1);
border-left:3px solid var(--brand);
font-family:var(--font-body);
}
.selector .results-count{
font-family:var(--font-display);
font-weight:900;
font-size:var(--fs-h4);
color:var(--brand-dark);
line-height:1;
}
.selector .results-of{
font-size:var(--fs-small);
color:var(--fg-2);
font-weight:600;
}
.selector .results-hint{
font-size:var(--fs-small);
color:var(--fg-3);
font-style:italic;
}
/* ── Candidates stream — full width ─────────────────────────── */
.selector #candidates-stream{
display:block;
width:100%;
}
/* ── Q5 Advisor block — другой жанр, info-семантика ─────────── */
.strictness-advisor{
background:#E5F1FF;
border-left:4px solid var(--accent-blue-700);
padding:var(--s-5) var(--s-6);
margin:var(--s-8) 0 0;
display:block;
}
.strictness-advisor .advisor-head{ margin-bottom:var(--s-4) }
.strictness-advisor .advisor-title{
font-family:var(--font-display);
font-weight:900;
font-size:var(--fs-h5);
text-transform:uppercase;
letter-spacing:var(--tracking-display);
color:var(--accent-blue-900);
margin:0 0 var(--s-2);
padding:0;
border:none;
}
.strictness-advisor .advisor-intro{
font-size:var(--fs-small);
color:var(--accent-blue-900);
line-height:var(--lh-relaxed);
margin:0;
max-width:760px;
}
.strictness-advisor .advisor-intro em{ font-style:italic; color:var(--accent-blue-700); font-weight:600 }
/* Чипы выбора цены ошибки — outlined info-стиль */
.strictness-advisor .sq{
padding:0; background:transparent; border:none;
margin:0 0 var(--s-3);
}
.strictness-advisor .sq-opts{
display:flex; flex-wrap:wrap; gap:6px;
}
.strictness-advisor .sq-opt{
display:inline-flex; align-items:center;
padding:8px 16px;
background:var(--bg-1);
border:1px solid var(--accent-blue-700);
color:var(--accent-blue-900);
font-family:var(--font-body);
font-size:var(--fs-small);
font-weight:600;
line-height:1.2;
cursor:pointer;
transition:background .12s, color .12s;
}
.strictness-advisor .sq-opt:hover{
background:#D7E8FF;
}
.strictness-advisor .sq-opt.active{
background:var(--accent-blue-700);
color:var(--white);
}
.strictness-advisor .sq-opt.active:hover{
background:var(--accent-blue-900);
}
/* Advisory slot — выдача рекомендации */
.strictness-advisor #advisory-slot:empty{ display:none }
.strictness-advisor #advisory-slot{
margin-top:var(--s-3);
}
.strictness-advisor .advisory{
padding:var(--s-3) var(--s-4);
background:var(--bg-1);
border-left:3px solid var(--accent-blue-500);
font-size:var(--fs-small);
line-height:var(--lh-relaxed);
color:var(--fg-1);
}
.strictness-advisor .advisory strong{ color:var(--accent-blue-900) }
.strictness-advisor .advisor-link{
margin:var(--s-4) 0 0;
padding-top:var(--s-3);
border-top:1px dashed var(--accent-blue-300);
font-size:var(--fs-caption);
color:var(--accent-blue-900);
}
.strictness-advisor .advisor-link a{
color:var(--accent-blue-700);
font-weight:600;
border-bottom-color:color-mix(in oklab, var(--accent-blue-700) 35%, transparent);
}
.strictness-advisor .advisor-link a:hover{
color:var(--accent-blue-900);
border-bottom-color:var(--accent-blue-900);
}
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:760px){
.filter-bar{ padding:var(--s-3) var(--s-4); gap:var(--s-3) }
.filter-bar .sq + .sq{ padding-top:var(--s-2) }
.strictness-advisor{ padding:var(--s-4) }
}
@media print{
.filter-bar, .strictness-advisor{ display:none }
}
/* ============================================================
v10 — Однострочная шапка (логотип + бэйдж раздела + табы)
============================================================
Переопределяет v8: вместо двух строк (крошки + табы) — одна
строка с логотипом chu.st, бэйджем раздела (▢EXP) и табами.
На мобайле табы прячутся в гамбургер.
*/
/* Старая 1-я строка крошек больше не используется */
.site-crumbs{ display:none !important }
.site-header{
display:flex !important;
align-items:stretch;
gap:0;
padding:0 var(--s-5) !important;
background:var(--bg-1);
border-bottom:1px solid var(--border-1);
box-shadow:var(--shadow-1);
position:sticky;
top:0;
z-index:50;
}
.site-header > .crumb-brand{
display:inline-flex;
align-items:center;
padding:var(--s-3) var(--s-4) var(--s-3) 0;
text-decoration:none;
border:none;
transition:opacity .15s;
}
.site-header > .crumb-brand:hover{ opacity:.75; border:none }
.site-header > .crumb-brand::after{ display:none !important }
.site-header > .crumb-brand .crumb-brand-logo{
width:auto; height:32px;
display:block;
flex-shrink:0;
}
/* Бэйдж раздела — квадрат brand-dark с белым Uni Sans Heavy Caps */
.site-badge{
display:inline-flex;
align-items:center;
justify-content:center;
align-self:center;
width:36px;
height:36px;
background:var(--brand-dark);
color:#fff;
font-family:var(--font-display);
font-weight:900;
font-size:13px;
letter-spacing:.04em;
text-transform:uppercase;
text-decoration:none;
margin-right:var(--s-4);
flex-shrink:0;
border:none;
transition:background .15s, color .15s;
}
.site-badge:hover{ background:var(--brand); color:#fff; border:none }
.site-badge::after{ display:none !important }
/* Табы — растягиваются вправо в той же строке */
.site-tabs{
display:flex !important;
align-items:stretch;
gap:0;
flex:1 1 auto;
padding:0 !important;
background:transparent !important;
border-bottom:none !important;
flex-wrap:nowrap;
overflow:hidden;
font-family:var(--font-body);
}
.tab-link{
display:inline-flex !important;
align-items:center;
gap:var(--s-2);
padding:0 var(--s-3) !important;
color:var(--fg-2) !important;
text-decoration:none;
border:none !important;
border-bottom:3px solid transparent !important;
font-size:var(--fs-small);
line-height:1.2;
font-weight:500;
white-space:nowrap;
background:transparent;
transition:color .15s, background .15s, border-color .15s;
}
.tab-link:hover{
color:var(--brand-dark) !important;
background:var(--bg-2);
border-bottom-color:var(--brand-tint-3) !important;
}
.tab-link.active{
color:var(--brand-dark) !important;
background:var(--bg-2);
border-bottom-color:var(--brand) !important;
}
.tab-link::after{ display:none !important }
.tab-num{
font-family:var(--font-display);
font-weight:900;
font-size:11px;
color:var(--brand);
letter-spacing:.04em;
}
.tab-link.active .tab-num{ color:var(--brand-dark) }
/* Гамбургер — скрыт на десктопе */
.site-burger{
display:none;
align-self:center;
margin-left:auto;
width:36px; height:36px;
align-items:center; justify-content:center;
background:transparent;
border:1px solid var(--border-1);
cursor:pointer;
flex-shrink:0;
padding:0;
transition:background .15s, border-color .15s;
}
.site-burger:hover{ background:var(--bg-2); border-color:var(--brand-tint-3) }
.site-burger-bars{
position:relative;
display:block;
width:18px;
height:2px;
background:var(--brand-dark);
}
.site-burger-bars::before,
.site-burger-bars::after{
content:'';
position:absolute;
left:0;
width:100%;
height:2px;
background:var(--brand-dark);
transition:transform .15s, top .15s;
}
.site-burger-bars::before{ top:-6px }
.site-burger-bars::after{ top:6px }
.site-burger[aria-expanded="true"] .site-burger-bars{ background:transparent }
.site-burger[aria-expanded="true"] .site-burger-bars::before{ top:0; transform:rotate(45deg) }
.site-burger[aria-expanded="true"] .site-burger-bars::after{ top:0; transform:rotate(-45deg) }
/* Мобайл: гамбургер виден, табы прячутся в выпадающее меню */
@media (max-width:900px){
.site-header{
flex-wrap:wrap;
padding:0 var(--s-4) !important;
row-gap:0;
}
.site-header > .crumb-brand{ padding:var(--s-3) var(--s-3) var(--s-3) 0 }
.site-header > .crumb-brand .crumb-brand-logo{ height:28px }
.site-badge{ width:32px; height:32px; font-size:12px; margin-right:0 }
.site-burger{ display:inline-flex }
.site-tabs{
display:none !important;
order:3;
flex-basis:100%;
flex-direction:column !important;
align-items:stretch !important;
border-top:1px solid var(--border-1) !important;
overflow:visible;
padding:var(--s-2) 0 !important;
}
.site-tabs.open{ display:flex !important }
.tab-link{
padding:var(--s-3) var(--s-2) !important;
border-bottom:1px solid var(--border-1) !important;
}
.site-tabs .tab-link:last-child{ border-bottom:none !important }
.tab-link.active{
border-bottom-color:var(--brand) !important;
}
}
@media print{
.site-badge, .site-burger{ display:none !important }
}
/* ============================================================
v11 — Унификация контента табов
============================================================
- .section-lead — лид под h3 во всех табах
- .glossary-search — поиск-инпут в 07 + .gloss-term.hidden
- .callout — единая семья плашек (--info, --warn, --advisor)
- .filter-collapse — accordion-обёртка для тяжёлого фильтра в 01
- .card — общий скелет карточки + .card-- модификаторы
*/
/* ── Лид под h3 ────────────────────────────────────────────── */
.section-lead{
font-size:var(--fs-small);
color:var(--fg-2);
line-height:var(--lh-relaxed);
margin:0 0 var(--s-5);
max-width:72ch;
}
.section-lead strong{ color:var(--fg-1) }
.section-lead em{ font-style:italic; color:var(--fg-1) }
/* ── Поиск в глоссарии (07) ────────────────────────────────── */
.glossary-search-wrap{
display:flex;
align-items:center;
gap:var(--s-3);
margin:0 0 var(--s-5);
padding:var(--s-3) var(--s-4);
background:var(--bg-2);
border:1px solid var(--border-1);
border-left:3px solid var(--brand);
}
.glossary-search{
flex:1 1 auto;
min-width:0;
padding:var(--s-2) var(--s-3);
font-family:var(--font-body);
font-size:var(--fs-body);
color:var(--fg-1);
background:var(--bg-1);
border:1px solid var(--border-1);
border-radius:0;
outline:none;
transition:border-color .15s, box-shadow .15s;
}
.glossary-search:focus{
border-color:var(--brand);
box-shadow:0 0 0 2px rgba(13,84,82,.12);
}
.glossary-search::placeholder{ color:var(--fg-3) }
.glossary-search-hint{
font-size:var(--fs-small);
color:var(--fg-2);
white-space:nowrap;
}
.gloss-term.hidden,
.src.hidden{ display:none }
@media (max-width:760px){
.glossary-search-wrap{ flex-direction:column; align-items:stretch }
.glossary-search-hint{ white-space:normal }
}
/* ── Callout — единая семья плашек ─────────────────────────── */
.callout{
padding:var(--s-4) var(--s-5);
margin:var(--s-5) 0;
font-size:var(--fs-small);
line-height:var(--lh-relaxed);
border-left:4px solid var(--fg-3);
background:var(--bg-2);
color:var(--fg-1);
border-radius:0;
}
.callout strong{ color:var(--fg-1) }
.callout em{ font-style:italic }
.callout a{ color:inherit; border-bottom:1px solid currentColor }
/* --info — синяя информационная */
.callout--info,
.info-block{
background:#E5F1FF !important;
border-left-color:var(--accent-blue-700) !important;
color:var(--accent-blue-900) !important;
}
.callout--info strong,
.info-block strong{ color:var(--accent-blue-900) !important }
/* --warn — жёлтая предупреждение (бывший .note-block) */
.callout--warn,
.note-block{
background:#FEF7E0 !important;
border-left-color:var(--accent-yellow-700) !important;
color:#5E5306 !important;
}
.callout--warn strong,
.note-block strong{ color:var(--accent-yellow-900) !important }
/* --advisor — синий info с интерактивными chips (Q5) */
.callout--advisor{
background:#E5F1FF;
border-left-color:var(--accent-blue-700);
color:var(--accent-blue-900);
padding:var(--s-5);
}
.callout--advisor strong{ color:var(--accent-blue-900) }
/* ── Filter collapse — accordion для тяжёлого фильтра в 01 ─── */
/* Внешний вид — как у .sub-filter в 03/04: bg-2 + равномерный border-1 */
.filter-collapse{
border:1px solid var(--border-1);
background:var(--bg-2);
margin:0 0 var(--s-5);
}
.filter-collapse-summary{
display:flex;
align-items:center;
gap:var(--s-3);
padding:var(--s-3) var(--s-4);
cursor:pointer;
list-style:none;
user-select:none;
font-family:var(--font-body);
font-size:var(--fs-small);
color:var(--fg-1);
transition:background .15s;
}
/* Отключаем нативный disclosure marker (Chrome/Safari/Firefox).
display:flex выше уже снимает list-item; добавляем доп.правила для надёжности. */
.filter-collapse > summary{ list-style:none }
.filter-collapse-summary::-webkit-details-marker{ display:none }
.filter-collapse-summary::marker{ content:'' }
.filter-collapse-summary::before{ display:none !important; content:none !important }
.filter-collapse-summary:hover{ background:var(--bg-1) }
.filter-collapse-icon{
display:inline-block;
width:1em;
color:var(--brand);
transition:transform .15s;
font-size:var(--fs-body);
flex-shrink:0;
line-height:1;
}
.filter-collapse[open] > .filter-collapse-summary .filter-collapse-icon{
transform:rotate(90deg);
}
.filter-collapse-text{
font-weight:500;
color:var(--brand-dark);
flex:1 1 auto;
}
.filter-collapse-count{
margin-left:auto;
font-family:var(--font-display);
font-weight:900;
font-size:var(--fs-body);
letter-spacing:.02em;
color:var(--brand-dark);
white-space:nowrap;
flex-shrink:0;
}
.filter-collapse-count,
.filter-collapse-count > #results-count{
color:var(--brand-dark) !important;
}
.filter-collapse-count > #results-count{
font-size:inherit;
}
/* Скрываем длинный hint — счётчик "N из 16" в правом углу самодостаточен */
.filter-collapse-hint{ display:none }
/* Уплотнённый .filter-bar внутри accordion */
.filter-collapse .filter-bar{
margin:0;
padding:var(--s-4);
background:var(--bg-1);
border:none;
border-top:1px solid var(--border-1);
gap:var(--s-3);
}
.filter-collapse .filter-bar .sq{
padding-top:var(--s-2);
}
.filter-collapse .filter-bar .sq + .sq{
padding-top:var(--s-2);
border-top:1px dashed var(--border-1);
}
/* ── Карточки — общий скелет ───────────────────────────────── */
/* Базовый контейнер: все .card в табах */
.tab-pane .card{
border:1px solid var(--border-1);
border-radius:0;
background:var(--bg-1);
padding:var(--s-5);
margin:0 0 var(--s-4);
box-shadow:var(--shadow-1);
position:relative;
transition:box-shadow .15s, border-color .15s;
}
.tab-pane .card:hover{
box-shadow:var(--shadow-2);
}
/* Унифицированный kicker — одинаковый по всем табам.
Решение: квадрат всегда brand-teal с белой цифрой; overline-текст brand-teal.
Никакой цветовой дифференциации по типу карточки — type-различие даёт сам
текст метки («МЕТОД» / «ТЕХНИКА» / «ФАЗА» / «ПРИНЦИП» / «АНТИПАТТЕРН» / «СЦЕНАРИЙ»). */
.tab-pane .card .card-kicker{
display:flex;
align-items:center;
gap:var(--s-2);
margin-bottom:var(--s-3);
font-family:var(--font-display);
font-weight:900;
text-transform:uppercase;
letter-spacing:var(--tracking-overline);
font-size:var(--fs-overline);
color:var(--brand);
}
.tab-pane .card .card-kicker-num{
background:var(--brand) !important;
color:var(--white) !important;
}
.tab-pane .card .card-kicker-type{ color:var(--brand) !important }
/* Перебиваем legacy-цвета модификаторов (purple для tech, blue для scenario и т.д.) —
всё в брэндовом teal. Это унифицирует визуал между табами 01–06. */
.card-kicker-tech .card-kicker-num,
.card-kicker-scenario .card-kicker-num,
.card-kicker-anti .card-kicker-num,
.card-kicker-proto .card-kicker-num,
.card-kicker-formula .card-kicker-num{
background:var(--brand) !important;
color:var(--white) !important;
}
.card-kicker-tech .card-kicker-type,
.card-kicker-scenario .card-kicker-type,
.card-kicker-anti .card-kicker-type,
.card-kicker-proto .card-kicker-type,
.card-kicker-formula .card-kicker-type{
color:var(--brand) !important;
}
/* Унифицированные заголовки карточек */
.tab-pane .card .card-title,
.tab-pane .card .tech-title,
.tab-pane .card .scenario-title-text,
.tab-pane .card .p-title{
display:block;
font-family:var(--font-display);
font-weight:900;
font-size:var(--fs-h4);
line-height:1.25;
color:var(--fg-1);
margin:0;
}
/* head-блок: title + опц. рейтинг */
.tab-pane .card .card-head,
.tab-pane .card .tech-head,
.tab-pane .card .scenario-title,
.tab-pane .card .principle-head{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:var(--s-3);
flex-wrap:wrap;
margin-bottom:var(--s-3);
}
/* row-блок: label слева, текст справа */
.tab-pane .card .card-row,
.tab-pane .card .tech-row,
.tab-pane .card .scenario-row,
.tab-pane .card .proto-row{
display:grid;
grid-template-columns:minmax(140px, 22%) 1fr;
gap:var(--s-4);
padding:var(--s-2) 0;
font-size:var(--fs-small);
line-height:var(--lh-relaxed);
border-top:1px dashed var(--border-2);
align-items:start;
}
.tab-pane .card .card-row:first-of-type,
.tab-pane .card .tech-row:first-of-type,
.tab-pane .card .scenario-row:first-of-type,
.tab-pane .card .proto-row:first-of-type{
border-top:none;
padding-top:0;
}
.tab-pane .card .card-label,
.tab-pane .card .tech-label,
.tab-pane .card .scenario-label{
font-family:var(--font-body);
font-weight:600;
font-size:var(--fs-small);
line-height:var(--lh-relaxed);
letter-spacing:0;
text-transform:none;
color:var(--brand-dark) !important;
padding-top:0;
}
.tab-pane .card .proto-num{
font-family:var(--font-display);
font-weight:900;
color:var(--brand);
font-size:var(--fs-small);
text-align:right;
padding-top:1px;
}
/* p-thesis / p-fail — у принципов */
.tab-pane .card--principle .p-thesis{
font-size:var(--fs-body);
line-height:var(--lh-relaxed);
color:var(--fg-1);
margin:var(--s-3) 0 var(--s-3);
font-weight:500;
}
.tab-pane .card--principle .p-fail{
font-size:var(--fs-small);
line-height:var(--lh-relaxed);
color:var(--accent-red-900);
padding:var(--s-3) var(--s-4);
background:#FEE9E3;
border-left:3px solid var(--accent-red-700);
margin:0 0 var(--s-3);
}
.tab-pane .card--principle .p-fail strong{ color:var(--accent-red-900) }
/* card-stop / tech-stop — нижняя полоса «Не применять» (семантически = stop/danger, красный) */
.tab-pane .card .card-stop,
.tab-pane .card .tech-stop{
margin-top:var(--s-4);
padding:var(--s-3) var(--s-4);
background:#FEE9E3;
border-left:3px solid var(--accent-red-700);
font-size:var(--fs-small);
line-height:var(--lh-relaxed);
color:var(--accent-red-900);
}
.tab-pane .card .card-stop strong,
.tab-pane .card .tech-stop strong{ color:var(--accent-red-900) }
/* card-related — нижняя строка с rel-chips */
.tab-pane .card .card-related{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:var(--s-2);
margin-top:var(--s-4);
padding-top:var(--s-3);
border-top:1px solid var(--border-2);
font-size:var(--fs-caption);
}
.tab-pane .card .card-related-label{
color:var(--fg-3);
text-transform:uppercase;
letter-spacing:var(--tracking-overline);
font-weight:500;
margin-right:var(--s-2);
}
/* details (подкат «Как объяснить» / «Развёрнутое объяснение») */
.tab-pane .card > details{
margin-top:var(--s-4);
padding-top:var(--s-3);
border-top:1px solid var(--border-2);
}
.tab-pane .card > details > summary{
cursor:pointer;
font-family:var(--font-body);
font-weight:500;
font-size:var(--fs-small);
color:var(--brand-dark);
list-style:none;
user-select:none;
}
.tab-pane .card > details > summary::-webkit-details-marker,
.tab-pane .card > details > summary::marker{ display:none }
.tab-pane .card > details > summary::before{
content:'▸ ';
display:inline-block;
color:var(--brand);
margin-right:var(--s-1);
transition:transform .15s;
}
.tab-pane .card > details[open] > summary::before{
content:'▾ ';
}
/* Responsive: row → стек на мобайле */
@media (max-width:760px){
.tab-pane .card{ padding:var(--s-4) }
.tab-pane .card .card-row,
.tab-pane .card .tech-row,
.tab-pane .card .scenario-row,
.tab-pane .card .proto-row{
grid-template-columns:1fr;
gap:var(--s-1);
}
.tab-pane .card .proto-num{ text-align:left }
}
/* ── Уменьшаем большой верхний отступ перед H1-заголовком таба ──
Старые стили (v6 + v8) дают .site-main { padding-top: --s-8 } +
.tab-pane { padding-top: --s-8 } — суммарно слишком много пустого
пространства между шапкой и H1. Снижаем до --s-5 / --s-4. */
.site-main{ padding-top:var(--s-5) !important }
.tab-pane{ padding-top:var(--s-4) !important }
@media (max-width:760px){
.site-main{ padding-top:var(--s-4) !important }
.tab-pane{ padding-top:var(--s-3) !important }
}
/* ── Перебиваем legacy purple-кодировку — всё в брэндовом teal ─── */
/* rel-chips: rel-tech была фиолетовой, теперь общий стиль */
.rel-chip.rel-tech{
color:var(--brand-dark) !important;
}
.rel-chip.rel-tech:hover{
background:var(--brand) !important;
border-color:var(--brand) !important;
color:var(--white) !important;
}
/* Шпаргалка в 03 — таблица .calc-table из purple в брэндовый dark */
.calc-table th{
background:var(--brand-dark) !important;
border-color:var(--brand-dark) !important;
color:var(--white);
}
.calc-table tr:nth-child(even) td{
background:var(--bg-2) !important;
}
/* tech-card: убрать purple на головке tech-card (старое legacy) */
.tech-head{
color:var(--fg-1) !important;
border-bottom-color:var(--border-1) !important;
}
/* Подкаты «Как объяснить» / «Развёрнутое» — насыщенная тиловая полоса слева */
.cut-content{
border-left-color:var(--brand) !important;
border-left-width:3px !important;
}
/* .explain — рамка из brand-tint-3 → brand, чтобы тиловый был насыщенным со всех сторон */
.card details .explain,
.tech-card details .explain{
border-color:var(--brand) !important;
}
/* Унификация активного chip:
.sub-chip в 03/04 использует brand-dark — выравниваем сюда же filter-bar и selected-tag. */
.filter-bar .sq-opt.active{
background:var(--brand-dark) !important;
border-color:var(--brand-dark) !important;
color:var(--white) !important;
}
.filter-bar .sq-opt.active:hover{
background:var(--brand) !important;
border-color:var(--brand) !important;
}
.selected-tag{
background:var(--brand-dark) !important;
color:var(--white) !important;
border-color:var(--brand-dark) !important;
}
/* Filter-bar в 01: лейблы вопросов и текст неактивных chip — тёмные, не тиловые
(тиловые "съедаются" рядом с тёмно-тиловыми границами и активным фоном). */
.filter-bar .sq-label{
color:var(--fg-1) !important;
}
.filter-bar .sq-opt{
color:var(--fg-1) !important;
}
.filter-bar .sq-opt:hover{
color:var(--fg-1) !important;
}
/* «Отброшено N методов» — скрываем целиком (избыточная информация) */
.rejected,
#rejected-container{ display:none !important }
/* ── Q5 Калибровка строгости — обновлённый layout v11 ─────── */
/* Стек: chips на всю ширину одной строкой, рекомендация ниже */
.strictness-advisor .advisor-grid{
display:flex;
flex-direction:column;
gap:var(--s-3);
margin:var(--s-4) 0 var(--s-3);
}
/* Sq-block в advisor — тот же layout, что и в filter-bar (label сверху, chips ниже) */
.strictness-advisor .sq{
display:flex !important;
flex-direction:column;
gap:var(--s-2) !important;
padding:0 !important;
background:transparent !important;
border:none !important;
margin:0 !important;
}
.strictness-advisor .sq-label{
font-family:var(--font-body);
font-weight:600;
font-size:var(--fs-caption);
letter-spacing:var(--tracking-overline);
text-transform:uppercase;
color:var(--accent-blue-900);
}
/* Унификация chip-размеров с .filter-bar .sq-opt */
.strictness-advisor .sq-opts{
display:flex !important;
flex-wrap:wrap;
gap:var(--s-1) !important;
}
.strictness-advisor .sq-opt{
display:inline-flex !important;
align-items:center;
padding:5px 12px !important;
background:var(--bg-1) !important;
border:1px solid var(--accent-blue-700) !important;
color:var(--accent-blue-900) !important;
font-family:var(--font-body) !important;
font-size:var(--fs-small) !important;
font-weight:500 !important;
line-height:1.2 !important;
cursor:pointer;
white-space:nowrap;
border-radius:0 !important;
transition:background .12s, color .12s !important;
}
.strictness-advisor .sq-opt:hover{
background:var(--accent-blue-700) !important;
color:var(--white) !important;
}
.strictness-advisor .sq-opt.active{
background:var(--accent-blue-700) !important;
color:var(--white) !important;
}
/* Slot рекомендации — пустой по умолчанию */
.strictness-advisor .advisor-slot{ min-height:0 }
.strictness-advisor .advisor-slot:empty{ display:none }
/* Сама рекомендация (.advisory) — синяя боковая полоса в тон callout */
.strictness-advisor .advisory{
background:var(--bg-1);
border-left:3px solid var(--accent-blue-700);
padding:var(--s-3) var(--s-4);
font-size:var(--fs-small);
line-height:var(--lh-relaxed);
color:var(--accent-blue-900);
}
.strictness-advisor .advisory strong{ color:var(--accent-blue-900) }
/* Ссылка на 03 — компактная, тёмно-синяя, без лишних стрелок */
.strictness-advisor .advisor-link{
margin:var(--s-3) 0 0;
font-size:var(--fs-small);
}
.strictness-advisor .advisor-link a{
color:var(--accent-blue-900);
border-bottom:1px solid var(--accent-blue-700);
text-decoration:none;
font-weight:500;
}
.strictness-advisor .advisor-link a:hover{
color:var(--accent-blue-700);
}
/* Выбранные фильтры в summary filter-collapse — chip-row */
.selected-tags{
display:inline-flex;
flex-wrap:wrap;
gap:var(--s-1);
margin-left:var(--s-3);
flex:1 1 auto;
min-width:0;
align-items:center;
}
.selected-tags:empty{ display:none }
/* selected-tag — то же приглушённое визуальное звено, что и sq-opt в filter-bar:
светлый фон, тиловый текст, тонкий border. Не «активный» chip — это просто
индикатор «вот что вы выбрали». */
.selected-tag{
display:inline-flex;
align-items:center;
padding:1px 8px;
background:var(--bg-2);
color:var(--brand-dark);
font-family:var(--font-body);
font-size:var(--fs-caption);
font-weight:500;
white-space:nowrap;
border:1px solid var(--border-1);
}
/* Когда есть выбранные теги — переставляем счётчик чтобы он не "налезал" */
.filter-collapse-summary:has(.selected-tags:not(:empty)) .filter-collapse-text{
flex:0 0 auto;
}
/* ── v11.2 — пересборка 06 «Основы причинности» ─────────────
Три волны в хронологии, замыкающая строка таймлайна, список
ссылок в callout «Куда дальше». Не трогаем historic timeline,
только дописываем новые элементы. */
/* Заголовок-разделитель волны внутри .timeline.
Сидит на месте обычной .tl-row, визуально — просто жирная теловая
надпись над группой строк. Без фона и бордера. */
.timeline .tl-wave{
margin:var(--s-4) 0 var(--s-2);
padding:0;
font-family:var(--font-display-mixed);
font-size:var(--fs-body);
font-weight:700;
color:var(--brand-dark);
background:none;
border:none;
letter-spacing:0;
text-transform:none;
}
.timeline .tl-wave:first-child{ margin-top:0 }
/* Замыкающая строка таймлайна — короткий аналитический вывод
после хронологии. Серым отбита от событий + жирный «Главный паттерн». */
.tl-closing{
margin:var(--s-4) 0 0;
padding:var(--s-3) var(--s-4);
border-left:3px solid var(--brand);
background:var(--bg-2);
font-size:var(--fs-small);
line-height:1.6;
color:var(--fg-1);
}
.tl-closing strong{ color:var(--brand-dark) }
/* Список ссылок внутри .callout (используется в «Куда дальше»).
Компактный, с тиловыми маркерами, без лишних отступов. */
.callout .callout-list{
margin:var(--s-2) 0 0;
padding-left:var(--s-4);
list-style:disc;
}
.callout .callout-list li{
margin:var(--s-1) 0;
line-height:1.55;
}
.callout .callout-list li::marker{ color:var(--brand) }