и необязательным (app.js:2021–2029),
необязательный .space-item-meta (2031–2036) и необязательный
.space-winner-badge (2037–2043).
Базовые стили: app.css:1218–1253. Контейнер прокрутки — .work-view
(app.css:1194, padding 20px 22px 32px).
СЕТКА НЕ ТРОГАЕТСЯ. Ширину панели считает JS: work-surface.js:3–16 задаёт
границы (min 360, max min(760, ширина окна - 600)), defaultWorkSurfaceWidth
их применяет, а app.js:590 пишет результат в --work-surface-width на
#workbench; читает его app.css:649. Поэтому ниже нет ни одного объявления
width, min-width и max-width, и .work-surface как узел не тронут вовсе.
Всё, что здесь есть, — внутренние отступы и подложки, они переживают любую
ширину панели от 360px и выше.
========================================================================== */
/* Расстояние между главами Холста. .work-canvas (app.css:1218) — прямой
родитель именно тех узлов, ритм которых задан в задании, поэтому его gap
и есть та величина, которой главы отделяются друг от друга. */
.work-canvas {
gap: var(--sp-6); /* 32px между сводкой и группами и между группами */
}
/* Сводка — заголовок главы, а не карточка. Отступ 2px 2px 4px из app.css:1220
ни с чем не выравнивал: убираем его, и заголовок встаёт по краю содержимого
панели, а карточки уходят внутрь на собственный padding. Это и создаёт
иерархию «глава снаружи — материал внутри». */
.space-surface-summary {
gap: var(--sp-1); /* 4px: заголовок и его пояснение — одна пара */
padding: 0;
}
/* Группа: подпись плотно ведёт свой список, элементы внутри держатся вместе. */
.space-surface-group {
gap: var(--sp-2); /* 8px — элементы одной группы читаются как один блок */
}
.space-surface-group > h4 {
margin: 0 0 var(--sp-1); /* подпись → первый элемент = 8 + 4 = 12px */
}
/* Карточка результата.
Обводку ей вернул 30-components.css:501–506 (общая группа карточек): на
бумажной панели (10-surfaces.css:277) бумажная карточка без рамки была бы
не видна. Меняем приём целиком: карточка становится молочной, то есть на
ступень ниже бумаги, и группируется подложкой, а не линией. Разделители в
новом языке не нужны — LANDING_DESIGN_GUARDRAILS.md:35–36 запрещает
разделительные полосы и швы.
Гасим border-color, а не border: ширина рамки остаётся 1px, геометрия
карточки не меняется ни на пиксель, и ничего не переезжает. */
.space-item {
gap: var(--sp-2); /* 8px между строками карточки */
padding: var(--sp-3) var(--sp-4); /* 12px / 16px вместо 13px / 14px */
border-color: transparent;
background: var(--milk);
}
/* Режим полного холста: там сама панель уже молочная
(10-surfaces.css:279), и молочная карточка на ней исчезла бы.
Лестница переворачивается — карточка становится бумагой. */
.workbench.canvas-full .space-item {
background: var(--paper);
}
/* ВНУТРЕННИЙ РИТМ КАРТОЧКИ: заголовок → текст → мета.
В разметке мета лежит в шапке справа от текста (app.js:2030–2036), и на
узкой панели — а она по work-surface.js:4 сжимается до 360px — короткая
колонка меты отбирает ширину у заголовка. Переносим мету на собственную
строку под текстом: получается ровно та последовательность, которая нужна,
и заголовку возвращается вся мера. Порядок в DOM не меняется, JS ничего не
замечает. */
.space-item-header {
flex-wrap: wrap;
align-items: baseline; /* мета и бейдж садятся на базовую линию строки,
а не на её верхний край */
justify-content: flex-start;
row-gap: var(--sp-2);
}
.space-item-header > div {
flex: 1 1 100%; /* заголовок с текстом занимают первую строку */
gap: var(--sp-1); /* 4px: пояснение принадлежит заголовку */
}
/* Действия отделены от содержимого заметнее, чем строки содержимого
между собой: 8 + 4 = 12px. */
.space-item-actions {
margin-top: var(--sp-1);
}
/* ==========================================================================
ЧТО СОЗНАТЕЛЬНО НЕ ТРОНУТО
1. Ширины и сетка Холста. Ни одного width / min-width / max-width в разделе 3
и ни одного правила на сам .work-surface. Ширину панели считает
work-surface.js:3–16 и записывает app.js:590 в --work-surface-width;
любое объявление ширины здесь стало бы вторым источником правды и
разошлось бы с JS при перетаскивании разделителя.
2. Цвета, заливки пузырей, начертания и кегли — кроме одного случая.
Заливки .message.user и .message.assistant оставлены как их развёл
30-components.css:744–756, хотя задание разрешало трогать различие
пузырей: цвет это зона соседнего файла, а различить их можно формой и
положением, что и сделано. Единственное вмешательство в кегль —
.login-copy h1: это не вкус, а невлезающая в меру строка, арифметика
приведена на месте.
3. Мобильные ширины ниже 760px. В файле нет ни одного @media. Ритм входа
ниже 760px ведёт 40-mobile.css:555–560, радиусы — 00-tokens.css:202–209.
Правила выше написаны на относительных мерах (min(100%,…), ch, clamp),
поэтому мобильный слой их дожимает, а не воюет с ними.
4. p.error в формах входа (app.css:46, index.html:57, 74, 88). Напрашивалось
схлопнуть пустой параграф и убрать 36px под кнопкой, но у него
role="alert": элемент, скрытый через display:none, выпадает из дерева
доступности, и объявление ошибки становится ненадёжным. Тихий отступ
под кнопкой дешевле сломанного оповещения. Зона доступности — 50-a11y.css.
5. Служебные сообщения ленты как объекты: .action-receipt,
.memory-update-receipt и .micro-status получили только новое расстояние
сверху (иначе отрицательный отступ app.css:544 наложил бы их на
предыдущее сообщение). Их собственные размеры, заливки и кегли —
app.css:544–552 и 30-components.css:810 — не тронуты.
6. .login-orbit, .boot-cosmos, .ambient-grid и прочие декоративные слои
тёмной темы. Они уже погашены в 10-surfaces.css:131 и 70-fixes.css:117;
композиции они больше не касаются.
7. Мера текста приветствия. app.css:511 держит .welcome-card > p
в min(470px,100%), то есть около 56 знаков при кегле 16px — потолок в
66 знаков уже соблюдён, и трогать величину было незачем.
8. Разметка, имена классов и идентификаторов, порядок узлов в DOM.
Мета на Холсте переставлена визуально через flex-wrap, а не изменением
порядка элементов. */