Компонент · рівень 3

Тариф тренера

Вузол 5.2a - екран, який показує тариф, що діє, і дає з нього піти. Це єдиний екран продукту, де locked-рішення про платний тариф тренера видно цілком, разом із чесним [?] у самій ціні. Сьомий із восьми тренерських організмів.

рівень 3design/system/components/coach-tariff.css443 рядки20 селекторів56 оголошень3 екрани

Дванадцять правил віддано, і що лишилось - це картка і порівняння

У сірому блоці було 39 правил, тут лишилось 19, і кожне з дванадцяти видалень названо тому файлу, який уже володів ним. Заміряно в Chrome на 360 / 390 / 768 / 1280, із закритим і відкритим діалогом, до видалення і після. Це не найбільша чистка етапу за числом, але найгустіша за часткою: 55 оголошень на 422 рядки - сім рядків пояснення на кожне оголошення, п'яте місце в системі.

Що пішло	Кому	Що це виправило
`.tf-wrap`	нікому	Було мертвим і в сірому теж. Обгортка, яку замінив `.acc-main`, коли екран переїхав у оболонку акаунта - правило пережило свій `div`
інлайн-стиль H1	`account-shell.css`	`24/800` руками → `.acc-h1` - Oswald 30/600, `--ls-lead`. Той самий дефект, що `coach-cabinet.css` прибрав на 7.96
`.tf-lead` - обличчя	`account-shell.css`	Три оголошення, байт у байт ті самі, що в `.acc-sub`. Після видалення нічого не зрушило - у цьому й суть: правило було копією
три `line-height`	`base.css`	1.5 · 1.5 · 1.55 - жодне не має щабля, а `body` вже ставить `--lh-airy` на все. 22.4 → 22.4, 19.2 → 19.2, 22.4 → 22.4. Тричі поспіль нічого
`.tf-badge`	`status-pill.css`	113.00 x 27.19 без ґрунту → 99.22 x 25.59, чорнило `rgb(28,28,28)` → `rgb(46,125,70)` на `rgba(46,125,70,.07)`. Втрачено верхній регістр і `--ls-caps`, і це названо, а не відновлено

Анатомія

Розмітку знято з кольорових екранів через tools/demo.mjs, разом із класом coach на <body>. Колонку обмежено до 732 - це ширина, яку .acc-main займає в оболонці акаунта на 1280. Витягнута з неї, вона розтяглась би на всю рамку.

Pro, що діє: .tf-cur з .tf-cur-h, .tf-plan, .tf-price, .tf-renew, .tf-incl, .tf-actions · .tf-ch і порівняння · .tf-note

1Картка запису .tf-cur - єдина коробка екрана з краєм у чорнилі, а не у волосяній лінії. Саме це робить її твердженням про стан справ, не витративши жодного кольору: той самий аргумент, що coach-landing.css робить для .finalcta

2Плашка - не своя, а status-pill.css: 84.97 x 25.59, зелена. І вона зелена на обох тарифах, бо каже про СТАН підписки, а не про її рівень: Free теж активний

3Ціна .tf-price - 26px, і 26 лишено літералом навмисне. Воно між щаблями 24 і 30, а ні крок 5.5, ні 5.6 не мають інструкції для цілого числа поза їхнім списком. Приснапити його означало б вигадати округлення, а це ціна

4Знак [?] .tf-price .qm - навмисне найтихіше в рядку: він каже, що число над ним ще не справжнє, і не має з ним змагатись

5Список включеного .tf-incl li::before - галочка content, а не символ у розмітці: набрана галочка читається вголос, не має власного розміру і не відрізняється від слова. Чорнило, не акцент: помаранчевий це запрошення, а список того, що у вас уже є, ним не є

6Підвал картки .tf-actions - рядок володіє лінією над собою і повітрям і нічого не каже про контрол. Це форма, яку мусить мати кожне правило розміщення. 44.59 із голим текстом усередині, 71.00 зі справжньою кнопкою

7Виноска .tf-note - «Ціна Pro (~99 ₴/міс), ліміт клієнтів на Free та умови - гіпотеза». Правило «кожне число, якому потрібні реальні дані, лишається [?]» тут надруковане на екрані, а не сховане в md

Free, що діє. Два пункти носять .off - рядок, якого тариф не дає, - і панель Pro малює upsell.css. Порівняння тут не показано взагалі: коли ти на нижчому тарифі, порівняння замінює панель

Підтвердження на 390: діалог 342 завширшки (в'юпорт мінус 48 скрима), пара кнопок стовпчиком

Той самий діалог на 900: .tfdlg впирається у власні 440, пара стає рядом. Різниця названа й одна - межа 480

440 - це не кругле число, це ширина рядка кнопок

Три сусідні діалоги продукту пишуть max-width: 400px, цей пише 440, і сірий оригінал написав 440 саме тут (wireframes/coach-tariff.html:47). Причина зміряна: пара «Залишити Pro» + «Скасувати підписку» це 390.00 завширшки, а коробка вмісту всередині 400px діалога дає 352.00 - 2.08 понад край на КОЖНІЙ ширині, бо пара в ту коробку не влазить ніколи. 440 дає рівно 390.00. Значення переїхало, а не було виведене заново.

А нижче 480 стовпчик, і це друга половина того самого заміру: на телефоні діалог це в'юпорт мінус 48, тож 440 не купує нічого. До правила рядок на 360 був 338.08 у коробці 264.00 - дві кнопки вилазили з білої картки, правий край підтвердження опинявся на 387.1 у в'юпорті 360, а оверлей скролився на 27px убік, щоб до нього дотягнутись. Частиною, що звисала за край, був руйнівний контрол на екрані скасування.

479 - це власний телефонний щабель button.css, який теж вирішує ширину цього рядка, тож два правила, що задають цей вимір, сидять на одній межі. Саме правило з 8.31b живе вже в client-dialog.css: додавання клієнта відтворило ту саму знахідку з іншого кінця, а те саме число двічі - це відповідь компонента, а не екрана.

Знайдено на цій сторінці: стовпчик міняє порядок читання на порядок дотягування

Питання поставлено всьому продукту, а не цьому екрану: у кожному діалозі підтвердження знайти руйнівний контрол і зміряти, де він стоїть. Їх вісім, і відповідь у всіх вісьмох однакова.

Екран	Безпечна	Руйнівна
`account-addresses` · `-empty`	Скасувати	Видалити
`account-profile` · `-withemail`	Скасувати	Видалити акаунт
`coach-client` · `coach-clients`	Скасувати	Видалити клієнта
`coach-tariff` · `-cancel`	Залишити Pro	Скасувати підписку

Вісім із восьми: руйнівна - друга з двох. На 900 це ряд, і обидві на одному y - 532.8 і 532.8, - тобто порядок зліва направо читається як «спершу безпечна, потім руйнівна», що є звичною конвенцією. На 390 той самий рядок стає стовпчиком, і тоді y розходяться: 523.2 проти 587.2.

Стовпчик перетворює порядок читання на порядок дотягування, і дотягування каже протилежне. Нижня кнопка на телефоні - та, до якої великий палець дістає першою, і на всіх восьми екранах це кнопка, яку не можна відмінити. Це одне рішення, а не вісім дефектів: рядок задає client-dialog.css, і поміняти порядок у стовпчику коштує один flex-direction: column-reverse в одному файлі. Рішення власника - тут названо з числами під ним.

Два радіуси на одному екрані, і драбина вже дала відповідь

На екрані тарифу три коробки, і вони не сходяться:

Коробка	Радіус	Звідки
`.tf-cur` - картка запису	14px	літерал під `[?]`
`.tf-col` - картка порівняння	12px	`--radius-12`, `plan-card.css`
`.tfdlg` - діалог	12px	`--radius-12`, `client-dialog.css`

І це не питання без відповіді, на відміну від відступів. Драбина радіуса - єдина геометрична драбина, чиє правило округлення записане: чотири щаблі 4 / 8 / 12 / 16, нічиї йдуть УНИЗ, а tokens.css:464 уже перелічує 14 → 12 серед снапів, які зробив. coach-order.css застосував його на 8.7 і зняв 14 з .od-head одним рядком.

Чотири файли того снапу не зробили, і всі чотири тренерські: coach-cabinet.css, coach-landing.css, coach-tariff.css і upsell.css. Проти 88 вживань --radius-12 і 22 вживань --radius-16 у системі це чотири літерали, які правило вже вміє відповісти. Не змінено цим кроком, бо це значення на чотирьох екранах, а значення рухається озвученим рішенням - але це вже не відкрите питання, а незастосоване правило.

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

Від якого порогу: жодного, і ніколи не було. Порівняння тарифів плинне: колонки задає сітка, у якій воно стоїть. Раунд організмів його не чіпав.

Токени

Прочитані з coach-tariff.css, не переписані руками. П'ять ролей на шістнадцять токенів, і серед них жодного кольору дії: екран, який керує платною підпискою, увесь у нейтральних ролях. Помаранчевий сюди приносить лише панель Pro на екрані Free, а червоне - btn--danger, і це єдиний руйнівний колір у потоці тренера.

Семантичні ролі (5)	Примітиви (13)
`--line-hair` `--line-inverse` `--text-muted` `--text-primary` `--text-secondary`	`--container-text` `--fs-12` `--fs-14` `--fs-16` `--fs-24` `--fw-black` `--fw-semibold` `--ls-lead` `--radius-12` `--space-12` `--space-16` `--space-24` `--space-4`

8.57: раніше на цьому місці стояв прочерк, і він був усією знахідкою про радіус. До рішення власника у файлі не було ЖОДНОГО токена радіуса: єдиний закруглений кут екрана малювався 14px літералом, хоча драбина 4/8/12/16 з нічиями вниз уже давала відповідь і tokens.css перелічував 14 → 12 серед зроблених снапів. Тепер картка запису читає --radius-12 - той самий радіус, що дві картки порівняння і діалог поруч із нею. Три коробки на одному екрані нарешті кажуть одне число.

--line-inverse тут одне вживання на весь файл - край картки запису, - і саме воно несе всю ієрархію екрана. Роль обрано за поверхнею: це ЛІНІЯ, а не чорнило й не заливка, і поріг для неї 3:1, а не 4.5:1.

Ваг рівно дві - --fw-semibold і --fw-black. Ані --fw-regular, ані --fw-bold файл не називає: звичайну вагу дає base.css, а все, що цей екран підкреслює, підкреслює найважчим.

Стани

Власних станів компонент не має: жодного :hover, :focus-visible чи :disabled у файлі немає. Єдиний інтерактивний контрол екрана - «Скасувати підписку Pro» - носить btn--outline btn--danger і бере стани звідти. Це і є вимір переїзду: файл на 422 рядки, який не малює жодної взаємодії, бо всі вони вже намальовані.

Умовних форм у файлі теж лише дві, і обидві структурні, а не інтерактивні: .tf-incl li.off і .tf-incl li.off::before. \2715 проти \2713 - одна пара: хрест проти галочки читається як та сама сім'я, що каже протилежне, а тире поруч із галочкою - ні. Чорнило --text-muted і на слові, і на мітці: відсутня можливість це факт, а не поразка.

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

Сторінка звіряє себе з файлом: 16 класів і 0 станів оголошено в coach-tariff.css. .coach не рахується - це скоуп; .tf-col*, .tf-mini, .tf-price2 і .tf-compare теж ні - вони пішли в plan-card.css на 8.29 і живуть на цьому екрані як чужі гості.

Розмітка

<main class="acc-main"> <h1 class="acc-h1">Тариф</h1> <p class="acc-sub tf-lead">Ваш поточний тариф і керування підпискою …</p> <section class="tf-cur"> <div class="tf-cur-h"><span class="tf-plan">Pro</span> <span class="oc-status ok">Активний</span></div> <div class="tf-price">99 ₴ <span class="per">/міс</span> <span class="qm">[?]</span></div> <div class="tf-renew">Наступне списання - <b>12 липня 2026</b> · картка •• 1234</div> <ul class="tf-incl"> <li>Максимальна гуртова ціна на всі товари</li> <li class="off">Мультиклієнтські замовлення</li>  </ul> <div class="tf-actions"> <button class="btn btn--outline btn--danger">Скасувати підписку Pro</button></div> </section> <h2 class="tf-ch">Порівняння тарифів</h2> <div class="tf-compare">…</div>  <p class="tf-note"><b>[?]</b> Ціна Pro (~99 ₴/міс) … гіпотеза</p> </main> <div class="ceov open" role="dialog" aria-modal="true"> <div class="cedlg tfdlg">…</div></div>

class="acc-sub tf-lead" - додавання, ніколи перейменування: обличчя належить оболонці акаунта, а цьому файлу лишилось повітря під ним, якого .acc-sub навмисне не несе. class="cedlg tfdlg" те саме: коробка діалогу спільна, а 440 - власні.

Де вживається

Якорі: .tf-lead .tf-cur .tf-cur-h

3 кольорові екрани: coach-tariff · -free · -cancel. Перший і третій це одна розмітка - різниця в класі open на скримі, - тож насправді екранів два, а третій це стан першого.

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

Чого бракує

Руйнівна кнопка нижча за безпечну на всіх 8 діалогах нижче 480. Один flex-direction в одному файлі, рішення власника
Чотири літерали 14px радіуса, яким драбина вже дала відповідь 14 → 12. Незастосоване правило, не відкрите питання
Дев'ять геометричних літералів під [?]: 22 (двічі) · 20 (двічі) · 18 · 14 (тричі) · 10 · 6 · 30. Драбина відступів має два правила, які сперечаються
26px ціни - між щаблями 24 і 30, і в жодного з двох кроків округлення немає інструкції для цілого числа поза їхнім списком. Це ціна, тож розмір рухає власник
Верхній регістр плашки втрачено при переїзді на status-pill.css. Повернути це одне оголошення в атомі, а не приватне правило тут
99 ₴ надруковано на екрані тричі - у картці, у колонці порівняння і у виносці, - і всі три це та сама гіпотеза. Коли число стане справжнім, місць для правки три

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