/* Design tokens live in theme.css (loaded first). Legacy aliases kept so the older component rules below keep resolving while they migrate. */ :root{ /* высота sticky-шапки; настоящее значение подставляет core.js (trackHeaderHeight), здесь — запасное на случай, если модуль ещё не выполнился */ --hdr-h:66px; --accent-dark:var(--accent-ink); --checked:var(--ok); --red:var(--danger); --green:var(--ok); } /* ---- app chrome ---------------------------------------------------------- */ /* blox31 #1: три зоны — «назад» слева, логотип строго по центру, правый кластер (dev-список, ник, шестерёнка) справа. Боковые колонки равной ширины (minmax(0,1fr)) держат логотип по центру; длинное «назад» режется многоточием — но только потому, что слот .hdr-back растянут по своей дорожке (см. его правило ниже, blox52 #16 п.1). */ /* env(safe-area-inset-*) через max() — фон шапки тянется до физических краёв (viewport-fit=cover), а содержимое (логотип, ник, шестерёнка) отодвинуто от выреза/скруглённого угла в горизонтали. Без выреза env()=0 → max() берёт базовые 14/18px, раскладка не меняется. */ header{ position:sticky;top:0;z-index:40; /* ДВА СЛОЯ ФОНА: сверху свет в углу (--hdr-sheen), под ним сама заливка схемы. Здесь не переопределяется НИЧЕГО: и заливка, и форма света — токены в theme.css, а силу света каждая схема объявляет у себя (у «Lingo» она вполсилы, по замеру контраста белого текста). */ background:var(--hdr-sheen),var(--grad-header);color:var(--on-dark); padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 14px max(18px,env(safe-area-inset-left)); /* Три колонки: назад · логотип · правый кластер. У ПРАВОЙ минимум = min-content, а не 0 (blox37 #7). С minmax(0,1fr) её дорожка сжималась уже 375px, но содержимое (выпадашка ребёнка + шестерёнка) не сжималось вместе с ней и вылезало ВЛЕВО — прямо на слово «Lingo» (перекрытие 30px). Теперь дорожка не бывает уже своего содержимого: тесно — логотип уезжает от центра влево, но столкновения не будет никогда. Логотип — украшение, переключатель ребёнка и шестерёнка — органы управления; уступать обязано украшение. */ display:grid;grid-template-columns:minmax(0,1fr) auto minmax(min-content,1fr); align-items:center;gap:14px; /* ПЛАНКА, А НЕ КАРТОЧКА (blox52 #5). Была --sh-2 — ровно та же мягкая тень, что у любого листа, и шапка читалась большой карточкой. Планка собрана своим рецептом: волосок по нижней кромке + чёткая линия контакта + короткая тень (theme.css, «ПЛАНКА ШАПКИ»). ЭТА СТРОКА — ЗАПАСНОЙ ВАРИАНТ, и она нарочно лежит СНАРУЖИ @supports ниже. Браузер, который не умеет привязывать анимацию к прокрутке, видит только её и получает постоянную тень — сегодняшнее поведение, просто новой формы. Перенести её внутрь @supports значит молча оставить такие браузеры вообще без тени; за этим следит секция «планка шапки» в npm run check. */ box-shadow:var(--plank); } /* ТЕНЬ ПОЯВЛЯЕТСЯ ОТ ПРОКРУТКИ — и ни строчки на JS. Пока страница в нуле, бумага начинается вплотную под шапкой: тени взяться неоткуда, и планка плоская. Тень набирает полную силу за первые 40px прокрутки — ровно на том пути, где под шапку заезжает содержимое. Почему CSS, а не обработчик scroll: обработчик считался бы на каждом кадре прокрутки (на телефоне это самый дорогой кадр из всех) и требовал бы записи в DOM; здесь же браузер сам двигает анимацию по позиции прокрутки, вне основного потока вычислений. Ничего не перерисовывается и не переставляется — значит и «прыжка экрана» здесь взяться неоткуда. @supports обязателен: привязка к прокрутке есть не везде. Где её нет — правило целиком не применяется, и остаётся постоянная тень из header выше. Деградация незаметная. Число слоёв в --plank-flat и --plank совпадает намеренно — иначе браузеру нечего интерполировать и тень включалась бы рывком. */ @supports (animation-timeline: scroll()){ @keyframes hdr-plank{ from{box-shadow:var(--plank-flat)} to{box-shadow:var(--plank)} } header{ animation-name:hdr-plank; animation-timing-function:linear; animation-fill-mode:both; /* длительность НЕ пишем: при живой шкале прокрутки её значение по умолчанию (auto) и означает «растянуть на весь диапазон ниже». Записать сюда секунды — сломать связь. */ animation-timeline:scroll(root block); animation-range:0 40px; } } /* justify-self:stretch, НЕ start (blox52 #16 п.1, нашли оба судьи): start-выравненный грид-элемент ширится ПО СОДЕРЖИМОМУ и переливается через свою дорожку — на 375 кнопка «‹ Кабинет» (113px при дорожке 84px) въезжала прямо в точку у слова Lingo. Stretch прижимает слот к ширине дорожки, и многоточие .mlabel наконец получает право резать подпись; кнопка внутри и так стоит слева (flex). Знак не столкнётся ни в каком шрифте: ограничение геометрическое, а не подобранное под Onest. */ .hdr-back{justify-self:stretch;display:flex;align-items:center;min-width:0;overflow:hidden} /* в шапке сбрасываем margin-bottom тела-версии .mback — иначе он занимает место снизу и при align-items:center кнопка визуально уезжает вверх (blox31 #… — «съехала чуть вверх») */ /* та же контурная кнопка B, но на тёмной шапке: полупрозрачно-белый контур (язык .set-btn), margin сброшен — иначе margin-bottom тела-версии уводит кнопку вверх при align центре. */ .hdr-back .mback{color:var(--on-dark);border-color:rgba(255,255,255,.35);max-width:100%;margin:0} @media (hover:hover){.hdr-back .mback:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.14);color:var(--on-dark)}} /* УЗКО — ТОЛЬКО СТРЕЛКА (blox60 #5, решение владельца 18.09.2026). Левая дорожка имеет минимум НОЛЬ (см. grid-template-columns выше), правая — min-content: значит при тесноте схлопывается именно «назад», и схлопывается ДО КОНЦА. 17.09 колокольчик открыли ученикам (blox60 #3) — в правый кластер ребёнка добавилось 38px, и слот «назад» ужался до 6.2px: подпись «Homework» получила НУЛЕВУЮ ширину, а кнопка вылезла за свой слот и наехала на логотип (на 375px — на 11.8px, на 320px — на 18px). Выход из чата группы у ребёнка стал невидимым — кнопка жила и нажималась, но увидеть её было нельзя. Лечим не колокольчик, а правило: ниже 620px подпись прячется целиком, остаётся стрелка в честном квадрате 44×44 (цель касания, lingo-ui §3), а дорожка получает пол min-content и больше не схлопывается. Пусто в слоте — min-content равен нулю, дорожка снова чистая 1fr, и логотип стоит по центру ровно как раньше: экраны БЕЗ кнопки «назад» не меняются ни на пиксель. ПОЧЕМУ 620, а не 375. Порог выбран замером, а не на глаз, и он про САМУЮ ДЛИННУЮ подпись: «Homework» у ребёнка режется многоточием вплоть до 560px (у ребёнка правый кластер шире — в нём блок аккаунта) и становится целым только на 620. У Лу «Кабинет» помещается уже с 414px, так что на планшете она слово теряет — сознательный размен: лучше честная стрелка везде, чем смазанный огрызок на части ширин. Появится подпись ДЛИННЕЕ «Homework» — порог надо пересчитать тем же замером (ширина .mlabel: scrollWidth против clientWidth). За нулевой шириной и наездом на логотип следит геометрия ночного обходчика (G2/G6, tools/crawl.js) — она этот дефект и нашла. */ @media (max-width:620px){ header{grid-template-columns:minmax(min-content,1fr) auto minmax(min-content,1fr)} .hdr-back .mback .mlabel{display:none} .hdr-back .mback{width:44px;height:44px;justify-content:center;padding:0;gap:0} } .hdr-right{justify-self:end;display:flex;align-items:center;gap:10px;min-width:0} /* ЗНАК ШКОЛЫ — картинка (см. index.html). Прежде здесь было слово «Lingo» текстом плюс точка на ::before; и точка, и подбор шрифта ушли вместе с текстом: у рукописной надписи есть своя россыпь крапинок, и правильная точка рядом с ней читалась бы вторым знаком. Токен --brand-dot остался — его берёт та же точка на экране входа. */ header .logo{ font-weight:800;font-size:var(--fs-2xl);letter-spacing:var(--tracking-tight); display:flex;align-items:center;justify-self:center;white-space:nowrap;min-width:0; } /* Высоту задаём картинке, ширину она добирает сама — пропорции знака не искажаются никогда (это же проверяет G12 в ночном обходе). max-width страхует узкую дорожку сетки: знак сожмётся, но не столкнётся с правым кластером. */ header .logo img{height:34px;width:auto;max-width:100%;object-fit:contain;display:block} header .who{display:flex;align-items:center;gap:8px;min-width:0} header .auth{display:flex;align-items:center;gap:10px} /* на телефоне режем отступы/зазоры шапки — иначе правый кластер не влезает в одну строку */ @media(max-width:430px){ header{padding:max(12px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 12px max(10px,env(safe-area-inset-left));gap:8px} header .who{gap:6px} header .auth{gap:8px} .hdr-right{gap:8px} header .logo img{height:26px} /* знак уступает место правому кластеру, а не наоборот */ header .who select{max-width:72px} /* dev-элемент; ужат, чтобы не наезжать на центр-логотип */ header .who span{display:none} /* «Кто я:» — dev-подпись, на телефоне прячем ради ширины */ } /* КОЛЕСИКО ЗАГРУЗКИ (blox72 #11) — кольцо вокруг колокольчика; включает core.js (netPaint), когда передний запрос ждёт ответа дольше секунды. ПОЧЕМУ КОЛЬЦО ВОКРУГ, А НЕ ЗНАЧОК РЯДОМ: на телефоне в шапке нет свободного места — замер у всех ролей на 320–414px показал между знаком школы и правым кластером ровно зазор сетки (8px). Значок в потоке растолкал бы кластер и на узком экране ребёнка выдавил бы шапку за край. Кольцо висит поверх слота (position:absolute, вне потока): шапка не сдвигается ни на пиксель ни при появлении, ни при исчезновении. Диаметр 50 — чтобы кольцо обошло скруглённые углы кнопки 38×38 (угол на 22.7px от центра), не задев их. Клики проходят насквозь: кольцо ничего не блокирует. Цвет — тот же полупрозрачно-белый язык, что у контура колокольчика и шестерёнки на тёмной шапке. */ .notif-slot{position:relative;display:flex;align-items:center} .netwait{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:1} .netwait[hidden]{display:none} .netwait-ring{position:absolute;left:-25px;top:-25px;width:50px;height:50px;box-sizing:border-box; border-radius:50%;border:2px solid rgba(255,255,255,.22);border-top-color:var(--on-dark); border-right-color:var(--on-dark);animation:btn-spin .8s linear infinite} @media (prefers-reduced-motion:reduce){.netwait-ring{animation-duration:2s}} /* Колокольчика нет (роль без ленты, экран входа) — кольцо обходит шестерёнку: слот пуст и шириной ноль, следующий в ряду — .settings через зазор .hdr-right (10px; 8px на телефоне). */ .notif-slot:has(> .notif:empty) .netwait{left:calc(100% + 10px + 19px)} @media(max-width:430px){.notif-slot:has(> .notif:empty) .netwait{left:calc(100% + 8px + 19px)}} /* 15 секунд без ответа — строка под шапкой у правого края, прямо под колесиком. Не в ряду шапки по той же причине, что и кольцо (места нет); висит под ней, ничего не блокирует (pointer-events:none) и уходит сама, как только ответ пришёл. */ .netwait-msg{position:absolute;top:calc(100% + 6px);right:max(10px,env(safe-area-inset-right)); max-width:calc(100vw - 20px);box-sizing:border-box;padding:8px 12px;border-radius:var(--r-sm); background:var(--card);color:var(--ink);box-shadow:var(--sheet-pop); font-size:var(--fs-sm);font-weight:700;line-height:var(--lh-tight);text-wrap:balance;pointer-events:none} .netwait-msg[hidden]{display:none} /* строка выбора шрифта — используется в попапе настроек (settings.js, blox18 #9) */ .fsw-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px; background:none;border:none;border-radius:var(--r-sm);padding:9px 11px;cursor:pointer;text-align:left; color:var(--ink);font-size:var(--fs-md);font-weight:700} @media (hover:hover){.fsw-item:hover{background:var(--accent-tint)}} .fsw-item.on{background:var(--accent-tint)} .fsw-item .fsw-note{grid-column:1;font-size:var(--fs-xs);font-weight:600;color:var(--muted)} .fsw-item .fsw-tick{grid-column:2;grid-row:1 / span 2;color:var(--accent-dark);font-weight:800; opacity:0} .fsw-item.on .fsw-tick{opacity:1} /* единый попап настроек (шестерёнка) — шрифт + цветовая схема (blox18 #9). Пункты шрифта переиспользуют .fsw-item выше. */ .settings{position:relative;display:flex;align-items:center} .set-btn{width:38px;height:38px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.12);color:var(--on-dark);cursor:pointer; display:flex;align-items:center;justify-content:center} @media (hover:hover){.set-btn:hover{background:rgba(255,255,255,.22)}} .set-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:50; width:max-content;max-width:min(300px,calc(100vw - 24px)); max-height:calc(100vh - 84px);overflow-y:auto; /* не обрезаем «Выйти» на низкой ПК-высоте (blox31 #1) */ /* РАМКИ НЕТ (blox52 #4, п.1): край листа задан обрезным краем внутри --sheet-pop и контрастом к тому, на чём меню висит. Рамка поверх — второе объявление того же факта. Бортик здесь ослаблен (--sheet-pop): меню висит вплотную под ТЁМНОЙ шапкой, и 95%-белая грань блестела бы над ним полосой. */ background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sheet-pop); padding:8px;flex-direction:column;gap:4px} .set-menu.open{display:flex} .set-sec{display:flex;flex-direction:column;gap:2px} /* blox55 #22 — ДВЕ КОЛОНКИ вместо столбика (почему — комментарий в settings.js над mountSettings). Сетка объявлена ЗДЕСЬ, а не у каждой секции: и шрифты, и схемы — один и тот же список выбора из четырёх, и раскладка у них обязана быть одна. Ширину меню на широких экранах поднимаем до 380px: в 300px ячейка получается 139px, и подпись схемы («Графитовая» + «графит и Maya Blue») ломается на три строки — выигрыш от двух колонок съедается обратно. На телефоне ширину не трогаем: там меню и так во весь экран минус поля. */ .set-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px} @media(min-width:761px){ .set-menu{max-width:min(380px,calc(100vw - 24px))} } /* blox69 #7 расширял меню до 560px и ставил шрифты в три колонки — их было шесть. С blox72 #7 шрифтов два (остальные под заглушкой) — обычные две колонки, одна строка, ширина прежняя. */ /* В ячейке вдвое меньше ширины, поэтому в сетке всё поджато: точки мельче, зазор до текста меньше, поля кнопки уже. Сами точки остаются главным превью палитры — ассерт «цветовая схема» сверяет их цвет с токенами включённой схемы, и уменьшение размера ему безразлично. */ .set-grid .set-scheme{gap:2px 8px;padding:9px 8px} .set-grid .set-dots i{width:11px;height:11px} .set-grid .fsw-item{padding:9px 9px} /* ПОДПИСЬ СХЕМЫ В СЕТКЕ НЕ ПОКАЗЫВАЕМ. В половинной ячейке «ночная, виноградный якорь» ломается на три строки, и секция из двух колонок выходит почти такой же высокой, как столбик, — то есть правка не срабатывает. Потеря тут небольшая: подпись пересказывает словами то, что рядом уже нарисовано точками (первая = шапка схемы), а имя схемы остаётся. У ШРИФТОВ подпись остаётся — она не дублирует ничего: «мягкий, для младших» и «шрифт устройства» — это совет, как выбрать. */ .set-grid .set-snote{display:none} /* А на ТЕЛЕФОНЕ схемы остаются столбиком: меню там 300px, половинная ячейка — 145px, и в неё не помещается «точки + Sneakers + галочка» (подпись вылезала за край меню). Шрифтов это не касается — их ячейка укладывается. Столбик схем на телефоне ничего не ломает: без подписей секция всё равно вдвое ниже прежней, и меню целиком влезает в экран. */ @media(max-width:760px){ .set-grid-sch{grid-template-columns:1fr} } /* ГРАВИРОВАННАЯ ЛИНЕЙКА (blox52 #4, п.3): волосок + светлый блик ПОД ним — то же тиснение, что на карточке, только в одну строку. Так разделитель перестаёт быть просто серой чертой поверх бумаги и читается оттиском В бумаге. */ .set-sec + .set-sec{margin-top:6px;padding-top:8px;border-top:1px solid var(--line-soft); box-shadow:var(--rule-t)} .set-h{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);padding:2px 11px 4px} .set-scheme{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2px 11px; background:none;border:none;border-radius:var(--r-sm);padding:9px 11px;cursor:pointer;text-align:left; color:var(--ink);width:100%} @media (hover:hover){.set-scheme:hover{background:var(--accent-tint)}} .set-scheme.on{background:var(--accent-tint)} .set-dots{grid-row:1 / span 2;display:flex;gap:3px} .set-dots i{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.08)} .set-sbody{grid-column:2;display:flex;flex-direction:column} .set-sname{font-size:var(--fs-md);font-weight:700} .set-snote{font-size:var(--fs-xs);font-weight:600;color:var(--muted)} .set-scheme .fsw-tick{grid-column:3;grid-row:1 / span 2;color:var(--accent-dark);font-weight:800;opacity:0} .set-scheme.on .fsw-tick{opacity:1} .auth .auth-me{font-weight:700;font-size:var(--fs-sm);opacity:.95} /* переключатель детей в шапке ребёнка: без ограничения ширины нативный select раздувается до самого длинного пункта («➕ Добавить») и вся шапка ломается на две строки на телефоне. Ограничиваем ширину и обрезаем длинное имя многоточием — как у учителя, одна строка. */ .auth .kid-switch{max-width:150px;text-overflow:ellipsis;padding:9px 10px} /* «Выйти» переехал из шапки вниз всплывашки настроек (blox31 #1). Отдельная секция снизу, отбита линией; мягкий красноватый акцент как у деструктивного действия, но негромкий. */ .set-sec-logout{margin-top:6px;padding-top:8px;border-top:1px solid var(--line-soft); box-shadow:var(--rule-t)} .set-logout{width:100%;background:none;border:none;border-radius:var(--r-sm);padding:10px 11px; cursor:pointer;text-align:left;color:var(--alert-ink);font-weight:700;font-size:var(--fs-md)} @media (hover:hover){.set-logout:hover{background:var(--alert-tint)}} /* blox37 #1 — «Сообщить о проблеме». Тот же пункт-строка, что «Выйти», но виден ВСЕМ ролям: застревают чаще родители и дети. min-height 44px — палец (WCAG 2.5.5). */ .set-sec-support{margin-top:6px;padding-top:8px;border-top:1px solid var(--line-soft); box-shadow:var(--rule-t)} .set-support{display:block;width:100%;min-height:44px;background:none;border:none;border-radius:var(--r-sm); padding:10px 11px;text-align:left;color:var(--ink);font-weight:700;font-size:var(--fs-md);cursor:pointer} @media (hover:hover){.set-support:hover{background:var(--surface-2)}} /* Подсказка «как установить» в меню настроек (blox55 #18). НАРОЧНО не кнопка и не похожа на неё — ни рамки, ни фона, ни наведения: нажимать в ней не на что (жест ручной, его делает сам человек через меню браузера), а контрол, который ничего не делает, — это мёртвый клик. Ширина задана здесь, а не у меню: меню тянется по содержимому, и без ограничения одна длинная строка растянула бы его до предела на всех экранах. */ .set-hint{padding:0 11px 8px;color:var(--muted);font-size:var(--fs-xs);line-height:1.45;max-width:230px} /* на телефоне запас по ширине минимальный — режем селект сильнее, чтобы шапка держала одну строку. Стоит ПОСЛЕ базового max-width:150px, иначе при равной специфичности победит базовое правило. */ @media(max-width:430px){ .auth .kid-switch{max-width:120px} } .ya-btn{display:inline-flex;align-items:center;gap:7px;background:#fff;color:#000; text-decoration:none;font-weight:700;font-size:var(--fs-sm);padding:8px 14px;border-radius:var(--r-sm); border:none;cursor:pointer} /* «Я» — фирменный знак Яндекса, а не иконка интерфейса: и кегль, и скругление привязаны к СВОЕЙ плашке (20px и 26px), а не к нашим лестницам --ic-* и --r-*. Поэтому здесь и в -lg числа оставлены числами: сдвинь мы ступень — знак перестанет попадать в свой квадрат, а его угол разойдётся с углом квадрата. */ .ya-btn::before{content:"Я";display:inline-flex;align-items:center;justify-content:center; width:20px;height:20px;border-radius:5px;background:var(--ya-red);color:#fff;font-weight:800;font-size:14px} .ya-btn-lg{font-size:var(--fs-lg);padding:14px 22px;border-radius:var(--r-md);box-shadow:var(--sh-2)} .ya-btn-lg::before{width:26px;height:26px;font-size:18px;border-radius:7px} .landing{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:24px} .landing-card{max-width:380px;text-align:center;background:var(--card); border-radius:var(--r-2xl);padding:38px 30px;box-shadow:var(--sheet-3)} .landing-logo{font-weight:800;font-size:var(--fs-4xl);letter-spacing:var(--tracking-tight);margin-bottom:10px; background:var(--grad-wordmark); -webkit-background-clip:text;background-clip:text;color:transparent} .landing-sub{color:var(--muted-strong);font-size:var(--fs-md);line-height:1.5;margin:0 0 22px} /* Две двери входа — «Ученик» и «Учитель» — стоят столбиком и НАМЕРЕННО одинаковы: роль решает строка в users, а не кнопка. Подпись БЕЗ «Я»: значок Яндекса рисуется через .ya-btn::before (красный квадрат с буквой «Я»), и «Я ученик» читалось как «Я Я ученик». Выделять одну из дверей нечем. Растягиваем по ширине карточки, иначе inline-flex сажает их в одну строку. */ .landing-doors{display:flex;flex-direction:column;gap:10px} .landing-doors .ya-btn{width:100%;justify-content:center;box-sizing:border-box} /* 44px высоты — это ссылка-кнопка на экране входа, палец промахивается по 18-пиксельной строке */ .switch-link{display:block;margin:8px auto 0;padding:12px 4px;min-height:44px;box-sizing:border-box; color:var(--accent-ink);font-size:var(--fs-sm);text-decoration:underline} /* Ошибка входа. Живёт НА экране входа, а не в alert: почти всегда причина в том, что браузер уже залогинен не в тот Яндекс-аккаунт, и рядом с текстом обязана быть кнопка «выбрать другой». */ .login-err{text-align:left;border:1px solid var(--alert-line);border-radius:var(--r-lg); background:var(--alert-tint);padding:12px 14px;margin:0 0 18px} .login-err-msg{display:flex;gap:8px;font-size:var(--fs-md);line-height:1.45;font-weight:600;color:var(--ink)} .login-err-msg svg{width:18px;height:18px;flex:0 0 18px;margin-top:2px;color:var(--alert-ink)} .login-err-em{margin-top:8px;font-size:var(--fs-sm);color:var(--muted-strong);overflow-wrap:anywhere} /* Подсказка «а если аккаунт верный» — вторым планом: она нужна меньшинству, а первую строку перебивать не должна. */ .login-err-hint{margin-top:8px;font-size:var(--fs-sm);line-height:1.4;color:var(--muted-strong); padding-top:8px;border-top:1px solid var(--alert-line)} select{ border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;font-size:var(--fs-md); background:var(--card);color:var(--ink);font-weight:600; } header select{border-color:transparent} /* боковые/нижний отступы контента учитывают вырез (viewport-fit=cover): в горизонтали карточки не заезжают под вырез слева/справа, а низ страницы не прячется под home-индикатор. env()=0 без выреза → max()/сумма дают базовые значения, обычный экран не меняется. */ main{max-width:900px;margin:0 auto; padding:var(--sp-5) max(var(--sp-4),env(safe-area-inset-right)) calc(var(--sp-8) + env(safe-area-inset-bottom)) max(var(--sp-4),env(safe-area-inset-left))} /* blox53 #29 — КОЛОНТИТУЛ ШКОЛЫ у нижнего края. Лежит на СТОЛЕ, а не на бумаге, поэтому цвет --on-bg (у --faint на столе 1.9:1 — подпись исчезла бы). Тише контента и по центру: это подпись документа, а не сообщение — она не должна спорить с последней карточкой листа. Отступ снизу учитывает вырез телефона тем же способом, что и main. */ .pfoot{max-width:900px;margin:0 auto; padding:0 max(var(--sp-4),env(safe-area-inset-right)) calc(var(--sp-6) + env(safe-area-inset-bottom)) max(var(--sp-4),env(safe-area-inset-left)); text-align:center;color:var(--on-bg);font-size:var(--fs-xs);line-height:1.5} .pfoot-b{font-weight:700;white-space:nowrap} .sub{color:var(--muted);margin:4px 0 18px;font-size:var(--fs-md)} h2{margin:0 0 2px;font-size:var(--fs-2xl);font-weight:800;color:var(--ink-strong)} .badge{font-size:var(--ic-lg)} /* ===== STUDENT HOMEWORK — the flagship list ================================= A task used to be a saturated colour block with white text. It is now a white card carrying a colour RAIL on its left edge (--rail, set by JS from the task type: grape = nothing to hand in, sky = a turn-in is expected). Same colour code, far better legibility, and it finally rhymes with the teacher's cards (.ecard/.srcard), which were already white-with-a-stripe. */ /* ===== ТИСНЁНАЯ ПЛАШКА — ОДИН материал четырёх карточек (blox51 #3, заход 2) ===== .rect — таск у ученика · .bitem — таск в черновике ДЗ · .oent — таск на мониторе · .srcard — таск в личке ученика. Все четыре говорили об одном и том же предмете, но были собраны по-разному: своя тень, своя граница, свои цифры. Теперь это один ЛИСТ БУМАГИ, в который ВДАВЛЕН рельс, а геометрия (padding, радиус, плотность) остаётся у каждой своя — ниже в её собственном блоке. Цвет рельса везде приходит одним путём: --rail (JS ставит его из itemColor). Материал целиком собран из токенов --emb* — см. theme.css, «ТИСНЕНИЕ». Рельс живёт в ::before, а НЕ в border-left: границу нельзя ни скруглить внутри плашки, ни утопить — а именно вдавленность и читается как «дорого». */ /* --rail ставит JS ИНЛАЙНОМ (цвет по типу таска), а инлайн не перебить классом. Поэтому светит не он, а --rail-eff: состояния карточки (.done, .chal.done) меняют именно его. Раньше ту же роль играл border-left-color, который JS не трогал. */ .rect,.bitem,.oent,.srcard{--rail:var(--task-plain);--rail-eff:var(--rail);position:relative; background:var(--card);box-shadow:var(--sheet-1); --emb-rail:linear-gradient(180deg, color-mix(in srgb, var(--rail-eff) 86%, var(--emb-deep)) 0%, var(--rail-eff) 44%, color-mix(in srgb, var(--rail-eff) 90%, var(--emb-lift)) 100%)} .rect::before,.bitem::before,.oent::before,.srcard::before{content:"";position:absolute; left:var(--rail-x);top:var(--rail-y);bottom:var(--rail-y);width:var(--rail-w); border-radius:calc(var(--rail-w) / 2); background:var(--emb-rail);box-shadow:var(--emb-groove)} /* значения по умолчанию — крупная плашка; плотные (монитор) сужают их у себя */ .rect,.bitem,.oent,.srcard{--rail-x:5px;--rail-y:9px;--rail-w:7px} .hwlist{display:flex;flex-direction:column;gap:10px} /* padding-right резервирует правую колонку под «сделал» (.rcheck, абсолютная во всю высоту), чтобы серый столбец тянулся до низа карточки при любой её высоте (blox18 #7). Плеера в карточке больше нет — он открывается шторкой (.hwpsheet, blox68 #6). */ .rect{display:flex;flex-wrap:wrap;align-items:stretch; padding-right:66px;padding-left:15px; border:1px solid var(--line-soft); border-radius:var(--r-lg);overflow:hidden;color:var(--ink); transition:opacity var(--t-slow) var(--ease),box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease),background var(--t-slow) var(--ease)} @media (hover:hover){.rect:hover{box-shadow:var(--sheet-2)}} /* done = the card quietly recedes: celadon wash + faded rail + no shadow carry the state. No blanket opacity — it dragged the title/links below 4.5:1 (axe color-contrast); the green wash alone already reads as «done». */ /* «сделано» — карточка тихо отступает: тень снимается, но ОБРЕЗНОЙ КРАЙ остаётся, иначе выполненный таск перестаёт быть листом и становится пятном заливки. */ .rect.done{background:var(--ok-tint);border-color:var(--ok-line);--rail-eff:var(--ok-line); box-shadow:var(--sheet-edge)} .rect.done .rtitle{color:var(--muted)} /* blox6: иконка типа стояла отдельной КОЛОНКОЙ у левого края таска. blox63 #8 — колонки больше нет: иконка уехала внутрь строки с названием типа (.rtico), потому что в колонке она вставала на уровень первой строки ЗАДАНИЯ и подписывала собой чужой текст. */ .rect .rtico{font-size:var(--ic-md);line-height:1;flex:0 0 auto} .rect .rbody{flex:1;min-width:0;padding:14px 14px 14px 14px;display:flex;flex-direction:column;gap:9px} /* заглавная строка карточки: один размер на всех экранах (--fs-md, 15px), по образцу конструктора (blox46 #2). У РЕБЁНКА в ней до первого открытия стоит тип таска — см. blox46 #3 */ .rect .rtitle{font-weight:700;font-size:var(--fs-md);line-height:1.3;color:var(--ink); letter-spacing:var(--tracking-tight);overflow-wrap:anywhere;text-wrap:balance} /* ...а после открытия — САМО задание. Не режем его ничем: шторку убрали (blox46 #8), дочитать длинный текст больше негде, карточка — единственное место, где он живёт. Переводы строк учительского текста сохраняем, как их сохраняла шторка */ /* И ВЕС ТУТ ДРУГОЙ (blox52 #6). Пока в строке стоит ТИП таска («Read by yourself») — это ярлык, 700 на месте. Как только на её месте оказывается само задание, это уже абзац, который ребёнок читает, и 700 превращали короткий текст в вывеску: ученик видел афишу вместо задания. Переносов здесь нет намеренно — задание учитель чаще всего пишет по-английски, а словарь переносов взялся бы русский (язык страницы). text-wrap:pretty перебивает balance, унаследованный от .rtitle: абзацу нужно ровное «дно», а не ровные строки. */ /* blox63 #9 — РАЗМЕР тут больше, чем у заголовка-ярлыка, и это намеренное расхождение с остальными тремя карточками: у учителя лист — столбик, который он просматривает, а у ребёнка это текст, который он ЧИТАЕТ и по которому делает задание. 15px хватало ярлыку, читаемому абзацу — нет. */ .rect .rtitle-body{white-space:pre-wrap;font-weight:var(--fw-read);text-wrap:pretty; font-size:var(--fs-lg);line-height:1.4} /* тип таска подписью — появляется, когда заголовок занят самим заданием */ .rect .rsub{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:-5px; font-size:var(--fs-sm);font-weight:700;color:var(--muted)} /* имя прикреплённого файла — под типом таска, тише заголовка, но читаемо */ .rect .rfile{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600; color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-3px} .rect .rstatus{font-size:var(--fs-sm);font-weight:600;color:var(--muted)} /* blox70 #2 — «🤔» учителя на несделанном задании: знак тем же видом, что реакция на сдачу (.subreact-ro), и подпись в строку — одна тихая строка, не тревога */ .rect .rwait,.tsc .rwait{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px} .rect .rwait .subreact,.tsc .rwait .subreact{margin-top:0} .rect .rwait-lbl,.tsc .rwait-lbl{font-size:var(--fs-sm);font-weight:600;color:var(--muted)} /* ---- ЧЕЛЛЕНДЖ (blox15 #6) — та же плашка .rect, тот же рельс, только он ЗОЛОТОЙ. blox23 #1: финишный флаг переехал из низа иконочной колонки к верхней строке счётчиков-витрины (см. .rp-count ниже). Выполненный челлендж НЕ гаснет как обычный таск: витрина должна быть видна. */ .rect.chal{border-color:var(--gold-line);background:var(--gold-tint)} .rect.chal.done{background:var(--gold-tint);border-color:var(--gold-line); --rail-eff:var(--gold);opacity:1} .rect.chal.done .rtitle{color:var(--ink)} .rect .rflag{color:var(--gold-ink);font-size:var(--ic-md);display:inline-flex;align-items:center;flex:0 0 auto} .rect .rdue,.tsc .rdue{font-size:var(--fs-sm);font-weight:700;color:var(--gold-ink); background:var(--card);border:1px solid var(--gold-line);border-radius:var(--r-pill);padding:1px 8px; white-space:nowrap} /* витрина: кто сделал, кто нет (у слушательного челленджа — с числом наслушек) */ .rect .rpeers,.tsc .rpeers{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-sm); border-top:1px dashed var(--gold-line);padding-top:8px} .rect .rp-count,.tsc .rp-count{font-weight:800;color:var(--gold-ink);display:flex;align-items:center;gap:6px} .rect .rp-did,.tsc .rp-did{color:var(--ok-ink);overflow-wrap:anywhere} .rect .rp-did b,.tsc .rp-did b{color:var(--gold-ink)} .rect .rp-not,.tsc .rp-not{color:var(--muted);overflow-wrap:anywhere} /* padding + отрицательный margin: зона нажатия ≥24px (G5), а видимая надпись стоит где стояла */ /* «переотправить» живёт ВНУТРИ зелёной сделанной карточки (.rect.done, --ok-tint): тревожные чернила в состоянии успеха читались «что-то не так» (blox52 #11). Акцентные чернила схемы — это «действие текстом», и на ok-tint они читаются во всех схемах (замер 06.09.2026: 14.1 · 5.4 · 5.4 · 11.0). */ .rect .resend{background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--fs-sm); font-weight:700;color:var(--accent-ink);text-decoration:underline; padding:8px 6px;margin:-8px -6px -8px 2px} /* ОБЛАЧКО УЧИТЕЛЯ (blox71 #1/#3) — одно на карточке листа и на экране таска (.tsc-ret). Сверху вердикт (если он нужен), под ним РЕПЛИКА одной строкой с левого края: «Mrs. Lou: текст 👍». Принято — белая бумага с зелёной кромкой поверх зелёной сделанной карточки; вернули — акцентная подложка (не тревога: красный — только настоящая беда). */ .tplate{display:flex;flex-direction:column;gap:6px;padding:9px 12px;border-radius:var(--r-sm); background:var(--surface-2);border:1px solid var(--line-soft);color:var(--ink)} .tplate.tp-ok{background:var(--card);border-color:var(--ok-line)} .tplate.tp-ret{background:var(--accent-tint);border-color:var(--accent-line)} .tp-verdict{display:flex;align-items:center;gap:5px;font-size:var(--fs-sm);font-weight:700} .tp-ok .tp-verdict{color:var(--ok-ink)} .tp-msg{font-size:var(--fs-sm);line-height:1.45;text-align:left;overflow-wrap:anywhere} .tp-who{font-weight:700;color:var(--muted)} /* КОММЕНТАРИЙ УЧИТЕЛЯ — читаемый текст (blox52 #6): тот же вес, что у самого задания рядом, иначе в одном предмете два веса у двух одинаковых по роли текстов. Переносов нет: учитель пишет комментарий по-английски не реже, чем по-русски. Переводы строк учителя сохраняем. */ .tplate .tp-note{font-weight:var(--fw-read);white-space:pre-wrap;text-wrap:pretty} /* знак — в строку, сразу после текста: inline-flex перебивает flex общего .subreact */ .tp-msg .subreact-ro{display:inline-flex;vertical-align:middle;margin:-4px 0 -2px 2px;font-size:var(--fs-xl)} /* ПРИНЯТОЕ СВЁРНУТО (blox71 #1–#3): [✓ задание / тип] и под ними облачко учителя. Облачко начинается на вертикали ✓ (оба стоят у левого края .rbody), а кончается там же, где облачко «вернули»: правая колонка 66px (резерв .rect) остаётся, в ней стрелка «›» вместо галочки — того же зелёного цвета, что колонка «сделал» у сделанной карточки. */ .rect .rfold{gap:8px} .rf-top{display:flex;align-items:flex-start;gap:10px} .rf-tick{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--ok-ink);color:var(--on-dark); display:flex;align-items:center;justify-content:center;margin-top:-1px} .rf-tick .tick{width:15px;height:15px;display:block;fill:none;stroke:currentColor; stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .rf-main{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:5px} .rf-title{font-size:var(--fs-md);font-weight:600;line-height:1.3;color:var(--muted);overflow-wrap:anywhere; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden} .rf-type{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:700;color:var(--muted)} .rf-go{position:absolute;top:0;right:0;bottom:0;width:66px;display:flex;align-items:center;justify-content:center; background:var(--ok-fill);border-left:1px solid var(--ok-line);color:var(--ok-ink);font-size:var(--ic-md)} /* blox22 #3: свёрнутый «Мой ответ» — ученик пересматривает свою сдачу */ /* blox27 #4 — «Мой ответ» показан сразу сущностью файла (не тоггл): подпись + кликабельная карточка */ .rect .myans,.tsc .myans{margin-top:6px} .rect .myans-lbl,.tsc .myans-lbl{display:flex;align-items:center;gap:5px;font-size:var(--fs-sm);font-weight:700; color:var(--accent-ink);margin-bottom:6px} /* blox26 #3 — ЕДИНАЯ «сущность приложенного файла»: скруглённая карточка [иконка типа · имя · глаз]. Одна на экране ученика («Мой ответ») и в проверке учителя. Медиа НЕ разворачивается в потоке — открывается по клику во встроенном оверлее .mediaov (фото вписано; видео/аудио через наш плеер). Это и убрало переполнение на широком экране, и наложение двух плееров. */ .fileent{display:flex;align-items:center;gap:10px;max-width:100%;padding:9px 11px;border-radius:var(--r-sm); background:var(--surface);border:1px solid var(--line);cursor:pointer;color:var(--ink); text-decoration:none;box-shadow:var(--sh-1)} @media (hover:hover){.fileent:hover{border-color:var(--accent-line)}} .fileent-ico{flex:0 0 auto;font-size:var(--ic-md);line-height:1;display:flex;color:var(--accent-ink)} .fileent-nm{flex:1;min-width:0;font-weight:650;font-size:var(--fs-sm);line-height:1.3;overflow-wrap:anywhere} .fileent-view{flex:0 0 auto;width:34px;height:34px;border:none;border-radius:var(--r-sm);cursor:pointer; background:var(--accent-tint);color:var(--accent-ink);display:flex;align-items:center;justify-content:center} .fileent-view:active{transform:scale(.94)} .fileent-go{flex:0 0 auto;font-weight:800;color:var(--accent-ink)} /* blox64 #6 — РЕАКЦИЯ УЧИТЕЛЯ НА СДАЧУ. Ряд из пяти знаков под сущностью файла и под плеером в оверлее. Разметку рисует submission-view.js, набор знаков приходит из public/reactions.js. Это ЕДИНСТВЕННОЕ место интерфейса, где эмодзи стоят намеренно (сторож в tools/check.js знает про исключение): знак здесь и есть содержание — ребёнок узнаёт «огонь», а не контурную фигуру. У ребёнка кнопок нет вовсе, стоит только .subreact-ro с поставленным знаком (флаг от экрана). */ .subreact{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px} .subreact-b{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center; font-size:var(--fs-xl);line-height:1;border:1px solid var(--line);border-radius:var(--r-sm); background:var(--surface);cursor:pointer;padding:0} .subreact-b:active{transform:scale(.94)} @media (hover:hover){.subreact-b:hover{border-color:var(--accent-line)}} /* ПОСТАВЛЕННАЯ — ЗЕЛЁНАЯ (решение владельца 22.09.2026). До этого дня здесь стоял оттенок схемы с оговоркой «зелёный значит принято/сделано, а реакция — не приёмка». Владелец решил иначе: поставленный знак читается как отметка, и зелёный тут уместен. Заливка СПЛОШНАЯ (--ok-solid), и это осознанно: мягкий --ok-fill на карточке принятой работы (она сама зеленоватая) читался бледно — сравнили два снимка. Значит смысл зелёного расширен: не только «сделано/принято», но и «учитель отметил». Поэтому .subreact-b.on ВПИСАНА в реестр GREEN_OK (tools/check.js) — сторож остаётся закрытым списком, а не обходится. Эмодзи — собственного цвета, белого текста тут нет, поэтому контраст к AA не применим. */ .subreact-b.on{background:var(--ok-solid);border-color:var(--ok-solid);box-shadow:var(--sh-1)} /* показ ребёнку: знак без рамки-кнопки — нажимать нечего. С 22.09.2026 перед знаком стоит имя того, кто его поставил («Mrs. Lou: 👍»): у ребёнка это единственное место, где похвала ИМЕННАЯ. Имя — обычными подписными чернилами и обычным кеглем, знак крупный: читается «кто» и сразу «что», а не строка одинакового размера. У старых знаков имени нет — тогда это просто знак, как раньше, и выравнивание не съезжает (gap между отсутствующими узлами не рисуется). */ .subreact-ro{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-2xl);line-height:1; margin-top:8px} .subreact-who{font-size:var(--fs-sm);line-height:1;color:var(--muted);font-weight:600} .subreact-sign{line-height:1} /* ОТВЕТ НА НАЖАТИЕ (22.09.2026). Раньше ряд отвечал только сменой заливки — на телефоне её закрывает палец, и методист, не увидев результата, второй раз СНЯЛА свою же реакцию. «Пшик» стоит на обоих узлах: у кнопки (учитель нажал) и у знака ребёнка (знак появился с салютом, и он же должен дрогнуть). Анимация трансформом — она не влияет на поток, поэтому правило «экран не прыгает» здесь не может быть нарушено в принципе. */ @keyframes subreact-pop{0%{transform:scale(1)}32%{transform:scale(1.3)}62%{transform:scale(.9)}100%{transform:scale(1)}} .subreact-b.pop,.subreact-ro.pop{animation:subreact-pop .34s ease-out} /* САЛЮТ. Слой общий и один на приложение (public/salute.js его создаёт при первой надобности): position:fixed поверх всего, pointer-events:none — сквозь него нажимают, он ничего не ловит и ничего не сдвигает. z-index 130 — выше шторок (50), тостов (70) и «нет связи» (120): салют стреляет и из оверлея со сдачей, значит обязан лежать над ним. */ .salute-layer{position:fixed;inset:0;z-index:130;pointer-events:none;overflow:hidden} /* --dx/--dy/--rot ставит на каждую частицу salute.js (свой угол и своя дальность). Объявлены ЗДЕСЬ со значениями по умолчанию: без объявления правило читается как сломанное — и сторож «переменная используется, но нигде не задана» справедливо ругался. Ноли значат «никуда не полетела»: частица без скрипта просто гаснет на месте, а не прыгает в угол экрана. */ .salute-p{--dx:0px;--dy:0px;--rot:0deg; position:absolute;display:block;width:7px;height:9px;border-radius:var(--r-2xs); margin:-4px 0 0 -3px;opacity:0;animation:salute-fly .78s ease-out forwards} /* до 70% — разлёт, дальше частица ПАДАЕТ и гаснет: без этого хвоста салют читается как расползающееся пятно, а не как хлопушка */ @keyframes salute-fly{ 0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)} 70%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1)} 100%{opacity:0;transform:translate(calc(var(--dx) * 1.1),calc(var(--dy) + 26px)) rotate(var(--rot)) scale(.85)} } /* человек попросил покой — гасим ОБА знака внимания: «пшик» замирает, частицы не рождаются вовсе (это делает сам модуль, здесь — страховка на случай уже созданного слоя) */ @media (prefers-reduced-motion:reduce){ .subreact-b.pop,.subreact-ro.pop{animation:none} .salute-layer{display:none} } /* медиа-оверлей сдачи: фото вписано (не вылезает за экран), видео/аудио — через наш плеер */ .mediaov .mediabox{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sheet-4); width:100%;max-width:min(900px,94vw);max-height:92vh;overflow:auto;padding:12px 14px} /* колонка, а не строка: под плеером встаёт ряд реакций (blox64 #6), и в строке он оказался бы сбоку от плеера, а не под ним */ .mediaov .mediabody{padding:8px 0 4px;display:flex;flex-direction:column;align-items:center} .mediaimg{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--r-xs);display:block} /* blox33 #2 — сдача архивирована по сроку хранения: спокойная заглушка вместо плеера */ .sub-archived{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:var(--fs-sm); padding:22px 16px;text-align:center;line-height:1.4} .sub-archived svg{width:22px;height:22px;flex:0 0 auto;opacity:.75} /* flickering (edited): the teacher changed the task after the pupil did it */ .edited-flag{font-size:var(--fs-xs);font-weight:800;color:var(--on-dark);background:var(--alert-solid); border-radius:var(--r-xs);padding:2px 8px;white-space:nowrap;animation:editblink 1.4s var(--ease) infinite} @keyframes editblink{0%,100%{opacity:1}50%{opacity:.35}} .rect .ractions{display:flex;gap:8px;flex-wrap:wrap;align-items:center} /* position:relative — якорь коробки волны .ripple-box (blox52 #13: .ract вошёл в SURFACES); без него волна вписалась бы в ближайшего позиционированного предка — во всю карточку .rect */ .rect .ract{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 15px; font-size:var(--fs-sm);font-weight:700;background:var(--card);color:var(--ink);cursor:pointer; text-decoration:none;display:inline-block;text-align:center;position:relative; transition:border-color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t-fast) var(--ease)} @media (hover:hover){.rect .ract:hover{border-color:var(--accent-deep);background:var(--accent-tint)}} .rect .ract:active{transform:scale(.96)} /* ГЛАВНОЕ ДЕЙСТВИЕ КАРТОЧКИ ЗАЛИТО акцентом схемы (blox52 #13). «Открыть задание» / «▶ Слушать» — то, ради чего карточка существует, а была самым тихим её элементом (белая контурная). Рецепт — тот же, что у .btn--primary (движок кнопок): --grad-primary под белым текстом (AA замерен в blox52 #10, включая верхний стоп), блик+фаска --bevel, hover — свечение своим цветом. Волна на тёмной заливке — normal (умножение белым — тождество, blox52 #8). Вторая, тихая кнопка «Страница» (.page) остаётся контурной базой выше — у карточки одно громкое действие. */ .rect .ract.open:not(.opened),.rect .ract.play{border-color:transparent;background:var(--grad-primary); color:var(--on-dark);box-shadow:var(--bevel),var(--sh-1);--ripple-blend:normal; display:inline-flex;align-items:center;justify-content:center;gap:6px} @media (hover:hover){.rect .ract.open:not(.opened):hover,.rect .ract.play:hover{border-color:transparent; background:var(--grad-primary);box-shadow:var(--bevel),0 6px 18px color-mix(in srgb,var(--anchor) 42%,transparent)}} /* СДЕЛАННЫЙ ТАСК ГАСИТ СВОЮ ГРОМКУЮ КНОПКУ. Заливка акцентом — знак «вот ради чего карточка существует»; когда задание сдано и плашка позеленела, звать больше некуда, а кнопка всё так же кричит с зелёного листа и перетягивает взгляд с тех тасков, что ещё ждут. Поэтому в .rect.done (и в золотом .rect.chal.done — он тоже .done) «Слушать» / «Открыть задание» возвращаются к ТИХОЙ контурной базе: фон прозрачный, чтобы сквозь кнопку читался тинт самой карточки, и она сидела В листе, а не поверх него. Кнопка остаётся ЖИВОЙ — переслушать сданное законно, — и этим отличается от «Открыто ✓» (.opened), которая disabled. Волна возвращается к режиму схемы (--ripple-blend:inherit): normal нужен только тёмной заливке, а её тут больше нет. Специфичность равна громкому правилу — побеждает порядком, поэтому стоит ПОСЛЕ него. */ .rect.done .ract.open:not(.opened),.rect.done .ract.play{ background:transparent;border-color:var(--line-mid);color:var(--muted-strong); box-shadow:none;--ripple-blend:inherit} @media (hover:hover){.rect.done .ract.open:not(.opened):hover,.rect.done .ract.play:hover{ background:var(--card);border-color:var(--line-strong);box-shadow:none}} /* «Открыто ✓» (blox52 #13) — кнопка «Открыть задание» после тапа НЕ исчезает (удаление меняло высоту карточки под пальцем), а становится контурной disabled-меткой ТЕХ ЖЕ размеров (min-width/height фиксирует JS). Нарочно НЕ зелёная: зелёный занят смыслом «сделано/принято» (§11), а «открыто» — тихий факт. Стоит ПОСЛЕ правила заливки: специфичность равная, побеждает порядок. */ .rect .ract.opened{background:var(--card);border-color:var(--line-mid);color:var(--muted); cursor:default;box-shadow:none} .rect .ract.opened:active{transform:none} /* blox24 #9: файл-таск без файла — нечего слушать/открывать; тихая пометка вместо кнопки */ .rect .ract-empty{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm); font-weight:600;color:var(--muted)} /* у контрольного файла нет колонки «сделал» (.rcheck), поэтому 66px-резерв справа — мёртвый пустой столбец. Снимаем: под .rcheck заезжать нечему (её тут нет). */ .rect.ctrltask{padding-right:0} /* the check: a tall tap target on the right, ringed circle -> filled celadon tick */ /* ВОЛНА ОТ КАСАНИЯ (blox52 #9). Это ГЛАВНАЯ кнопка ребёнка — десятки нажатий в неделю, и именно на телефоне обычное «нажатое» рисуется непредсказуемо, ради чего волна и заведена (см. public/ripple.js, список SURFACES). Поверхность бумажная, поэтому чернила берём зелёные — цвет самой отметки: волна показывает, ЧЕМ станет кружок. Режим (умножение днём, обычный ночью) приезжает от схемы сам, как у плитки кабинета. Колонка уже позиционирована (position:absolute), так что коробке волны есть во что вписаться. */ .rect .rcheck{position:absolute;top:0;right:0;bottom:0;width:66px;border:none;border-left:1px solid var(--line-soft); background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center; -webkit-tap-highlight-color:transparent;--ripple-ink:var(--ok-ink); transition:background var(--t) var(--ease)} @media (hover:hover){.rect .rcheck:hover{background:var(--fill-soft)}} .rect .rcheck:active{transform:scale(.94)} /* КОЛЬЦО ДО НАЖАТИЯ — акцент схемы, а не серый волосок (blox52 #13). --line-mid в синих схемах давал ~1.7:1 к белой карточке: главный «щёлк» дня выглядел заглушкой. Берём --anchor-ink (якорь ЧЕРНИЛАМИ): в светлых схемах это сам якорь, ночью — светлый виноград, иначе тёмный якорь на тёмной бумаге сам дал бы 2.9:1 (замер 06.09.2026, цель ≥3:1 для нетекстового индикатора: 10.2 · 13.8 · 6.0 · 7.6). Толщина остаётся 2px — ступень «сигнал» лестницы линий. Наведение (--ok) и анимации пачки 8 не тронуты. */ .rect .rcheck .circ{width:32px;height:32px;border-radius:50%;border:2px solid var(--anchor-ink); background:var(--card);display:flex;align-items:center;justify-content:center;font-size:var(--ic-md); font-weight:800;color:transparent; transition:background var(--t) var(--ease),border-color var(--t) var(--ease), color var(--t) var(--ease),transform var(--t) var(--ease)} @media (hover:hover){.rect .rcheck:hover .circ{border-color:var(--ok)}} .rect .rcheck.on{background:var(--ok-fill);border-left-color:var(--ok-line)} .rect .rcheck.on .circ{background:var(--ok-ink);border-color:var(--ok-ink);color:var(--on-dark); transform:scale(1.06)} /* галочка — ШТРИХ, а не буква: путь, который можно прочертить (см. TICK в student.js) */ .rect .rcheck .circ .tick{width:19px;height:19px;display:block;fill:none;stroke:currentColor; stroke-width:3;stroke-linecap:round;stroke-linejoin:round} /* ═══════════════════════════════════════════════════════════════════════ ОТКЛИК РЕБЁНКА НА СВОЁ ДЕЙСТВИЕ (blox52 #9, восьмая пачка судьи). Всё, что ниже, живёт на ОДНОМ факте: тик «сделал» перерисовывает лист целиком (toggleDone → renderStudent → view.innerHTML). Значит анимацию нельзя вешать на нажатую кнопку — её через миг не станет; карточка РОЖДАЕТСЯ с классом (.just-done / .just), и браузер играет анимацию на вставке нового узла. Имена анимаций начинаются с hw- сознательно: по этому признаку сторож npm run check находит их все и требует, чтобы каждая гасилась под «уменьшенным движением» — иначе новая анимация здесь появилась бы мимо чужой воли и никто бы не заметил. Ни одна из них НЕ меняет раскладку: только прозрачность, transform, цвет и штрих. */ /* кружок СХЛОПЫВАЕТСЯ в отметку: начинает шире кольца, проваливается ниже цели и возвращается с перелётом (--ease-spring) — движение читается физическим, а не «включили картинку». Конец кадра равен статике .rcheck.on (scale 1.06), поэтому fill не нужен: анимация кончилась — состояние уже на месте, стыка не видно. */ .rect .rcheck.just .circ{animation:hw-circ-pop .34s var(--ease-spring)} @keyframes hw-circ-pop{0%{transform:scale(1.3)}55%{transform:scale(.82)}100%{transform:scale(1.06)}} /* галочка ПРОРИСОВЫВАЕТСЯ: pathLength="1" делает длину пути единицей, поэтому dash-набор пишется числами, не зависящими от размера фигуры. Штрих живёт ТОЛЬКО внутри кадров — вне анимации у пути нет ни dasharray, ни offset, и галочка сплошная сама собой (в том числе когда анимация выключена по просьбе человека). КРИВАЯ — linear, а не общая --ease, по той же причине, по которой линейно затухает волна (см. ripple-fade): --ease описывает, как вещь ПРИЕЗЖАЕТ на место, и стартует резко — на замере она прочерчивала 80% галочки за первые 30 мс, то есть штриха никто бы не увидел. Прочерчивание и заливка — не приезд, у них своя ровная скорость. */ .rect .rcheck.just .circ .tick{animation:hw-tick-draw .3s linear .05s both} @keyframes hw-tick-draw{from{stroke-dasharray:1;stroke-dashoffset:1} to{stroke-dasharray:1;stroke-dashoffset:0}} /* ВОЛНА УСПЕХА: на полсекунды карточка становится заметнее — гуще заливка, рамка в полный --ok — и оседает в спокойный зелёный статики (.rect.done). Громко МГНОВЕНИЕ, а не всегда: галочка ставится десятки раз в неделю, и постоянный праздник обесценился бы за день. background-COLOR, а не background: короткая запись снесла бы фон-картинку, если она появится у карточки. */ .rect.just-done{animation:hw-done-wash .5s linear} @keyframes hw-done-wash{ 0%{background-color:var(--card);border-color:var(--line-soft)} 14%{background-color:var(--ok-fill);border-color:var(--ok)} 45%{background-color:var(--ok-fill);border-color:var(--ok)} 100%{background-color:var(--ok-tint);border-color:var(--ok-line)}} /* «ИДУ» — между нажатием и перерисовкой. На медленной связи там была пустота, и ребёнок жал второй раз. Тонкая полоса по ВЕРХНЕЙ кромке карточки: 2px, внутри overflow:hidden самой плашки, ничего не сдвигает и никуда не лезет. Снимается перерисовкой (нового узла класса нет) или руками, если запрос отказал — см. toggleDone. */ .rect.busy::after{content:'';position:absolute;left:0;top:0;height:2px;width:38%; background:var(--ok-ink);border-radius:0 var(--r-2xs) var(--r-2xs) 0; animation:hw-busy-sweep 1.05s linear infinite} @keyframes hw-busy-sweep{from{transform:translateX(-100%)}to{transform:translateX(263%)}} /* РАСКЛАДКА ПРИ ПЕРВОМ ПОКАЗЕ: карточки въезжают по очереди. Класс .intro ставит JS ровно на первой отрисовке листа (см. hwIntroShown в student.js) — на обновлениях его нет, и список не шевелится вовсе. Только прозрачность и сдвиг 6px: раскладка не меняется, значит «въезд» физически не может ничего подвинуть (правило «экран не прыгает»). */ .hwlist.intro .rect{--i:0; /* ступень задержки; настоящий номер ставит JS инлайном */ animation:hw-card-in .32s var(--ease) both; animation-delay:calc(var(--i) * 45ms)} @keyframes hw-card-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* ЧУЖАЯ ВОЛЯ. Попросил человек систему не анимировать — движения не остаётся: отметка появляется готовой, лист показывается сразу, волна успеха не идёт. Полоса «иду» — единственная, что ОСТАЁТСЯ: это не украшение, а признак «запрос летит»; она просто перестаёт ездить и стоит во всю ширину. Тот же размен, что у волны от касания. */ @media (prefers-reduced-motion:reduce){ .rect .rcheck.just .circ, .rect .rcheck.just .circ .tick, .rect.just-done, .hwlist.intro .rect{animation:none} .rect.busy::after{animation:none;width:100%} } /* teacher grid */ table{border-collapse:separate;border-spacing:8px;width:100%} th{font-size:var(--fs-sm);color:var(--muted);font-weight:700;text-align:center;padding:4px} th.name,td.name{text-align:left;font-weight:700;white-space:nowrap} .cell{ width:64px;height:48px;border-radius:var(--r-md);color:#fff;margin:0 auto; display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-sm); } .empty{color:var(--muted);padding:30px 0;text-align:center} /* ── ПУСТОЕ СОСТОЯНИЕ (blox51 #12) ────────────────────────────────────────────── Класс .empty носил ТРИ РАЗНЫЕ роли одной серой строкой, и это была не мелочь, а потеря смысла: «Загрузка…» (сейчас появится содержимое), «Групп пока нет» (содержимого нет и вот что с этим делать) и «Не удалось загрузить» (что-то сломалось). Человек видел одну и ту же извиняющуюся строчку и не мог отличить ожидание от тупика. Роли разведены: .empty — ТОЛЬКО ожидание. Тихая, мелкая, живёт доли секунды и обязана оставаться незаметной: сделать её кадром значило бы получить вспышку на пол-экрана при каждой первой загрузке; .estate — НЕЧЕГО ПОКАЗАТЬ. Это не отсутствие экрана, а сам экран: знак, заголовок, одна строка объяснения и — главное — ДЕЙСТВИЕ, которое отсюда выводит. Раньше кнопка «＋ Новая группа» стояла ПОД строкой отдельным блоком, слева, и читалась как не связанная с ней; теперь она часть композиции; .efail — ОТКАЗ. Тот же кадр, но знаком тревоги и её чернилами: «не получилось» не должно выглядеть как «пусто», иначе человек не поймёт, что стоит повторить. Кадр — ЛИСТ БУМАГИ (--card + тиснение), а не пунктирная коробка: пунктир в этом приложении уже занят и означает «черновик / предстоящий урок» (.opane.empty). */ .estate{display:flex;flex-direction:column;align-items:center;text-align:center; gap:var(--sp-3);padding:var(--sp-8) var(--sp-5);margin:var(--sp-6) auto;max-width:520px; background:var(--card);border-radius:var(--r-xl);box-shadow:var(--sheet-1)} /* знак в лунке — тот же язык, что у плиток кабинета (.hub-ic), но крупнее и тише: это не кнопка, на него не нажимают, он только называет место */ .estate-ic{display:flex;align-items:center;justify-content:center;width:64px;height:64px; border-radius:var(--r-xl);background:var(--surface);color:var(--faint); font-size:var(--fs-2xl);line-height:0} .estate-t{font-size:var(--fs-xl);font-weight:800;line-height:var(--lh-tight); letter-spacing:var(--tracking-tight);color:var(--ink);text-wrap:balance;margin:0} /* строка объяснения ограничена по МЕРЕ СТРОКИ, а не по ширине кадра: 42ch — это про чтение, а не про раскладку, поэтому на широком экране она не растягивается в ленту */ .estate-n{font-size:var(--fs-md);color:var(--muted);line-height:var(--lh);max-width:42ch;margin:0} /* действие внутри кадра: .toolbar ставит свои отступы и выравнивание по левому краю — здесь оно центральное и без верхнего поля, иначе кнопка отваливается от композиции */ .estate-a{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center;margin:var(--sp-1) 0 0} .efail .estate-ic{background:var(--alert-tint);color:var(--alert)} .efail .estate-t{color:var(--alert-ink)} /* pool playlist panel */ /* «Назад» внутри конструктора/расписания = вариант B (контур) на СВЕТЛОМ фоне */ .back{display:inline-flex;align-items:center;gap:5px;box-sizing:border-box; background:none;border:1px solid var(--line);border-radius:var(--r-md);color:var(--muted-strong); font-weight:700;font-size:var(--fs-sm);cursor:pointer;padding:7px 13px;margin-bottom:10px; transition:border-color var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease)} @media (hover:hover){.back:hover{border-color:var(--accent-deep);background:var(--accent-tint);color:var(--accent-ink)}} .now{background:var(--card);border-radius:var(--r-md);padding:16px; box-shadow:var(--sheet-2);margin-bottom:16px} .now .nt{font-weight:800;font-size:var(--fs-lg);margin-bottom:8px} /* blox41 — почему заиграл не тот файл. Спокойный тон: для ребёнка это не его ошибка, поэтому не alert-красный, а обычная подпись; строка держится до следующего осознанного тапа. */ .now .pskip{font-size:var(--fs-sm);color:var(--muted);margin:-4px 0 10px} .now .pskip[hidden]{display:none} /* blox52 #17: аудио пула играет НАШ плеер (.lp) — лист в лист не кладём: внутри карточки .now у него нет своей подложки/тени/полей, он часть карточки (правило `.now audio` ушло вместе с системным