pathLength=100 → прогрес чистим CSS: stroke-dasharray = --val із 100.
Геометрія кола — CSS (r: calc(50% − половина лінії)), тож розміри
міняє сам компонент; лінія 4px, кінці круглі (stroke-linecap).
Колір: .success/.sub-a…f або власний через --ui-ring-fill.
Розміри: .s 44 (вміст 28) · база 48 (32) · .l 64 (48) · .xl 96 (80). */
.ui-ring { --val: 0; --ui-ring-size: 48px; --ui-ring-line: 4; --ui-ring-fill: var(--ui-progress-fill);
position: relative; width: var(--ui-ring-size); height: var(--ui-ring-size);
border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.ui-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%;
transform: rotate(-90deg); }
.ui-ring > svg circle { cx: 50%; cy: 50%; r: calc(50% - var(--ui-ring-line) * 0.5px);
fill: none; stroke-width: var(--ui-ring-line); }
.ui-ring > svg circle:first-child { stroke: var(--ui-progress-track); }
.ui-ring > svg circle:last-child { stroke: var(--ui-ring-fill); stroke-linecap: round;
stroke-dasharray: var(--val) 100;
/* зміна --val анімується (ріст результату, оновлення прогресу) */
transition: stroke-dasharray 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
/* при 0 круглий кап малював би крапку — гасимо смугу повністю */
opacity: min(var(--val), 1); }
.ui-ring.s { --ui-ring-size: 44px; }
.ui-ring.l { --ui-ring-size: 64px; }
.ui-ring.xl { --ui-ring-size: 96px; }
/* Вміст: цифри. Одиниця (%, «дн») — вкладеним : дрібніша й тихіша,
щоб у центрі кільця читалося число, а не знак. Розмір в em, тож
масштабується разом із кільцем на всіх розмірах. */
.ui-ring > span { position: relative; color: var(--ui-text-primary); font-weight: 700;
font-size: 12px; }
.ui-ring > span > i { font-style: normal; font-size: 0.75em;
color: var(--ui-text-secondary); margin-left: 1px; }
.ui-ring.s > span { font-size: 11px; }
.ui-ring.l > span { font-size: 15px; }
.ui-ring.xl > span { font-size: 22px; }
/* Вміст: предметна іконка — завжди на 16px менша за кільце
(по 8px на бік: лінія 4 + повітря 4), розмір рахується сам */
.ui-ring > .ui-subject { position: relative;
width: calc(var(--ui-ring-size) - 16px); height: calc(var(--ui-ring-size) - 16px); }
.ui-ring > .ui-subject::after { width: 22px; height: 22px; }
.ui-ring.s > .ui-subject::after { width: 20px; height: 20px; }
.ui-ring.l > .ui-subject::after { width: 30px; height: 30px; }
.ui-ring.xl > .ui-subject::after { width: 46px; height: 46px; }
/* Вміст: картинка (нагорода). Відступ 12px на бік (проти 8 у предметного
слота): нагорода — не гліф на весь круг, їй потрібне повітря до лінії.
.locked — стан «ще не відкрито»: картинка знебарвлюється й гасне до 0.2,
хай там нагорода чи замок. Носій стану — саме приглушення, тож картинку
сторінка обирає сама, а кільце поруч каже, скільки ще лишилось. */
.ui-ring > img { position: relative; object-fit: contain;
width: calc(var(--ui-ring-size) - 24px); height: calc(var(--ui-ring-size) - 24px); }
.ui-ring.locked > img { filter: grayscale(1); opacity: 0.2; }
/* Дрібні кільця — під гліф, а не під число: лінія тонша, інакше на 22px
кільце «заплило» б і вогника не було видно */
.ui-ring.xs { --ui-ring-size: 22px; --ui-ring-line: 2; }
.ui-ring.m { --ui-ring-size: 36px; --ui-ring-line: 3; }
/* Вміст: іконка-гліф. На відміну від предметної, вона не заповнює кільце,
а читається в центрі — тож розмір свій на кожен щабель */
.ui-ring > .ui-icon { position: relative; width: 18px; height: 18px; }
.ui-ring.xs > .ui-icon { width: 12px; height: 12px; }
.ui-ring.m > .ui-icon { width: 16px; height: 16px; }
.ui-ring.l > .ui-icon { width: 28px; height: 28px; }
.ui-ring.xl > .ui-icon { width: 40px; height: 40px; }
/* Серія (вогник): заливка streak, гліф тим самим кольором.
.done — денну норму виконано: диск заливається суцільним, кільце ховаємо
(прогрес уже не інформація), гліф стає контрастним.
.zero — ще нічого не зроблено: гліф тихий, кільце порожнє. */
.ui-ring.streak { --ui-ring-fill: var(--ui-fill-streak); }
.ui-ring.streak > .ui-icon::before { background: var(--ui-fill-streak); }
.ui-ring.streak.zero > .ui-icon::before { background: var(--ui-text-muted); }
.ui-ring.streak.done { background: var(--ui-fill-streak); }
.ui-ring.streak.done > svg { display: none; }
.ui-ring.streak.done > .ui-icon::before { background: var(--ui-text-on-streak); }
.ui-ring.success { --ui-ring-fill: var(--ui-progress-fill-success); }
/* Тренд у стат-плитці: +12% у */
.ui-stat-trend { display: inline-flex; align-items: center; gap: 1px; margin-left: 6px;
font-size: 12px; font-weight: 700; line-height: 16px; color: var(--ui-text-success);
vertical-align: 3px; letter-spacing: 0; }
.ui-stat-trend::before { content: ""; width: 12px; height: 12px; background: currentColor;
mask: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9.5V2.5M6 2.5L2.5 6M6 2.5L9.5 6' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
-webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9.5V2.5M6 2.5L2.5 6M6 2.5L9.5 6' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.ui-stat-trend.down { color: var(--ui-text-danger); }
.ui-stat-trend.down::before { transform: rotate(180deg); }
/* Кільце: предметне забарвлення (яскрава смуга -bar) та іконка в центрі */
.ui-ring.sub-a { --ui-ring-fill: var(--ui-subject-a-bar); }
.ui-ring.sub-b { --ui-ring-fill: var(--ui-subject-b-bar); }
.ui-ring.sub-c { --ui-ring-fill: var(--ui-subject-c-bar); }
.ui-ring.sub-d { --ui-ring-fill: var(--ui-subject-d-bar); }
.ui-ring.sub-e { --ui-ring-fill: var(--ui-subject-e-bar); }
.ui-ring.sub-f { --ui-ring-fill: var(--ui-subject-f-bar); }
.ui-ring > .ui-icon { position: relative; }
.ui-ring > .ui-icon::before { background: var(--ui-text-secondary); }
/* znohub-ui · слайдер діапазону.
Класи навмисно легасі (.range-slider*): за ними ходить драйвер (ui.js,
initRangeSliders) і розмітка модалок цілі — на сторінці статистики та в
завданні курсу. Тобто це не міст, а повноцінний компонент кита під наявним
контрактом імен: перейменування зламало б слайдер МОВЧКИ (драйвер робить
`if (!input) return`).
Правила-двійники в new_style.css видалені — вони перекривались киттю лише
частково (position/transform на тіках лишались абсолютними) і накладали
мітки одна на одну. Тут єдине джерело правди.
Розмітку міток будує драйвер із data-marks. */
.range-slider { width: 100%; padding-top: 30px; }
.range-slider-field { position: relative; display: flex; align-items: center; height: 20px; }
/* Трек: незалита частина — роль смуги прогресу, залиту малює main.js
градієнтом (акцент), бо нативний input не має окремого елемента заливки. */
.range-slider-input { -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
margin: 0; outline: none; cursor: pointer; border-radius: var(--ui-radius-pill);
background: var(--ui-progress-track); }
.range-slider-input:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: 3px; }
/* Повзунок — CSS, а не data-URI svg: інакше колір зашитий у картинку і
темна тема повз нього проходить. Кільце робить box-shadow, тож розмір
кола не залежить від товщини обводки. */
.range-slider-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
width: 20px; height: 20px; border-radius: var(--ui-radius-pill); cursor: grab;
background: var(--ui-surface);
box-shadow: inset 0 0 0 2px var(--ui-fill-accent), var(--ui-shadow-card); }
.range-slider-input::-moz-range-thumb { width: 20px; height: 20px; border: none;
border-radius: var(--ui-radius-pill); cursor: grab; background: var(--ui-surface);
box-shadow: inset 0 0 0 2px var(--ui-fill-accent), var(--ui-shadow-card); }
.range-slider-input:active::-webkit-slider-thumb { cursor: grabbing; }
.range-slider-input::-moz-range-track { background: transparent; }
/* Бульбашка зі значенням. Хвостик — повернутий квадрат під плашкою:
один вузол замість картинки, колір спільний із плашкою. */
.range-slider-bubble { position: absolute; bottom: calc(100% + 10px); transform: translateX(-50%);
z-index: 1; display: flex; align-items: center; justify-content: center; min-width: 40px;
height: 26px; padding: 0 8px; border-radius: var(--ui-radius-s); pointer-events: none;
background: var(--ui-fill-accent); color: var(--ui-text-on-accent);
font-size: 13px; font-weight: 700; line-height: 18px; }
.range-slider-bubble::after { content: ""; position: absolute; top: 100%; left: 50%;
width: 8px; height: 8px; margin: -4px 0 0 -4px; transform: rotate(45deg);
background: var(--ui-fill-accent); border-radius: 1px; }
/* Мітки під треком — ФЛЕКСОМ, не абсолютом. Одна мітка = один вузол, у якому
риска й підпис стоять одне під одним і центровані. Ширина мітки 20px під
риску: підпис ширший і виступає симетрично, тож лишається відцентрованим
на рисці — те саме, що давав абсолют із translateX(-50%), але без
поштучного позиціонування.
Умова, за якої space-between коректний: мітки рівномірні (у нас 100/150/200
на діапазоні 100–200 — рівно 0/50/100%). Для нерівномірних довелося б
повертати абсолют із відсотком на кожну. */
.range-slider-marks { display: flex; justify-content: space-between; margin-top: 6px; }
.range-slider-mark { flex: none; width: 20px; display: flex; flex-direction: column;
align-items: center; gap: 4px; }
.range-slider-tick { width: 2px; height: 6px;
border-radius: var(--ui-radius-pill); background: var(--ui-border-strong); }
.range-slider-label { color: var(--ui-text-secondary); font-size: 12px;
font-weight: 400; line-height: 16px; white-space: nowrap; }
/* znohub-ui · картки з графіками (Chart.js).
Кит володіє коробкою: розміром полотна, пончиком і маркером легенди.
Кольори серій ставить сторінка — вона читає ті самі ролі (--ui-subject-*-bar,
--ui-fill-accent) через getComputedStyle, тож тема лишається спільною. */
.ui-chart { position: relative; flex: 1; min-height: 200px; }
.ui-chart > canvas { display: block; }
/* Пончик: кільце з підсумком усередині + легенда збоку.
Легенда — звичайний .ui-summary: підпис ліворуч, значення праворуч.
Власного списку компонент не заводить, бо це той самий рядок «назва —
значення», що в модалках. */
.ui-donut { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
/* Ширина легенди обмежена: у широкій картці рядок «назва — частка»
розтягувався на всю ширину, і частка відлітала від назви. */
.ui-donut > .ui-summary { flex: 1 1 170px; min-width: 0; max-width: 360px; }
.ui-donut-ring { position: relative; flex: none; width: 168px; height: 168px; }
/* Chart.js із maintainAspectRatio:false пише розмір полотна інлайном —
перебиваємо, інакше при зміні теми/періоду кільце «пливе» */
.ui-donut-ring > canvas { width: 100% !important; height: 100% !important; }
.ui-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.ui-donut-center > b { color: var(--ui-text-primary); font-size: 28px; font-weight: 700;
line-height: 32px; letter-spacing: -0.5px; }
.ui-donut-center > span { color: var(--ui-text-secondary); font-size: 12px; line-height: 16px; }
/* Маркер серії. Колір ставить сторінка інлайном: він приходить із даних
(предмет, режим), а не зі стану компонента. */
.ui-dot { flex: none; width: 10px; height: 10px; border-radius: var(--ui-radius-pill);
background: var(--ui-border-strong); }
/* znohub-ui · карта прогресу (адаптивне навчання).
Плитка = блок тем: назва, бал блоку і статус відносно цільового бала НМТ.
Кольори — власна рампа продукту (--ui-map-*): не предметна й не рівнева,
бо це історична шкала карти, див. коментар у palette.css. */
.ui-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 12px; }
.ui-map-tile { position: relative; overflow: hidden; display: flex; flex-direction: column;
min-height: 116px; padding: 16px; border-radius: var(--ui-radius-l);
background: var(--ui-map-tint); }
/* Декор «хвилі». Форма кодує відстань до цілі: засвоєний блок — довга
спокійна хвиля, далекий — тісний гострий зигзаг; дрейф так само
пришвидшується. Опасіті 0.1: на 0.5 десяток плиток із рухомими лініями
мерехтів в очах — на цій прозорості лінія читається як фактура тла.
Маска, а не svg у кожній плитці: розмітка лишається одним вузлом, а колір
бере статус. Фрагмент маски — рівно один період, що починається й
закінчується на тій самій висоті, тож repeat-x стикується без шва, а
зсув на цілий період замикає цикл. */
.ui-map-tile::before { content: ""; position: absolute; inset: 0; pointer-events: none;
opacity: 0.1; background: var(--ui-map-fill);
mask: var(--ui-map-wave) repeat-x 0 50%;
mask-size: var(--ui-map-wave-w) 100%;
-webkit-mask: var(--ui-map-wave) repeat-x 0 50%;
-webkit-mask-size: var(--ui-map-wave-w) 100%;
animation: ui-map-drift var(--ui-map-wave-sp) linear infinite; }
@keyframes ui-map-drift {
to { mask-position: calc(-1 * var(--ui-map-wave-w)) 50%;
-webkit-mask-position: calc(-1 * var(--ui-map-wave-w)) 50%; }
}
/* Рух не несе змісту: без нього хвиля лишається, просто стоїть */
@media (prefers-reduced-motion: reduce) {
.ui-map-tile::before { animation: none; }
}
/* Назва обрізається трьома рядками: інакше один довгий блок тем робить
ряд удвічі вищим за решту, і сітка розсипається. */
.ui-map-tile > p { position: relative; color: var(--ui-text-primary); font-size: 15px;
font-weight: 700; line-height: 20px; letter-spacing: -0.2px;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
/* Метрика притиснута до низу (margin-top: auto) — бали стоять на одній
лінії в усьому ряду, хоч би на скільки рядків розповзлась назва. */
.ui-map-metric { position: relative; margin-top: auto; padding-top: 12px;
display: flex; flex-direction: column; }
.ui-map-metric > b { color: var(--ui-map-text); font-size: 28px; font-weight: 700;
line-height: 32px; letter-spacing: -0.5px; }
/* Бала ще немає — тире тримає ту саму висоту, що й число, тож ряд плиток
не стрибає. Замість смужки-плейсхолдера: та читалась як недомальований
елемент інтерфейсу, а тире прямо каже «поки нічого». */
.ui-map-metric > b.empty { color: var(--ui-text-muted); }
.ui-map-metric > span { color: var(--ui-map-text); font-size: 13px; font-weight: 500;
line-height: 18px; }
/* CTA замість метрики: кнопка стає на її місце, тому теж притиснута до низу */
.ui-map-tile > .ui-btn { position: relative; margin-top: auto; align-self: flex-start; }
/* ---- Статуси. 5 — ціль узято, 1 — далеко від неї ---- */
.ui-map-tile.done { --ui-map-fill: var(--ui-map-5-fill); --ui-map-tint: var(--ui-map-5-tint); --ui-map-text: var(--ui-map-5-text); }
.ui-map-tile.done { --ui-map-wave: url("data:image/svg+xml,"); --ui-map-wave-w: 190px; --ui-map-wave-sp: 34s; }
.ui-map-tile.near10 { --ui-map-fill: var(--ui-map-4-fill); --ui-map-tint: var(--ui-map-4-tint); --ui-map-text: var(--ui-map-4-text); }
.ui-map-tile.near10 { --ui-map-wave: url("data:image/svg+xml,"); --ui-map-wave-w: 95px; --ui-map-wave-sp: 26s; }
.ui-map-tile.near20 { --ui-map-fill: var(--ui-map-3-fill); --ui-map-tint: var(--ui-map-3-tint); --ui-map-text: var(--ui-map-3-text); }
.ui-map-tile.near20 { --ui-map-wave: url("data:image/svg+xml,"); --ui-map-wave-w: 63px; --ui-map-wave-sp: 19s; }
.ui-map-tile.warn30 { --ui-map-fill: var(--ui-map-2-fill); --ui-map-tint: var(--ui-map-2-tint); --ui-map-text: var(--ui-map-2-text); }
.ui-map-tile.warn30 { --ui-map-wave: url("data:image/svg+xml,"); --ui-map-wave-w: 48px; --ui-map-wave-sp: 13s; }
.ui-map-tile.far { --ui-map-fill: var(--ui-map-1-fill); --ui-map-tint: var(--ui-map-1-tint); --ui-map-text: var(--ui-map-1-text); }
.ui-map-tile.far { --ui-map-wave: url("data:image/svg+xml,"); --ui-map-wave-w: 38px; --ui-map-wave-sp: 8s; }
/* Розпочато, бала ще немає */
.ui-map-tile.progress { --ui-map-fill: var(--ui-fill-accent); --ui-map-tint: var(--ui-tint-accent); --ui-map-text: var(--ui-text-accent); }
/* Не розпочато: сіра утоплена поверхня, а не світлий хекс — інакше в
темній темі плитка світилась білою плямою (15.18 до картки). */
.ui-map-tile.idle { --ui-map-fill: var(--ui-border-strong); --ui-map-tint: var(--ui-surface-sunken);
--ui-map-text: var(--ui-text-secondary); }
.ui-map-tile.idle > p { color: var(--ui-text-secondary); }
/* Плитка з CTA завжди акцентна, хоч би який статус мала */
.ui-map-tile.cta { --ui-map-fill: var(--ui-fill-accent); --ui-map-tint: var(--ui-tint-accent);
--ui-map-text: var(--ui-text-accent); }
/* Бала ще немає — форма нічого не кодує, тож найспокійніша хвиля */
.ui-map-tile.progress, .ui-map-tile.idle, .ui-map-tile.cta {
--ui-map-wave: url("data:image/svg+xml,");
--ui-map-wave-w: 190px; --ui-map-wave-sp: 40s; }
@media (max-width: 480px) {
.ui-map { grid-template-columns: 1fr; }
}
/* znohub-ui · дрібні примітиви: аватар, бейдж, тултіп, скелетон, список опцій, fab */
/* Аватар: розмірна шкала + фолбек-ініціали */
/* Тінт і текст — зі скоупу з відкатом на акцент: у предметному контексті
(вікно «команда підтримки» на сторінці курсу) фолбек-ініціали мають
звучати кольором предмета, а поза скоупом нічого не змінюється. */
.ui-avatar { display: flex; align-items: center; justify-content: center; flex: none;
width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
background: var(--ui-scope-tint, var(--ui-tint-accent));
color: var(--ui-scope-text, var(--ui-text-accent));
font-size: 15px; font-weight: 700; }
.ui-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.ui-avatar.s { width: 32px; height: 32px; font-size: 12px; }
.ui-avatar.l { width: 56px; height: 56px; font-size: 20px; }
.ui-avatar.xl { width: 96px; height: 96px; font-size: 32px; }
/* ---- Людина ----
Аватар, імʼя з роллю, контакт і дія — вікно «твоя команда» (куратор,
бадді), картка викладача. Не .ui-row: там усе живе в один рядок, а тут
під шапкою ще опис і кнопка на всю ширину. */
.ui-person { display: flex; flex-direction: column; gap: 12px; }
.ui-person-head { display: flex; align-items: center; gap: 12px; }
.ui-person-name { display: flex; flex-direction: column; align-items: flex-start;
gap: 4px; min-width: 0; }
.ui-person-name > b { color: var(--ui-text-primary); font-size: 17px; font-weight: 700;
line-height: 23px; letter-spacing: -0.3px; }
/* Роль і контакт — один рядок, а не два: це одна відповідь на питання «хто
це і як писати», і в колонці вони читались як два різні факти. Перенос
дозволений: на вузькому екрані тег іде під роль сам. */
.ui-person-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
min-width: 0; color: var(--ui-text-secondary); font-size: 14px;
font-weight: 400; line-height: 20px; }
.ui-person > p { color: var(--ui-text-secondary); font-size: 14px; line-height: 20px; }
/* Перегородка між людьми, коли їх кілька підряд — але лише для голих
блоків: у карток межу вже несе сама підкладка. */
.ui-person:not(.card) + .ui-person:not(.card) {
padding-top: 24px; border-top: 1px solid var(--ui-border-subtle); }
/* .card — людина окремою карткою. Потрібна там, де їх кілька і кожну можна
вибрати: підкладка каже, де закінчується одна й починається наступна,
виразніше за волосінь між ними. */
.ui-person.card { padding: 16px; border-radius: var(--ui-radius-l);
background: var(--ui-surface-sunken); }
/* Бейдж-лічильник (канон wr-nav-badge) */
.ui-badge { display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--ui-radius-pill);
background: var(--ui-fill-accent); color: var(--ui-text-on-accent);
font-size: 11px; font-weight: 700; line-height: 1; }
/* Розміри — варіанти канону, не окремі компоненти. Контекстні селектори
стоять поруч із варіантом у тому самому правилі: чіп і таби беруть .s,
таб-бар — .xs (бейдж накладається на іконку, тому дрібніший). Так само
значення живуть в одному місці — раніше правило чіпа й правило табів
були байт-у-байт однакові, а таб-бар тримав третій набір чисел. */
.ui-badge.s, .ui-chip > .ui-badge, .ui-tabs > .item > .ui-badge {
min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; }
.ui-badge.xs, .ui-tabbar-item > .ui-badge {
min-width: 16px; height: 16px; padding: 0 4px; font-size: 9px; }
.ui-badge.danger { background: var(--ui-fill-danger); color: var(--ui-text-on-fill); }
.ui-badge.quiet { background: var(--ui-surface-sunken); color: var(--ui-text-secondary); }
/* Тултіп: CSS-only через data-tip (на платформі був лише голий title="") */
.ui-tip { position: relative; }
.ui-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px);
left: 50%; transform: translateX(-50%) translateY(2px); z-index: 50;
padding: 6px 10px; border-radius: var(--ui-radius-s); background: var(--ui-surface-inverse);
color: var(--ui-text-on-inverse); font-size: 12px; line-height: 16px;
width: max-content; max-width: min(260px, 78vw);
opacity: 0; pointer-events: none; transition-property: var(--ui-transition-props); transition-duration: var(--ui-duration-fast); transition-timing-function: var(--ui-ease); }
.ui-tip:hover::after, .ui-tip:focus-visible::after { opacity: 1; transform: translateX(-50%); }
/* Скелетон */
.ui-skeleton { border-radius: var(--ui-radius-s); background: var(--ui-surface-sunken);
position: relative; overflow: hidden; }
.ui-skeleton::after { content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, var(--ui-surface-hover), transparent);
animation: ui-skeleton 1.4s infinite; }
@keyframes ui-skeleton { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.ui-skeleton.text { height: 14px; }
.ui-skeleton.title { height: 22px; width: 60%; }
.ui-skeleton.circle { border-radius: 50%; }
/* Список опцій (іконка + назва + підпис + шеврон) — примара wr-calendar-options */
.ui-options { display: flex; flex-direction: column; gap: 6px; }
.ui-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
border: none; text-align: left; border-radius: var(--ui-radius-m);
background: var(--ui-surface-sunken); cursor: pointer; font-family: inherit;
text-decoration: none; transition-property: var(--ui-transition-props); transition-duration: var(--ui-duration-fast); transition-timing-function: var(--ui-ease); }
@media (hover: hover) { .ui-option:hover { background: var(--ui-surface-sunken-hover); } }
.ui-option-icon { display: flex; align-items: center; justify-content: center; flex: none;
width: 40px; height: 40px; border-radius: var(--ui-radius-m); background: var(--ui-surface); }
.ui-option-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ui-option-text > p { color: var(--ui-text-primary); font-size: 14px; font-weight: 500; line-height: 20px; }
.ui-option-text > span { color: var(--ui-text-secondary); font-size: 12.5px; line-height: 17px; }
.ui-option > .ui-row-chev { margin-left: auto; }
/* Кружок з іконкою — нейтральна заміна предмета чи аватара там, де
картинки просто немає: операція в історії, подія в стрічці. Тягнеться
на всю зону, в яку вкладений (як .ui-avatar), тож розмір задає слот. */
.ui-icon-circle { display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%; border-radius: 50%; background: var(--ui-surface-sunken); }
.ui-icon-circle > .ui-icon { width: 20px; height: 20px; }
.ui-icon-circle.s > .ui-icon { width: 18px; height: 18px; }
/* .l — слот шапки сторінки (64×64): рядковий гліф у ньому губився крапкою */
.ui-icon-circle.l > .ui-icon { width: 28px; height: 28px; }
.ui-icon-circle > .ui-icon::before { background: var(--ui-text-secondary); }
/* Монета внутрішньої валюти. Шкала: 14 (.s, у рядку) · 18 (база) · 24 (.l).
.xl — не рядковий розмір, а іконка балансу в .ui-page-head: слот там
рівно 64×64, тож монета заповнює його цілком */
/* Бейдж преміуму — накладка на кут слота аватара/предмета.
Композиція, а не картинка: коло — заливка акценту, корона — маска i-king.
Тому темується разом із рештою і не тягне окремий asset. Обідок кольору
поверхні «вирізає» бейдж із аватарки, як крапка статусу.
Слот-батько має бути position: relative — це дає .ui-subject-slot. */
.ui-premium-badge { position: absolute; right: -4px; bottom: -4px; z-index: 1;
width: 24px; height: 24px; flex: none; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--ui-scope-fill, var(--ui-fill-accent)); border: 2px solid var(--ui-surface); }
.ui-premium-badge > .ui-icon { width: 12px; height: 12px; }
.ui-premium-badge > .ui-icon::before { background: var(--ui-scope-on-fill, var(--ui-text-on-accent)); }
.ui-coin { width: 18px; height: 18px; flex: none; }
/* Плашка коїнів: сума → монетка → хвіст. Монетка стоїть саме МІЖ ними, бо
вона тут одиниця виміру, а не іконка-прикраса: «+50 🪙 · до 12.03»
читається як «плюс п'ятдесят монет до 12 березня». Тому й розмітка з
трьох шматків, а не готовий рядок.
Стани — ролі кіта, не власні кольори: строк іще є (акцент), дедлайн
сьогодні (danger), уже нараховано (success), проґавлено (сіре).
.extend — єдиний стан-кнопка: пропонує купити продовження, тож і межа
пунктирна, щоб не читався як просто позначка.
Розмір один — 22px: плашка стоїть і окремим елементом (над назвою картки,
в банері), і в рядку метаданих поруч із датою, а два розміри на ці два
випадки давали різнобій між сусідніми екранами. vertical-align на базі — щоб у рядковому
контексті вона не сідала на базову лінію і не зʼїжджала вниз. */
.ui-coin-badge { display: inline-flex; align-items: center; gap: 4px; width: fit-content;
height: 22px; padding: 0 8px; border: none; border-radius: var(--ui-radius-pill);
/* Тінт лежить НА білому полотні, а не просто заливає плашку: усі
--ui-tint-* напівпрозорі, тож на кольоровому тлі (банер із заливкою,
тінтований алерт) вони змішувались із тим, що позаду, і той самий
стан на двох екранах давав два різні кольори. Два шари — колір тла
плюс градієнт з однієї барви — тримають відтінок чистим. */
background-color: var(--ui-surface);
background-image: linear-gradient(var(--ui-tint-accent), var(--ui-tint-accent));
/* Межа прозора: контур малює переливна рамка нижче. Тінь лишається як
опора — від неї відштовхується ::before, і геометрія плашки не
залежить від box-sizing сторінки. */
position: relative;
box-shadow: inset 0 0 0 1px transparent;
/* Колір переливу — свій на кожен стан */
--ui-badge-sheen: var(--ui-tint-accent-hover);
--ui-badge-fill: var(--ui-fill-accent);
color: var(--ui-text-accent);
font-family: inherit; font-size: 12px; font-weight: 500; line-height: 16px;
white-space: nowrap; vertical-align: middle;
transition-property: var(--ui-transition-props); transition-duration: var(--ui-duration); transition-timing-function: var(--ui-ease); }
/* Монету міряє сама плашка: розмір тут не вибір автора розмітки, а частина
компонента — на 22px це 12. Відʼємний відступ ліворуч підтягує її до суми:
монета тут одиниця виміру при числі («+50 монет»), а не окремий елемент
переліку, тож перед нею просвіт має бути вужчий, ніж перед хвостом. */
.ui-coin-badge > .ui-coin { width: 12px; height: 12px; margin-left: -2px; }
.ui-coin-badge.today { background-image: linear-gradient(var(--ui-tint-danger), var(--ui-tint-danger));
--ui-badge-sheen: var(--ui-tint-danger-hover); --ui-badge-fill: var(--ui-fill-danger);
color: var(--ui-text-danger); }
/* Уже нараховане — доконаний факт, а не те, за чим стежити: тому зелена
плашка ще й тихіша за решту. Поруч із активними дедлайнами (акцент) і
сьогоднішнім (danger) вона інакше тягнула б на себе стільки ж уваги. */
.ui-coin-badge.earned { background-image: linear-gradient(var(--ui-tint-success), var(--ui-tint-success));
--ui-badge-sheen: var(--ui-tint-success-hover); --ui-badge-fill: var(--ui-fill-success-strong);
color: var(--ui-text-success); opacity: 0.6; }
/* Проґавлений дедлайн: сіріє і сама монета — інакше вона світилась би
синім на згаслій плашці й тягнула б увагу на те, чого вже не буде. */
.ui-coin-badge.expired { background-image: linear-gradient(var(--ui-surface-sunken), var(--ui-surface-sunken));
box-shadow: inset 0 0 0 1px var(--ui-border-subtle); color: var(--ui-text-secondary); }
.ui-coin-badge.expired > .ui-coin { filter: grayscale(1); opacity: 0.55; }
/* Переливна рамка — той самий контур, що в преміум-картці (опис у card.css),
лише в кольорі стану. Проґавлений і .extend її не беруть: перший мертвий,
у другого вже є власна пунктирна межа, яка каже «сюди можна натиснути». */
.ui-coin-badge:not(.expired):not(.extend)::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
border-radius: inherit; padding: 1px;
background: linear-gradient(90deg, transparent 0%,
var(--ui-badge-sheen) 44%, var(--ui-badge-fill) 50%,
var(--ui-badge-sheen) 56%, transparent 100%);
background-size: 300% 100%;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
animation: ui-premium-sheen 5s linear infinite; }
/* Рух — не носій сенсу: контур лишається, просто перестає переливатись */
@media (prefers-reduced-motion: reduce) {
.ui-coin-badge::before { animation: none; background-position: 50% 0; }
}
/* У .extend межа своя — пунктирна й суцільного кольору: вона каже «сюди
можна натиснути», тож тиха тінтова обводка тут зайва. */
.ui-coin-badge.extend { cursor: pointer; box-shadow: none;
border: 1px dashed var(--ui-border-accent); }
.ui-coin-badge.extend:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: 2px; }
@media (hover: hover) {
.ui-coin-badge.extend:hover {
background-image: linear-gradient(var(--ui-tint-accent-hover), var(--ui-tint-accent-hover)); }
}
.ui-coin.s { width: 14px; height: 14px; }
.ui-coin.l { width: 24px; height: 24px; }
.ui-coin.xl { width: 64px; height: 64px; }
/* Ціна: число, одиниця тихим підписом, стара ціна — перекреслена muted.
Стара ціна доречна лише там, де нова справді нижча; «−0%» не малюємо. */
.ui-price { display: inline-flex; align-items: baseline; gap: 6px; }
/* Монета в ціні вирівнюється по центру рядка, а не по базовій лінії */
.ui-price > .ui-coin { align-self: center; }
.ui-price > b { color: var(--ui-text-primary); font-size: 20px; font-weight: 700;
line-height: 26px; letter-spacing: -0.4px; }
.ui-price > span { color: var(--ui-text-secondary); font-size: 13px; line-height: 18px; }
.ui-price > s { color: var(--ui-text-muted); font-size: 13px; line-height: 18px; }
.ui-price.s > b { font-size: 17px; line-height: 23px; letter-spacing: -0.3px; }
/* Напрямок операції в історії: нарахування зелене, витрачене й згоріле —
тихе. Списання не червоне свідомо: витратити коїни — це не помилка */
.ui-price.in > b { color: var(--ui-text-success); }
.ui-price.out > b { color: var(--ui-text-muted); }
.ui-price.l > b { font-size: 28px; line-height: 34px; letter-spacing: -0.56px; }
/* Плашка балансу монет: монета — сума — дія «як заробити». Шапка маркету.
Не .ui-coin-badge: та рядкова (22px) і живе всередині тексту, а ця стоїть
у ряду з кнопкою сторінки, тож і висота в неї контрольна — 40, як у
кнопки, і штатна .s (32) всередині поміщається з полем 4. */
.ui-balance { display: inline-flex; align-items: center; gap: 8px; flex: none;
height: 40px; padding: 0 4px 0 14px; border-radius: var(--ui-radius-pill);
background: var(--ui-surface); border: 1px solid var(--ui-border-card);
box-shadow: var(--ui-shadow-card); }
.ui-balance > b { color: var(--ui-text-primary); font-size: 15px; font-weight: 700;
line-height: 22px; letter-spacing: -0.1px; }
/* Скелетон-пресети: рядок списку та картка */
.ui-skeleton-row { display: flex; align-items: center; gap: 12px; }
.ui-skeleton-row > .ui-skeleton.circle { width: 40px; height: 40px; flex: none; }
.ui-skeleton-stack { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .ui-skeleton::after { animation: none; } }
/* Заголовок лише для читачів екрана: сторінка може не показувати h1 у
макеті, але без нього втрачається орієнтир — і в скрінрідері, і в пошуку. */
.ui-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; border: 0; overflow: hidden; white-space: nowrap;
clip: rect(0 0 0 0); clip-path: inset(50%); }
/* znohub-ui · шкала віх — трек із точками-етапами на шляху до цілі.
Канон: .streak-win-scale платформи (вікно серії).
Розмітка:
.ui-milestones трек
> i.fill заповнення (ширина інлайном, % від бекенда)
> .ui-milestone віха; позиція інлайном через --at
> span підпис зверху (число)
> i точка на треку
> .ui-tag нагорода знизу (необовʼязково)
Стани віхи: .done — досягнута поточним значенням · .past — брали раніше,
але зараз лічильник нижчий (нагороду вже видано, тому тихіша).
Позиції точок рахує бекенд і шле в --at: розкидання по треку залежить
від кількості віх, а CSS про неї не знає. --}}
*/
.ui-milestones { position: relative; height: 6px; border-radius: var(--ui-radius-pill);
background: var(--ui-progress-track); }
.ui-milestones > .fill { position: absolute; left: 0; top: 0; height: 100%;
border-radius: var(--ui-radius-pill); background: var(--ui-progress-fill);
transition: width 0.3s; }
.ui-milestone { position: absolute; top: 50%; left: var(--at, 0%); transform: translate(-50%, -50%); }
/* Точка «вирізана» з треку кільцем кольору поверхні — як у макеті */
.ui-milestone > i { position: relative; display: block; width: 20px; height: 20px;
border-radius: 50%; border: 2px solid var(--ui-surface); background: var(--ui-progress-track); }
.ui-milestone.done > i { background: var(--ui-fill-accent); }
/* Взята раніше віха: та сама галочка, але тихим сірим — нагорода вже видана */
.ui-milestone.past > i { background: var(--ui-text-muted); }
/* Взята віха сіра, не акцентна — галочка на ній лишається білою в обох темах */
.ui-milestone.past > i::after { background: var(--ui-text-on-fill); }
.ui-milestone.done > i::after, .ui-milestone.past > i::after {
content: ""; position: absolute; inset: 3px; background: var(--ui-text-on-accent);
mask: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 7.5L5.5 10.5L11.5 3.5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
-webkit-mask: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 7.5L5.5 10.5L11.5 3.5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
/* :not(.ui-tag) обовʼязково: нагорода — теж прямий , і без цього
вона діставала б і позицію підпису (bottom), і його колір */
.ui-milestone > span:not(.ui-tag) { position: absolute; bottom: calc(100% + 10px); left: 50%;
transform: translateX(-50%); white-space: nowrap;
color: var(--ui-text-secondary); font-size: 13px; font-weight: 500; line-height: 18px; }
.ui-milestone.done > span:not(.ui-tag),
.ui-milestone.past > span:not(.ui-tag) { color: var(--ui-text-muted); }
.ui-milestone > .ui-tag { position: absolute; top: calc(100% + 10px); left: 50%;
transform: translateX(-50%); }
/* Нагорода вже отримана — тихне, але лишається читабельною (не opacity) */
.ui-milestone.past > .ui-tag { color: var(--ui-text-muted); }
/* znohub-ui · шелл застосунку
Десктоп (≥1024): сайдбар зліва + контент. Мобільний (<1024): верхня
панель + нижній таб-бар. Скрол — документний (сайдбар липкий),
на відміну від legacy-шелла з overflow:hidden на body. */
/* isolation — під градієнт шелу (.ui-main::before, z-index -1): без власного
контексту накладання псевдоелемент із відʼємним z-index пірнув би під фон
самої .ui-app і став би невидимим. Модалки це не зачіпає: ті, що лежать у
перед шелом, мають z-index 100 і лишаються вище; ті, що всередині —
у тому самому контексті, де сайдбар має лише 40. */
.ui-app { min-height: 100dvh; background: var(--ui-surface-page); isolation: isolate; }
/* Легасі style.css ставить body { overflow: hidden } під власну модель скролу —
шелл kit працює документним скролом */
body.ui-shell { overflow: auto; height: auto; display: block; background: var(--ui-surface-page); }
/* ---- Сайдбар (десктоп) ---- */
.ui-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--ui-sidebar-width);
display: flex; flex-direction: column; gap: 2px; padding: 12px;
border-right: 1px solid var(--ui-border-subtle);
overflow-y: auto; }
.ui-sidebar-head { display: flex; align-items: center; justify-content: space-between;
padding: 4px 10px 16px; }
.ui-sidebar-logo { display: flex; align-items: center; transition: opacity 0.15s; }
.ui-sidebar-logo img { height: 24px; }
/* Лого веде на головну — єдине посилання шела, що не мало жодної реакції */
@media (hover: hover) { .ui-sidebar-logo:hover { opacity: 0.7; } }
.ui-sidebar-profile { display: flex; align-items: center; gap: 10px; padding: 12px;
border-radius: var(--ui-radius-l); text-decoration: none; margin-bottom: 12px;
background: var(--ui-surface); border: 1px solid var(--ui-border-card); transition-property: var(--ui-transition-props); transition-duration: var(--ui-duration-fast); transition-timing-function: var(--ui-ease); }
@media (hover: hover) { .ui-sidebar-profile:hover { box-shadow: var(--ui-shadow-card-hover); transform: translateY(-1px); } }
/* Прес: картка «сідає» назад і тінь зникає */
.ui-sidebar-profile:active { transform: translateY(0); box-shadow: none; }
.ui-sidebar-profile .ui-avatar { width: 36px; height: 36px; font-size: 13px; }
.ui-sidebar-profile-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ui-sidebar-profile-text > p { color: var(--ui-text-primary); font-size: 14px; font-weight: 700;
line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-sidebar-profile-text > span { display: flex; align-items: center; gap: 6px;
color: var(--ui-text-secondary); font-size: 12px; line-height: 16px; }
.ui-sidebar-profile > .ui-row-chev { margin-left: auto; }
/* Вогник стріка з кільцем денної цілі: --val = відсоток виконання
(today_count/daily_target), .done — день зараховано */
/* Група «профіль + серія» вгорі сайдбара/шита */
/* flex: none — інакше блок профілю й серії стискається, коли колонці
бракує висоти, і картка серії з'їжджає до кількох пікселів разом із
вмістом. Вільну висоту забирає .ui-sidebar-spacer, не цей блок. */
.ui-sidebar-user { display: flex; flex-direction: column; gap: 8px;
margin-bottom: 12px; flex: none; }
.ui-sidebar-user > .ui-sidebar-profile, .ui-sidebar-user > .ui-streak-card { margin-bottom: 0; }
/* Блок серії: шапка з вогником і числом днів + тижнева стрічка Пн–Нд.
Стани днів: earned · frozen (заморозка) · pending (сьогодні) · missed · future */
.ui-streak-card { display: flex; flex-direction: column; gap: 10px; padding: 12px;
border-radius: var(--ui-radius-l); background: var(--ui-surface);
border: 1px solid var(--ui-border-card); margin-bottom: 12px; transition-property: var(--ui-transition-props); transition-duration: var(--ui-duration-fast); transition-timing-function: var(--ui-ease); }
@media (hover: hover) { .ui-streak-card:hover { box-shadow: var(--ui-shadow-card-hover); transform: translateY(-1px); } }
.ui-streak-card:active { transform: translateY(0); box-shadow: none; }
.ui-streak-card-head { display: flex; align-items: center; gap: 8px; }
/* Стат-колонка (формула лендингу: число + тихий підпис) */
.ui-streak-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ui-streak-stat > b { color: var(--ui-text-primary); font-size: 14px; font-weight: 700;
line-height: 20px; letter-spacing: -0.4px;
white-space: nowrap; }
.ui-streak-stat > span { color: var(--ui-text-secondary); font-size: 11px; line-height: 15px;
white-space: nowrap; }
/* Клік по картці згортає деталі тижня (клас ставить ui.js, стан у localStorage) */
.ui-streak-card { cursor: pointer; }
/* .collapsed лишається як інертний клас: розгортання прибрано, картка
тепер відкриває вікно серії. Правило тримаємо, щоб стара розмітка з
цим класом не показала тиждень раптово. */
.ui-streak-card.collapsed .ui-streak-divider,
.ui-streak-card.collapsed .ui-streak-week { display: none; }
/* Штриховий розділювач «сьогодні | тиждень»: штрих 4px, проміжок 4px */
.ui-streak-divider { height: 1px;
background: repeating-linear-gradient(90deg,
var(--ui-border-subtle) 0 4px, transparent 4px 8px); }
.ui-streak-week { display: flex; justify-content: space-between; }
.ui-streak-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ui-streak-day > i { width: 22px; height: 22px; border-radius: 50%; position: relative;
background: var(--ui-border-subtle); }
.ui-streak-day > span { font-size: 10px; font-weight: 700; letter-spacing: 0.2px;
color: var(--ui-text-muted); }
.ui-streak-day.earned > i { background: var(--ui-fill-success); }
.ui-streak-day.earned > i::after { content: ""; position: absolute; inset: 5px;
background: var(--ui-text-on-fill);
mask: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 7.5L5.5 10.5L11.5 3.5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
-webkit-mask: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 7.5L5.5 10.5L11.5 3.5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.ui-streak-day.earned > span { color: var(--ui-text-success); }
.ui-streak-day.frozen > i { background: var(--ui-subject-a-tint-strong); }
.ui-streak-day.frozen > i::after { content: ""; position: absolute; inset: 5px;
background: var(--ui-subject-a-text);
mask: url("data:image/svg+xml,%3Csvg%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M12%203.5V20.5M19.36%207.75L4.64%2016.25M4.64%207.75L19.36%2016.25%22%20stroke=%22black%22%20stroke-width=%222.6%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E") no-repeat center / contain;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M12%203.5V20.5M19.36%207.75L4.64%2016.25M4.64%207.75L19.36%2016.25%22%20stroke=%22black%22%20stroke-width=%222.6%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E") no-repeat center / contain; }
.ui-streak-day.pending > i { background: none; border: 2px dashed var(--ui-border-strong); }
.ui-streak-day.pending > span { color: var(--ui-text-primary); }
/* Пропущений — тихий мінус у червоному тінті: відрізняється від future,
але не кричить (карати за пропуск не мета) */
.ui-streak-day.missed > i { background: var(--ui-tint-danger); }
.ui-streak-day.missed > i::after { content: ""; position: absolute; inset: 10px 6px;
border-radius: 1px; background: var(--ui-text-danger); }
/* Стрік в аппбарі (мобільний): кільце + число */
.ui-appbar-streak { display: flex; align-items: center; gap: 6px;
color: var(--ui-text-primary); font-size: 13px; font-weight: 700; }
.ui-nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
border-radius: var(--ui-radius-m); text-decoration: none; border: none;
background: none; cursor: pointer; font-family: inherit; width: 100%;
text-align: left; transition-property: var(--ui-transition-props); transition-duration: var(--ui-duration-fast); transition-timing-function: var(--ui-ease); }
.ui-nav-item > .ui-icon::before { background: var(--ui-text-secondary); transition: background 0.15s; }
.ui-nav-item > p { color: var(--ui-text-secondary); font-size: 14px; font-weight: 500;
line-height: 20px; flex: 1; min-width: 0; transition: color 0.15s; }
@media (hover: hover) {
.ui-nav-item:hover { background: var(--ui-surface-hover); }
.ui-nav-item:hover > p { color: var(--ui-text-primary); }
.ui-nav-item:hover > .ui-icon::before { background: var(--ui-text-primary); }
}
.ui-nav-item.active { background: var(--ui-tint-accent); }
.ui-nav-item.active > p { color: var(--ui-text-accent); }
.ui-nav-item.active > .ui-icon::before { background: var(--ui-text-accent); }
.ui-nav-item > .ui-badge { flex: none; }
.ui-sidebar-spacer { flex: 1; }
/* Нижній блок (роль · підписки · вихід) — відділений розділювачем */
.ui-sidebar-foot { display: flex; flex-direction: column; gap: 2px;
border-top: 1px solid var(--ui-border-subtle); padding-top: 10px; margin-top: 10px; }
/* ---- Контент ---- */
.ui-main { position: relative; margin-left: var(--ui-sidebar-width); padding: 32px 32px 64px; }
/* Градієнтна плашка вгорі колонки — розбавляє суцільну площину сторінки.
Псевдоелементи, а не вузли в розмітці: жодна сторінка про неї не знає.
::before — рівний змив, ::after — дві плями, що повільно дрейфують.
Колір бере предмет сторінки. Клас предмета лежить УСЕРЕДИНІ колонки
(на .ui-page-head або на корені контенту), а кастомні властивості
успадковуються лише вниз — тож :has тут не хитрість, а єдиний спосіб
підняти предмет на шел. Сторінка без предмета лишається на акценті. */
.ui-main { --ui-page-tint: var(--ui-tint-accent); }
.ui-main:has(.ui-page-head.sub-a), .ui-main:has(> .ui-main-content > .sub-a) { --ui-page-tint: var(--ui-subject-a-tint); }
.ui-main:has(.ui-page-head.sub-b), .ui-main:has(> .ui-main-content > .sub-b) { --ui-page-tint: var(--ui-subject-b-tint); }
.ui-main:has(.ui-page-head.sub-c), .ui-main:has(> .ui-main-content > .sub-c) { --ui-page-tint: var(--ui-subject-c-tint); }
.ui-main:has(.ui-page-head.sub-d), .ui-main:has(> .ui-main-content > .sub-d) { --ui-page-tint: var(--ui-subject-d-tint); }
.ui-main:has(.ui-page-head.sub-e), .ui-main:has(> .ui-main-content > .sub-e) { --ui-page-tint: var(--ui-subject-e-tint); }
.ui-main:has(.ui-page-head.sub-f), .ui-main:has(> .ui-main-content > .sub-f) { --ui-page-tint: var(--ui-subject-f-tint); }
/* Плашка вмикається модифікатором .tinted — сторінка сама вирішує, чи їй
потрібен кольоровий верх (у платформі це @section('main-class', 'tinted')).
Без опт-іну шелл лишається чистим. */
.ui-main.tinted::before, .ui-main.tinted::after { content: ""; position: absolute; inset: 0 0 auto;
z-index: -1; height: 320px; pointer-events: none; }
.ui-main.tinted::before { background: linear-gradient(to bottom, var(--ui-page-tint), transparent); }
/* Рухаємо background-position, а не сам шар: transform розсунув би псевдо
за межі колонки й дав би горизонтальний скрол на всій сторінці. */
.ui-main.tinted::after { opacity: 0.7;
background-image: radial-gradient(40% 62% at 24% 4%, var(--ui-page-tint), transparent 70%),
radial-gradient(34% 54% at 76% 0%, var(--ui-page-tint), transparent 68%);
background-repeat: no-repeat, no-repeat;
background-size: 150% 190%, 140% 175%;
background-position: 8% 0%, 92% 0%;
animation: ui-page-aurora 28s ease-in-out infinite alternate; }
@keyframes ui-page-aurora {
to { background-position: 34% 16%, 62% 8%; }
}
@media (prefers-reduced-motion: reduce) {
.ui-main.tinted::after { animation: none; }
}
.ui-main-content { max-width: var(--ui-content-width); margin: 0 auto; display: flex;
flex-direction: column; gap: 24px; }
/* Колонка розтягує дітей — поодинока кнопка (напр. «назад») лишається за змістом */
.ui-main-content > .ui-btn,
.ui-main-content > .ui-contents > .ui-btn { align-self: flex-start; }
/* Корінь компонента (Livewire вимагає рівно один кореневий вузол) не має
ставати зайвою коробкою: display:contents віддає його дітей прямо в
колонку контенту, тож сторінка-компонент верстається точно так само, як
звичайна blade-сторінка. Без цього вкладений .ui-main-content із власним
margin:auto перестає розтягуватись і стискає сторінку до ширини вмісту. */
.ui-contents { display: contents; }
/* display:contents прибирає лише коробку, а в дереві елемент лишається —
тож правила «прямий нащадок .ui-main-content» самі крізь нього не
проходять і їх треба дублювати (див. .ui-btn і .ui-section вище) */
/* Секція на рівні сторінки більше не має власного гапу: базові 12 у
.ui-section — це і є потрібна відстань між заголовком групи та списком.
Раніше тут стояло 8, і сторінкова секція розходилась із вкладеною. */
/* Дві колонки: робота зліва, супровідний блок (підсумок) справа і липкий.
Нижче 1024 колонки складаються в одну, липкість знімається — на мобільному
роль підсумку бере .ui-actionbar. Відступ липкої колонки згори задає
--ui-sticky-top: шелл із верхньою панеллю перевизначає його під себе. */
:root { --ui-sticky-top: 24px; }
.ui-main-content.split { display: grid; align-items: start;
grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
.ui-main-content.split > .ui-flow { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ui-main-content.split > .ui-side { position: sticky; top: var(--ui-sticky-top);
display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 1023px) {
.ui-main-content.split { display: flex; }
.ui-main-content.split > .ui-side { position: static; }
}
/* Липка панель дій сторінки — мобільна пара до липкої бічної колонки */
.ui-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
background: var(--ui-surface); border-top: 1px solid var(--ui-border-subtle); }
.ui-actionbar-inner { display: flex; align-items: center; gap: 12px; min-width: 0;
width: 100%; max-width: var(--ui-content-width); margin-inline: auto; }
.ui-actionbar-sum { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ui-actionbar-sum > b { color: var(--ui-text-primary); font-size: 17px; font-weight: 700;
line-height: 23px; letter-spacing: -0.3px; }
.ui-actionbar-sum > span { color: var(--ui-text-secondary); font-size: 12px; line-height: 16px; }
.ui-actionbar-inner > .ui-btn { margin-left: auto; flex: none; }
@media (min-width: 1024px) { .ui-actionbar { display: none; } }
/* ---- Шелл оплати: логотип і вихід, без навігації ----
На сторінці платежу навігація — це шлях зійти з неї, тому шелл мінімальний. */
.ui-checkout { min-height: 100dvh; background: var(--ui-surface-page); --ui-sticky-top: 88px; }
.ui-checkout-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center;
gap: 12px; height: 64px; padding: 0 24px; background: var(--ui-surface);
border-bottom: 1px solid var(--ui-border-subtle); }
.ui-checkout-bar img { height: 22px; display: block; }
.ui-checkout-bar-side { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ui-checkout-main { padding: 32px 24px 96px; }
@media (max-width: 1023px) {
.ui-checkout { --ui-sticky-top: 80px; }
.ui-checkout-bar { height: 56px; padding: 0 16px; }
.ui-checkout-main { padding: 20px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
}
/* ---- Верхня панель (мобільний) ---- */
.ui-appbar { display: none; position: sticky; top: 0; z-index: 40;
align-items: center; gap: 12px; height: 56px; padding: 0 16px;
background: var(--ui-surface); border-bottom: 1px solid var(--ui-border-subtle); }
.ui-appbar-logo img { height: 22px; display: block; }
.ui-appbar-side { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* ---- Нижній таб-бар (мобільний) ---- */
.ui-tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
background: var(--ui-surface); border-top: 1px solid var(--ui-border-subtle);
padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
.ui-tabbar-items { display: flex; max-width: 520px; margin: 0 auto; }
.ui-tabbar-item { flex: 1; display: flex; flex-direction: column; align-items: center;
gap: 3px; padding: 6px 2px; border: none; background: none; cursor: pointer;
font-family: inherit; text-decoration: none; border-radius: var(--ui-radius-s);
position: relative; }
.ui-tabbar-item > .ui-icon::before { background: var(--ui-text-secondary); }
.ui-tabbar-item > span { color: var(--ui-text-secondary); font-size: 10.5px;
font-weight: 500; line-height: 13px; }
.ui-tabbar-item.active > .ui-icon::before { background: var(--ui-text-accent); }
.ui-tabbar-item.active > span { color: var(--ui-text-accent); }
/* Розмір — варіант .xs у misc.css; тут лише накладання на іконку */
.ui-tabbar-item > .ui-badge { position: absolute; top: 2px; left: calc(50% + 6px); }
/* ---- Нижній лист «Ще» (мобільний перелив решти пунктів) ---- */
/* z-95: модалка (100) поверх відкритого листа, не залежить від порядку DOM */
.ui-sheet { z-index: 95; position: fixed; inset: 0; background: var(--ui-overlay);
display: flex; flex-direction: column; justify-content: flex-end;
opacity: 0; pointer-events: none; visibility: hidden;
transition: opacity 0.2s, visibility 0s 0.2s; }
.ui-sheet.active { opacity: 1; pointer-events: all; visibility: visible; transition: opacity 0.2s; }
.ui-sheet-body { position: relative; z-index: 1; background: var(--ui-surface);
border-radius: var(--ui-radius-xl) var(--ui-radius-xl) 0 0;
padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
max-height: 76dvh; overflow-y: auto;
transform: translateY(16px); transition: transform 0.2s; }
.ui-sheet.active .ui-sheet-body { transform: translateY(0); }
.ui-sheet-grip { width: 36px; height: 4px; border-radius: var(--ui-radius-pill);
background: var(--ui-border-strong); margin: 0 auto 14px; }
.ui-sheet .ui-modal-escape { z-index: 0; }
/* ---- Перемикання режимів ---- */
@media (max-width: 1023px) {
.ui-sidebar { display: none; }
.ui-appbar { display: flex; }
.ui-tabbar { display: block; }
.ui-main { margin-left: 0;
padding: 16px 16px calc(84px + env(safe-area-inset-bottom, 0px)); }
}
/* Фокус-режим (проходження тесту). Мобільний таб-бар прибирається: він
конфліктує з липкою панеллю дій квіза — обидва fixed bottom. Місце під
панель уже віддає .ui-quiz, тож низ контейнера повертається до звичайного.
Вмикається класом .ui-focus на . Специфічність (0,2,0) перекриває
базові правила режиму без !important — раніше кожна сторінка квіза
тримала власну копію цих двох рядків у @push('extra-styles'). */
@media (max-width: 1023px) {
body.ui-focus .ui-tabbar { display: none; }
body.ui-focus .ui-main { padding-bottom: 16px; }
}
/* Скрол-лок під відкритою модалкою/шитом (ставить драйвер ui.js) */
body.ui-lock { overflow: hidden; }
/* Тости не лягають під нижній таб-бар */
@media (max-width: 1023px) {
body.ui-shell .ui-toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
/* ---- Сторінки входу ----
Власний шел: одна колонка по центру екрана. Кабінетного сайдбару тут
немає, тож і .ui-main не годиться. */
.ui-auth { min-height: 100dvh; display: flex; align-items: center; justify-content: center;
padding: 40px 20px; background: var(--ui-surface-page); }
.ui-auth-form { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 20px; }
.ui-auth-logo { align-self: center; display: flex; }
.ui-auth-logo > img { height: 28px; width: auto; }
/* Заголовок і підпис під ним */
.ui-auth-head { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.ui-auth-head > p { color: var(--ui-text-primary); font-size: 24px; font-weight: 700;
line-height: 30px; letter-spacing: -0.4px; }
.ui-auth-head > span { color: var(--ui-text-secondary); font-size: 14px; line-height: 20px; }
/* Дрібний текст під формою: згода, посилання на реєстрацію */
.ui-auth-note { color: var(--ui-text-secondary); font-size: 13px; line-height: 18px; text-align: center; }
.ui-auth-note a { color: var(--ui-text-accent); text-decoration: none; }
@media (hover: hover) { .ui-auth-note a:hover { text-decoration: underline; } }
/* Розділювач «або» між основним входом і соціальним */
.ui-auth-or { display: flex; align-items: center; gap: 12px;
color: var(--ui-text-muted); font-size: 13px; line-height: 18px; }
.ui-auth-or::before, .ui-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--ui-border-subtle); }
/* znohub-ui · проходження тесту (сторінка тесту, Vue)
Класи .question-number і .responsive-question зберігаються як хуки
(їх читає aiChatPageContext через jQuery), #timer пише таймер. */
/* Ширина колонки тесту — одним значенням: її ділять і сама колонка, і
липка панель дій, інакше кнопки стають не під краями картки. Була 760
(довжина рядка для читання), ширину до контейнера сторінки задав дизайн —
тому й тягнеться з --ui-content-width, а не своїм числом. */
.ui-quiz { --ui-quiz-width: var(--ui-content-width); display: flex; flex-direction: column; gap: 20px; }
.ui-quiz--focus { max-width: var(--ui-quiz-width); margin-inline: auto; width: 100%; }
/* Палітра завжди на видноті: доти на телефоні вона ховалась у details, і
учень не бачив, скільки питань лишилось, поки не тапне. Обгортка більше
нічого не робить — вона є лише для того, щоб стрічка була прямою дитиною
колонки на будь-якій ширині. */
.ui-quiz-nav { display: contents; }
/* Мікропідказка формату питання */
.ui-quiz-hint { color: var(--ui-text-secondary); font-size: 13px; line-height: 18px; }
/* Бейдж «Збережено» */
.ui-save-badge { display: flex; align-items: center; gap: 4px;
opacity: 0; transition: opacity 0.25s; }
.ui-save-badge.show { opacity: 1; }
.ui-save-badge > .ui-icon::before { background: var(--ui-text-success); }
.ui-save-badge p { color: var(--ui-text-success); font-size: 12px; font-weight: 700; }
/* Оверлей «Час вийшов» */
.ui-quiz-timeup { position: fixed; inset: 0; z-index: 300; display: flex;
align-items: center; justify-content: center; background: var(--ui-overlay); }
.ui-quiz-timeup .box { background: var(--ui-surface); border-radius: var(--ui-radius-l);
padding: 28px 36px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.ui-quiz-timeup .box p { color: var(--ui-text-primary); font-size: 20px; font-weight: 700; }
.ui-quiz-timeup .box span { color: var(--ui-text-secondary); font-size: 14px; }
/* Шапка: назад · назва + тип · таймер */
.ui-quiz-top { display: flex; align-items: flex-start; gap: 12px; }
/* Назва тесту стоїть ПІД карткою: зверху вона зʼїдала висоту до першого
питання, а під час проходження це довідка, а не заголовок. Звідси тихий
сірий і центрування — вона підписує блок, а не відкриває сторінку. */
.ui-quiz-title { display: flex; flex-direction: column; align-items: center;
gap: 6px; min-width: 0; text-align: center; }
.ui-quiz-title > h1 { color: var(--ui-text-muted); font-size: 13px; font-weight: 400;
line-height: 18px; letter-spacing: 0; opacity: 0.4; }
.ui-quiz-timer { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none;
height: 32px; padding: 0 12px; border-radius: var(--ui-radius-pill);
background: var(--ui-tint-accent); }
.ui-quiz-timer > .ui-icon::before { background: var(--ui-text-accent); }
.ui-quiz-timer p { color: var(--ui-text-accent); font-size: 14px; font-weight: 700; }
/* .count-up — секундомір без ліміту: інформація, а не тиск, тож тихий
нейтральний вигляд замість акцентного. Стану danger у нього не буває. */
.ui-quiz-timer.count-up { background: var(--ui-surface-sunken); }
.ui-quiz-timer.count-up p { color: var(--ui-text-secondary); font-weight: 500; }
.ui-quiz-timer.count-up > .ui-icon::before { background: var(--ui-text-secondary); }
.ui-quiz-timer.danger { background: var(--ui-tint-danger); }
.ui-quiz-timer.danger p { color: var(--ui-text-danger); }
.ui-quiz-timer.danger > .ui-icon::before { background: var(--ui-text-danger); }
/* Палітра питань: сіре — без відповіді, зелене — є відповідь, синє — поточне.
Один рядок з горизонтальним скролом (колесо шле deltaY — перекладає скрипт);
стрілки по боках — кнопки кита, ховаються без переповнення і на мобільному */
/* Стрічка займає всю ширину, стрілки лежать НАКЛАДКАМИ на її краях —
так вони не з'їдають місце під клітинки. --fade-* керують і маскою, і
показом стрілок: обидва мають зʼявлятися рівно з того боку, куди ще є
куди скролити. Значення ставить скрипт сторінки класами can-left/can-right. */
.ui-quiz-palette-wrap { position: relative; min-width: 0;
--hold-l: 0px; --fade-l: 0px; --hold-r: 0px; --fade-r: 0px; }
/* hold — зона ПОВНОЇ прозорості: вона мусить накрити стрілку (36px) з
запасом, інакше клітинки проступають одразу за кнопкою. fade — де
стрічка вже проявилась повністю. */
/* hold — зона повної прозорості під стрілкою, fade — де стрічка вже цілком
видима. Було 42/78: стрілка 36 плюс запас, і градієнт з'їдав другу клітинку
майже повністю. Тепер прозорість рівно під стрілкою, а розтяжка коротка. */
.ui-quiz-palette-wrap.can-left { --hold-l: 36px; --fade-l: 52px; }
.ui-quiz-palette-wrap.can-right { --hold-r: 36px; --fade-r: 52px; }
/* Варіант зі стрілками В ПОТОЦІ, а не накладками: стрічка дат на
індивідуальних заняттях тримає обабіч скролера звичайні кнопки кита,
видимі завжди (їхній стан веде Alpine, а не класи can-*). Без цього
модифікатора обгортка — не флекс, і кнопки лягали б у стовпчик. */
.ui-quiz-palette-wrap.inline { display: flex; align-items: center; gap: 8px; }
.ui-quiz-palette-wrap.inline > .ui-quiz-palette { flex: 1; width: auto; }
/* Стрілка — того ж розміру і фону, що клітинка палітри */
.ui-quiz-palette-wrap > .ui-quiz-palette-arrow { position: absolute; top: 50%; z-index: 1;
transform: translateY(-50%); display: none; align-items: center;
justify-content: center; width: 36px; height: 36px; padding: 0;
border: 1.5px solid var(--ui-border-subtle);
border-radius: 10px; background: var(--ui-surface-sunken); cursor: pointer; transition-property: var(--ui-transition-props); transition-duration: var(--ui-duration-fast); transition-timing-function: var(--ui-ease); }
.ui-quiz-palette-wrap > .ui-quiz-palette-arrow:first-child { left: 0; }
.ui-quiz-palette-wrap > .ui-quiz-palette-arrow:last-child { right: 0; }
.ui-quiz-palette-wrap.can-left > .ui-quiz-palette-arrow:first-child { display: flex; }
.ui-quiz-palette-wrap.can-right > .ui-quiz-palette-arrow:last-child { display: flex; }
.ui-quiz-palette-arrow > .ui-icon::before { background: var(--ui-text-secondary); }
@media (hover: hover) {
.ui-quiz-palette-wrap > .ui-quiz-palette-arrow:hover { background: var(--ui-surface-sunken-hover); }
}
/* На дотику стрілок немає — там гортають пальцем, а роль підказки
«далі ще є» бере на себе маска. Специфічність тримаємо на рівні
правил .can-*, інакше вони переважили б це приховування. */
@media (max-width: 640px) {
.ui-quiz-palette-wrap.can-left > .ui-quiz-palette-arrow:first-child,
.ui-quiz-palette-wrap.can-right > .ui-quiz-palette-arrow:last-child,
.ui-quiz-palette-wrap > .ui-quiz-palette-arrow { display: none; }
}
/* Край гаситься маскою лише з того боку, куди ще є куди скролити: коли
стрічка вперлась у початок, зліва нічого не ховаємо. При нульових
--hold/--fade усі зупинки збігаються, і градієнт стає суцільно
непрозорим — маски фактично немає. */
.ui-quiz-palette { display: flex; flex-wrap: nowrap; gap: 8px; min-width: 0; width: 100%;
overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
mask-image: linear-gradient(90deg,
transparent 0, transparent var(--hold-l), #000 var(--fade-l),
#000 calc(100% - var(--fade-r)), transparent calc(100% - var(--hold-r)),
transparent 100%);
-webkit-mask-image: linear-gradient(90deg,
transparent 0, transparent var(--hold-l), #000 var(--fade-l),
#000 calc(100% - var(--fade-r)), transparent calc(100% - var(--hold-r)),
transparent 100%); }
.ui-quiz-palette::-webkit-scrollbar { display: none; }
.ui-quiz-palette > .item { display: flex; align-items: center; justify-content: center;
border: 1.5px solid var(--ui-border-subtle); padding: 0; font-family: inherit;
position: relative; flex: none;
width: 36px; height: 36px; border-radius: 10px; background: var(--ui-surface-sunken);
cursor: pointer; transition-property: var(--ui-transition-props); transition-duration: var(--ui-duration-fast); transition-timing-function: var(--ui-ease); }
/* Заповнені стани несуть колір самі — межа там тільки бруднила б край */
.ui-quiz-palette > .item.que, .ui-quiz-palette > .item.active { border-color: transparent; }
/* Тач-цілі ≥44px на дотикових екранах */
@media (pointer: coarse) {
.ui-quiz-palette > .item { width: 44px; height: 44px; }
.ui-quiz-palette-wrap > .ui-quiz-palette-arrow { width: 44px; height: 44px; }
.ui-blank-cell { width: 40px; height: 40px; }
.ui-blank-label { width: 40px; }
}
.ui-quiz-palette > .item > p { color: var(--ui-text-secondary); font-size: 14px; font-weight: 700; }
@media (hover: hover) {
.ui-quiz-palette > .item:hover { background: var(--ui-surface-sunken-hover); }
.ui-quiz-palette > .item.que:hover, .ui-quiz-palette > .item.active:hover { filter: brightness(0.94); }
}
.ui-quiz-palette > .item.que { background: var(--ui-tint-success); }
.ui-quiz-palette > .item.que > p { color: var(--ui-text-success); }
.ui-quiz-palette > .item.active { background: var(--ui-fill-accent); }
.ui-quiz-palette > .item.active > p { color: var(--ui-text-on-accent); }
/* Питання */
.ui-quiz-meta { display: flex; align-items: center; gap: 10px; }
/* Вигляд дає компонент .ui-tag.accent; тут лише гасіння легасі
.question-number зі style.css (клас — jQuery-хук: бордер #0583F2,
повна ширина) і успадкування типографіки тега вкладеним */
.ui-quiz-meta .question-number { border: 0; width: auto; max-width: none; }
.ui-quiz-meta .question-number > p { color: inherit; font-size: inherit;
font-weight: inherit; line-height: inherit; }
/* Довга назва навички не має ламати рядок надвоє: тег стискається, а хвіст
ховається під «…» (повний текст лишається в title). Підказка формату
коротка й важлива — їй flex: none, щоб не переносилась вона. */
.ui-quiz-meta > .ui-tag { min-width: 0; }
.ui-quiz-meta > .ui-tag > p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-quiz-meta > .ui-quiz-hint { flex: none; }
/* h4-кегль із розширеним інтерлінʼяжем, вага Regular — довгі питання НМТ
суцільним болдом важкі; акценти віддані strong */
.ui-quiz .responsive-question { color: var(--ui-text-primary); font-size: 17px; font-weight: 500;
line-height: 26px; letter-spacing: -0.2px; }
/* Легасі .responsive-question>p (#000, 18px, margin 25px) перекривало все —
абзаци успадковують типографіку контейнера */
.ui-quiz .responsive-question > p { color: inherit; font-size: inherit; font-weight: inherit;
line-height: inherit; letter-spacing: inherit; margin-bottom: 0; }
.ui-quiz .responsive-question > p + p { margin-top: 10px; }
.ui-quiz .responsive-question strong { font-weight: 700; }
.ui-quiz .responsive-question img { max-width: 100%; height: auto; border-radius: var(--ui-radius-m); }
/* Варіанти: рядок клікабельний, вибір дублюється в бланку */
.ui-quiz-variants { display: flex; flex-direction: column; gap: 8px; }
.ui-quiz-variant { display: flex; align-items: flex-start; gap: 12px; padding: 12px;
width: 100%; text-align: left; font-family: inherit;
border-radius: var(--ui-radius-m); background: var(--ui-surface-sunken); cursor: pointer;
transition-property: var(--ui-transition-props); transition-duration: var(--ui-duration-fast); transition-timing-function: var(--ui-ease); border: 1.5px solid var(--ui-border-card); }
/* Під курсором темнішає САМЕ межа, і саме сіра: акцентна тут зайнята
вибраною відповіддю (.active, .pair-picked), тож синій контур на
наведенні змазував би два різні стани. --ui-border-strong — єдиний
темніший сірий серед ролей меж.
.peer стоїть у ЦЬОМУ ж правилі, а не серед решти peer-станів нижче:
інакше він опинявся б у каскаді після .active і перемальовував синю
межу відповіді сірою. Тут же обидва стани мають однакову позицію, і
.active нижче перекриває їх обох — рівно як для власного ховера. */
@media (hover: hover) {
.ui-quiz-variant:hover,
.ui-quiz-variant.peer { background: var(--ui-surface-sunken-hover);
border-color: var(--ui-border-strong); }
}
.ui-quiz-variant.peer:focus-visible { background: var(--ui-surface-sunken-hover);
border-color: var(--ui-border-strong); }
.ui-quiz-variant.active { border-color: var(--ui-border-accent); background: var(--ui-tint-accent); }
.ui-quiz-variant.static { cursor: default; }
@media (hover: hover) { .ui-quiz-variant.static:hover { background: var(--ui-surface-sunken); } }
/* Пара в juxt: клік по лівій картці підсвічує її і «підморгує» правою
колонкою — натяк обрати відповідник; пару ставить скрипт через клітинку матриці */
/* Вигляд клікабельності — лише там, де парування справді підключене
скриптом (він ставить data-pairing). Без цього адаптивний тест
показував курсор і ховер на картках, клік по яких нічого не робить. */
.ui-quiz-pair[data-pairing] .ui-quiz-variant.static { cursor: pointer; }
@media (hover: hover) {
.ui-quiz-pair[data-pairing] .ui-quiz-variant.static:hover { background: var(--ui-surface-sunken-hover); }
}
.ui-quiz-variant.pair-picked { border-color: var(--ui-border-accent); background: var(--ui-tint-accent); }
.ui-quiz-variant.pair-picked > .ui-quiz-variant-letter { background: var(--ui-fill-accent); color: var(--ui-text-on-accent); }
.ui-quiz-pair.picking > .ui-quiz-variants:last-child .ui-quiz-variant {
animation: ui-pair-blink 1.1s ease-in-out infinite; }
@keyframes ui-pair-blink { 50% { border-color: var(--ui-border-accent); } }
/* Бейдж пари: цифра-відповідник на кружку літери правої картки */
.ui-pair-badge { position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px;
display: flex; align-items: center; justify-content: center; padding: 0;
border-radius: var(--ui-radius-pill); background: var(--ui-fill-accent);
color: var(--ui-text-on-accent); font-size: 10px; font-weight: 700; font-style: normal;
line-height: 1; }
@media (prefers-reduced-motion: reduce) {
.ui-quiz-pair.picking > .ui-quiz-variants:last-child .ui-quiz-variant {
animation: none; border-color: var(--ui-border-accent); }
}
.ui-quiz-variant-letter { position: relative; display: flex; align-items: center; justify-content: center; flex: none;
width: 32px; height: 32px; border-radius: var(--ui-radius-pill); background: var(--ui-surface);
color: var(--ui-text-primary); font-size: 14px; font-weight: 700; transition-property: var(--ui-transition-props); transition-duration: var(--ui-duration-fast); transition-timing-function: var(--ui-ease); }
.ui-quiz-variant.active > .ui-quiz-variant-letter { background: var(--ui-fill-accent); color: var(--ui-text-on-accent); }
.ui-quiz-variant-text { color: var(--ui-text-primary); font-size: 15px; font-weight: 400;
line-height: 22px; min-width: 0; padding-top: 4px; }
.ui-quiz-variant-text img { max-width: 100%; height: auto; }
/* Дві колонки juxt (цифри → букви) */
.ui-quiz-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media screen and (max-width: 720px) { .ui-quiz-pair { grid-template-columns: 1fr; } }
/* Бланк відповідей — як на папері НМТ */
.ui-quiz-blank { display: flex; flex-direction: column; gap: 10px; }
.ui-quiz-blank > p { color: var(--ui-text-secondary); font-size: 12px; font-weight: 700;
line-height: 16px; letter-spacing: 0.4px; text-transform: uppercase; }
.ui-blank-row { display: flex; gap: 8px; }
/* Підказка 50/50 стоїть останньою в рядку варіантів: .ui-btn.s — рівно
32px, тобто в один зріст із клітинками відповіді.
Вимкнена вона мусить лишатись наведомою: у title написано ЧОМУ
(підказки закінчились, ліміт на сьогодні, уже використана), а базове
pointer-events: none кнопки кита сховало б цю єдину відповідь. */
.ui-quiz-hint-btn { gap: 4px; }
.ui-quiz-hint-btn:disabled { pointer-events: auto; cursor: not-allowed; }
.ui-blank-label { display: flex; align-items: center; justify-content: center; width: 32px;
height: 32px; flex: none; color: var(--ui-text-muted); font-size: 13px; font-weight: 700; }
.ui-blank-cell { display: flex; flex: none; width: 32px; height: 32px; border-radius: 6px;
border: 1.5px solid var(--ui-border-strong); background: var(--ui-blank-surface); cursor: pointer;
padding: 0; position: relative; transition-property: var(--ui-transition-props); transition-duration: var(--ui-duration-fast); transition-timing-function: var(--ui-ease); opacity: 0.5; }
/* Ховер через прозорість, а не через колір межі: синім тут позначено
ВІДПОВІДЬ, тож перефарбування наведення плутало б два різні стани.
Порожня сітка стоїть приглушеною і проявляється під курсором — так
видно, куди саме стане позначка. Токен межі лишається
--ui-border-strong (3.17 на білому), але при 0.5 контур бачно слабше
за норму 3:1 — свідомий компроміс на користь тихої сітки. */
@media (hover: hover) { .ui-blank-cell:hover { opacity: 1; } }
/* Привид хрестика: показує, що саме тут стане позначка. Живе на ::before,
бо ::after зайнятий справжньою позначкою .active. Пульсацією відрізняється
від поставленої відповіді — та стоїть рівно. */
.ui-blank-cell::before { content: ""; position: absolute; inset: 4px; opacity: 0;
background: var(--ui-text-muted); transition: opacity 0.15s;
mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3L17 17M17 3L3 17' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
-webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3L17 17M17 3L3 17' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
@media (hover: hover) {
.ui-blank-cell:hover::before { opacity: 1; animation: ui-blank-ghost 1.4s ease-in-out infinite; }
}
/* Уже позначена клітинка привида не показує — там і так стоїть хрестик */
.ui-blank-cell.active::before { content: none; }
/* Пульсує РОЗМІР: прозорість уже зайнята появою привида, і два різні сенси
на одній властивості змазували б обидва. transform — композитний, тож
анімація не змушує браузер перераховувати розкладку. */
@keyframes ui-blank-ghost { 50% { transform: scale(0.72); } }
@media (prefers-reduced-motion: reduce) {
.ui-blank-cell:hover::before { animation: none; }
}
/* Звʼязок «варіант ↔ клітинка бланка». Наведення на один підсвічує другий
РІВНО тим самим станом, що й власний ховер елемента — тож видно, куди
стане хрестик, і навпаки. Пару зводить драйвер за data-quiz-peer
(спільна буква варіанта); реагує і на фокус із клавіатури. */
/* .ui-quiz-variant.peer — вище, у правилі ховера картки (див. коментар там) */
.ui-blank-cell.peer { opacity: 1; }
.ui-blank-cell.peer::before { opacity: 1; animation: ui-blank-ghost 1.4s ease-in-out infinite; }
.ui-blank-label.peer { color: var(--ui-text-primary); }
/* Позначена клітинка на повну: 0.5 — стан порожньої сітки, а відповідь
мусить читатися без наведення */
.ui-blank-cell.active { border-color: var(--ui-border-accent); opacity: 1; }
.ui-blank-cell.active::after { content: ""; position: absolute; inset: 4px;
background: var(--ui-border-accent);
mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3L17 17M17 3L3 17' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
-webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3L17 17M17 3L3 17' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
/* Сітка juxt/ordr: колонки задає Vue інлайном (repeat(N, 32px)) */
.ui-blank-matrix { display: flex; gap: 8px; max-width: 100%; overflow-x: auto;
-webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.ui-blank-matrix-rows { display: flex; flex-direction: column; gap: 8px; padding-top: 40px; }
.ui-blank-matrix-main { display: flex; flex-direction: column; gap: 8px; }
.ui-blank-matrix-head { display: grid; gap: 8px; }
.ui-blank-matrix-head > .ui-blank-label { height: 32px; width: 100%; }
.ui-blank-matrix-cells { display: grid; gap: 8px; }
.ui-blank-matrix-cells > .ui-blank-cell { width: 100%; height: auto; aspect-ratio: 1; }
/* Дії */
.ui-quiz-actions { display: flex; align-items: center; gap: 12px; }
.ui-quiz-actions .spacer { flex: 1; }
/* Панель дій квіза (.bar): на всю ширину мейна, зафіксована знизу 0;
вміст тримає внутрішня обгортка-колонка тієї ж ширини, що й .ui-quiz--focus —
кнопки мають стояти рівно під краями картки. Без .bar — простий
рядок (сторінка результатів). Місце під панель віддає padding колонки */
.ui-quiz-actions.bar { position: fixed; left: var(--ui-sidebar-width); right: 0; bottom: 0; z-index: 50;
padding: 12px 16px;
background: var(--ui-surface); border-top: 1px solid var(--ui-border-subtle); }
.ui-quiz-actions-inner { display: flex; align-items: center; gap: 12px;
width: 100%; max-width: var(--ui-quiz-width, var(--ui-content-width)); margin-inline: auto; min-width: 0; }
@media (max-width: 1023px) { .ui-quiz-actions.bar { left: 0; } }
.ui-quiz:has(> .ui-quiz-actions.bar) { padding-bottom: 64px; }
/* «Завершити» для мобільного живе всередині картки; на десктопі — в панелі дій */
.ui-quiz-finish-mob { display: none; }
@media screen and (max-width: 640px) {
/* Не переносимо: перенос кидав таймер окремим рядком під «Вийти з тесту»,
і шапка з'їдала 40 px висоти ні за що. Замість цього стискається сам
вихід (текст ховається під «…»), а бейдж збереження лишає саму галочку —
він і так зникає через секунду. Таймер не стискається ніколи. */
.ui-quiz-top { flex-wrap: nowrap; align-items: center; }
.ui-quiz-top > .ui-btn.ghost { min-width: 0; }
.ui-quiz-top > .ui-btn.ghost > p { min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.ui-quiz-top > .ui-save-badge > p { display: none; }
.ui-quiz-finish-mob { display: inline-flex; margin-top: 8px; }
.ui-quiz-finish-desk { display: none; }
.ui-quiz-back-label { display: none; } /* «Назад» у футері — лише стрілка */
/* Липкий футер: зона великого пальця, «Далі» — головна */
.ui-quiz-actions.bar { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
.ui-quiz-actions.bar .ui-quiz-actions-inner { gap: 10px; }
.ui-quiz-actions.bar .ui-quiz-actions-inner > .ui-btn:last-child { flex: 1; }
}
/* Лоадер завантаження тесту: у світлій темі був голий текст без стилів */
.ui-quiz .loader { display: flex; flex-direction: column; align-items: center; gap: 12px;
padding: 64px 24px; }
.ui-quiz .loader__text { color: var(--ui-text-secondary); font-size: 14px; line-height: 20px; }
/* ---- Сторінка результатів (results.js, Vue) ----
Класи станів шле JS і вони НЕ перейменовуються: палітра — true (усі бали) /
half (частково) / false (нуль) / порожньо (без відповіді) + active (поточне);
літери й клітинки відповіді — true («тут правильно») / active («учень обрав»). */
/* Сітка стат-плиток над розбором */
.ui-result-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
/* Палітра результатів */
.ui-quiz-palette > .item.true { background: var(--ui-tint-success); }
.ui-quiz-palette > .item.true > p { color: var(--ui-text-success); }
.ui-quiz-palette > .item.half { background: var(--ui-tint-warning); }
.ui-quiz-palette > .item.half > p { color: var(--ui-text-warning); }
.ui-quiz-palette > .item.false { background: var(--ui-tint-danger); }
.ui-quiz-palette > .item.false > p { color: var(--ui-text-danger); }
/* поточне питання — кільце поверх кольору стану */
.ui-quiz-palette > .item.true.active, .ui-quiz-palette > .item.half.active,
.ui-quiz-palette > .item.false.active {
box-shadow: inset 0 0 0 2px var(--ui-border-accent); background-clip: padding-box; }
@media (hover: hover) {
.ui-quiz-palette > .item.true:hover, .ui-quiz-palette > .item.half:hover,
.ui-quiz-palette > .item.false:hover { filter: brightness(0.94); }
}
/* Легенда кольорів */
.ui-result-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ui-result-legend > span { display: flex; align-items: center; gap: 6px;
color: var(--ui-text-secondary); font-size: 13px; line-height: 18px; }
.ui-result-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ui-result-legend .ok { background: var(--ui-text-success); }
.ui-result-legend .mid { background: var(--ui-text-warning); }
.ui-result-legend .bad { background: var(--ui-text-danger); }
.ui-result-legend .none { background: var(--ui-border-strong); }
/* Варіанти в розборі: getOptionClassname фарбує обрані/правильні */
.ui-quiz-variant.true { border-color: var(--ui-text-success); background: var(--ui-tint-success); }
.ui-quiz-variant.true > .ui-quiz-variant-letter { background: var(--ui-text-success); color: var(--ui-surface); }
.ui-quiz-variant.false { border-color: var(--ui-text-danger); background: var(--ui-tint-danger); }
.ui-quiz-variant.false > .ui-quiz-variant-letter { background: var(--ui-text-danger); color: var(--ui-surface); }
/* Літерна стрічка «Правильна відповідь» (sngl/mltp) */
.ui-result-answer { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-result-answer > .item { display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px; flex: none; padding: 0; cursor: default;
border-radius: 6px; border: 1.5px solid var(--ui-border-strong);
background: var(--ui-blank-surface); font-family: inherit; }
.ui-result-answer > .item > p { color: var(--ui-text-secondary); font-size: 13px; font-weight: 700; }
.ui-result-answer > .item.true { border-color: var(--ui-text-success); background: var(--ui-tint-success); }
.ui-result-answer > .item.true > p { color: var(--ui-text-success); }
.ui-result-answer > .item.true.active { background: var(--ui-text-success); }
.ui-result-answer > .item.true.active > p { color: var(--ui-surface); }
.ui-result-answer > .item.false.active { border-color: var(--ui-text-danger); background: var(--ui-text-danger); }
.ui-result-answer > .item.false.active > p { color: var(--ui-surface); }
/* Матриця результатів (ordr/juxt): геометрія бланка + стани */
.ui-result-matrix { display: flex; gap: 8px; max-width: 100%; overflow-x: auto;
-webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.ui-result-matrix .ui-rm-rows { display: flex; flex-direction: column; gap: 8px; }
.ui-result-matrix .ui-rm-rows > .item { display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px; flex: none;
color: var(--ui-text-secondary); font-size: 13px; font-weight: 700; }
.ui-result-matrix .ui-rm-main { display: flex; flex-direction: column; gap: 8px; }
.ui-result-matrix .ui-rm-head { display: grid; gap: 8px; }
.ui-result-matrix .ui-rm-head > .item { display: flex; align-items: center; justify-content: center;
height: 32px; color: var(--ui-text-secondary); font-size: 13px; font-weight: 700; }
.ui-result-matrix .ui-rm-cells { display: grid; gap: 8px; }
.ui-result-matrix .ui-rm-cells > .item { position: relative; width: 100%; aspect-ratio: 1;
border-radius: 6px; border: 1.5px solid var(--ui-border-strong);
background: var(--ui-blank-surface); }
.ui-result-matrix .ui-rm-cells > .item.true {
border-color: var(--ui-text-success); background: var(--ui-tint-success); }
.ui-result-matrix .ui-rm-cells > .item.true::after,
.ui-result-matrix .ui-rm-cells > .item.false.active::after { content: ""; position: absolute; inset: 5px;
background: var(--ui-text-success);
mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3L17 17M17 3L3 17' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
-webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3L17 17M17 3L3 17' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.ui-result-matrix .ui-rm-cells > .item.false.active {
border-color: var(--ui-text-danger); background: var(--ui-tint-danger); }
.ui-result-matrix .ui-rm-cells > .item.false.active::after { background: var(--ui-text-danger); }
/* Текстові відповіді: правильна проти учнівської */
.ui-result-text { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
@media screen and (max-width: 720px) { .ui-result-text { grid-template-columns: 1fr; } }
.ui-result-text > div { padding: 14px 16px; border-radius: var(--ui-radius-m);
background: var(--ui-surface-sunken); min-width: 0; }
.ui-result-text > div > p:first-child { font-size: 12px; font-weight: 700; line-height: 16px;
letter-spacing: 0.3px; text-transform: uppercase; color: var(--ui-text-secondary); margin-bottom: 6px; }
.ui-result-text .ui-result-text-body { color: var(--ui-text-primary);
font-size: 15px; line-height: 22px; overflow-wrap: break-word; }
.ui-result-text > .is-correct { background: var(--ui-tint-success); }
.ui-result-text > .is-correct > p:first-child { color: var(--ui-text-success); }
/* Заголовок блока відповіді */
.ui-result-key > p { color: var(--ui-text-primary); font-size: 14px; font-weight: 700;
line-height: 20px; margin-bottom: 10px; }
.ui-result-key { width: 100%; }
/* Стани true/false тримають тінт і під ховером static-варіанта */
@media (hover: hover) {
.ui-quiz-variant.static.true:hover { background: var(--ui-tint-success); }
.ui-quiz-variant.static.false:hover { background: var(--ui-tint-danger); }
}
/* Модалки пояснень: відео-фрейм 16:9 і довільний текст від редактора */
.ui-media-frame { position: relative; width: 100%; aspect-ratio: 16 / 9;
border-radius: var(--ui-radius-m); overflow: hidden; background: var(--ui-surface-inverse); }
.ui-media-frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ui-richtext { color: var(--ui-text-primary); font-size: 15px; line-height: 23px; }
.ui-richtext p { color: inherit; font-size: inherit; line-height: inherit; margin: 0 0 10px; }
.ui-richtext p:last-child { margin-bottom: 0; }
.ui-richtext img { max-width: 100%; height: auto; border-radius: var(--ui-radius-m); }
/* Права дія в мета-рядку питання (кнопка підказки, тег результату): той самий
auto-маргін, що в шапці розділу й титульному рядку. Три сторінки тримали
це інлайном. */
.ui-quiz-meta > .ui-btn, .ui-quiz-meta > .ui-tag:last-child { margin-left: auto; flex: none; }
/* І сам мета-блок, коли він стоїть праворуч у верхньому рядку питання */
.ui-quiz-top > .ui-quiz-meta { margin-left: auto; flex: none; }
/* znohub-ui · AI-помічник: кнопка-трансформер.
Одна fixed-коробка в правому нижньому куті: згорнута — пігулка «Помічник»,
розгорнута — вікно чату. Стан тримає клас .is-open, і більше ніде.
Над шелом (сайдбар/таббар 40) і над дропзоною планера (90), під модалками
кіта (100) — звідси 95: openPremiumModal кладе модалку поверх чату.
Чому зміна розміру, а не transform: scale — між станами 136×40 і 400×620,
тобто ×3 по ширині й ×15 по висоті. Такий неоднорідний scale розтягує
текст і робить із радіуса 24px еліпс. Якір right/bottom робить роботу
transform-origin безкоштовно: коробка й так росте вгору-вліво.
Ціну такого підходу — переверстку щокадру — знімає .ui-chat-shell: вміст
заморожений у розмірі ВІДКРИТОГО стану, оболонка його лише підрізає. Тому
під час анімації не переносяться рядки в бульбашках і не смикається
внутрішній скрол: його геометрія взагалі не змінюється.
Анімаційного стану в JS немає: видимість шарів перемикає ідіома
visibility 0s , як у .ui-modal. Жодного transitionend — під
prefers-reduced-motion (transition: none) подія не прилетіла б ніколи,
і віджет залип би назавжди. */
.ui-chat {
/* Розміри відкритого стану — змінними: їх читає і коробка, і заморожена
оболонка, і вони мусять збігатися до пікселя. */
--ui-chat-w: min(400px, calc(100vw - 32px));
--ui-chat-h: min(620px, calc(100vh - 48px));
/* Ширина пігулки — константа: transition до width: auto не буває.
136 = падинги 32 + іскра 20 + падинги підпису 8 + «Помічник» ~76. */
--ui-chat-fab-w: 136px;
--ui-chat-fab-h: 40px;
position: fixed; right: 24px; bottom: 24px; z-index: 95;
width: var(--ui-chat-fab-w); height: var(--ui-chat-fab-h);
border-radius: var(--ui-radius-pill);
background: var(--ui-fill-accent);
/* Контур — inset-тінню, а не border: у платформи box-sizing: border-box,
і border забрав би піксель з padding-box, через що заморожена оболонка
вилазила б під кліп. Обидва шари є в ОБОХ станах: тінь із різною
кількістю шарів не інтерполюється, а --ui-shadow-card-hover у темній
темі взагалі none — звідси й спільне акцентне світіння замість двох
різних тіней. */
box-shadow: var(--ui-shadow-accent), inset 0 0 0 1px transparent;
overflow: hidden;
/* ЗАКРИТТЯ ~200 мс. Першою сідає висота, ширина наздоганяє: шлях по
вертикалі вдвічі довший, і без зсуву рух читався б як вертикальний
постріл. Крива — швидкий старт із гальмуванням: коробка не йде з
екрана, вона приїжджає в інший розмір спокою, тож прискорення в кінці
било б у стіну. */
transition:
height 200ms cubic-bezier(0.3, 0, 0.2, 1),
bottom 200ms cubic-bezier(0.3, 0, 0.2, 1),
width 180ms cubic-bezier(0.3, 0, 0.2, 1) 30ms,
border-radius 160ms ease-in,
background-color 140ms ease-in,
transform 0.15s;
}
.ui-chat.is-open {
width: var(--ui-chat-w); height: var(--ui-chat-h);
border-radius: var(--ui-radius-xl);
background: var(--ui-surface);
box-shadow: var(--ui-shadow-accent), inset 0 0 0 1px var(--ui-border-card);
/* ВІДКРИТТЯ ~330 мс, тобто довше за закриття у 1,6 раза. На відкритті рух
несе інформацію — звідки з'явилось і в що перетворилось; на закритті
рішення вже ухвалене, і затримка читається як гальмо. Але задирати
відношення не можна: коробка не зникає, а повертається у видиму кнопку,
і надто швидке закриття прочиталось би як «панель щезла», а не
«згорнулась». Крива easeOutQuint: сильний старт продає відгук, довгий
доїзд — вагу вікна. Пружину кіта сюди не беремо: перельот на мить
показав би порожню поверхню повз прибитий у куті вміст. */
transition:
width 240ms cubic-bezier(0.22, 1, 0.36, 1),
height 300ms cubic-bezier(0.22, 1, 0.36, 1) 30ms,
bottom 300ms cubic-bezier(0.22, 1, 0.36, 1) 30ms,
border-radius 200ms ease-out,
background-color 120ms ease-out;
}
@media (hover: hover) {
.ui-chat:not(.is-open):hover { transform: translateY(-2px);
box-shadow: var(--ui-shadow-accent-hover), inset 0 0 0 1px transparent; }
}
.ui-chat:not(.is-open):active { transform: translateY(1px); }
/* Кільце фокуса — на оболонці: обличчя лежить під overflow: hidden, і власний
outline йому зрізало б. Свій outline елемент не кліпає. */
.ui-chat:has(.ui-chat-face:focus-visible) {
outline: 2px solid var(--ui-focus-ring); outline-offset: 2px; }
/* ---- Обличчя: те, що видно згорнутим ----
Прозоре: заливку тримає сама коробка, тут лише іскра з підписом. Через це
на закритті фон устигає стати акцентним раніше, ніж проявиться підпис, —
і жоден піксель тексту не приземляється на білу поверхню. */
.ui-chat-face { position: absolute; inset: 0; z-index: 1;
display: flex; align-items: flex-end; justify-content: flex-end;
padding: 0; border: none; background: none; cursor: pointer;
border-radius: inherit; font-family: inherit;
color: var(--ui-text-on-accent);
opacity: 1; visibility: visible;
transition: opacity 140ms ease 120ms, visibility 0s; }
/* visibility: hidden прибирає обличчя і з таб-порядку, і з дерева
доступності — саме тому тут не потрібен ні inert, ні атрибут hidden. */
.ui-chat.is-open .ui-chat-face { opacity: 0; visibility: hidden;
pointer-events: none;
transition: opacity 100ms ease, visibility 0s 100ms; }
/* Прибите в куті: підпис стоїть на місці, а не їде разом із коробкою */
.ui-chat-face-in { display: flex; align-items: center; justify-content: center;
flex: none; width: var(--ui-chat-fab-w); height: var(--ui-chat-fab-h); }
.ui-chat-face-in > p { color: inherit; font-size: 14px; font-weight: 500;
line-height: 20px; padding: 0 4px; white-space: nowrap; }
.ui-chat-fab-icon { display: flex; width: 20px; height: 20px; flex: none; }
.ui-chat-fab-icon > svg { width: 100%; height: 100%; fill: currentColor;
animation: ui-chat-spark 5s ease-in-out infinite; }
/* Іскра підморгує раз на 5 секунд: стискається на пів-оберті й повертається
на повному. Рух займає останню п'яту частину циклу — решту часу кнопка
стоїть спокійно, інакше вона б смикалась в кутку весь час. */
@keyframes ui-chat-spark {
0%, 80% { transform: rotate(0) scale(1); }
90% { transform: rotate(180deg) scale(0.7); }
100% { transform: rotate(360deg) scale(1); }
}
/* У відкритому стані іскра не крутиться: обличчя сховане, а зайва анімація
на композиторі б'ється з ростом коробки. */
.ui-chat.is-open .ui-chat-fab-icon > svg { animation: none; }
/* ---- Оболонка: вміст панелі, заморожений у розмірі відкритого стану ---- */
.ui-chat-shell { position: absolute; right: 0; bottom: 0; z-index: 0;
width: var(--ui-chat-w); height: var(--ui-chat-h);
display: flex; flex-direction: column;
opacity: 0; visibility: hidden;
transition: opacity 90ms ease, visibility 0s 90ms; }
/* Затримка 140 мс: коробка спершу забирає простір і лише потім він
заповнюється. Без затримки видно підрізане місиво в пігулці. */
.ui-chat.is-open .ui-chat-shell { opacity: 1; visibility: visible;
transition: opacity 200ms ease 140ms, visibility 0s; }
/* Друга хвиля: рама (шапка, поле, примітка) з'являється разом з оболонкою, а
стрічка підіймається на 8px трохи пізніше. Дві впевнені хвилі читаються
дорожче за три обережні; порядок «згори вниз» тут навмисно НЕ береться —
коробка росте знизу вгору, і зустрічний стагер видає склейку з двох
різних анімацій. */
.ui-chat-body { transform: translateY(8px); }
.ui-chat.is-open .ui-chat-body { transform: none;
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1) 160ms; }
.ui-chat-head { display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex: none; padding: 16px 18px;
border-bottom: 1px solid var(--ui-border-subtle); }
.ui-chat-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-chat-title > div { min-width: 0; }
.ui-chat-title b { display: block; color: var(--ui-text-primary);
font-size: 15px; font-weight: 700; line-height: 20px; }
.ui-chat-title small { display: block; color: var(--ui-text-secondary);
font-size: 11.5px; line-height: 16px; }
/* Аватар — фірмова іскра SPARKS AI (узгоджений виняток із правила Iconly) */
.ui-chat-avatar { display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; flex: none; border-radius: 50%;
background: var(--ui-tint-accent); }
.ui-chat-avatar > svg { width: 20px; height: 20px; fill: var(--ui-text-accent); }
/* Хрестик — той самий привид, що в модалці, лише без абсолютного позиціювання */
.ui-chat-head > .ui-modal-close { position: static; flex: none; }
/* ---- Стрічка повідомлень ---- */
.ui-chat-body { flex: 1; min-height: 0; overflow-y: auto;
display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.ui-chat-msg { max-width: 86%; padding: 12px 14px; border-radius: var(--ui-radius-l);
font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.ui-chat-msg > p + p { margin-top: 8px; }
.ui-chat-msg > p > strong { font-weight: 700; }
/* Помічник — утоплена поверхня зліва, кут біля аватара зрізаний */
.ui-chat-msg.bot { align-self: flex-start; background: var(--ui-surface-sunken);
color: var(--ui-text-primary); border-bottom-left-radius: var(--ui-radius-s); }
/* Учень — акцентна заливка справа */
.ui-chat-msg.me { align-self: flex-end; background: var(--ui-fill-accent);
color: var(--ui-text-on-accent); border-bottom-right-radius: var(--ui-radius-s); }
/* Рядок контексту під привітанням: тихий, без власної коробки */
.ui-chat-ctx { margin-top: 8px; color: var(--ui-text-secondary);
font-size: 12px; line-height: 16px; }
/* Помилка генерації: текст небезпеки на тихому тінті, щоб бульбашка
лишалась бульбашкою, а не перетворювалась на алерт */
.ui-chat-msg.failed { background: var(--ui-tint-danger); color: var(--ui-text-danger); }
/* «Друкує»: три крапки в ритмі, у тій самій бульбашці помічника */
.ui-chat-msg.typing { display: flex; align-items: center; gap: 4px; padding: 14px 16px; }
.ui-chat-msg.typing > span { width: 6px; height: 6px; border-radius: 50%;
background: var(--ui-text-muted); animation: ui-chat-dot 1s ease-in-out infinite; }
.ui-chat-msg.typing > span:nth-child(2) { animation-delay: 0.15s; }
.ui-chat-msg.typing > span:nth-child(3) { animation-delay: 0.3s; }
/* Підпис для скрінрідера не крапка: ні розміру, ні ритму */
.ui-chat-msg.typing > .ui-sr-only { width: auto; height: auto;
background: none; animation: none; }
@keyframes ui-chat-dot {
0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
/* ---- Підказки (порожній стан) ----
Колонка чипів на всю ширину: це не фільтр, а варіанти першого питання,
тож вирівняні ліворуч і читаються як список. */
.ui-chat-prompts { display: flex; flex-direction: column; align-items: stretch;
gap: 6px; margin-top: 4px; }
.ui-chat-prompts > .ui-chip { justify-content: flex-start; height: auto;
padding: 9px 14px; text-align: left; }
.ui-chat-prompts > .ui-chip > .ui-icon { flex: none; }
.ui-chat-prompts > .ui-chip > .ui-icon::before { background: var(--ui-text-accent); }
/* ---- Поле вводу ---- */
.ui-chat-form { display: flex; align-items: center; gap: 8px; flex: none;
padding: 12px 16px; border-top: 1px solid var(--ui-border-subtle); }
.ui-chat-form > input { flex: 1; min-width: 0; height: 40px; padding: 0 14px;
border: 1px solid var(--ui-border-field); border-radius: var(--ui-radius-pill);
background: var(--ui-surface); color: var(--ui-text-primary);
font-family: inherit; font-size: 14px; line-height: 20px; transition-property: var(--ui-transition-props); transition-duration: var(--ui-duration-fast); transition-timing-function: var(--ui-ease); }
.ui-chat-form > input::placeholder { color: var(--ui-text-muted); }
.ui-chat-form > input:focus { outline: none; border-color: var(--ui-border-accent); }
/* ---- Примітка під полем ---- */
.ui-chat-note { flex: none; padding: 0 16px 12px; color: var(--ui-text-muted);
font-size: 11px; line-height: 15px; }
/* .locked — питання лише на преміумі; .limit — денний ліміт вичерпано */
.ui-chat-note.locked, .ui-chat-note.limit { color: var(--ui-text-accent); }
/* .error — POST не пройшов; текст лишився в полі, і рядок каже чому */
.ui-chat-note.error { color: var(--ui-text-danger); }
@media screen and (max-width: 640px) {
/* На вузькому підпис зайвий: пігулка стає круглою іконкою */
.ui-chat { --ui-chat-w: calc(100vw - 16px); --ui-chat-h: min(78vh, 560px);
--ui-chat-fab-w: 52px;
right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.ui-chat-face-in > p { display: none; }
/* Згорнута пігулка стоїть НАД таббаром, відкрита панель його накриває:
поки триває розмова, навігація зайва. Тому bottom анімується разом із
розміром — без цього кнопка й панель мали б різні якорі (76px по
вертикалі), і «морф із кутка» був би неправдою. У фокус-режимі
таббара немає, тож і зсуву. */
body:not(.ui-focus) .ui-chat:not(.is-open) {
bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
/* Розмір перемикається миттєво, перехресний фейд лишається — та сама
модель, що в .ui-modal. Reduced motion — претензія до вестибулярного
ефекту від великого переміщення, а не до прозорості: миттєвий cut
розірвав би зв'язок «я натиснув — з'явилось вікно». */
.ui-chat, .ui-chat.is-open { transition: none; }
.ui-chat-body, .ui-chat.is-open .ui-chat-body { transform: none; transition: none; }
.ui-chat-shell { transition: opacity 120ms ease, visibility 0s 120ms; }
.ui-chat.is-open .ui-chat-shell { transition: opacity 120ms ease, visibility 0s; }
.ui-chat-face { transition: opacity 120ms ease, visibility 0s; }
.ui-chat.is-open .ui-chat-face { transition: opacity 120ms ease, visibility 0s 120ms; }
.ui-chat-msg.typing > span, .ui-chat-fab-icon > svg { animation: none; }
}
/* znohub-ui · базові правила документа.
Збирається ОСТАННІМ: тут лежить те, що має перемагати будь-який компонент
за порядком каскаду (специфічність у кіта скрізь однакова — один клас). */
/* Атрибут hidden мусить ховати навіть те, чому компонент задав display.
Без цього рядка `` лишається видимим:
`.ui-alert { display: flex }` і `[hidden] { display: none }` браузера
мають однакову вагу, і виграє те, що пізніше в каскаді. */
[hidden] { display: none; }
/* Смуга прокрутки документа. Легасі малює повзунок власним синім (#0583F2 —
акцент лендингу минулого покоління) у style.css і dark-style.css; беремо
акцент бібліотеки, щоб смуга не була єдиним місцем зі старим кольором і
темувалася разом з рештою. Без префікса ui- і не компонент — це хром
документа, як і [hidden] вище, тому й лежить у базі.
Міняємо ЛИШЕ колір: ширину, радіус і трек лишає легасі, тож правило не
стає прихованим редизайном смуги. */
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-corner,
::-webkit-resizer { background: var(--ui-fill-accent); }