…
…
Обе стороны в ОДНОЙ ячейке сетки: высота карточки — большая из двух,
переворот ничего ниже не сдвигает. Переключает класс --oborot, он меняет
только transform. Тихий режим — мягкая смена прозрачности. */
.ya-flip{ -webkit-perspective:1100px; perspective:1100px; min-width:0; }
.ya-flip__scena{
display:grid; height:100%;
-webkit-transform-style:preserve-3d; transform-style:preserve-3d;
-webkit-transform:rotateY(0deg); transform:rotateY(0deg);
transition:transform var(--flip-dur,.55s) cubic-bezier(.4,0,.2,1);
}
.ya-flip--oborot > .ya-flip__scena{ -webkit-transform:rotateY(180deg); transform:rotateY(180deg); }
.ya-flip__storona{
grid-area:1 / 1; min-width:0; box-sizing:border-box;
-webkit-backface-visibility:hidden; backface-visibility:hidden;
-webkit-transform:rotateY(0deg) translateZ(1px); transform:rotateY(0deg) translateZ(1px);
/* Где WebKit не прячет обратную грань — прячем явно ровно на середине. */
visibility:visible; transition:visibility 0s linear calc(var(--flip-dur,.55s) / 2);
}
.ya-flip__oborot{ -webkit-transform:rotateY(180deg) translateZ(1px); transform:rotateY(180deg) translateZ(1px); visibility:hidden; }
.ya-flip--oborot .ya-flip__lico{ visibility:hidden; }
.ya-flip--oborot .ya-flip__oborot{ visibility:visible; }
@media (prefers-reduced-motion:reduce){
.ya-flip__scena, .ya-flip--oborot > .ya-flip__scena{ -webkit-transform:none; transform:none; transition:none; }
.ya-flip__storona, .ya-flip__oborot{ -webkit-transform:none; transform:none; transition:opacity .25s ease, visibility 0s linear .25s; }
.ya-flip__oborot{ opacity:0; }
.ya-flip--oborot .ya-flip__lico{ opacity:0; }
.ya-flip--oborot .ya-flip__oborot{ opacity:1; transition:opacity .25s ease, visibility 0s; }
}
html[data-dvizhenie="off"] .ya-flip__scena, html[data-dvizhenie="off"] .ya-flip--oborot > .ya-flip__scena{ -webkit-transform:none; transform:none; }
html[data-dvizhenie="off"] .ya-flip__storona, html[data-dvizhenie="off"] .ya-flip__oborot{ -webkit-transform:none; transform:none; }
html[data-dvizhenie="off"] .ya-flip__oborot{ opacity:0; }
html[data-dvizhenie="off"] .ya-flip--oborot .ya-flip__lico{ opacity:0; }
html[data-dvizhenie="off"] .ya-flip--oborot .ya-flip__oborot{ opacity:1; }
.ya-karty{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
/* Нечётное число карточек — столбиком: сирота во второй колонке рвала сетку. */
.ya-karty--nechet{ grid-template-columns:1fr; }
.ya-karty__polozheniya{ margin:var(--sp-3) 0 0; font:var(--type-body-m); line-height:1.7; color:var(--on-surface-variant); }
.ya-karty__polozheniya-zag{ font-weight:600; }
@media (max-width:640px){ .ya-karty{ grid-template-columns:1fr; } }
.ya-karta{
display:block;
width:100%;
min-height:220px;
padding:0;
border:none;
border-radius:16px;
background:transparent;
color:var(--on-surface);
text-align:left;
font:inherit;
cursor:pointer;
/* iOS Safari схлопывает поворот в подмену сторон, если у сцены нет
webkit-preserve-3d, а у граней нет своего translateZ. */
-webkit-perspective:900px;
perspective:900px;
overflow:visible;
}
.ya-karta__scena{
position:relative;
display:block;
min-height:248px;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);
-webkit-transition:-webkit-transform .5s ease;
transition:transform .5s ease;
}
.ya-karta--oborot .ya-karta__scena{
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}
.ya-karta__lico,.ya-karta__oborot{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
gap:6px;
padding:14px;
border-radius:16px;
border:1px solid var(--outline-variant);
background:var(--ya-karta-lico,var(--surface-container-lowest));
color:var(--on-surface);
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
/* Прокрутка на самой грани ломает 3D в Safari: оборот вспыхивает сразу.
Листать можно внутренний список, грань остаётся плоскостью поворота. */
overflow:visible;
-webkit-transform:rotateY(0deg) translateZ(1px);
transform:rotateY(0deg) translateZ(1px);
}
.ya-karta__lico,
.ya-karta__oborot{
align-items:center;
justify-content:center;
text-align:center;
}
.ya-karta__oborot{
-webkit-transform:rotateY(180deg) translateZ(1px);
transform:rotateY(180deg) translateZ(1px);
background:var(--ya-karta-ten,var(--secondary-container));
border-color:var(--ya-karta-ten-rule,var(--outline-variant));
color:var(--on-secondary-container);
}
/* Где движок не прячет обратную грань (WebKit без 3D-слоя: оборот лежал
поверх лица зеркальным), невидимую грань прячем явно. Смена видимости —
ровно на середине поворота (.25s из .5s), так что сам переворот виден. */
.ya-karta__lico{ visibility:visible; -webkit-transition:visibility 0s linear .25s; transition:visibility 0s linear .25s; }
.ya-karta__oborot{ visibility:hidden; -webkit-transition:visibility 0s linear .25s; transition:visibility 0s linear .25s; }
.ya-karta--oborot .ya-karta__lico{ visibility:hidden; }
.ya-karta--oborot .ya-karta__oborot{ visibility:visible; }
@media (prefers-reduced-motion:reduce){
.ya-karta__lico,.ya-karta__oborot{ -webkit-transition:none; transition:none; }
}
html[data-dvizhenie="off"] .ya-karta__lico,
html[data-dvizhenie="off"] .ya-karta__oborot{ -webkit-transition:none; transition:none; }
.ya-karta__list{
display:flex;
flex-direction:column;
gap:6px;
min-height:0;
max-height:100%;
overflow:auto;
-webkit-overflow-scrolling:touch;
/* Короткая грань (демо-переворот) иначе висит у верха с пустотой снизу. */
flex:1 1 auto;
width:100%;
align-items:center;
justify-content:center;
text-align:center;
box-sizing:border-box;
}
.ya-karta__lico .ya-karta__list,
.ya-karta__oborot .ya-karta__list{
align-items:center;
justify-content:center;
text-align:center;
}
.ya-karta__znak{ width:128px; height:128px; display:block; flex-shrink:0; margin:0 auto 4px; }
/* Компактные карточки-выражения (ys6, «пролить свет на…»): без знака, только
текст — лицо в одну строку, оборот вмещает пару фраз. */
.ya-karty--kompakt{ grid-template-columns:1fr; gap:var(--sp-2,8px); }
.ya-karty--kompakt .ya-karta{ min-height:0; }
.ya-karty--kompakt .ya-karta__scena{ min-height:128px; }
.ya-karty--kompakt .ya-karta__imya{ font:var(--type-title-m,inherit); font-weight:700; }
.ya-karty--kompakt .ya-karta__tekst{ font:var(--type-body-s); line-height:1.45; }
@media (max-width:640px){ .ya-karty--kompakt .ya-karta__scena{ min-height:188px; } }
.ya-karta__imya{ font-weight:700; }
.ya-karta__tekst{ font:var(--type-body-m); line-height:1.5; }
@media (prefers-reduced-motion:reduce){
.ya-karta__scena{
-webkit-transition:none;
transition:none;
}
}
html[data-dvizhenie="off"] .ya-karta__scena{
-webkit-transition:none;
transition:none;
}
.ya-rod{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.ya-rod__centr{
width:96px; height:96px; border-radius:999px;
display:flex; align-items:center; justify-content:center;
background:var(--primary); color:var(--on-primary);
font-weight:700; letter-spacing:.04em;
}
.ya-rod__kolco{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.ya-rod__tolk{
margin-top:12px;
font:var(--type-body-s);
line-height:1.5;
color:var(--on-surface);
}
.ya-vecher p{ margin:0 0 8px; font:var(--type-body-m, var(--type-body-s)); line-height:1.5; color:var(--on-surface); }
.ya-vecher__vremya{ font-weight:400; }
.ya-vesh-imya,.ya-vesh-mesto{ display:flex; flex-direction:column; gap:4px; margin-bottom:8px; font:var(--type-body-s); color:var(--on-surface); }
.ya-vesh-imya input,.ya-vesh-mesto input{
min-height:44px;
padding:8px 12px;
border-radius:12px;
border:1px solid var(--outline);
background:var(--surface-container-lowest);
color:var(--on-surface);
font:inherit;
}
.ya-vesh-mesto--aktiv input{ border-color:var(--primary); }
.ya-vesh-mesto__n{ font-weight:700; }
.ya-vesh-knopki{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.ya-vesh-primer,.ya-vesh-gotovo{
margin-top:12px;
font:var(--type-body-s);
line-height:1.5;
color:var(--on-surface);
}
/* «Своя вещь»: имя сверху на всю ширину; двенадцать мест — подпись
слева от ввода в одной строке; на столе два столбца (1–6 | 7–12);
шестиугольник под сеткой по центру. Без двухколоночной каши поле|чертёж. */
.ya-vesh{
display:flex;
flex-direction:column;
gap:var(--sp-4);
min-width:0;
}
.ya-vesh .ya-vesh-imya,
.ya-vesh .ya-vesh-mesto,
.ya-vesh .ya-vesh-knopki,
.ya-vesh .ya-vesh-primer,
.ya-vesh .ya-vesh-gotovo,
.ya-vesh .ya-hex-schet{ margin:0; }
.ya-vesh .ya-vesh-imya{ width:100%; max-width:none; }
.ya-vesh__polya{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:var(--sp-2);
min-width:0;
}
.ya-vesh .ya-vesh-mesto{
display:grid;
/* Фиксированная колонка подписи под «12 короткое» — все вводы одной
ширины; на столе 54rem хватает примерам без обрезки. */
grid-template-columns:4.75rem minmax(0,1fr);
align-items:center;
column-gap:var(--sp-1, 4px);
min-width:0;
}
.ya-vesh .ya-vesh-mesto__n{
font:var(--type-label-l);
font-weight:700;
color:var(--on-surface);
white-space:nowrap;
line-height:1.2;
letter-spacing:0;
}
.ya-vesh .ya-vesh-mesto input{
box-sizing:border-box;
width:100%;
min-width:0;
height:var(--h-btn-compact);
min-height:var(--h-btn-compact);
max-height:var(--h-btn-compact);
padding:0 var(--sp-2);
/* Тело текста (Inter), не display-метка: у Manrope в плейсхолдере
пробелы слипались в «Чтоздесьувашейвещи?». */
font:var(--type-body-s);
letter-spacing:normal;
word-spacing:normal;
line-height:1.3;
overflow:hidden;
text-overflow:clip;
}
.ya-vesh .ya-vesh-mesto input::placeholder{
color:var(--on-surface-variant);
opacity:1;
white-space:nowrap;
font:var(--type-body-s);
letter-spacing:normal;
word-spacing:normal;
}
.ya-vesh__shema{
display:flex;
flex-direction:column;
align-items:center;
gap:var(--sp-2);
width:100%;
min-width:0;
}
.ya-vesh__shema-ris{
width:min(100%, 240px);
max-width:240px;
}
.ya-vesh__shema-ris svg{
display:block;
width:100%;
max-width:100%;
height:auto;
}
.ya-vesh__shema .ya-hex-gloss{
text-align:center;
margin:0;
max-width:100%;
/* Подпись шире чертежа — не режем обёрткой 240px. */
font:var(--type-body-s);
letter-spacing:normal;
word-spacing:normal;
color:var(--on-surface);
}
.ya-vesh .ya-vesh-knopki{ gap:var(--sp-2); }
.ya-vesh .ya-vesh-knopki .ya-btn{
flex:1 1 calc(50% - var(--sp-2));
margin:0;
}
.ya-vesh .ya-vesh-primer,
.ya-vesh .ya-vesh-gotovo ul{
margin:0;
padding:0 0 0 var(--sp-4);
}
.ya-vesh .ya-vesh-primer li + li,
.ya-vesh .ya-vesh-gotovo li + li{ margin-top:var(--sp-2); }
@media (min-width:768px){
/* Сначала вниз по левому столбцу (1–6), потом правый (7–12). */
.ya-vesh__polya{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-rows:repeat(6, auto);
grid-auto-flow:column;
column-gap:var(--sp-4);
row-gap:var(--sp-2);
}
.ya-vesh .ya-vesh-mesto{
grid-template-columns:4.75rem minmax(0,1fr);
}
.ya-vesh .ya-vesh-mesto input{
padding:0 var(--sp-1, 4px);
}
/* На столе ввод чуть шире: короче боковой паддинг. */
.ya-vesh .ya-vesh-mesto input{
padding-inline:2px;
}
}
/* Словарь урока. Запись — две строки на любой ширине: термин и ссылки на
положения в одной строке, краткое — под ними. Один кегль у термина,
одна черта между записями. Не влезли термин и ссылки в узкую строку —
ссылки переносятся под термин целиком, диапазон («21–24») не рвётся. */
.ya-slovar{ min-width:0; }
.ya-slovar__spisok{ margin:0; padding:0; }
.ya-slovar__zapis{ padding:var(--sp-3) 0; }
.ya-slovar__zapis:first-child{ padding-top:0; }
.ya-slovar__zapis:last-child{ padding-bottom:0; }
.ya-slovar__zapis + .ya-slovar__zapis{ border-top:1px solid var(--outline-variant); }
.ya-slovar__stroka{
display:flex;
flex-wrap:wrap;
align-items:baseline;
column-gap:var(--sp-3);
row-gap:var(--sp-1);
margin:0;
}
.ya-slovar__termin{
font:var(--type-body-m);
font-weight:700;
color:var(--on-surface);
min-width:0;
overflow-wrap:break-word;
}
.ya-slovar__pol{
font:var(--type-body-m);
color:var(--on-surface-variant);
min-width:0;
}
.ya-slovar__pol a,
.ya-slovar__pol span{ white-space:nowrap; }
.ya-slovar__kratko{
margin:var(--sp-1) 0 0;
font:var(--type-body-m);
font-size:16px;
line-height:1.5;
color:var(--on-surface);
}
.ya-put{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ya-put__punkt{ display:flex; gap:8px; align-items:flex-start; color:var(--on-surface); }
.ya-put__punkt--gotov{ color:var(--ok); }
.ya-put__znak{
width:28px; height:28px; border-radius:999px; flex:none;
display:inline-flex; align-items:center; justify-content:center;
background:var(--surface-container-highest); color:var(--on-surface);
font-weight:700;
}
.ya-put__punkt--gotov .ya-put__znak{ background:var(--ok); color:var(--on-ok, var(--surface)); }
.ya-hex-zadacha{
margin:0 0 10px;
font:var(--type-title-m, var(--type-body-m));
color:var(--on-surface);
}
.ya-hex-schet,.ya-hex-gotovo{
margin:0;
font:var(--type-body-s);
color:var(--on-surface-variant);
}
.ya-hex-gotovo{ color:var(--ok); font-weight:700; }
.ya-filtry--melko{ gap:6px; }
.ya-filtry--melko .ya-btn{
min-height:var(--h-btn-compact);
padding:0 var(--sp-3);
width:auto;
}
.ya-tablica--plotno .ya-tablica__ryad{ padding:8px; }
.ya-tablica__ryad--zhdet{
box-shadow:inset 0 0 0 1.5px var(--outline);
}
.ya-zov-mesto{ position:relative; }
.ya-karty > .ya-zov-mesto,
.ya-vybor-chertezha > .ya-zov-mesto{ min-width:0; }
.ya-vybor-chertezha > .ya-zov-mesto{ display:flex; }
.ya-karty > .ya-zov-mesto > .ya-karta,
.ya-vybor-chertezha > .ya-zov-mesto > .ya-vybor-chertezha__knop{ width:100%; }
.ya-vybor-chertezha > .ya-zov-mesto > .ya-vybor-chertezha__knop{ flex:1 1 auto; }
.ya-rod__kolco > .ya-zov-mesto,
.ya-filtry > .ya-zov-mesto{ display:inline-flex; }
/* Палец «нажми» — то же движение, что .ur-tap-coach у проверок первого урока. */
.ya-nazhim{
position:absolute; z-index:3; pointer-events:none;
left:var(--tap-x); top:var(--tap-y);
width:40px; height:40px; padding:0;
display:flex; align-items:center; justify-content:center;
border-radius:999px;
background:var(--primary-container); color:var(--on-primary-container);
border:2px solid var(--primary);
box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);
transform:translate(-50%, calc(-50% - 4px));
animation:ya-nazhim 1.7s ease-in-out infinite;
}
.ya-nazhim__palec{ display:block; line-height:0; color:var(--primary); }
.ya-nazhim__palec .ya-palec, .ur-tap-coach__finger .ya-palec{ transform:rotate(180deg); }
/* Над целью, снаружи рамки: низ чипа на 6px выше верхнего края цели. */
.ya-nazhim--nad{ top:0 !important; margin-top:-26px; }
@keyframes ya-nazhim{
0%,100%{ opacity:.92; transform:translate(-50%, calc(-50% - 4px)); }
50%{ opacity:1; transform:translate(-50%, calc(-50% - 9px)); }
}
@keyframes ya-polzunok-tolchok{
0%,100%{ transform:translateX(0); }
50%{ transform:translateX(10px); }
}
.ya-polzunok--zov{ animation:ya-polzunok-tolchok 1.7s ease-in-out infinite; }
@keyframes ya-hex-puls{
0%,100%{ opacity:.35; }
50%{ opacity:1; }
}
.ya-hex-puls{ animation:ya-hex-puls 1.7s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){
.ya-nazhim,.ya-polzunok--zov,.ya-hex-puls{ animation:none; }
.ya-nazhim{ opacity:1; }
.ya-hex-puls{ opacity:.85; }
}
html[data-dvizhenie="off"] .ya-nazhim,
html[data-dvizhenie="off"] .ya-polzunok--zov,
html[data-dvizhenie="off"] .ya-hex-puls{ animation:none; }
html[data-dvizhenie="off"] .ya-nazhim{ opacity:1; }
html[data-dvizhenie="off"] .ya-hex-puls{ opacity:.85; }
.ya-dalshe{
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:8px 12px;
padding:4px 24px 28px;
max-width:var(--ur-kol, 680px);
margin:0 auto;
}
.ya-dalshe__pochemu{
margin:0;
font:var(--type-body-s);
color:var(--on-surface-variant);
text-align:center;
}
.ya-rod--pautina{
position:relative;
width:min(100%, 420px);
aspect-ratio:1;
margin:0 auto;
overflow:hidden;
}
.ya-rod--pautina .ya-rod__centr{
position:absolute; left:50%; top:50%;
transform:translate(-50%,-50%);
width:72px; height:72px;
z-index:1;
}
.ya-rod__niti{
position:absolute; inset:0;
width:100%; height:100%;
z-index:0; pointer-events:none;
}
.ya-rod__nit{ stroke:var(--outline); stroke-width:.4; }
.ya-rod__nit--otkryta{
stroke:var(--primary); stroke-width:.9;
stroke-dasharray:1; stroke-dashoffset:0;
animation:ya-rod-nit .45s ease-out;
}
@keyframes ya-rod-nit{ from{ stroke-dashoffset:1 } to{ stroke-dashoffset:0 } }
.ya-rod__uzel{
position:absolute; z-index:1;
transform:translate(-50%,-50%);
width:30%; max-width:7.2rem;
}
.ya-rod__knop{
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:2px; width:100%; min-height:48px; padding:4px 2px;
border-radius:12px; border:1px solid var(--outline);
background:var(--surface-container-lowest); color:var(--on-surface);
font:var(--type-body-s); line-height:1.15; cursor:pointer;
}
.ya-rod__knop--otkryt{ border-color:var(--primary); color:var(--primary); }
.ya-rod__knop--seichas{ background:var(--primary-container); color:var(--on-primary-container); }
@media (prefers-reduced-motion:reduce){
.ya-rod__nit--otkryta{ animation:none; }
}
html[data-dvizhenie="off"] .ya-rod__nit--otkryta{ animation:none; }
.ya-vecher-verh{
margin-top:4px; padding-bottom:4px;
}
.ya-vecher-schet{
margin:0 0 8px;
font:var(--type-body-s);
font-weight:400;
color:var(--on-surface);
}
/* Одна горизонтальная лента компактных пилюль 1–5; имя момента — подписью ниже. */
.ya-vecher-momenty{
display:flex;
flex-wrap:nowrap;
align-items:center;
justify-content:center;
gap:6px;
margin:0 0 6px;
min-width:0;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.ya-vecher-momenty::-webkit-scrollbar{ display:none; }
.ya-vecher-moment{
box-sizing:border-box;
flex:0 0 auto;
display:inline-flex;
align-items:center;
justify-content:center;
gap:2px;
min-width:2.5rem;
min-height:2.5rem;
padding:0 8px;
border:1px solid var(--outline-variant);
border-radius:999px;
background:var(--surface-container-lowest);
color:var(--on-surface);
font:var(--type-label-m, var(--type-body-s));
font-weight:400;
cursor:pointer;
}
.ya-vecher-moment:disabled{
cursor:default;
color:color-mix(in srgb, var(--on-surface) 38%, transparent);
background:var(--surface-container);
}
.ya-vecher-moment--сейчас{
background:var(--primary);
color:var(--on-primary);
border-color:var(--primary);
}
.ya-vecher-moment--byl{
box-shadow:inset 0 0 0 1.5px var(--primary);
background:var(--primary-container);
color:var(--on-primary-container);
border-color:transparent;
}
.ya-vecher-moment__n{ font-variant-numeric:tabular-nums; }
.ya-vecher-galochka{ font-size:.85em; line-height:1; }
.ya-vecher__moment-imya{
margin:0 0 8px;
text-align:center;
font:var(--type-body-s);
font-weight:400;
color:var(--on-surface-variant);
}
.ya-vecher-nav__strelka{
flex:0 0 auto;
min-width:2.5rem;
align-self:center;
}
.ya-vecher-nav__strelka--pust{ visibility:hidden; pointer-events:none; }
/* Карусель: вкладки + подпись + рисунок в одном кадре; слайды равной высоты. */
.ya-vecher-karusel{
position:relative; overflow:hidden; min-width:0;
}
.ya-vecher-karusel__lenta{
display:flex; width:100%;
transition:transform .32s ease;
will-change:transform;
}
.ya-vecher-karusel--tixo .ya-vecher-karusel__lenta{ transition:none; }
.ya-vecher-karusel__slajd{
flex:0 0 100%; width:100%; min-width:100%;
box-sizing:border-box;
display:flex; flex-direction:column; gap:var(--sp-2);
padding:0 1px;
}
.ya-vecher-karusel__slajd--pust{ visibility:hidden; pointer-events:none; }
.ya-vecher__scena{
margin:0;
font:var(--type-body-m, var(--type-body-s));
line-height:1.45;
font-weight:400;
color:var(--on-surface);
text-align:center;
}
.ya-vecher__ris-ryad{
display:flex;
align-items:center;
gap:var(--sp-2);
min-width:0;
}
.ya-vecher__ris{
flex:1 1 auto;
width:auto;
max-width:none;
max-height:30vh;
margin:0;
min-width:0;
}
@media (max-width:640px){
.ya-vecher__ris{ max-height:26vh; }
}
.ya-vecher__okno{
width:100%;
max-width:100%;
max-height:30vh;
height:auto;
display:block;
border-radius:var(--shape-m, 12px);
}
@media (max-width:640px){
.ya-vecher__okno{ max-height:26vh; }
}
.ya-vecher__blok{
box-sizing:border-box;
margin:0;
padding:var(--sp-2) var(--sp-3);
background:var(--surface-container-lowest);
border:1px solid var(--outline-variant);
border-radius:var(--shape-l, 16px);
min-width:0;
}
.ya-vecher__blok p{ margin:0 0 var(--sp-2); }
.ya-vecher__blok p:last-child{ margin-bottom:0; }
.ya-vecher__blok .ya-vecher__vremya{ margin-bottom:var(--sp-2); }
.ya-vecher__vod{ font-weight:400; color:var(--on-surface-variant); }
.ya-vecher__blok--vedayet{
display:grid;
/* Колонка схемы — фиксированной ширины: у «auto» с width:min(100%,…)
внутри Safari считал процент от строки и сжимал текст до слова в строке. */
grid-template-columns:minmax(0,1fr) 140px;
gap:var(--sp-2) var(--sp-3);
align-items:center;
}
.ya-vecher__ved-txt{ min-width:0; }
.ya-vecher__shema{
margin:0;
display:flex;
justify-content:center;
align-items:center;
width:100%;
min-width:0;
flex-shrink:0;
}
.ya-vecher__shema svg{
width:100%;
max-width:160px;
height:auto;
display:block;
}
/* На телефоне — столбиком: текст на всю ширину, схема под ним. */
@media (max-width:520px){
.ya-vecher__blok--vedayet{
grid-template-columns:minmax(0,1fr);
}
.ya-vecher__ved-txt{ justify-self:stretch; }
.ya-vecher__shema{ width:140px; justify-self:center; }
}
@media (prefers-reduced-motion:reduce){
.ya-vecher-karusel__lenta{ transition:none; }
.ya-vecher__okno, .ya-vecher__shema svg{ transition:none; }
}
html[data-dvizhenie="off"] .ya-vecher-karusel__lenta{ transition:none; }
html[data-dvizhenie="off"] .ya-vecher__okno,
html[data-dvizhenie="off"] .ya-vecher__shema svg{ transition:none; }
.ya-linia-sveta{ display:block; width:min(100%,280px); height:auto; margin:var(--sp-4) auto 0; }
@media (prefers-reduced-motion:reduce){
.ya-vecher__okno, .ya-vecher__shema svg{ transition:none; }
}
html[data-dvizhenie="off"] .ya-vecher__okno,
html[data-dvizhenie="off"] .ya-vecher__shema svg{ transition:none; }
/* Акцент слова — цвет из токенов, без курсива и полужирного. */
.ya-rod__zerno{
font-style:normal;
font-weight:400;
color:var(--tertiary);
}
.ya-nomer--krasny{ color:var(--error); font-weight:400; }
.ya-nomer--zhelty{ color:var(--tertiary); font-weight:400; }
/* ── АНАЛОГИЯ (ys1–ys6) ─────────────────────────────────────────────
Выноска-аналогия внутри объяснения: без ярлыка (17.10.2026), только
текст body-l в рамке с полосой акцента. Без засечек и без наклона: правило
«ни одного курсива» (tests/uroki-bez-kursiva). Акцент — тонкая полоса
слева цвета tertiary, рамка — outline-variant, как у карточек. */
/* Выноска-аналогия (02.11.2026, ys7 методист): пунктирная скруглённая
рамка цвета акцента/tertiary — как в макете методиста. Без ярлыка
«Аналогия.» (срезает голос урока). Без курсива. */
.ya-analogiya{
margin:var(--sp-4) 0 var(--sp-1);
padding:var(--sp-3) var(--sp-4);
border-radius:var(--shape-m);
border:1.5px dashed var(--accent, var(--tertiary));
background:var(--surface-container-lowest);
color:var(--on-surface);
text-align:left;
}
.ya-analogiya__tekst{
/* Размер основного текста (body-l), не мелкий шрифт: обзор 17.10.2026. */
font:var(--type-body-l);
font-style:normal;
color:var(--on-surface);
}
/* ── РИСУНОК СЛЕВА + МЕНЮ СПРАВА (ys7 методист) ─────────────────────
На широких экранах — две колонки; на телефоне — стек. */
.ya-ris-menu{
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
gap:var(--sp-4);
align-items:start;
margin:var(--sp-3) 0;
}
.ya-ris-menu__ris{min-width:0}
.ya-ris-menu__menu{min-width:0}
@media (max-width:720px){
.ya-ris-menu{grid-template-columns:1fr}
}
.ya-vremya-kart p{font:var(--type-body-m);color:var(--on-surface)}
/* ── YS7 UI POLISH (05.11.2026) ─────────────────────────────────────
Рисунки крупнее, цели касания ≥44px, явные стейты без скачков. */
.ya-ris-menu{
gap:var(--sp-5);
align-items:stretch;
}
.ya-ris-menu__ris{
display:flex;
flex-direction:column;
justify-content:center;
}
.ya-ris-menu__ris > svg{
max-width:min(100%,440px);
width:100%;
height:auto;
shape-rendering:geometricPrecision;
text-rendering:geometricPrecision;
}
.ya-ris-menu__ris > svg [stroke]{
vector-effect:non-scaling-stroke;
}
.ya-ris-menu__menu{
display:flex;
flex-direction:column;
gap:var(--sp-3);
min-height:100%;
}
.ya-ris-menu__menu .ya-btn{
min-height:44px;
justify-content:flex-start;
text-align:left;
transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
@media (prefers-reduced-motion:reduce){
.ya-ris-menu__menu .ya-btn{transition:none}
}
html[data-dvizhenie="off"] .ya-ris-menu__menu .ya-btn{transition:none}
/* Концы креста / кнопки пар — стейты */
.ya-ris-menu [data-konec-btn][aria-pressed="true"],
.ya-ris-menu [data-konec-btn].ya-btn--filled{
box-shadow:inset 0 0 0 2px var(--primary);
}
.ya-ris-menu [data-konec-btn]:focus-visible{
outline:2px solid var(--primary);
outline-offset:2px;
}
/* Карточка времени — фиксированная мин. высота, чтобы Раньше/Дальше не прыгали */
.ya-vremya-kart{
min-height:9.5rem;
padding:var(--sp-3) var(--sp-4);
border-radius:var(--shape-m);
border:1px solid var(--outline-variant);
background:var(--surface-container-low);
color:var(--on-surface);
}
.ya-vremya-kart__meta{
font:var(--type-label-m);
color:var(--on-surface-variant);
margin:0 0 var(--sp-1);
}
.ya-vremya-kart__imya{
font:var(--type-title-s);
font-weight:700;
margin:0 0 var(--sp-2);
color:var(--on-surface);
}
.ya-vremya-kart p{margin:0 0 var(--sp-1);font:var(--type-body-m);color:var(--on-surface)}
.ya-vremya-kart p:last-child{margin-bottom:0}
/* Переключатель взгляда */
.ya-vzglyad-tabs{
display:flex;
gap:var(--sp-2);
flex-wrap:wrap;
}
.ya-vzglyad-tabs .ya-btn{
min-height:44px;
flex:1 1 auto;
}
.ya-vzglyad-tabs .ya-btn[aria-selected="true"]{
box-shadow:inset 0 0 0 2px var(--primary);
}
/* Раньше / Дальше на краях */
.ya-svet-knopki .ya-btn[disabled],
.ya-svet-knopki .ya-btn[aria-disabled="true"]{
opacity:0.45;
cursor:not-allowed;
}
/* Имена: выбранное имя, подсветка строк, ошибка без скачка */
.ya-imena-bank .ya-btn[aria-pressed="true"]{
outline:2px solid var(--accent, var(--primary));
outline-offset:2px;
}
.ya-imena-slot{
min-height:48px;
transition:outline-color .15s ease, background .15s ease, border-color .15s ease;
}
.ya-imena-slot[data-await="1"]{
outline:2px dashed var(--accent, var(--primary));
outline-offset:0;
}
.ya-imena-slot[data-ok="1"]{
border-color:var(--ok) !important;
}
.ya-imena-oshibka{
min-height:1.4em;
margin:0 0 var(--sp-1);
color:var(--error);
font:var(--type-body-s);
}
.ya-imena-oshibka:empty{display:none}
/* Верный ответ в «Проверь себя» — зелёный через класс DS, не инлайн */
.ya-btn.ya-btn--verno{
background:var(--ok) !important;
color:var(--on-ok, #fff) !important;
border-color:var(--ok) !important;
opacity:1 !important;
}
.ya-btn.ya-btn--verno:disabled{opacity:1}
/* Четверти — активная карточка */
.ya-chetvert-kart{
min-height:7.5rem;
padding:var(--sp-3) var(--sp-4);
border-radius:var(--shape-m);
border:1px solid var(--outline-variant);
background:var(--surface-container-low);
}
.ya-chetvert-kart__imya{font:var(--type-title-s);font-weight:700;margin:0 0 var(--sp-2)}
.ya-chetvert-kart p{margin:0;font:var(--type-body-m)}
/* Рисунок явного света — крупнее */
[data-yavnyj-ris] > svg{
max-width:min(100%,420px);
shape-rendering:geometricPrecision;
}
/* ── ЗАДАНИЕ (рамка интерактивного блока урока) ───────────────────────
Одна рамка для «Сделай сам», «Нажимай на лучи», «Открывай карточки» и
т.п.: поверхность low, радиус shape-l, полоса слева цвета книги.
Внутри: TaskFrameLabel, ЗаголовокРаздела, .ya-zadanie__uslovie (условие),
само задание и .ya-uspeh (итог). */
.ya-zadanie{
background:var(--surface-container-low);
border:1px solid var(--outline-variant);
border-left:3px solid var(--book-sutki, var(--primary));
border-radius:var(--shape-l);
padding:var(--sp-4) var(--sp-4);
}
@media (max-width:640px){ .ya-zadanie{ padding:var(--sp-4) var(--sp-3); } }
.ya-zadanie__uslovie{ font:var(--type-body-m); color:var(--on-surface); margin:0 0 var(--sp-3); }
/* Итог задания: короткая строка цвета ok. */
.ya-uspeh{ font:var(--type-body-s); color:var(--ok); margin-top:var(--sp-2); }
/* ── РИСУНОК В РАМКЕ (чертёж/график без задания) ─────────────────────── */
.ya-ris-ramka{
background:var(--surface-container-low);
border:1px solid var(--outline-variant);
border-radius:var(--shape-l);
padding:var(--sp-4) var(--sp-3);
}
.ya-ris-ramka__podpis{ font:var(--type-body-s); color:var(--on-surface-variant); text-align:center; margin-top:var(--sp-2); }
/* Шаги урока: рамка и ход, цифра чернилами, без своего цвета на шаг. */
.ya-karta-shagov{
list-style:none;
padding:0;
margin:16px 0 0;
display:flex;
flex-direction:column;
gap:var(--sp-2);
}
.ya-karta-shagov__ryad{
display:flex;
align-items:center;
gap:var(--sp-3);
width:100%;
margin:0;
padding:10px 12px;
border:1px solid var(--outline);
border-radius:var(--shape-m, 12px);
background:var(--surface-container-lowest);
color:var(--on-surface);
font:var(--type-body-m);
font-style:normal;
font-weight:400;
text-align:left;
cursor:pointer;
}
.ya-karta-shagov__ryad--tiho{ cursor:default; }
button.ya-karta-shagov__ryad:hover{ background:var(--surface-container); }
button.ya-karta-shagov__ryad:focus-visible{
outline:2px solid var(--outline);
outline-offset:2px;
}
.ya-karta-shagov__znak{
flex:none;
width:40px;
height:40px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid var(--outline);
background:transparent;
color:var(--on-surface);
font:var(--type-title-m);
font-weight:400;
font-style:normal;
line-height:1;
}
.ya-karta-shagov__tekst{
flex:1 1 auto;
min-width:0;
padding-top:0;
font:var(--type-body-m);
font-style:normal;
font-weight:400;
line-height:1.45;
color:var(--on-surface);
}
.ya-karta-shagov__tekst b{
font:inherit;
font-style:normal;
font-weight:400;
}
.ya-karta-shagov__hod{
flex:none;
margin-top:8px;
color:var(--on-surface-variant);
}
@media (prefers-reduced-motion:reduce){
.ya-karta-shagov__ryad, .ya-analogiya{ transition:none; }
}
html[data-dvizhenie="off"] .ya-karta-shagov__ryad,
html[data-dvizhenie="off"] .ya-analogiya{ transition:none; }
/* Прошедшие ворота, включая «Конец»: тот же заголовок, что у разделов, без курсива и без коричневого. */
.ya-vorota{
padding:var(--sp-6) var(--sp-5) var(--sp-3);
max-width:var(--ur-kol, 680px);
margin:0 auto;
text-align:center;
}
.ya-vorota__cherta{
height:2px;
width:min(100%, 160px);
margin:0 auto var(--sp-4);
background:var(--ya-razdel-accent,var(--outline));
border-radius:2px;
}
.ya-vorota__imya{
font:var(--type-title-l);
font-style:normal;
color:var(--on-surface);
}
.ya-vorota__pod{
margin-top:var(--sp-2);
font:var(--type-body-s);
color:var(--on-surface-variant);
}
/* Тихая шапка урока: курс, одна полоса хода, мета. Без «Урок N» и без 2/4. */
.ya-urok-hod{
position:relative;
height:3px;
width:100%;
background:color-mix(in srgb, var(--outline-variant) 85%, var(--surface-container-high));
overflow:hidden;
}
.ya-urok-hod__tiho,
.ya-urok-hod__tverdo{
position:absolute;
left:0; top:0; bottom:0;
max-width:100%;
transition:width .35s ease;
}
.ya-urok-hod__tiho{
/* Доля текущего урока внутри сегмента курса — тише primary. */
background:color-mix(in srgb, var(--primary) 42%, var(--outline-variant));
}
.ya-urok-hod__tverdo{
background:var(--primary);
}
.ya-urok-meta{
font:var(--type-label-s);
font-weight:400;
letter-spacing:var(--track-label, .02em);
color:var(--on-surface-variant);
text-transform:none;
}
@media (prefers-reduced-motion:reduce){
.ya-urok-hod__tiho, .ya-urok-hod__tverdo{ transition:none; }
}
html[data-dvizhenie="off"] .ya-urok-hod__tiho,
html[data-dvizhenie="off"] .ya-urok-hod__tverdo{ transition:none; }
/* Вход урока. Один вид во всех уроках: крупное имя, под ним вторичная строка.
Без курсива и без отдельной краски.
--sp-5 в шкале нет (4·8·12·16·24·32): без запасного значения вся padding-
строка становилась недействительной и заливка резала буквы. */
.ya-vhod{
box-sizing:border-box;
padding:var(--sp-8) var(--sp-6) var(--sp-6);
max-width:var(--ur-kol,680px);
margin:var(--sp-3) auto 0;
background:var(--surface-container-lowest);
border-radius:var(--shape-l,16px);
border:1px solid var(--outline-variant);
}
.ya-vhod__yarlyk{
margin:0 0 var(--sp-3);
font:var(--type-label-s);
letter-spacing:var(--track-label);
text-transform:uppercase;
color:var(--on-surface-variant);
}
.ya-vhod__imya{
margin:0 0 var(--sp-4);
font:var(--type-headline-l);
font-style:normal;
font-weight:600;
color:var(--on-surface);
overflow:visible;
}
.ya-vhod__lid{
margin:0;
font:var(--type-body-l);
font-style:normal;
font-weight:400;
color:var(--on-surface-variant);
}
/* ═══ ПОЛОЖЕНИЕ В УРОКЕ · .ya-polozhenie ════════════════════════════════════
Одна вставка на все уроки, где цитируется положение книги. Не отдельный
цвет: поверхность карточки и тихая кромка, как у остальных карточек.
Строка читается «Положение 47» — слово и номер одним кеглем, одним
шрифтом шкалы, прописными цифрами. «в книге» — та же строка, обычное
начертание, ссылка в учебник. Движения нет; оба выключателя всё равно
гасят переход, если его добавят позже. */
.ya-polozhenie{
margin:var(--sp-3) 0 var(--sp-1);
padding:var(--sp-2) var(--sp-3);
background:var(--surface-container-low);
color:var(--on-surface);
border:1px solid var(--outline-variant);
border-radius:var(--shape-m);
}
.ya-polozhenie--otkryto{ padding-bottom:var(--sp-3); }
.ya-polozhenie__stroka{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--sp-3);
}
.ya-polozhenie__imya{
flex:1 1 auto;
min-width:0;
min-height:44px;
display:flex;
align-items:center;
gap:var(--sp-2);
margin:0;
padding:0;
border:0;
background:transparent;
color:inherit;
font:var(--type-title-s);
font-style:normal;
font-weight:600;
font-variant:normal;
font-variant-numeric:lining-nums;
letter-spacing:0;
text-transform:none;
text-align:left;
cursor:pointer;
}
.ya-polozhenie__nadpis{
font:inherit;
font-size:15px; /* = .ya-polozhenie__kniga: номер и книга одного кегля */
font-style:normal;
font-weight:inherit;
font-variant:normal;
font-variant-numeric:lining-nums;
letter-spacing:0;
text-transform:none;
}
.ya-polozhenie__znak{
flex:0 0 auto;
color:var(--on-surface-variant);
font:inherit;
font-style:normal;
font-weight:400;
font-variant-numeric:lining-nums;
text-transform:none;
}
.ya-polozhenie__kniga{
flex:0 0 auto;
min-height:44px;
display:inline-flex;
align-items:center;
font:var(--type-title-s);
font-size:15px;
font-style:normal;
font-weight:400;
font-variant:normal;
font-variant-numeric:lining-nums;
letter-spacing:0;
text-transform:none;
color:var(--on-surface-variant);
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:3px;
}
.ya-polozhenie__imya:focus-visible,
.ya-polozhenie__kniga:focus-visible{
outline:2px solid var(--primary);
outline-offset:2px;
}
.ya-polozhenie__tsitata{
margin:var(--sp-2) 0 0;
font:var(--type-body-m);
font-style:normal;
line-height:1.55;
color:var(--on-surface);
}
.ya-polozhenie__primechanie{
margin-top:var(--sp-2);
font:var(--type-body-s);
font-style:normal;
font-weight:400;
color:var(--on-surface-variant);
}
@media (prefers-reduced-motion:reduce){
.ya-polozhenie,
.ya-polozhenie *{
animation:none;
transition:none;
}
}
html[data-dvizhenie="off"] .ya-polozhenie,
html[data-dvizhenie="off"] .ya-polozhenie *{
animation:none;
transition:none;
}
/* Слово-акцент в имени входа (itogi1: «вы научились видеть сутки»). Цвет
акцента системы; начертание то же, что у всего заголовка: без курсива,
без отдельной жирности. */
.ya-vhod__akcent{
color:var(--ya-primary-ink);
font:inherit;
font-style:normal;
}
/* Положение строкой-ссылкой: номер и «в книге», без раскрытия цитаты. */
.ya-polozhenie--ssylka .ya-polozhenie__imya{ cursor:default; }
/* ═══ ИТОГИ БЛОКА · .ya-itogi-* ═════════════════════════════════════════════
Экран «Подведем итог блока» (itogi1). Путь остановок, «Теперь вы умеете»,
«Финал блока», «Весь курс — три блока». Только роли tokeny.css; ширина —
колонка урока (--ur-kol). Движение одно — мягкая смена карточки
остановки; оба выключателя движения его гасят. */
.ya-itogi-put,
.ya-itogi-sekciya,
.ya-itogi-kurs{
box-sizing:border-box;
max-width:var(--ur-kol,680px);
margin:var(--sp-4) auto 0;
padding:0 var(--sp-6);
}
/* Полоса пути: шесть остановок одной строкой. На телефоне — прокрутка
вбок, выбранная остановка встаёт в середину. */
.ya-itogi-polosa{
position:relative;
overflow-x:auto;
overscroll-behavior-x:contain;
scrollbar-width:none;
background:var(--surface-container-lowest);
border:1px solid var(--outline-variant);
border-radius:var(--shape-l,16px);
}
.ya-itogi-polosa::-webkit-scrollbar{ display:none; }
.ya-itogi-polosa__ryad{
position:relative;
display:flex;
gap:var(--sp-1);
min-width:max-content;
padding:var(--sp-3) var(--sp-2);
}
/* Нить пути — через середины плиток, от первой до последней. */
.ya-itogi-polosa__ryad::before{
content:"";
position:absolute;
left:calc(var(--sp-2) + 36px);
right:calc(var(--sp-2) + 36px);
top:calc(var(--sp-3) + var(--sp-1) + 26px);
height:2px;
background:var(--outline-variant);
}
.ya-itogi-ostanovka{
position:relative;
flex:0 0 72px;
display:flex;
flex-direction:column;
align-items:center;
gap:var(--sp-2);
min-height:44px;
margin:0;
padding:var(--sp-1) 0 var(--sp-1);
border:0;
border-radius:var(--shape-m);
background:transparent;
color:var(--on-surface-variant);
font:inherit;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.ya-itogi-ostanovka:focus-visible{
outline:2px solid var(--primary);
outline-offset:2px;
}
.ya-itogi-ostanovka__plitka{
position:relative;
box-sizing:border-box;
width:52px;
height:52px;
padding:5px;
border-radius:var(--shape-full);
background:var(--surface-container-lowest);
box-shadow:0 0 0 1px var(--outline-variant);
transition:box-shadow var(--dur-medium) var(--ease-standard);
}
.ya-itogi-ostanovka__plitka .ya-itogi-ris{ display:block; width:100%; height:100%; }
.ya-itogi-ostanovka--aktivna .ya-itogi-ostanovka__plitka{
box-shadow:0 0 0 2px var(--surface-container-lowest),0 0 0 4px var(--primary);
}
@media (hover:hover){
.ya-itogi-ostanovka:not(.ya-itogi-ostanovka--aktivna):hover .ya-itogi-ostanovka__plitka{
box-shadow:0 0 0 1px var(--outline);
}
}
.ya-itogi-ostanovka__znak{
position:absolute;
right:-4px;
bottom:-4px;
display:flex;
align-items:center;
justify-content:center;
width:20px;
height:20px;
border-radius:var(--shape-full);
background:var(--ok);
color:var(--on-ok);
box-shadow:0 0 0 2px var(--surface-container-lowest);
}
.ya-itogi-ostanovka__znak .ya-ik{ width:14px; height:14px; }
.ya-itogi-ostanovka__imya{
font:var(--type-label-m);
letter-spacing:0;
text-transform:none;
white-space:nowrap;
}
.ya-itogi-ostanovka--aktivna .ya-itogi-ostanovka__imya{ color:var(--on-surface); }
/* Карточка остановки: рисунок, метка, имя урока, текст, мысль, положения. */
.ya-itogi-karta{
margin-top:var(--sp-3);
background:var(--surface-container-lowest);
border:1px solid var(--outline-variant);
border-radius:var(--shape-l,16px);
overflow:hidden;
}
.ya-itogi-karta:focus-visible{
outline:2px solid var(--primary);
outline-offset:2px;
}
.ya-itogi-karta__telo{
display:flex;
flex-direction:column;
gap:var(--sp-4);
padding:var(--sp-6);
}
.ya-itogi-karta__telo--smena{
animation:ya-itogi-smena var(--dur-medium) var(--ease-emphasized-decel) both;
}
@keyframes ya-itogi-smena{
from{ opacity:0; transform:translateY(6px); }
to{ opacity:1; transform:none; }
}
.ya-itogi-karta__ris{
flex:0 0 auto;
width:112px;
height:112px;
padding:var(--sp-2);
box-sizing:border-box;
border-radius:var(--shape-full);
background:var(--surface-container-low);
}
.ya-itogi-karta__ris .ya-itogi-ris{ display:block; width:100%; height:100%; }
.ya-itogi-karta__slova{ min-width:0; }
.ya-itogi-karta__metka{
margin:0 0 var(--sp-1);
font:var(--type-label-l);
color:var(--on-surface-variant);
}
.ya-itogi-karta__imya{
margin:0 0 var(--sp-3);
font:var(--type-title-l);
color:var(--on-surface);
}
.ya-itogi-karta__tekst{
margin:0;
font:var(--type-body-l);
color:var(--on-surface);
}
/* Мысль остановки: строка-вывод урока — черта акцента слева, тот же кегль
текста, без курсива (курсив в системе только у цитаты книги). */
.ya-itogi-mysl{
margin:var(--sp-4) 0 0;
padding:var(--sp-1) 0 var(--sp-1) var(--sp-4);
border-left:3px solid var(--primary);
font:var(--type-body-l);
font-style:normal;
color:var(--on-surface);
}
.ya-itogi-nerazryv{ white-space:nowrap; }
.ya-itogi-polozheniya{ margin-top:var(--sp-3); }
.ya-itogi-polozheniya .ya-polozhenie{ margin:var(--sp-2) 0 0; }
.ya-itogi-nav{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--sp-3);
margin-top:var(--sp-3);
}
.ya-itogi-nav .ya-btn{ gap:var(--sp-1); }
/* «Теперь ты умеешь» — обычная карточка урока; «Финал блока» — тихая
заливка цвета курса, чтобы финал стоял особняком. */
.ya-itogi-umeete,
.ya-itogi-final{
padding:var(--sp-6);
background:var(--surface-container-lowest);
border:1px solid var(--outline-variant);
border-radius:var(--shape-l,16px);
}
.ya-itogi-final{
background:var(--book-sutki-container);
border-color:var(--book-sutki-container);
}
.ya-itogi-sekciya .ur-razdel[tabindex="-1"]:focus{ outline:none; }
.ya-itogi-umeete .ur-razdel,
.ya-itogi-final .ur-razdel{ margin:0 0 var(--sp-3); }
.ya-itogi-umeete__spisok{
list-style:none;
margin:0;
padding:0;
display:grid;
gap:var(--sp-3);
}
.ya-itogi-umeete__punkt{
display:flex;
align-items:flex-start;
gap:var(--sp-3);
font:var(--type-body-l);
color:var(--on-surface);
}
.ya-itogi-umeete__znak{
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
margin-top:1px;
border-radius:var(--shape-full);
background:var(--ok-container);
color:var(--on-ok-container);
}
.ya-itogi-final__tekst{
margin:0;
font:var(--type-body-l);
color:var(--on-surface);
}
/* «Весь курс — три блока». Телефон — столбиком с нитью между карточками;
от 768px — три карточки в ряд, как таблица методиста. */
.ya-itogi-kurs{ margin-top:var(--sp-8); }
.ya-itogi-kurs__zag{
margin:0 0 var(--sp-4);
font:var(--type-headline-s);
color:var(--on-surface);
text-align:center;
text-wrap:balance;
}
.ya-itogi-bloki{
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:1fr;
gap:var(--sp-4);
}
.ya-itogi-blok{
position:relative;
display:flex;
flex-direction:column;
padding:var(--sp-6);
background:var(--surface-container-lowest);
border:1px solid var(--outline-variant);
border-radius:var(--shape-l,16px);
color:var(--on-surface);
}
.ya-itogi-blok + .ya-itogi-blok::before{
content:"";
position:absolute;
left:50%;
top:calc(-1 * var(--sp-4) - 1px);
width:2px;
height:var(--sp-4);
margin-left:-1px;
background:var(--outline-variant);
}
.ya-itogi-blok--sleduyushchiy{
border-color:var(--primary);
box-shadow:inset 0 0 0 1px var(--primary);
}
.ya-itogi-blok--vperedi{
background:var(--surface-container-low);
color:var(--on-surface-variant);
}
.ya-itogi-blok__verh{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--sp-2);
margin-bottom:var(--sp-3);
}
.ya-itogi-blok__nomer{
font:var(--type-label-l);
color:var(--on-surface-variant);
}
.ya-itogi-status{
display:inline-flex;
align-items:center;
gap:var(--sp-1);
min-height:24px;
padding:0 var(--sp-2);
border-radius:var(--shape-full);
font:var(--type-label-m);
letter-spacing:0;
text-transform:none;
white-space:nowrap;
}
.ya-itogi-status .ya-ik{ width:14px; height:14px; }
.ya-itogi-status--proyden{ background:var(--ok-container); color:var(--on-ok-container); }
.ya-itogi-status--sleduyushchiy{ background:var(--primary); color:var(--on-primary); }
.ya-itogi-status--vperedi{
background:var(--surface-container-high);
color:var(--on-surface-variant);
box-shadow:inset 0 0 0 1px var(--outline-variant);
}
.ya-itogi-blok__glagol{
margin:0 0 var(--sp-1);
font:var(--type-headline-s);
color:inherit;
}
.ya-itogi-blok--proyden .ya-itogi-blok__glagol,
.ya-itogi-blok--sleduyushchiy .ya-itogi-blok__glagol{ color:var(--on-surface); }
.ya-itogi-blok__tema{
margin:0 0 var(--sp-1);
font:var(--type-body-l);
color:inherit;
}
.ya-itogi-blok__uroki{
margin:0 0 var(--sp-3);
font:var(--type-body-s);
color:var(--on-surface-variant);
}
.ya-itogi-blok__opis{
margin:0;
padding-top:var(--sp-3);
border-top:1px solid var(--outline-variant);
display:grid;
gap:var(--sp-2);
font:var(--type-body-m);
}
.ya-itogi-blok__opis div{ margin:0; }
.ya-itogi-blok__opis dt{
display:inline;
font:inherit;
color:var(--on-surface-variant);
}
.ya-itogi-blok__opis dd{
display:inline;
margin:0;
color:inherit;
}
.ya-itogi-kurs__itog{
margin:var(--sp-6) auto 0;
max-width:36em;
font:var(--type-title-m);
color:var(--on-surface);
text-align:center;
text-wrap:balance;
}
@media (min-width:768px){
.ya-itogi-polosa__ryad{ min-width:0; }
.ya-itogi-ostanovka{ flex:1 1 0; min-width:0; }
.ya-itogi-polosa__ryad::before{
left:calc(var(--sp-2) + (100% - 2 * var(--sp-2)) / 12);
right:calc(var(--sp-2) + (100% - 2 * var(--sp-2)) / 12);
}
.ya-itogi-karta__telo{
flex-direction:row;
align-items:flex-start;
gap:var(--sp-6);
padding:var(--sp-6);
}
.ya-itogi-karta__ris{ width:136px; height:136px; }
.ya-itogi-bloki{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.ya-itogi-blok{ padding:var(--sp-4); }
.ya-itogi-blok + .ya-itogi-blok::before{
left:calc(-1 * var(--sp-4) - 1px);
top:50%;
width:var(--sp-4);
height:2px;
margin:-1px 0 0;
}
}
@media (prefers-reduced-motion:reduce){
.ya-itogi-karta__telo--smena{ animation:none; }
.ya-itogi-ostanovka__plitka{ transition:none; }
}
html[data-dvizhenie="off"] .ya-itogi-karta__telo--smena{ animation:none; }
html[data-dvizhenie="off"] .ya-itogi-ostanovka__plitka{ transition:none; }
/* ═══ Пробное занятие · бесплатный вводный урок ═══════════════════════════════════════ */
.ya-vhod__yarlyk{
margin:0 0 var(--sp-2);
font:var(--type-label-m);
letter-spacing:var(--track-label);
color:var(--on-surface-variant);
text-transform:none;
}
.ya-demo-sutki{ position:relative; min-width:0; }
.ya-demo-sutki__svg{
display:block; width:100%; height:auto;
border-radius:var(--shape-l); overflow:hidden;
background:var(--reader-sheet);
}
/* Сутки одним взглядом: кадр рисует JS (DemoSutkiAnimBlock в engine.js) —
и в движении, и в тихом режиме. Здесь нет ни @keyframes, ни transform /
stop-color на светиле и небе: CSS перебивал атрибуты кадра, и в Safari и
Chrome солнце стояло, а звёзды щёлкали. */
.ya-demo-sutki__shagi{
display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3);
}
.ya-demo-age{
box-sizing:border-box;
display:flex; flex-direction:column; align-items:center;
gap:var(--sp-3);
/* --sp-5 в шкале нет: без запасного значения вся padding-строка
становилась недействительной — текст и ползунок липли к краям.
sp-8 даёт воздух вокруг заголовков, ползунка и абзаца after. */
padding:var(--sp-8) var(--sp-8);
text-align:center;
background:var(--primary-container);
color:var(--on-primary-container);
border:1px solid var(--outline-variant);
border-radius:var(--shape-l, 16px);
}
/* По центру в демо — всегда заголовок (шкала .ur-razdel / type-title),
не центрированный body. Проза «after» — слева, body. */
.ya-demo-age__title{
margin:0;
font:var(--type-title-m);
font-weight:700;
color:var(--on-primary-container);
text-wrap:balance;
}
.ya-demo-age__lead{
margin:0;
font:var(--type-title-s);
font-weight:700;
color:var(--on-primary-container);
}
.ya-demo-age__prompt{
margin:0;
font:var(--type-title-s);
font-weight:700;
color:var(--on-primary-container);
width:100%;
}
.ya-demo-age__vozrast{
font:var(--type-title-m);
font-weight:700;
color:var(--on-primary-container);
}
.ya-demo-age .ya-polzunok{ width:100%; max-width:100%; align-self:stretch; }
.ya-demo-age__chislo{
margin:0; font:var(--type-display-m);
color:var(--on-primary-container); font-variant-numeric:tabular-nums; letter-spacing:0;
}
.ya-demo-age__caption{
margin:0;
font:var(--type-title-s);
font-weight:700;
color:var(--on-primary-container);
max-width:28rem;
}
.ya-demo-age__after{
margin:var(--sp-2) 0 0;
font:var(--type-body-m);
color:var(--on-primary-container);
line-height:1.5;
text-align:left;
align-self:stretch;
opacity:.92;
}
.ya-demo-now{
box-sizing:border-box;
display:flex; flex-direction:column; align-items:center;
gap:var(--sp-2);
padding:var(--sp-8) var(--sp-8);
text-align:center;
background:var(--surface-container-low);
border:1px solid var(--outline-variant);
border-radius:var(--shape-l, 16px);
}
.ya-demo-now__icon{ display:block; line-height:0; color:var(--primary); }
.ya-demo-now__heading{
margin:0;
font:var(--type-title-m);
font-weight:700;
color:var(--on-surface);
text-wrap:balance;
}
.ya-demo-now__clock{
display:block;
margin:var(--sp-1) 0 0;
font:var(--type-display-s);
font-variant-numeric:tabular-nums;
letter-spacing:-0.02em;
color:var(--on-surface);
}
.ya-demo-now__device{
margin:0 0 var(--sp-2);
font:var(--type-title-s);
font-weight:700;
color:var(--on-surface-variant);
}
.ya-demo-now__q{
margin:0;
font:var(--type-title-s);
font-weight:700;
color:var(--on-surface);
max-width:28rem;
}
.ya-demo-now__after{
margin:var(--sp-2) 0 0;
font:var(--type-body-m);
color:var(--on-surface-variant);
line-height:1.5;
text-align:left;
align-self:stretch;
max-width:28rem;
}
.ya-demo-quiz__ris{ margin-bottom:var(--sp-3); }
.ya-demo-pic{
display:block; width:100%; height:auto; aspect-ratio:240 / 120;
border-radius:var(--shape-m); background:var(--surface-container-low);
}
.ya-demo-quiz__q{ margin:0 0 var(--sp-3); font:var(--type-title-m, 600 18px/24px var(--ya-font-display)); color:var(--on-surface); }
.ya-demo-quiz__var{ display:flex; flex-direction:column; gap:var(--sp-2); }
.ya-demo-quiz__btn{ justify-content:flex-start; text-align:left; width:100%; }
.ya-demo-quiz__btn--ok,
.ya-demo-quiz__btn--reveal{
border-color:var(--ok); color:var(--ok); background:color-mix(in srgb, var(--ok) 12%, var(--surface-container-lowest));
}
.ya-demo-quiz__btn--bad{
border-color:var(--error, var(--book-sutki)); color:var(--error, var(--book-sutki));
background:color-mix(in srgb, var(--error, var(--book-sutki)) 10%, var(--surface-container-lowest));
}
.ya-demo-quiz__fb{ margin:var(--sp-3) 0 0; font:var(--type-body-s); line-height:1.45; }
.ya-demo-quiz__fb--ok{ color:var(--ok); }
.ya-demo-quiz__fb--bad{ color:var(--error, var(--book-sutki)); }
/* Сетка демо-переворотов = .ya-karty; сами карты — .ya-karta (3D). */
.ya-demo-flip.ya-karty{ gap:var(--sp-3); }
.ya-demo-flip__ikon{
width:48px; height:48px; display:flex; align-items:center; justify-content:center;
background:transparent; margin:0 auto 4px;
}
.ya-demo-flip__ikon svg{ width:36px; height:36px; }
.ya-demo-flip__after{ margin:var(--sp-4) 0 0; font:var(--type-body-m); line-height:1.5; color:var(--on-surface); }
.ya-demo-pattern{ display:flex; flex-direction:column; gap:var(--sp-4); align-items:stretch; }
.ya-demo-pattern__grid{
display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3);
}
@media (max-width:480px){ .ya-demo-pattern__grid{ grid-template-columns:1fr; } }
.ya-demo-pattern__card{
border:1px solid var(--outline-variant); border-radius:var(--shape-l);
background:var(--surface-container-lowest); overflow:hidden;
}
.ya-demo-pattern__ris{
/* 2:1 как viewBox 220×110 — без slice-кропа семян у широкой карточки */
aspect-ratio:2 / 1;
height:auto;
background:var(--surface-container-low);
position:relative; overflow:hidden;
}
.ya-demo-pattern__ris svg{ display:block; width:100%; height:100%; }
.ya-demo-pattern__card--uzor .ya-demo-pattern__uzor{
stroke-dasharray:0.05 0.035;
stroke-dashoffset:0;
animation:ya-demo-uzor-draw .9s var(--ease-emphasized-decel, ease-out) both;
}
@keyframes ya-demo-uzor-draw{
from{ stroke-dashoffset:1; }
to{ stroke-dashoffset:0; }
}
@media (prefers-reduced-motion:reduce){
.ya-demo-pattern__card--uzor .ya-demo-pattern__uzor{ animation:none; }
}
html[data-dvizhenie="off"] .ya-demo-pattern__card--uzor .ya-demo-pattern__uzor{ animation:none; }
.ya-demo-pattern__txt{
padding:var(--sp-3); display:flex; flex-direction:column; gap:4px; text-align:center;
}
.ya-demo-pattern__txt strong{
font:var(--type-title-m);
font-weight:700;
color:var(--on-surface);
}
.ya-demo-pattern__txt span{
font:var(--type-title-s);
font-weight:700;
color:var(--on-surface-variant);
}
.ya-demo-pattern__after{
font:var(--type-body-m); line-height:1.55; color:var(--on-surface); text-align:left;
}
.ya-demo-granit{
position:relative; display:block; width:100%; padding:0; border:none;
background:transparent; cursor:pointer; border-radius:var(--shape-l); overflow:hidden;
}
.ya-demo-granit__svg{ display:block; width:100%; height:auto; }
.ya-demo-granit__shema{
transition:filter .55s var(--ease-emphasized-decel, ease-out);
}
.ya-demo-granit:not(.ya-demo-granit--open) .ya-demo-granit__shema{ filter:blur(6px); }
.ya-demo-granit--open .ya-demo-granit__shema{ filter:blur(0); }
@media (prefers-reduced-motion:reduce){
.ya-demo-granit__shema{ transition:none; }
}
html[data-dvizhenie="off"] .ya-demo-granit__shema{ transition:none; }
.ya-demo-granit__lock{
position:absolute; inset:0; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:var(--sp-2);
color:var(--reader-sheet); text-align:center; padding:var(--sp-4);
}
.ya-demo-granit__lock-t{ font:var(--type-title-m, 600 18px/24px var(--ya-font-display)); }
.ya-demo-granit__lock-h{ font:var(--type-body-s); opacity:.9; }
.ya-demo-granit--open{ cursor:default; }
.ya-demo-granit__txt{ margin-top:var(--sp-4); font:var(--type-body-m); line-height:1.55; color:var(--on-surface); }
.ya-demo-granit__txt p{ margin:0 0 var(--sp-3); }
.ya-demo-granit__txt h3{ margin:0 0 var(--sp-2); }
.ya-demo-want{
display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3);
}
@media (max-width:480px){ .ya-demo-want{ grid-template-columns:1fr; } }
.ya-demo-want__btn{
display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
padding:var(--sp-4); border:1px solid var(--outline-variant); border-radius:var(--shape-l);
background:var(--surface-container-lowest); color:var(--on-surface); cursor:pointer;
font:var(--type-title-s, 600 16px/22px var(--ya-font-display));
}
.ya-demo-want__btn--on{
border-color:var(--primary); background:var(--primary-container); color:var(--on-primary-container);
}
.ya-demo-want__ikon{
width:40px; height:40px; display:flex; align-items:center; justify-content:center;
background:transparent; border-radius:0;
}
.ya-demo-want__fb{ margin:var(--sp-4) 0 0; font:var(--type-body-m); line-height:1.5; color:var(--on-surface); }
.ya-demo-plan__stats{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-2);
margin-bottom:var(--sp-4);
}
@media (max-width:480px){ .ya-demo-plan__stats{ grid-template-columns:1fr 1fr; } }
.ya-demo-plan__stat{
text-align:center; padding:var(--sp-3); border-radius:var(--shape-m);
background:var(--surface-container-low); border:1px solid var(--outline-variant);
}
.ya-demo-plan__stat strong{
display:block; font:var(--type-headline-s, 600 22px/28px var(--ya-font-display)); color:var(--on-surface);
}
.ya-demo-plan__stat span{ font:var(--type-title-s); font-weight:700; color:var(--on-surface-variant); }
.ya-demo-plan__pillars{ display:flex; flex-direction:column; gap:var(--sp-3); }
.ya-demo-plan__pillar{
display:grid;
grid-template-columns:auto 1fr;
column-gap:var(--sp-3);
align-items:start;
padding:var(--sp-4); border-radius:var(--shape-l);
border:1px solid var(--outline-variant);
}
.ya-demo-plan__pillar--workshop{
background:var(--primary-container); color:var(--on-primary-container);
}
.ya-demo-plan__pillar--sky{
background:var(--secondary-container); color:var(--on-secondary-container);
}
.ya-demo-plan__pillar--thing{
background:var(--tertiary-container); color:var(--on-tertiary-container);
}
.ya-demo-plan__ikon{
width:40px; height:40px; display:flex; align-items:center; justify-content:center;
flex-shrink:0; line-height:0;
}
.ya-demo-plan__ikon svg{ display:block; width:36px; height:36px; }
.ya-demo-plan__pillar-txt{ min-width:0; }
.ya-demo-plan__pillar strong{
display:block; margin-bottom:var(--sp-2);
font:var(--type-title-m);
font-weight:700;
font-style:normal;
}
.ya-demo-plan__pillar--workshop strong{ color:var(--primary); }
.ya-demo-plan__pillar--sky strong{ color:var(--primary); }
.ya-demo-plan__pillar--thing strong{ color:var(--ogon-konchik); }
.ya-demo-plan__pillar p{
margin:0; font:var(--type-body-s); line-height:1.45;
color:inherit; opacity:.9;
}
.ya-demo-faq{ display:flex; flex-direction:column; gap:var(--sp-2); }
.ya-demo-faq__item{
border:1px solid var(--outline-variant); border-radius:var(--shape-m);
background:var(--surface-container-lowest); overflow:hidden;
}
.ya-demo-faq__q{
width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
padding:var(--sp-3) var(--sp-4); border:none; background:transparent; cursor:pointer;
font:var(--type-title-s, 600 16px/22px var(--ya-font-display)); color:var(--on-surface); text-align:left;
}
.ya-demo-faq__plus{ font:var(--type-title-m); color:var(--primary); }
.ya-demo-faq__a{
margin:0; padding:0 var(--sp-4) var(--sp-4);
font:var(--type-body-m); line-height:1.5; color:var(--on-surface-variant);
}
/* ═══ ЯРЛЫК · .ya-yarlyk ═══════════════════════════════════════════════
ЗАЧЕМ. Статус занятия/сущности («готовится», «прохожу», «готово») рисовался
локально (.kr-yarlyk на kurs.html) и не жил в SoT. Ярлык — короткая pill-
плашка рядом с именем, не кнопка и не фишка.
НЕ ПУТАТЬ с .ya-vhod__yarlyk — тот eyebrow входа урока (uppercase-подпись),
а не status-pill.
готовится
прохожу
готово
осторожно
*/
.ya-yarlyk{
display:inline-block;box-sizing:border-box;
padding:var(--sp-1) var(--sp-2);border-radius:var(--shape-full);
background:var(--secondary-container);color:var(--on-secondary-container);
font:var(--type-label-s);line-height:1.25;vertical-align:middle;
white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ya-yarlyk--hod{
background:var(--primary-container);color:var(--on-primary-container)}
.ya-yarlyk--gotovo{
background:var(--ok-container);color:var(--on-ok-container)}
.ya-yarlyk--vnimanie{
background:var(--tertiary-container);color:var(--on-tertiary-container)}
/* Беда: правка, которая уберёт вопрос при публикации. Не путать со
«вниманием» — то про несохранённое, это про необратимое. */
.ya-yarlyk--beda{
background:var(--error-container);color:var(--on-error-container)}
/* ═══ ПОЛОСА · .ya-polosa ═══════════════════════════════════════════════
ЗАЧЕМ. Линейная метрика «N из M» на хабе/курсе жила как .dr-put-polosa.
Шагомер (.ya-shagi) — маршрут со словами шага; полоса — только доля и счёт.
Слова главные: полоса вторична и стоит рядом, не вместо текста.
*/
.ya-polosa{display:block;min-width:0}
.ya-polosa__schet{
margin:0 0 var(--sp-1);font:var(--type-label-m);color:var(--on-surface-variant);
overflow-wrap:anywhere}
.ya-polosa__n{font-weight:700;color:var(--on-surface)}
.ya-polosa__m{font-weight:600;color:var(--on-surface)}
.ya-polosa__zhelob{
display:block;height:6px;border-radius:var(--shape-full);
background:var(--surface-container-high);overflow:hidden}
.ya-polosa__zaliv{
display:block;height:100%;width:var(--ya-dolya,0%);min-width:0;
border-radius:inherit;background:var(--primary);
transition:width var(--dur-medium) var(--ease-standard)}
.ya-polosa--tonal .ya-polosa__zaliv{background:var(--secondary)}
/* ═══ КРОШКА · .ya-kroshka ══════════════════════════════════════════════
ЗАЧЕМ. Хлебные крошки на kurs.html были локальным .kr-kroshka. Общий блок
для kurs / lesson / админ-оболочек. В оболочке приложения возврат уже даёт
стрелка — там крошку можно скрыть (см. body[data-yk-tip]).
·
Костёр
*/
.ya-kroshka{
display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);
font:var(--type-label-l);color:var(--on-surface-variant)}
.ya-kroshka a{
display:inline-flex;align-items:center;gap:2px;min-height:var(--cel-min);
color:var(--primary);text-decoration:none;border-radius:var(--shape-s)}
.ya-kroshka a:hover{text-decoration:underline}
.ya-kroshka a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.ya-kroshka [aria-current]{color:var(--on-surface-variant);font-weight:600}
.ya-kroshka__sep{opacity:.7;user-select:none}
body[data-yk-tip] .ya-kroshka{display:none}
/* ═══ ВКЛАДКИ · .ya-vkladki ═════════════════════════════════════════════
ЗАЧЕМ. Page-tabs со счётчиком («Занятия · 12») жили только в админке как
.ad-tabs. Это НЕ .ya-perekl: переключатель меняет вид того же экрана
(aria-pressed); вкладки уводят к другому разделу (role=tablist/tab).
Занятия12
Материалы3
*/
.ya-vkladki{
display:flex;flex-wrap:wrap;align-items:stretch;gap:0;
border-bottom:1px solid var(--outline-variant);min-width:0}
.ya-vkladki__vklad{
box-sizing:border-box;appearance:none;margin:0;
display:inline-flex;align-items:center;gap:var(--sp-2);
min-height:var(--cel-min);padding:var(--sp-2) var(--sp-3);
font:var(--type-label-l);color:var(--on-surface-variant);
background:transparent;border:none;
border-bottom:2px solid transparent;margin-bottom:-1px;
cursor:pointer;border-radius:var(--shape-s) var(--shape-s) 0 0}
.ya-vkladki__vklad:hover{color:var(--on-surface);background:var(--surface-container-low)}
.ya-vkladki__vklad:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.ya-vkladki__vklad[aria-selected="true"]{
color:var(--primary);font-weight:700;border-bottom-color:var(--primary)}
.ya-vkladki__schet{
display:inline-flex;align-items:center;justify-content:center;
min-width:1.5em;padding:0 var(--sp-1);border-radius:var(--shape-full);
font:var(--type-label-s);font-weight:700;
color:var(--on-surface-variant);background:var(--surface-container-high)}
.ya-vkladki__vklad[aria-selected="true"] .ya-vkladki__schet{
color:var(--on-primary);background:var(--primary)}
/* ═══ ПРОДОЛЖИТЬ · .ya-prodolzhit ═══════════════════════════════════════
ЗАЧЕМ. Блок «Моё обучение» на learn.html жил локально (.dr-put / .dr-prod).
SoT: путь (счёт + полоса с искрой) и дверь в следующий урок.
Виды: --pust / --hod / --konec (+ --est / --poln). Дверь: __dver;
без адреса — __dver--vybor; клеймо «Продолжить» — __dver--hod.
Анимации полосы — когда на предке .dr-zhivo (ставит learn.html).
*/
/* ─── «МОЁ ОБУЧЕНИЕ» ──────────────────────────────────────────────────
Один тональный сосуд: тихий статус, полоса, внутри — плитка следующего
шага. Плитка раньше была приклеена отрицательным полем к низу карточки
и читалась подвалом, а не дверью. Теперь у неё зазор, свой радиус и
своя заливка — как у выбранного занятия в дереве.
Три вида:
--pust ещё не трогали: плитка тихая, без двери (ko0 не утверждён)
--hod идут: «Продолжить» (начатое) или «Дальше» (следующее)
--konec открытых занятий не осталось: дверь в свой круг
Процентов на экране нет: полоса и «4 из 82». Слова для чтеца — в
aria-label полосы. Счёт стоит всегда, включая ноль. */
.ya-prodolzhit { margin: 10px 0 0; padding: var(--sp-4, 16px); border-radius: var(--shape-l, 16px);
background:
linear-gradient(180deg,
color-mix(in srgb, var(--primary) 7%, var(--surface-container)) 0%,
var(--surface-container) 42%);
border: 0; }
.ya-prodolzhit__ryad { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ya-prodolzhit__zag { flex: 0 0 auto; font: var(--type-label-s, 500 12px/16px inherit);
letter-spacing: var(--track-label, .08em); text-transform: uppercase;
color: var(--on-surface-variant); }
.ya-prodolzhit__schet { flex: 1 1 auto; min-width: 4.5em; text-align: right;
font: var(--type-label-l, 600 14px/20px inherit); color: var(--on-surface);
font-variant-numeric: tabular-nums; }
.ya-prodolzhit__polosa { position: relative; height: 8px; margin: 10px 0 12px; border-radius: 999px;
background: var(--outline-variant); }
.ya-prodolzhit__polosa i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px;
overflow: hidden;
background:
linear-gradient(180deg, color-mix(in srgb, var(--inverse-on-surface) 38%, transparent) 0%, transparent 52%),
linear-gradient(90deg,
var(--ya-cta, var(--primary)) 0%,
var(--primary) 48%,
color-mix(in srgb, var(--primary) 52%, var(--inverse-on-surface)) 100%); }
.ya-prodolzhit__polosa i::before { content: ''; position: absolute; inset: 0; border-radius: inherit;
background: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--on-primary) 45%, transparent) 50%,
transparent 100%);
pointer-events: none; }
.ya-prodolzhit__iskra { position: absolute; top: 50%; left: 0; width: 10px; height: 10px;
border-radius: 50%; transform: translate(-50%, -50%);
background: var(--inverse-on-surface);
box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 60%, transparent);
opacity: 0; pointer-events: none; z-index: 1; }
/* ИСКРА — ГОЛОВА ПОЛОСЫ, А НЕ ДЫРА В НЕЙ (19.09.2026). Роль
--inverse-on-surface переворачивается вместе с темой (#F0F1F3 против
#1A1D21), а замысел «искра — самое светлое на полосе» не переворачивается:
в тёмной искра выходила темнее и заливки, и жёлоба, и на «73 из 73» на
конце полосы стояла чёрная выемка. В тёмной берём светлую роль темы. */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ya-prodolzhit__iskra { background: var(--on-surface); } }
:root[data-theme="dark"] .ya-prodolzhit__iskra { background: var(--on-surface); }
/* Полоса и кольца ПРОРИСОВЫВАЮТСЯ при загрузке: путь растёт, и это единственное
движение, которое здесь что-то значит. Класс .dr-zhivo вешает скрипт кадром
позже первого рендера — иначе перехода нет, значение уже стоит. */
.dr-zhivo .ya-prodolzhit__polosa i { width: var(--cel, 0%); }
.dr-zhivo .ya-prodolzhit--est .ya-prodolzhit__iskra { left: var(--cel, 0%); opacity: 1; }
.ya-prodolzhit--pust .ya-prodolzhit__iskra { display: none; }
/* Плитка шага — вложенный сосуд, не подвал. Цель касания — вся плитка. */
.ya-prodolzhit__dver { display: flex; align-items: center; gap: 12px; width: 100%;
box-sizing: border-box; min-height: var(--cel-min, 48px);
text-align: left; text-decoration: none; cursor: pointer;
margin: 0; padding: 12px;
border: 0; border-radius: var(--shape-m, 12px);
background: var(--ya-selected-fill);
box-shadow: inset 0 0 0 1.5px var(--ya-selected-stroke); color: inherit; }
.ya-prodolzhit__dver:hover { box-shadow: inset 0 0 0 1.5px var(--ya-selected-stroke), var(--ya-selected-glow); }
.ya-prodolzhit__dver:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ya-prodolzhit__dver--vybor { cursor: default; background: var(--surface-container-high);
box-shadow: none; }
.ya-prodolzhit__dver--vybor:hover { box-shadow: none; }
.ya-prodolzhit__znak { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--primary) 16%, transparent);
color: var(--primary); }
.ya-prodolzhit__znak .ya-ik { width: 18px; height: 18px; vertical-align: 0; }
.ya-prodolzhit--pust .ya-prodolzhit__znak { background: var(--surface-container-highest);
color: var(--on-surface-variant); }
.ya-prodolzhit--konec .ya-prodolzhit__znak { background: color-mix(in srgb, var(--primary) 18%, transparent);
color: var(--primary); }
.ya-prodolzhit__tekst { flex: 1; min-width: 0; }
.ya-prodolzhit__metka { display: inline-flex; align-items: center; height: 20px;
padding: 0 8px; margin-bottom: 4px; border-radius: var(--shape-full, 999px);
font: var(--type-label-s, 500 12px/16px inherit); letter-spacing: normal;
text-transform: none; color: var(--ya-selected-meta);
background: color-mix(in srgb, var(--primary) 12%, transparent); }
.ya-prodolzhit--pust .ya-prodolzhit__metka { color: var(--on-surface-variant);
background: var(--surface-container-highest); }
.ya-prodolzhit__imya { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; font: var(--type-title-m, 600 16px/24px inherit);
color: var(--ya-selected-on, var(--on-surface)); }
.ya-prodolzhit--pust .ya-prodolzhit__imya { color: var(--on-surface); }
.ya-prodolzhit__pod { display: block; margin-top: 2px; font: var(--type-body-s, 400 13px/18px inherit);
color: var(--on-surface-variant);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ya-prodolzhit--pust .ya-prodolzhit__pod,
.ya-prodolzhit--konec .ya-prodolzhit__pod { white-space: normal; }
.ya-prodolzhit__strelka { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
width: 24px; height: 24px; color: var(--ya-selected-meta); }
.ya-prodolzhit__strelka .ya-ik { width: 18px; height: 18px; }
html[data-dvizhenie="on"] .ya-prodolzhit__polosa > i {
transition: width .7s var(--ease-emphasized-decel, cubic-bezier(.05,.7,.1,1));
}
html[data-dvizhenie="on"] .ya-prodolzhit__iskra {
transition: left .7s var(--ease-emphasized-decel, cubic-bezier(.05,.7,.1,1));
}
html[data-dvizhenie="on"] .dr-zhivo .ya-prodolzhit__dver {
animation: ya-prodolzhit-v var(--dur-medium) var(--ease-emphasized-decel, cubic-bezier(.05,.7,.1,1)) both;
}
html[data-dvizhenie="on"] .dr-zhivo .ya-prodolzhit--est .ya-prodolzhit__polosa > i::before {
animation: ya-prodolzhit-blesk 1.1s var(--ease-emphasized-decel, cubic-bezier(.05,.7,.1,1)) .55s 1 both;
}
html[data-dvizhenie="on"] .dr-zhivo .ya-prodolzhit--hod.ya-prodolzhit--est:not(.ya-prodolzhit--poln) .ya-prodolzhit__iskra {
animation: ya-prodolzhit-iskra 2.8s var(--ease-standard, ease) infinite;
}
html[data-dvizhenie="on"] .dr-zhivo .ya-prodolzhit__dver--hod .ya-prodolzhit__znak {
animation: ya-prodolzhit-dyhanie 2.6s var(--ease-standard, ease) infinite;
}
@keyframes ya-prodolzhit-v { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ya-prodolzhit-blesk {
from { opacity: 0; transform: translateX(-70%); }
40% { opacity: 1; }
to { opacity: 0; transform: translateX(130%); }
}
@keyframes ya-prodolzhit-iskra {
0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--primary) 40%, transparent); }
50% { box-shadow: 0 0 12px 3px color-mix(in srgb, var(--primary) 28%, transparent); }
}
@keyframes ya-prodolzhit-dyhanie {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 30%, transparent); }
}
/* ↑ Скобка закрыта 06.10.2026: без неё браузер глотал ВСЁ, что ниже
(.ya-glavy, .ya-svodka, .ya-reestr, блоки курса). Страж — tests/css-skobki.spec.mjs. */
/* ═══ ГЛАВЫ · .ya-glavy ═════════════════════════════════════════════════
ЗАЧЕМ. Оглавление курса в плеере: список занятий ветви, текущее отмечено.
На узком — складка/лист; на широком — та же колонка, без sidebar 444.
Не путать с TocBlock внутри урока («что в этом занятии»).
Ясна и Веда
Где у суток шов
Готовится
*/
.ya-glavy{
display:flex;flex-direction:column;gap:2px;
margin:0;padding:var(--sp-2) 0;list-style:none}
.ya-glavy__zag{
margin:0 0 var(--sp-2);padding:0 var(--sp-3);
font:var(--type-label-m);letter-spacing:var(--track-label);
text-transform:uppercase;color:var(--on-surface-variant)}
.ya-glavy__punkt{
display:flex;align-items:center;gap:var(--sp-2);
min-height:var(--cel-min,48px);padding:var(--sp-2) var(--sp-3);
border-radius:var(--shape-m,12px);
font:var(--type-body-m);color:var(--on-surface);text-decoration:none;
border:0;background:transparent;text-align:left;cursor:pointer;
box-sizing:border-box;width:100%;overflow-wrap:anywhere}
a.ya-glavy__punkt:hover{background:var(--surface-container-low)}
a.ya-glavy__punkt:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.ya-glavy__punkt--now{
background:var(--secondary-container);color:var(--on-secondary-container);
font-weight:600;cursor:default}
.ya-glavy__punkt--now:hover{background:var(--secondary-container)}
.ya-glavy__punkt--skor{
color:var(--on-surface-variant);cursor:default}
.ya-glavy__punkt--skor:hover{background:transparent}
.ya-glavy__meta{
flex:0 0 auto;margin-left:auto;
font:var(--type-label-s);color:var(--on-surface-variant);white-space:nowrap}
.ya-glavy__punkt--now .ya-glavy__meta{color:var(--on-secondary-container)}
/* Лист поверх урока (мобильный / из меню). */
.ya-glavy-list{
position:fixed;inset:0;z-index:160;display:flex;flex-direction:column;
justify-content:flex-end;background:color-mix(in srgb, var(--scrim, #000) 40%, transparent)}
.ya-glavy-list__kart{
max-height:min(72vh,560px);overflow:auto;
background:var(--surface-container-lowest);
border-radius:var(--shape-l,16px) var(--shape-l,16px) 0 0;
padding:var(--sp-3) var(--sp-2) calc(var(--sp-4) + env(safe-area-inset-bottom,0px));
box-shadow:0 -8px 28px color-mix(in srgb, var(--on-surface) 12%, transparent)}
.ya-glavy-list__shapka{
display:flex;align-items:center;gap:var(--sp-2);
padding:var(--sp-2) var(--sp-3) var(--sp-3);
border-bottom:1px solid var(--outline-variant)}
.ya-glavy-list__imya{flex:1;min-width:0;font:var(--type-title-m);color:var(--on-surface)}
@media (min-width:768px){
.ya-glavy-list{justify-content:center;align-items:center;padding:var(--sp-6)}
.ya-glavy-list__kart{
width:min(420px,100%);max-height:min(70vh,640px);
border-radius:var(--shape-l,16px);box-shadow:0 12px 40px color-mix(in srgb, var(--on-surface) 18%, transparent)}
}
/* ═══ СВОДКА · .ya-svodka ═══════════════════════════════════════════════
ЗАЧЕМ. Плитка метрики (число + подпись) в админке была .ad-stat/.ad-stats.
Не KPI CSAT/NPS — только плотность «N изменений / M черновиков».
*/
.ya-svodka{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:baseline;
padding:var(--sp-2) var(--sp-3);border-radius:var(--shape-m,12px);
background:var(--surface-container);color:var(--on-surface-variant);
font:var(--type-label-l)}
.ya-svodka__plitka{display:inline-flex;align-items:baseline;gap:6px}
.ya-svodka__n{font:var(--type-title-m);color:var(--on-surface);font-variant-numeric:tabular-nums}
.ya-svodka__pod{font:var(--type-label-m);color:var(--on-surface-variant)}
/* ═══ РЕЕСТР · .ya-reestr ═══════════════════════════════════════════════
ЗАЧЕМ. Таблица/грид данных админки. НЕ .ya-tablica (механика урока).
*/
.ya-reestr-wrap{overflow:auto;border:1px solid var(--outline-variant);
border-radius:var(--shape-m,12px);background:var(--surface-container-lowest)}
.ya-reestr{width:100%;border-collapse:collapse;font:var(--type-body-s);
color:var(--on-surface)}
.ya-reestr th,.ya-reestr td{
padding:10px 12px;text-align:left;vertical-align:top;
border-bottom:1px solid var(--outline-variant)}
.ya-reestr th{font:var(--type-label-m);letter-spacing:var(--track-label);
text-transform:uppercase;color:var(--on-surface-variant);
background:var(--surface-container-low);white-space:nowrap}
.ya-reestr tr:last-child td{border-bottom:0}
.ya-reestr--plotno th,.ya-reestr--plotno td{padding:6px 10px}
.ya-btn--opasno{color:var(--error);border-color:color-mix(in srgb,var(--error) 35%,transparent);
background:var(--surface-container-lowest)}
.ya-btn--opasno:hover:not(:disabled){background:color-mix(in srgb,var(--error) 10%,transparent)}
/* ── БЛОКИ КУРСА (06.10.2026) ─────────────────────────────────────────────
Курс сеткой блоков (learn.html, блокиHTML): блок — складка с шапкой той же
роли, что имя темы (--type-title-m), под ней тихая строка состояния. Между
блоками — волосок роли --outline-variant. Ненаписанный блок: шапка
приглушена, справа одно тихое «готовится» (слово «скоро» запрещено проверкой «обещания», scripts/proverki.mjs); строки внутри — неактивные: текст
и номер цветом --on-surface с прозрачностью --state-disabled-content
(роль «недоступно» дизайн-системы), без наведения, без руки-курсора. Никаких
серых плашек: тот же лист, только тише. */
.dr-blok { margin: 0; }
.dr-blok + .dr-blok { border-top: 1px solid var(--outline-variant); }
.dr-kurs--bloki .dr-stvol { margin-top: var(--sp-2, 8px); }
.dr-blok-knop { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; column-gap: 12px; align-items: center;
min-height: 56px; padding: 10px 8px; margin: 0 -8px; cursor: pointer; list-style: none;
border-radius: var(--shape-s, 8px); }
.dr-blok-knop::-webkit-details-marker { display: none; }
.dr-blok-knop:hover { background: color-mix(in srgb, var(--on-surface) 6%, transparent); }
.dr-blok-knop:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.dr-blok[open] > .dr-blok-knop .dr-shevron { transform: rotate(180deg); }
.dr-blok-tekst { min-width: 0; }
.dr-blok-imya { display: block; font: var(--type-title-m, 600 16px/24px inherit); color: var(--on-surface); }
.dr-blok-pod { display: block; margin-top: 1px; font: var(--type-body-s, 400 13px/18px inherit); color: var(--on-surface-variant); }
.dr-blok--skoro .dr-blok-imya { color: var(--on-surface-variant); }
.dr-blok-skoro { font: var(--type-label-s, 500 12px/16px inherit); color: var(--on-surface-variant); }
.dr-blok-telo { padding: 0 0 8px; }
.dr-blok-telo > .dr-proba { margin-top: 0; }
.dr-blok-telo > .dr-kurs-zamok { margin-top: 0; }
.dr-uzel--skoro, .ya-urok.dr-uzel--skoro { cursor: default; }
.dr-uzel--skoro:hover, .ya-urok.dr-uzel--skoro:hover { background: none; }
.dr-uzel--skoro .dr-uzel-imya, .dr-uzel--skoro .dr-uzel-znak, .dr-uzel--skoro .dr-uzel-mera {
color: var(--on-surface); opacity: var(--state-disabled-content, .38); }
.dr-uzel-skoro-znak { width: 14px; height: 14px; }
.dr-kolco-chislo--uzko { font-size: 11px; letter-spacing: -.04em; }
html[data-dvizhenie="off"] .dr-blok-knop .dr-shevron { transition: none; }
/* ═══ ПАНЕЛЬ · .ya-panel + __verh, __dela ═════════════════════════════════
Рабочая поверхность админки: вопросы темы, черновики, заявка, уроки на
сервере. Нижняя поверхность и волосок, радиус карточки. __verh — ряд над
содержимым: слева, что это (счёт, имя), справа действия (__dela); на узком
экране ряд переносится, кнопки не сжимаются. Панели подряд — с зазором.
…
…кнопки…
…строки .ya-stroka--tiho…
*/
.ya-panel{
box-sizing:border-box; min-width:0; padding:var(--sp-4);
background:var(--surface-container-lowest); color:var(--on-surface);
border:1px solid var(--outline-variant); border-radius:var(--shape-l);
}
.ya-panel + .ya-panel{ margin-top:var(--sp-3); }
.ya-panel__verh{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
gap:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-4);
font:var(--type-body-m); color:var(--on-surface);
}
.ya-panel__dela{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
/* Сноска под содержимым панели: как устроено то, что выше (куда уходят
правки). Отделена волоском, кеглем подписи. */
.ya-panel__pod{
margin:var(--sp-3) 0 0; padding:var(--sp-3) var(--sp-2) 0;
border-top:1px solid var(--outline-variant);
font:var(--type-body-s); color:var(--on-surface-variant);
}
/* ═══ ВАРИАНТЫ ОТВЕТА · .ya-varianty + __ryad, __znak ═════════════════════
Правка вопроса: в строке отметка верного (радио — один верный, флажок —
несколько), поле варианта и «×». Отметка родная, окрашена accent-color:
это форма редактора, а не экран урока, и родную отметку диктор читает без
доработки — каждой дают aria-label «Верный — вариант N». Пара соответствий —
два поля через __znak «↔» в той же строке. Группа живёт внутри .ya-pole:
метка поля — имя группы (role="group" + aria-labelledby).
*/
.ya-pole > .ya-varianty{ grid-column:1 / -1; }
.ya-varianty{ display:flex; flex-direction:column; gap:var(--sp-2); }
.ya-varianty > .ya-btn{ align-self:flex-start; }
.ya-varianty__ryad{ display:flex; align-items:center; gap:var(--sp-2); }
label.ya-varianty__ryad{ min-height:var(--cel-min); cursor:pointer; font:var(--type-body-l); }
.ya-varianty__ryad > .ya-pole__vvod{ flex:1 1 0; min-width:0; min-height:var(--cel-min); }
.ya-varianty__ryad > input[type=radio],
.ya-varianty__ryad > input[type=checkbox]{
flex:none; width:20px; height:20px; margin:0;
accent-color:var(--primary); cursor:pointer;
}
.ya-varianty__znak{ flex:none; color:var(--on-surface-variant); }
/* ═══ Урок 6. Свет нарастает и спадает ═════════════════════════════════
Те же роли цвета, что у чертежей уроков 4–5: нарастает — ok, спадает —
book-sutki, ровно — tertiary. Своих красок и теней нет. */
.ya-svet-panel{ display:flex; flex-direction:column; gap:12px; }
.ya-svet-vopros{ display:flex; flex-direction:column; gap:6px; }
.ya-svet-vopros__q{ margin:0; font:var(--type-body-m); color:var(--on-surface-variant); }
.ya-svet-vopros__vremya{ margin:0; font:var(--type-title-m); font-weight:700; color:var(--on-surface); }
.ya-svet-knopki{ display:flex; flex-wrap:wrap; gap:10px; }
.ya-svet-knopki .ya-zov-mesto{ flex:1 1 140px; position:relative; }
.ya-svet-knopki .ya-btn{ width:100%; }
.ya-svet-knopka{ min-height:48px; box-shadow:inset 0 0 0 1px var(--outline); color:var(--on-surface); }
.ya-svet-knopka--mimo{ box-shadow:inset 0 0 0 2px var(--error); color:var(--error); background:var(--error-container); }
.ya-svet-otvet{
margin:0; padding:12px 14px; border-radius:10px;
background:var(--surface-container-lowest); border-left:3px solid var(--primary);
font:var(--type-body-s); line-height:1.55; color:var(--on-surface);
}
.ya-svet-otvet--verno{ border-left-color:var(--ok); }
.ya-svet-otvet--mimo{ border-left-color:var(--error); }
.ya-svet-otvet__kto{ font-weight:700; }
.ya-svet-legenda{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px; font:var(--type-body-s); color:var(--on-surface-variant); }
.ya-svet-legenda li{ display:inline-flex; align-items:center; gap:6px; }
.ya-svet-legenda__znak{
display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
border-radius:50%; border:2px solid; background:var(--surface-container-lowest); font-weight:800; font-size:13px; line-height:1;
}
.ya-svet-para{
padding:12px 14px; border-radius:10px; background:var(--surface-container-lowest);
border-left:3px solid var(--tertiary);
}
.ya-svet-para__zag{ margin:0 0 4px; font:var(--type-body-m); font-weight:700; color:var(--on-surface); }
.ya-svet-para__tekst{ margin:0; font:var(--type-body-s); line-height:1.55; color:var(--on-surface); }
.ya-svet-spisok{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ya-svet-spisok__ryad{
display:flex; gap:10px; align-items:baseline; padding:8px 12px; border-radius:8px;
background:var(--surface-container); color:var(--on-surface-variant); font:var(--type-body-s);
}
.ya-svet-spisok__ryad--est{ background:var(--tertiary-container); color:var(--on-surface); }
.ya-svet-spisok__nomera{ font-weight:700; white-space:nowrap; min-width:4.2em; }
.ya-svet-luchi{ animation:ya-svet-luchi .45s ease-out both; }
@keyframes ya-svet-luchi{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .ya-svet-luchi{ animation:none; } }
html[data-dvizhenie="off"] .ya-svet-luchi{ animation:none; }
.ya-svet-zvezda{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(220px,.9fr); gap:16px; align-items:center; }
@media (max-width:760px){ .ya-svet-zvezda{ grid-template-columns:1fr; } }
.ya-svet-zvezda__niz{ display:flex; flex-direction:column; gap:10px; }
.ya-svet-zvezda__imya{ margin:0; font:var(--type-title-m); font-weight:700; color:var(--on-surface); }
.ya-svet-grafik svg text{ font-family:inherit; }
.ya-svet-polya{ display:grid; grid-template-columns:1fr; gap:12px; margin:12px 0; }
.ya-svet-pole{ display:flex; flex-direction:column; gap:6px; }
.ya-svet-pole__zag{ font:var(--type-body-m); font-weight:700; color:var(--on-surface); }
.ya-svet-pole textarea{
font:var(--type-body-m); line-height:1.5; padding:10px 12px; border-radius:8px; resize:vertical;
border:1px solid var(--outline); background:var(--surface-container-lowest); color:var(--on-surface);
}
.ya-svet-pole textarea:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.ya-blok-spisok{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ya-blok-spisok__punkt{
display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px;
background:var(--surface-container); color:var(--on-surface); font:var(--type-body-m);
}
.ya-blok-spisok__punkt--tut{ background:var(--primary-container); box-shadow:inset 0 0 0 1px var(--primary); font-weight:700; }
.ya-blok-spisok__n{
flex:none; width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
background:var(--surface-container-lowest); border:1px solid var(--outline-variant); font-weight:700; font-size:14px;
}
.ya-blok-spisok__punkt--tut .ya-blok-spisok__n{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.ya-blok-spisok__imya{ flex:1; min-width:0; }
.ya-blok-spisok__tut{ font:var(--type-label-s); color:var(--on-primary-container); }
.ya-svet-hit:focus:not(:focus-visible){ outline:none; }
.ya-svet-hit:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
/* ═══ Ссылка на положение · .ya-pol-ssylka ════════════════════════════════
Один вид для всех ссылок в учебник внутри урока: в строке текста, под
отзывом («Открыть · пол. 128»), в чтении («пол. 127 · …») и в словаре.
Цвет акцента и подчёркивание; номер тем же кеглем и шрифтом, что слово;
без заливок и чужих цветов. В строке зона нажатия ≥44px — псевдоэлемент. */
.ya-pol-ssylka{
position:relative;
/* primary-ink: 5.2:1 и на серых карточках (surface-container), где
--primary давал 4.0–4.3 (обзор 17.10.2026). В тёмной теме = --primary. */
color:var(--ya-primary-ink, var(--primary));
font:inherit;
font-style:normal;
font-variant-numeric:lining-nums;
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:3px;
border-radius:4px;
cursor:pointer;
}
.ya-pol-ssylka::after{
content:'';
position:absolute;
/* Зона нажатия не меньше 44×44 и у ссылки из одной цифры («42»). */
left:50%; top:50%;
width:max(calc(100% + 8px), 44px); height:44px;
transform:translate(-50%,-50%);
}
.ya-slovar__pol .ya-pol-ssylka{ display:inline-block; padding:0 8px; margin:0 -2px; }
.ya-pol-ssylka:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.ya-pol-ssylka--otdelno{
display:inline-flex;
align-items:center;
min-height:44px;
font:var(--type-body-m);
font-style:normal;
font-variant-numeric:lining-nums;
}
.ya-pol-ssylka--otdelno::after{ content:none; }
/* ═══ Урок 6: места под отклик и текст — ничего не прыгает ════════════════ */
.ya-svet-ris{ max-width:360px; }
@media (max-width:600px){ .ya-svet-ris{ max-width:272px; } }
.ya-svet-otvet-mesto{ min-height:84px; display:flex; flex-direction:column; justify-content:flex-end; }
.ya-luchi-niz{ min-height:168px; }
.ya-svet-para-mesto{ min-height:110px; }
@media (max-width:760px){
.ya-svet-zvezda__tekst{ min-height:124px; }
}
.ya-svet-zvezda__tekst{ margin:0; }
.ya-svet-snachala{ background:transparent; box-shadow:inset 0 0 0 1px var(--outline); color:var(--primary); }
/* Вводная блока: «сегодня» — значок отдельной строкой под названием. */
.ya-blok-spisok__punkt--tut{ flex-wrap:wrap; }
.ya-blok-spisok__punkt--tut .ya-blok-spisok__tut{
display:inline-flex; align-items:center; min-height:24px; padding:0 10px; border-radius:999px;
background:var(--primary); color:var(--on-primary); font:var(--type-label-m); letter-spacing:0;
}
/* Кнопки звезды — в один ряд на любом шаге: «Дальше» и «Сначала» рядом,
а не друг под другом, — высота блока не меняется. */
.ya-svet-zvezda .ya-svet-knopki{ flex-wrap:nowrap; }
.ya-svet-zvezda .ya-svet-knopki .ya-btn{ width:auto; flex:1 1 0; min-width:0; }
/* Симулятор курса в шапке карточки «Уроков» (learn.html, к.симулятор) */
.dr-kurs-sim { grid-column: 1 / -1; margin-top: var(--sp-3, 12px); }
/* ═══ КУРС-СИМУЛЯТОР · learn.html «Знаки сути» · ритм как /para ═══════════
Только .dr-kurs--sim: заголовок ближе к --t-h2 лендинга, двери с зазором
карточек, без изменения остальных курсов. */
.dr-kurs--sim{
padding:var(--sp-4,16px);
gap:0;
}
@media (min-width:720px){
.dr-kurs--sim{ padding:var(--sp-5,20px); }
}
.dr-kurs--sim .dr-kurs-imya{
/* как .dr-kurs-imya / para H3-шкала, не раздувать до headline-m 26 */
font:var(--type-headline-s);
font-weight:600;
letter-spacing:-.01em;
}
.dr-kurs--sim .dr-kurs-pod{
margin-top:var(--sp-2,8px);
font:var(--type-body-m);
color:var(--on-surface-variant);
}
.dr-kurs--sim .ya-dver--spisok,
.dr-kurs--sim .dr-kurs-sim{
margin-top:var(--sp-3,12px);
}
.dr-kurs--sim .dr-kurs-podrobno-knop{
margin-top:var(--sp-3,12px);
color:var(--ya-primary-ink);
}
/* «Ещё N положений» под двумя первыми карточками длинной цепочки. */
.ya-pol-esche{ min-height:44px; margin:var(--sp-1) 0 var(--sp-2); padding:0 var(--sp-2); }