Організм · рівень 3

Оболонка кабінету

Оболонка кабінету - це рейка розділів .acc-links на дев'яти екранах кабінету і рама сторінки навколо карток. Головна її знахідка не про колір: цілий @media (max-width: 959px) у цьому файлі програє власному колірному блоку, який не має жодної умови ширини і просто стоїть нижче. 14 із 27 оголошень, що ніде не виграють, лежать усередині тієї однієї межі.

рівень 3design/system/components/account-shell.css368 рядків87 селекторів228 оголошень46 екранів

З чого складається

Усередині рейки майже нічого чужого: один клас скелета і два імені, у яких більш ніж один власник.

Файл	Класів	Які саме
`skeleton.css`	`--container-text`

2 класи всередині кореня мають більш ніж одного власника, тож із коду не видно, чий вони: .m .uiv-trail

Анатомія

Розмітка тут - не переписана від руки. Її знято з design/account.html у цій же сесії, обробники зняті, посилання підняті на рівень.

Показано в рамці шириною 1180, і ширина названа не для краси: це ширина, на якій цей організм у продукті стоїть. Медіа-умова читає в'юпорт, а не контейнер, тож жодне правило самого стенда цього не вирішує - тільки справжній в'юпорт, а він є лише в рамки. Сам організм у рамці обмежено до 268px - це ширина, яку він займає в продукті на 1280. Витягнутий зі своєї колонки, він розтягнувся б на всю рамку, і кнопка на 294 стала б кнопкою на 1490.

1Рама .acc - одна колонка, від 960 268px minmax(0, 1fr); .acc-nav від 960 липка з top: 120px. 268 і 120 - сирі числа

2Рейка .acc-links / .acc-link - на десктопі список у рамці з розділювачами, до 959 горизонтальний скролер з пігулок зі схованими смугами прокрутки (scrollbar-width: none і ::-webkit-scrollbar)

3Знак розділу .acc-link .ic svg - 18x18. Крок 7.24 переписав селектор з .ic .uiv-ic svg на .ic svg, бо marks.js має дві форми виводу, і в одній клас uiv-ic бере на себе сам господар. У демо вище видно обидві: <span class="ic uiv-ic"> і <span class="ic"><span class="uiv-ic">

4Стрілка .acc-link .ar .uiv-ic svg{ width: 12px } - той самий дефект, який 7.24 полагодив для знака й не полагодив для стрілки. У розмітці стрілка це <span class="ar uiv-ic uiv-trail">, тобто uiv-ic на самому .ar, а не всередині нього, тож селектор не збігається ні з чим. Стрілка малюється тим, що дає icon.css: .uiv-ic.uiv-trail svg{ width: 1.15em }

5Картки .acc-grid і .acc-cardgrid - одна колонка, від 640 дві. Число бонусів .abonus .big - 38px, сире, і воно в колірному блоці

6Дві різні межі для однієї думки «телефон чи десктоп»: 959 для мобільної редакції рейки і 960 для рами й липкості. Третьою була 860 - вона тримала .only-mobile і .only-desk, і пішла разом з ними на кроці 6. Шкала меж - предмет етапу 10

15 власних класів не малюються на жодному кольоровому екрані, і вони чотирьох різних порід

Одинадцять - це взагалі не кабінет. .wt-flow, .wt-fh, .wt-fnote, .wt-screen, .wt-sname, .wt-states, .wt-st і чотири їхні модифікатори .base, .node, .planned, .soon будує wfTree() у wireframes/_nav.js, а викликає його wireframes/overview.html - хаб прототипу зі списком усіх екранів. Це таблиця реєстру, а не екран продукту, і в кольорову систему вона потрапила разом з рештою при розколі _wf.css. Вона ж дає 136 із 169 оголошень файлу, які не збігаються з жодним елементом продукту.
Два були порожні утиліти, і крок 6 їх видалив. .only-mobile і .only-desk не мали розмітки НІДЕ - у всьому репозиторії ці два імені стояли лише у двох css-файлах, wireframes/_wf.css і цьому. Питання «утилітний файл чи видалення» стояло тут відкритим; замір кроку 6 дав нуль носіїв на 141 сірому і 87 кольорових екранах, і власник закрив його видаленням 2026-08-14.
Один - сірий прототип. .wl-top є рівно на одному екрані, wireframes/account-wishlist-many.html, і кольорового двійника в нього немає.
Один - тренер. .acc-link.buyer будує wfCoachNav() у wireframes/_nav.js: це рядок «Профіль / акаунт покупця» в рейці ТРЕНЕРА. Кольору в нього немає, бо кольору немає в жодного з 42 екранів тренера, а тренер - первинна аудиторія продукту.

Сама оболонка, якої в першому знімку не було

Рамка вгорі показує рейку - збирач пішов її деревом і на цьому спинився. Оболонка ж - це .acc, дві колонки .acc-grid, заголовок .acc-h1 з підзаголовком .acc-sub і сама рейка .acc-nav, у якої є власна голова: .acc-prof з .av, .who і .acc-tier. Цієї голови немає в жодній розмітці репозиторію - її пише wfAccountNav() у мить завантаження, тож рамка викликає ту саму функцію з тим самим аргументом, що й design/account.html.

Тут же .abonus з .big (моно, акцент - єдине число, яке покупець читає першим) і .warn - рядок про згорання бонусів. Обидва малює цей файл, а картку тримає .acc-grid

.acc-cardgrid є рівно на одному екрані, design/account-loading.html: сітка скелетів, поки картки огляду в дорозі. .acc-grid - це дві колонки оболонки, .acc-cardgrid - картки всередині правої

.acc-link.buyer - рядок «Профіль / акаунт покупця» в рейці тренера, тихіший за решту і відділений волосяною лінією. Кольору в нього немає на жодному екрані, бо не пофарбовано жодного з 42 екранів тренера, - і це варто сказати вголос, бо тренер тут первинна аудиторія

.wl-top є рівно на одному екрані, wireframes/account-wishlist-many.html, і кольорового двійника в нього немає - це перший раз, коли рядок видно під системою. Він рядок, а не просто .acc-h1, бо число стоїть поруч із заголовком, а не під ним

Стани

Стан	Що робить	Чому так
спокій	пункт рейки - `--text-primary` на `--bg-page`, розділювач `--line-hair`	рейка тихіша за вміст: вона показує, де ви, а не кличе
наведення	`--bg-surface` плюс `--text-action`, знак іде в дію разом з підписом, перехід 140ms	рядок фарбується цілком, бо натискають рядок, а не слово в ньому
поточний розділ	`[aria-current="page"]` - `--bg-surface`, `--text-action` і `box-shadow: inset 2px 0 0 var(--line-action)`; до 959 замість смужки суцільна заливка `--bg-action`	стан бере атрибут, а не клас: атрибут уже потрібен читалці екрана і не може розійтися з виглядом
вихід	`.acc-link.logout` - `--text-secondary`, при наведенні `--text-danger` разом зі знаком	єдина небезпечна дія в рейці і єдина `--text-danger` у файлі
фокус	кільце браузера	`link-row.css` тримає список селекторів, яким увімкнено `:focus-visible`, і `.acc-link` у ньому немає. Питання власника
до 959	рейка стає скролером з пігулок: рамка й радіус списку зняті, кожен пункт у рамці `--line-strong` і радіусі `--radius-pill`	і саме тут 14 оголошень не спрацьовують: див. нижче

Межі

У файлі 3 медіа-умови, і кожна з них - межа, якої стандартні ширини перепису (360 / 390 / 720 / 1280) не бачать зсередини смуги. Заміряти їх треба власними ширинами, по одній з кожного боку.

@media (min-width: 860px)
@media (max-width: 859px)
@media (min-width: 620px)

Обмеження

Правила вживання, які називають саме цей компонент: U7. Автор правил один, і це architecture.html, розділ I; тут - витяг.

Один кабінетний рейл на екран: aside.acc-nav зустрічається рівно раз на всіх 44 сірих і 33 кольорових екранах кабінету.

Колонка, картка тренера і другий рядок

.acc-main - головна колонка кабінету, і власного вигляду в неї одне оголошення: container-type: inline-size. Це та сама четверта контейнерна межа, яку 10.7 знайшов на account-orders: колонка втрачає 216 в одну мить, коли оболонка відкриває бічну навігацію, тож питати треба її, а не в'юпорт.

Ви тренер

Замовляйте для своїх клієнтів за ціною тренера і ведіть історію по кожному окремо.

Відкрити кабінет тренера

Адреса доставки

Нова Пошта, відділення № 12

Одеса · збережена за замовчуванням

.acard--coach вирівнює свій вміст по центру й відпускає кнопку до лівого краю, бо в цієї картки немає списку - у неї є одна пропозиція. .aline-sub - другий рядок адреси, який каже, ЯКА це адреса, а не що в ній написано.

Холостий контроль

Сторінка звіряє себе з файлом: 21 власний клас і 1 стан.

Було 32. Одинадцять із них - .wt-* з чотирма модифікаторами - видалено з файлу 2026-08-16 за рішенням власника: це дерево роадмепу з wireframes/overview.html, хаба прототипу, який CLAUDE.md виключає з корпусу компонентів поіменно. Та сторінка вантажить _wf.css і ніколи систему, _wf.css оголошує цю сім'ю сам, а жодна сторінка на системі цієї розмітки не містить - тобто копія тут була недосяжна від самого розколу. Причина кожного видалення виписана в account-shell.css. Те саме питання, що .only-mobile і .only-desk нижче.

ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4

Від якого порогу: --bp-shell-wide, і це рішення, яке довелось ухвалити мовчазним. Кабінет це друга оболонка продукту: від точки він дістає власну колонку навігації 268px, а нижче неї смуга посилань стає горизонтальним скролером. Було 960/959, поза реєстром - пак дозволяє третю точку, але лише як рішення власника, назване вголос. Його не було сказано, тож число складено на ті дві, що є. Зміряно: колонка навігації лишається 268, колонка вмісту виходить 528 проти сьогоднішніх 628 на 960, нового обрізання немає. Пара мусила їхати разом: скласти лише одну половину означало б покласти смугу 1253px у колонку 268px. .acc-grid і .acc-cardgrid казали «одна колонка стає двома» на 640 - це буквально те, на що названо --bp-grid-2col.

Рух

Робота: ВІДПОВІДЬ. Рухається: фон, колір і тінь рядка навігації кабінету. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них. При prefers-reduced-motion рух зникає, а стан лишається.

Токени

Прочитані з account-shell.css: 18 семантичних ролей і 29 примітивів.

Семантичні ролі (18)	Примітиви (29)
`--bg-action` `--bg-page` `--bg-sunken` `--bg-surface` `--elevation-1` `--line-action` `--line-hair` `--line-onaction` `--line-strong` `--mark-faint` `--text-action` `--text-body` `--text-danger` `--text-muted` `--text-onaction-ink` `--text-primary` `--text-secondary` `--text-warning`	`--container-text` `--dur-fast` `--ease-standard` `--font-display` `--font-mono` `--fs-12` `--fs-14` `--fs-16` `--fs-20` `--fs-display` `--fw-black` `--fw-bold` `--fw-semibold` `--lh-flat` `--ls-caps` `--ls-lead` `--radius-12` `--radius-8` `--radius-circle` `--radius-pill` `--size-20` `--size-44` `--space-12` `--space-16` `--space-2` `--space-24` `--space-32` `--space-4` `--space-8`

Що знайшов вирішувач

27 оголошень збігаються з елементами й не виграють жодного разу, і 14 з них лежать усередині одного @media (max-width: 959px). Причина одна на всіх: медіа-умова не додає селектору ваги, а колірний блок цього ж файлу стоїть НИЖЧЕ і не має жодної умови ширини. Тому .acc-links{ border-radius: 0 } з мобільної редакції програє .acc-links{ border-radius: var(--radius-12) } з колірного, а .acc-link{ border: 1px solid var(--line-strong) } програє .acc-link{ border-color: var(--line-hair) }. Заміряно: 70 збігів, з них 62 забирає базове правило і 8 - правило поточного розділу. Пігулки мобільної рейки намальовані не тим токеном рамки, який їм написали, а сама рейка тримає радіус картки, який мобільне правило знімало.

Два з тих 14 - навпаки. .acc-link .ic{ font-size: var(--fs-14) } НЕ повинно вигравати: колірний блок ставить font-size: 0 навмисне, щоб убити емодзі-запасний знак (крок 7.24), тож у мобільному блоці це залишок. .acc-link .ct{ color } називає рівно той токен, що й правило вище. З решти 13: 8 - .abonus .warn, де сіра пунктирна рамка навмисне стає суцільною волосяною в кольорі, і це знову той самий розділ структура-колір; 5 - border-color у колірному блоці, який називає рівно той самий --line-hair, що вже поставив короткий запис у структурному. Це та сама родина, яку кроки 7.69 і 7.71 вимітали з цього файлу, і вона виметена не до кінця.

Немає в коді -> етап 09

Чого бракує

Медіа-умова, яку перемагає порядок - мобільна редакція рейки написана в @media (max-width: 959px) і програє колірному блоку без умови. Виходи: підняти колірний блок вище, повторити його всередині умови, або перевести мобільну редакцію на власний клас. Рішення про будову файлу, не про значення
Одинадцять класів реєстру прототипу в продуктовому файлі - .wt-* малює хаб wireframes/overview.html, а не кабінет. Або окремий файл шару інструментів, або зняти їх з кольорової системи
Стрілка не отримує свого розміру - .acc-link .ar .uiv-ic svg написана в старій формі, яку крок 7.24 виправив для знака. Одна правка, той самий рецепт
Своє кільце фокуса - .acc-link немає в списку link-row.css, тож рейка кабінету ходить під кільцем браузера

Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.