/* Раскладка экранов по макету. Все изломы ширины — здесь, по одному разу. */ /* Основа страницы — из parent.css (снят DK-330, П1, задача 9): числа прежние, записаны переменными. Поля страницы растут с шириной: 16 на телефоне, 24 с 768, 36 с 1024; снизу 72. */ *{box-sizing:border-box} body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--кегль-текст); line-height:var(--интервал-текст);margin:0;padding:0 var(--отступ-16) calc(var(--отступ-64) + var(--отступ-8)); -webkit-font-smoothing:antialiased} /* Акцент части продукта решается один раз, на теле: ссылки и рамка фокуса берут цвет отсюда. Значения у --акцент в банке нет намеренно — это ссылка на --child или --parent. */ body{--акцент:var(--parent)} body.kid{--акцент:var(--child)} /* Картинки детских страниц не выделяются и не тащатся долгим нажатием (слово Марии 2026-10-08); меню «сохранить картинку» на Android гасит ui.js. */ body.kid img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none} .wrap{margin-inline:auto} /* Рамка фокуса одна на продукт и не снимается нигде. Клетка дня, карточка друга и сегмент переключателя интерактива обводятся целиком: их флажок и радио убраны с глаз (.vh), рамка вокруг точки ничего не говорит. */ :focus-visible:not(.к-кнопка),.к-день:has(:focus-visible),.к-карточка-друга:has(:focus-visible), .к-переключатель-интерактива label:has(:focus-visible){ outline:var(--линия-фокус) solid var(--акцент);outline-offset:calc(var(--отступ-4) / 2)} /* Страница сбоя ребёнка (оболочка.сбой_html): старая шапка с «Мел» и сообщение заголовком. Та же разметка — у запасной ветки сбоя взрослого (ui не поднялся, тело «взрослый»), поэтому правила на обоих телах (F15). Кегли прежние (26, на мониторе 34; «Мел» 11) — своих ступеней у них в банке нет, поэтому calc от ближайшей: при переносе страница не должна сдвинуться ни на пиксель. */ body:is(.kid,.взрослый) header:not(.к-шапка){display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline; gap:var(--отступ-16);margin-bottom:calc(var(--отступ-24) + var(--отступ-4) / 2); padding:calc(var(--отступ-32) + var(--отступ-4)) 0 calc(var(--отступ-16) + var(--отступ-4) / 2); border-bottom:var(--линия-метка) solid var(--акцент)} body:is(.kid,.взрослый) .title{margin:0;font-family:var(--display);font-weight:700; font-size:calc(var(--кегль-название) + var(--отступ-4) / 2);letter-spacing:var(--трекинг-плотный);text-wrap:balance} body:is(.kid,.взрослый) .eyebrow{font-family:var(--mono);font-size:calc(var(--кегль-микро) - var(--отступ-4) / 4); letter-spacing:var(--трекинг-капитель);text-transform:uppercase;color:var(--muted)} /* Изломы основы: поля страницы 24 с 768 и 36 с 1024; на мониторе заголовок сбоя крупнее. */ @media (min-width:768px){body{padding-inline:var(--отступ-24)}} @media (min-width:1024px){body{padding-inline:calc(var(--отступ-32) + var(--отступ-4))} body:is(.kid,.взрослый) .title{font-size:calc(var(--кегль-заголовок) + var(--отступ-4) * 1.5)}} /* Детская колонка 480 по центру (шире - бумага по сторонам); панель вкладок закреплена внизу на любой ширине и стоит над safe-area; низ колонки не прячется под ней. */ body.kid .wrap{max-width:var(--размер-колонка);margin-inline:auto} body.kid .к-вкладки{position:fixed;left:0;right:0;bottom:0;z-index:2;max-width:var(--размер-колонка);margin-inline:auto} /* Поле под панель — у всей страницы (после колонки идёт подвал, он тоже не прячется под панелью) и только там, где панель есть (Порог, Код, знакомство и лист — без неё). */ body.kid .wrap:has(> .к-вкладки){padding-bottom:calc(var(--отступ-64) + var(--отступ-8) + env(safe-area-inset-bottom,0px))} /* Кабинет взрослого (DK-330, П1): колонка как у ребёнка, панель вкладок закреплена внизу над safe-area, поле под неё — только где она есть (вход, регистрация, PIN, «Что мы храним» и сбой В13 — без панели). */ body.взрослый .wrap{max-width:var(--размер-колонка);margin-inline:auto} body.взрослый .к-панель-взрослого{position:fixed;left:0;right:0;bottom:0;z-index:2;max-width:var(--размер-колонка);margin-inline:auto} body.взрослый .wrap:has(> .к-панель-взрослого){padding-bottom:calc(var(--отступ-64) + var(--отступ-8) + env(safe-area-inset-bottom,0px))} /* На ноутбуке кабинет использует ширину экрана: вкладки переходят в устойчивую боковую колонку. Гостевые формы и пилотный отчёт остаются со своей геометрией. */ @media (min-width:1024px){ body.взрослый .wrap:has(> .к-панель-взрослого){display:grid;grid-template-columns:calc(var(--отступ-64) * 3) minmax(0,1fr); grid-template-rows:auto 1fr;column-gap:var(--отступ-32);max-width:calc(var(--размер-колонка) * 2);padding-bottom:0} body.взрослый .wrap:has(> .к-панель-взрослого) > .к-шапка{grid-column:1 / -1} body.взрослый .wrap:has(> .к-панель-взрослого) > .col{grid-column:2;min-width:0} body.взрослый .к-панель-взрослого{position:sticky;top:var(--отступ-24);left:auto;right:auto;bottom:auto; z-index:auto;grid-column:1;grid-row:2;align-self:start;display:flex;flex-direction:column;width:auto;max-width:none; padding:var(--отступ-8);border-radius:var(--радиус-общий);box-shadow:inset 0 0 0 var(--линия-тонкая) var(--rule)} body.взрослый .к-вкладка-взрослого{flex:none;flex-direction:row;justify-content:flex-start;gap:var(--отступ-12); min-height:var(--размер-нажатие);padding:var(--отступ-8);font-size:var(--кегль-подпись)} } /* Сбой взрослого В13 (7e:862-868): под шапкой 48 → пустое состояние. */ .сбой{padding-top:var(--отступ-48)} /* Вход взрослого (7e:391-453), кнопки во всю ширину. В1 «Вход»: 16 → поля через 16 → 16 → «Войти» → 16 → сноска. В2 «Аккаунт взрослого»: 16 → о продукте → 12 → зачем взрослый → 24 → поля и согласия через 16 → 24 → «Создать» → 16 → кто разговаривает; закрыто — 16 → текст → 12 → куда. */ .вход,.аккаунт,.пин{display:flex;flex-direction:column} .вход,.аккаунт{padding-top:var(--отступ-16)} :is(.вход,.аккаунт,.пин) .форма{display:grid;gap:var(--отступ-16);margin:0} :is(.вход,.аккаунт,.пин) .к-кнопка{width:100%} .вход > .форма + .к-текст{margin-top:var(--отступ-16)} .аккаунт > .к-текст + .к-текст{margin-top:var(--отступ-12)} .аккаунт > .форма{margin-top:var(--отступ-24)} :is(.аккаунт,.пин) .форма > .к-кнопка{margin-top:var(--отступ-8)} .аккаунт > .форма + .к-текст{margin-top:var(--отступ-16)} /* В3 PIN (7e:433-453): 8 → пояснение → 24 → поле → 24 → «Открыть» → 8 → «Выйти» тихая → 48 → пожелание листком (наклон 6° против часовой, слева 8). Рюкзак 140 — в правом нижнем углу кадра: справа 16 (поле страницы), снизу 32; сердечки — у его левого верхнего угла: 24 центром в (4, −8) с наклоном 12° по часовой, 16 — в (−22, −34), 10° против (7e:306, 342-345). Над рюкзаком 48 — место сердечек; низ отмеряет сам рюкзак, без поля страницы. */ body:has(.пин){padding-bottom:0} .пин{padding-top:var(--отступ-8);min-height:calc(100vh - var(--размер-шапка));min-height:calc(100svh - var(--размер-шапка))} .пин > .к-текст + .форма{margin-top:var(--отступ-24)} .пин .выход{margin:var(--отступ-8) 0 0} .пин .пожелание{margin:var(--отступ-48) 0 0;padding-left:var(--отступ-8)} .пин .пожелание > .к-выделение{transform:rotate(-6deg)} .пин .рюкзак{position:relative;display:block;align-self:flex-end;margin:auto 0 var(--отступ-32);padding-top:var(--отступ-48);line-height:0} .пин .рюкзак > .к-дудл[data-размер="140"]{display:block} .пин .рюкзак > .к-дудл[data-размер="24"]{position:absolute;left:calc(var(--отступ-8) * -1); top:calc(var(--отступ-48) - var(--отступ-16) - var(--отступ-4));transform:rotate(12deg)} .пин .рюкзак > .к-дудл[data-размер="16"]{position:absolute;left:calc((var(--отступ-24) + var(--отступ-4) * 1.5) * -1); top:calc(var(--отступ-48) - var(--отступ-32) - var(--отступ-8) - var(--отступ-4) / 2);transform:rotate(-10deg)} /* В4 «Что мы храним» (7e:455-470): 8 → семь «Вопросов и ответов» через 12 → 24 → полный текст подписью muted. */ .храним{display:flex;flex-direction:column;padding-top:var(--отступ-8)} .храним .вопросы{display:grid;gap:var(--отступ-12)} .храним .вопросы + .к-текст{margin-top:var(--отступ-24)} /* В5 «добавить» (7e:507-514): 16 под шапкой, поля через 16, 24 до «Создать профиль» во всю ширину. В5 «создан» (7e:516-525): 16, код крупно, 24, «Как войти», 32, «Готово» во всю ширину. В5 «Дети» (7e:526-548): 8 под шапкой; список — карточки через 12, 24, «Добавить ребёнка» во всю ширину; пусто — «Пустой список», 24, та же форма «Добавить ребёнка». */ .добавить{padding-top:var(--отступ-16)} :is(.добавить,.дети) .форма{display:flex;flex-direction:column;gap:var(--отступ-24);margin:0} :is(.добавить,.дети) .поля{display:grid;gap:var(--отступ-16)} :is(.добавить,.дети) .форма > .к-кнопка{width:100%} .дети{display:flex;flex-direction:column;padding-top:var(--отступ-8)} .дети .карточки{display:grid;gap:var(--отступ-12)} .дети > .к-кнопка{width:100%;margin-top:var(--отступ-24)} .дети > .форма{margin-top:var(--отступ-24)} .создан{display:flex;flex-direction:column;padding-top:var(--отступ-16)} .создан > .к-шаги-входа{margin-top:var(--отступ-24)} .создан > .к-кнопка{width:100%;margin-top:var(--отступ-32)} /* В6а обзор ребёнка (7e:556-596): 8 под шапкой → плашка состояния → 16 → «Помощь сегодня» (совет; с плашкой вместе не бывает) → 16 → разделы через 12 → 8 → «Управление профилем» тихая по тексту → 32 → рукописная строка. */ .обзор{display:flex;flex-direction:column;padding-top:var(--отступ-8)} .обзор > .к-плашка-состояния{margin-bottom:var(--отступ-16)} .обзор > .к-помощь-сегодня{margin-bottom:var(--отступ-16)} .обзор .разделы{display:grid;gap:var(--отступ-12)} .обзор > .к-кнопка{align-self:flex-start;margin-top:var(--отступ-8)} .обзор > .к-рукописная-строка{margin-top:var(--отступ-32)} /* В9 Сигналы (7e:765-781): 8 → строки сигнала через 8 → 16 → «Как можно поддержать»; или заметка «Сигналов нет» → 16 → «не оповещение» → 12 → «только уровень» подписью. */ .сигналы{display:flex;flex-direction:column;padding-top:var(--отступ-8)} .сигналы .строки{display:grid;gap:var(--отступ-8)} .сигналы > * + *{margin-top:var(--отступ-16)} .сигналы > .к-заметка + .к-текст{margin-top:var(--отступ-12)} /* В16 Домашние задания (7e:633-669): 8 → «Переключатель на три» → 16. «Сегодня» / «Вчера» — карточка дня → 12 → последний вход подписью. «История» — неделя: заголовок раздела → 8 → строки дня через 8 → 12 → «4 из 5» (только у «Этой недели»); недели через 24 → 8 → «Показать ещё» тихая во всю ширину → 24 → «Как занимался за 30 дней» → 8 → показатели через 8 → 24 → строка о переписке подписью. */ .домашние{display:flex;flex-direction:column;padding-top:var(--отступ-8)} .домашние > .к-переключатель-на-три{margin-bottom:var(--отступ-16)} .домашние > .к-карточка-дня + .к-текст{margin-top:var(--отступ-12)} .неделя-истории{display:flex;flex-direction:column} .неделя-истории + .неделя-истории{margin-top:var(--отступ-24)} .неделя-истории > .к-раздел + .дни{margin-top:var(--отступ-8)} .неделя-истории .дни{display:grid;gap:var(--отступ-8)} .неделя-истории > .к-показатель{margin-top:var(--отступ-12)} .домашние > .к-кнопка{width:100%;margin-top:var(--отступ-8)} .домашние > .к-раздел{margin-top:var(--отступ-24)} .домашние > .к-переключатель-на-три + .к-раздел{margin-top:0} .домашние > .к-раздел + .показатели{margin-top:var(--отступ-8)} .домашние .показатели{display:grid;gap:var(--отступ-8)} .домашние > .показатели + .к-текст{margin-top:var(--отступ-24)} /* В8 Тетрадь (7e:745-760): 8 → день заголовком раздела → 8 → записи через 8 → 24 → следующий день; записи без даты — последними, без заголовка, тоже через 24. */ .тетрадь{display:flex;flex-direction:column;padding-top:var(--отступ-8)} .тетрадь > .к-раздел + .записи{margin-top:var(--отступ-8)} .тетрадь > .записи + .к-раздел,.тетрадь > .записи + .записи{margin-top:var(--отступ-24)} .тетрадь .записи{display:grid;gap:var(--отступ-8)} /* В10 Управление (7e:787-805): 8 под шапкой → блоки через 16 (обращение и расписание, вход ребёнка, пауза) → 48 → остановка и удаление. В10б Удаление данных (7e:811-823): 8 → «Что удалится» → 24 → поле кода → 16 → «Удалить навсегда» → 8 → «Отмена» тихая; обе кнопки во всю ширину. */ .управление{display:flex;flex-direction:column;padding-top:var(--отступ-8)} .управление .блоки{display:grid;gap:var(--отступ-16)} .управление > .к-опасное-действие{margin-top:var(--отступ-48)} .удаление{display:flex;flex-direction:column;padding-top:var(--отступ-8)} .удаление .форма{display:grid;gap:var(--отступ-16);margin:var(--отступ-24) 0 0} .удаление .к-кнопка{width:100%} .удаление > .к-кнопка{margin-top:var(--отступ-8)} /* В11 Просьбы (7e:825-840): 8 под шапкой → ждущие через 12 → 24 «Уже ответили» → 8 → отвеченные через 12 → 16 → «разрешение» подписью; пусто — пустое состояние → 16 → «разрешение». */ .просьбы-взрослого{display:flex;flex-direction:column;padding-top:var(--отступ-8)} .просьбы-взрослого .стопка{display:grid;gap:var(--отступ-12)} .просьбы-взрослого > * + .к-раздел{margin-top:var(--отступ-24)} .просьбы-взрослого > .к-раздел + .стопка{margin-top:var(--отступ-8)} .просьбы-взрослого > .к-текст{margin-top:var(--отступ-16)} /* В12 Подписка (7e:842-860): 8 → карточки плана через 12 → 24 → семейный план → 16 → «Оставить заявку» во всю ширину (после заявки — заметка «Заявка принята…») → 16 → «Что бы ни случилось…» подписью. */ .подписка{display:flex;flex-direction:column;padding-top:var(--отступ-8)} .подписка .стопка{display:grid;gap:var(--отступ-12)} .подписка > .стопка + .к-семейный-план{margin-top:var(--отступ-24)} .подписка > .к-семейный-план + *{margin-top:var(--отступ-16)} .подписка .форма > .к-кнопка{width:100%} .подписка > .к-текст{margin-top:var(--отступ-16)} /* Поле ввода чата закреплено над панелью вкладок (61-komp-kartochki.js:177; 75-ekran-chat.js:28): низ — высота панели (64 + 8) и safe-area; во всю ширину колонки, как «низ» знакомства. */ body.kid .к-ввод{position:sticky;z-index:1;bottom:calc(var(--отступ-64) + var(--отступ-8) + env(safe-area-inset-bottom,0px)); margin-inline:calc(var(--отступ-16) * -1)} /* Чат (75-ekran-chat.js:36,50): лента прижата к низу окна между шапкой и полем — при короткой ленте пустота сверху, а не над полем; длинная уходит верхом под шапку. Окно — экран минус шапка и панель вкладок (64 + 8 и safe-area); поле стоит под лентой и липнет над панелью. */ .чат-экран{display:flex;flex-direction:column; min-height:calc(100vh - var(--размер-шапка) - var(--отступ-64) - var(--отступ-8)); min-height:calc(100svh - var(--размер-шапка) - var(--отступ-64) - var(--отступ-8) - env(safe-area-inset-bottom,0px))} .чат-экран > .chat{margin-top:auto} /* «Низ» макета (79-ekran-vhod.js:6-14): кнопки на бумаге у низа экрана, поля 12/16/16 + safe-area. */ .порог,.знакомство{display:flex;flex-direction:column;min-height:calc(100vh - var(--размер-шапка));min-height:calc(100svh - var(--размер-шапка))} /* У порога шапки нет: «низ» вровень с низом экрана (79-ekran-vhod.js:12). */ .порог{min-height:100vh;min-height:100svh} .низ{position:sticky;bottom:0;display:grid;gap:var(--отступ-12);margin:auto calc(var(--отступ-16) * -1) 0; padding:var(--отступ-12) var(--отступ-16) calc(var(--отступ-16) + env(safe-area-inset-bottom,0px));background:var(--paper)} .низ .к-кнопка{width:100%} .низ .форма{margin:0} /* Ролик знакомства на весь экран (слово Марии 2026-10-12): «Сесть рядом» — «низ» поверх ролика, без бумажной подложки, чтобы не резать кадр полосой. */ body.kid:has(.знакомство-ролик){overflow:hidden} .знакомство-ролик > .низ{position:fixed;left:0;right:0;bottom:0;z-index:1;max-width:var(--размер-колонка);margin:0 auto;background:none} /* Порог (референс Марии 2026-10-13, «сделай прям таким»): по центру экрана — знак, 8, девиз рукой на маркере childwash (наклон −4°), 12, подпись, 16, группа во всю колонку с россыпью дудлов и наклейкой «Вместе к целям», 16, двери: «Зарегистрироваться →» главная во всю ширину с лучами подсветкой по бокам, 12, два входа в ряд. В углах — клетка с маркером слева внизу и сердечко справа внизу. */ body:has(.порог){padding-bottom:0} .порог{position:relative;align-items:stretch;justify-content:center;max-width:var(--размер-колонка);margin-inline:auto; padding-top:var(--отступ-16);text-align:center;overflow:hidden} .порог .середина{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;margin-block:auto} .порог .девиз{margin:var(--отступ-8) 0 0;transform:rotate(-4deg)} .порог .девиз > .к-выделение{font:700 calc(var(--кегль-заголовок) + var(--отступ-4))/1.1 var(--рука);padding-inline:var(--отступ-16)} .порог .девиз > .к-выделение::before{background:var(--childwash);height:60%} .порог .середина > .к-текст{margin:var(--отступ-12) 0 0} .порог .группа{position:relative;width:fit-content;max-width:100%;margin-top:var(--отступ-16)} /* Группа — во всю колонку. Потолок высоты — экран минус верх (16 + знак 112 + 41 + 8 + девиз 72 + 12 + 24 + 16) и двери (16 + 48 + 12 + 48 + 16) и 8, ≈ 448 = 64·7: на 375×812 не срабатывает, на низком экране группа не уходит под двери. */ .порог .группа > img{display:block;width:auto;max-width:100%;height:auto;object-fit:contain; max-height:calc(100vh - var(--отступ-64) * 7);max-height:calc(100svh - var(--отступ-64) * 7 - env(safe-area-inset-bottom,0px))} /* Низкий экран (до 700): знак и девиз мельче — скобки 80, «5» 52, девиз 24, чтобы группе осталось место. */ @media (max-height:700px){ .порог .к-знак-приложения .скобка{width:calc(var(--отступ-32) + var(--отступ-4));height:calc(var(--отступ-16) * 5)} .порог .к-знак-приложения .пять{font-size:calc(var(--кегль-экран) * 1.3)} .порог .девиз > .к-выделение{font-size:var(--кегль-название)} .порог .группа > img{max-height:calc(100svh - var(--отступ-64) * 6.4 - env(safe-area-inset-bottom,0px))} } /* Россыпь — места по референсу, в долях группы (группа по ширине картинки). */ .порог .россыпь > .к-дудл{position:absolute} .порог .россыпь > :nth-child(1){left:0;top:12%;color:var(--ink)} .порог .россыпь > :nth-child(2){left:7%;top:3%;color:var(--заливка)} .порог .россыпь > :nth-child(3){left:14%;top:1%;color:var(--ink)} .порог .россыпь > :nth-child(4){left:20%;top:6%;color:var(--ink)} .порог .россыпь > :nth-child(5){left:54%;top:0;color:var(--ink)} .порог .россыпь > :nth-child(6){left:58%;top:4%;color:var(--подсветка)} .порог .россыпь > :nth-child(7){left:79%;top:2%;color:var(--child)} .порог .россыпь > :nth-child(8){left:90%;top:1%;color:var(--child);transform:rotate(30deg)} .порог .россыпь > :nth-child(9){left:0;top:63%;color:var(--child)} .порог .россыпь > :nth-child(10){right:0;top:72%;transform:rotate(-30deg)} .порог .наклейка-цели{position:absolute;left:4%;top:64%;display:grid;justify-items:start;transform:rotate(-20deg); padding:var(--отступ-4) var(--отступ-8);border-radius:var(--радиус-плашка);background:var(--paper)} .порог .наклейка-цели > .к-текст{text-align:left} .порог .наклейка-цели > .к-дудл{margin-top:calc(var(--отступ-8) * -1);transform:rotate(20deg)} .порог .двери{position:relative;box-sizing:border-box;grid-template-columns:1fr 1fr;width:100%;margin:var(--отступ-16) 0 0;padding-inline:var(--отступ-4);background:none} .порог .двери > form{position:relative;grid-column:1 / -1} .порог .двери > form > .к-кнопка .к-значок{order:2} /* Лучи подсветкой по бокам «Зарегистрироваться» (дудл akcent, слева — зеркально). */ .порог .двери > form::before,.порог .двери > form::after{content:"";position:absolute;top:50%;width:var(--отступ-24);height:var(--отступ-24); background:var(--подсветка);-webkit-mask:url(/static/dudl/akcent.png) center/contain no-repeat;mask:url(/static/dudl/akcent.png) center/contain no-repeat} .порог .двери > form::before{left:calc(var(--отступ-4) * -1);transform:translate(-50%,-50%) rotate(-100deg)} .порог .двери > form::after{right:calc(var(--отступ-4) * -1);transform:translate(50%,-50%) rotate(100deg)} /* Подписи дверей — одной строкой: у входов поля 12 вместо 24, на 320 — поля 8 и «Текст/Мелкий» (12). */ .порог .двери .к-кнопка{white-space:nowrap} .порог .двери > a.к-кнопка{min-width:0;padding-inline:var(--отступ-12)} @media (max-width:359px){.порог .двери{grid-template-columns:1fr} .порог .двери > a.к-кнопка{font-size:var(--кегль-текст);white-space:normal}} /* Углы: клетка 8 линией line с маркером заливкой слева внизу, сердечко child справа внизу. */ .порог .уголок{position:absolute;left:0;right:0;bottom:0;height:var(--отступ-48);pointer-events:none} .порог .уголок::before{content:"";position:absolute;left:calc(var(--отступ-16) * -1);bottom:0;width:40%;height:100%;opacity:.6; background:linear-gradient(var(--line) var(--линия-тонкая),transparent var(--линия-тонкая)) 0 0/var(--отступ-8) var(--отступ-8), linear-gradient(90deg,var(--line) var(--линия-тонкая),transparent var(--линия-тонкая)) 0 0/var(--отступ-8) var(--отступ-8)} .порог .уголок::after{content:"";position:absolute;left:0;bottom:var(--отступ-8);width:var(--отступ-64);height:var(--отступ-32); background:var(--заливка);opacity:.7;-webkit-mask:url(/static/dudl/marker-2.png) center/contain no-repeat;mask:url(/static/dudl/marker-2.png) center/contain no-repeat} .порог .уголок > .к-дудл{position:absolute;right:0;bottom:calc(var(--отступ-4) * -1);transform:rotate(12deg)} /* Код (71-ekran-2.js:9-50): 24 → заголовок со звездой → 48 → клетки → [12 → ошибка] → 32 → Войти → 8 → «Где взять код?» → 16 → подсказка → «подпись от руки» 140 с карандашом 120 (справа 30, сверху 12). Звезда: x = ширина текста + 16, y = высота текста − 40 — низ звезды на 8 выше низа текста. */ .код-экран .заголовок{display:flex;align-items:flex-end;gap:var(--отступ-16);margin:var(--отступ-24) 0 var(--отступ-48)} .код-экран .заголовок .к-дудл{margin-bottom:var(--отступ-8)} .код-экран .к-заметка{margin-bottom:var(--отступ-24)} .код-экран .форма{display:grid;gap:var(--отступ-8);margin:0} .код-экран .форма .к-кнопка{width:100%} .код-экран #paste-code{justify-self:start;width:auto;min-height:var(--размер-нажатие);margin:var(--отступ-4) 0 calc(var(--отступ-8) * -1);padding-inline:var(--отступ-8)} .код-экран #paste-code-status:empty{display:none} .код-экран #paste-code-status{font:400 var(--кегль-подпись)/var(--строка-подпись) var(--body);color:var(--muted)} .код-экран .форма [role="alert"]{margin-top:var(--отступ-4)} .код-экран .форма .к-кнопка[data-вид="главная"]{margin-top:var(--отступ-24)} .код-экран .подсказка{display:flex;align-items:center;justify-content:center;gap:var(--отступ-8);margin:var(--отступ-16) 0 0} .код-экран .рука{display:flex;justify-content:flex-end;height:calc(var(--отступ-64) * 2.1875); padding:var(--отступ-12) calc(var(--отступ-24) + var(--отступ-4) * 1.5) 0 0} /* Знакомство (7b-ekran-pervyj.js:12-33, 79-ekran-vhod.js:29-77): под вложенной шапкой без стрелки. История и Выбор (data-вплотную): 8 → карточка истории / сетка друзей. */ .знакомство{gap:var(--отступ-16);padding-top:var(--отступ-16)} .знакомство[data-вплотную]{padding-top:var(--отступ-8)} .знакомство > .к-текст + .к-текст{margin-top:calc(var(--отступ-8) * -1)} .знакомство .мысли{display:grid;gap:var(--отступ-8)} .неделя{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--отступ-4)} .знакомство .неделя{margin-top:var(--отступ-8)} /* Друзья: по две в ряд и больше при ширине, минимум карточки 150, промежуток 12 по обеим осям. */ .друзья{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--размер-карточка),calc(50% - var(--отступ-12) / 2)),1fr)); gap:var(--отступ-12)} /* Помощь (72-ekran-7.js:28-48): переключатель «Просьбы | Челленджи» скрыт (спека DK-283, 7), поэтому под шапкой сразу 16 → «Активные просьбы» рукой → 8 → список через 12 → 24 → «Закрытые» → 8 → список. */ .помощь{display:flex;flex-direction:column;padding-top:var(--отступ-16)} .помощь > .к-раздел + *{margin-top:var(--отступ-8)} .помощь > * + .к-раздел{margin-top:var(--отступ-24)} .просьбы{display:grid;gap:var(--отступ-12)} /* Настройки (78-ekran-nastrojki.js:13-25): 8 → строки через 12 → 24 → «Выйти» тихая по тексту, не во всю ширину. */ .настройки{display:flex;flex-direction:column;padding-top:var(--отступ-8)} .настройки .строки{display:grid;gap:var(--отступ-12)} .настройки .выход{align-self:flex-start;margin:var(--отступ-24) 0 0} /* Настройки взрослого В14 (7e:869-884) — та же раскладка «.настройки». «Как мы проверяем» В15 (7e:886-897): 8 → раздел → 8 → строка → 24 → следующий раздел. */ .проверка{display:flex;flex-direction:column;padding-top:var(--отступ-8)} .проверка > .к-раздел + *{margin-top:var(--отступ-8)} .проверка > * + .к-раздел{margin-top:var(--отступ-24)} /* Дни математики (78:103-118): 8 → пояснение → 16 → метка → 8 → семь дней через 4 → 24 → «Сохранить» во всю ширину. */ /* Честно (10, слово Марии 2026-10-12): вид бывшего экрана знакомства 2.1 без кнопки — 16 → заголовок крупно → 16 мысли через 8. */ .честно-экран{display:grid;gap:var(--отступ-16);padding-top:var(--отступ-16)} .честно-экран .мысли{display:grid;gap:var(--отступ-8)} .дни-экран{display:flex;flex-direction:column;align-items:stretch;padding-top:var(--отступ-8)} .дни-экран > .к-метка{margin-top:var(--отступ-16)} .дни-экран > .неделя{margin-top:var(--отступ-8)} .дни-экран > .к-кнопка{width:100%;margin-top:var(--отступ-24)} /* Тема (10.5, 78-ekran-nastrojki.js:264-282): зазор 8; три колонки через 12, в колонке знак 48 и образец через 8; зазор 16; пояснение. */ .тема-экран{display:grid;gap:var(--отступ-16);padding-top:var(--отступ-8)} .тема-экран .темы{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--отступ-12)} .тема-экран .колонка{display:grid;justify-items:center;gap:var(--отступ-8)} /* Зеркало «Что видит взрослый» (10.4; 78-ekran-nastrojki.js:120-138; лист 2, 2.8). Разметку держит web/feed.py (второй сборщик запрещён, спека 3.5) — облик только по классам, которые он уже ставит. Граница — body.kid: у взрослого тело без этого класса, а на детских страницах эти классы после волны 2 ставит только зеркало. .note → Заметка; h2.rubric — маркер малый (правила .к-выделение в components.css), здесь только отступы; .rows > .row → Строка статуса: тема «Текст/Кнопка» слева, справа колонка 150 по правому краю — точка 8 цвета итога и итог «Текст/Подпись», под ними пояснение «Текст/Мелкий» muted (65-komp-nastrojki.js:136-150). Строки карты пробелов и тетради (.row > .cell) — тот же вид, колонка слов тянется; строка-картинка тетради — без карточки (В12). Прежние .rows (фон rule под зазорами, overflow режет тени) и .what (flex-колонкой точка встала бы над итогом) жили в parent.css и ушли вместе с ним (DK-330, задача 9); их остаток, нужный зеркалу, — в конце блока. */ body.kid .note{margin:var(--отступ-8) 0 0;padding:var(--отступ-12) var(--отступ-16);border:0;border-radius:var(--радиус-общий); background:var(--plate);color:var(--ink);font:500 var(--кегль-подпись)/var(--строка-подпись) var(--body)} body.kid h2.rubric{margin:var(--отступ-16) 0 var(--отступ-8);border:0;letter-spacing:0;text-transform:none} body.kid .rows{display:grid;gap:var(--отступ-8);margin:0;padding:0;border:0;background:none;overflow:visible} body.kid .row{display:flex;align-items:center;gap:var(--отступ-12);margin:0;padding:var(--отступ-12) var(--отступ-16);border:0; border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень)} body.kid .row > .cell{flex:1;min-width:0} body.kid .row .who{flex:1;min-width:0;color:var(--ink);font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body)} body.kid .row .what{display:block;flex:none;width:var(--размер-карточка);text-align:right;color:var(--ink); font:500 var(--кегль-подпись)/var(--строка-подпись) var(--body)} body.kid .row .what .st{display:block;margin-top:var(--отступ-4);color:var(--muted);font:500 var(--кегль-микро)/var(--строка-мелкая) var(--body)} body.kid .row[data-result] .what::before{content:"";display:inline-block;vertical-align:middle;width:var(--отступ-8);height:var(--отступ-8); margin-right:var(--отступ-8);border-radius:var(--радиус-полный);background:var(--plate)} body.kid .row[data-result="освоено"] .what::before{background:var(--good)} body.kid .row[data-result="непрочно"] .what::before{background:var(--soft)} body.kid .row[data-result="не освоено"] .what::before{background:var(--hard)} body.kid .row.sheet-row{display:block;padding:0;background:none;box-shadow:none} /* Остаток прежних правил parent.css, которых нет выше (снят на DK-330, задача 9): пояснение под темой в строке карты пробелов и тетради (.cell .st) — моно, мелко, muted; абзац .text.muted над картой пробелов и в