/* ==========================================================================
Ритм · дизайн-система · этап 2
Подключается ПОСЛЕ app.css (или дописывается в его конец).
Разметку не трогает: только стили поверх существующих классов.
Цвета — только переменные палитры «Океан» (этап 1) и смеси из них,
поэтому тёмная тема работает без отдельных блоков.
========================================================================== */
/* ---------- 0. Шрифт заголовков -------------------------------------------
Один файл, 11 КБ: Onest 700, латиница + кириллица, подмножество.
font-display: optional — если шрифт не успел за ~100 мс (плохая сеть в
зале), экран рисуется системным и НЕ перерисовывается потом. Со второго
захода файл уже в кэше (service worker) и приходит мгновенно. */
@font-face {
font-family: "Ritm Head";
src: url("/static/fonts/onest-700-cyr-lat.woff2") format("woff2");
font-weight: 700; font-style: normal;
font-display: optional;
}
/* ---------- 1. Токены ----------------------------------------------------- */
:root {
/* шрифты */
--font-head: "Ritm Head", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
/* шрифтовая шкала: размер / межстрочный / начертание */
--fs-title: 24px; --lh-title: 1.2; /* заголовок экрана, 700, шрифт заголовков */
--fs-sub: 17px; --lh-sub: 1.3; /* подзаголовок: карточка, упражнение, 600 */
--fs-body: 16px; --lh-body: 1.45; /* текст, 400 */
--fs-cap: 13px; --lh-cap: 1.4; /* подпись, 400, --muted */
--fs-num: 15px; --lh-num: 1.3; /* число в таблице, 600, tabular-nums */
--fs-big: 28px; --lh-big: 1.1; /* крупное число в карточке, 650 */
--fs-label: 12px; --lh-label: 1.2; /* метка, чип, надзаголовок, 600 */
/* меньше 12 px в интерфейсе нет ничего */
/* отступы: шаг 4 */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
/* радиусы */
--r-xs: 6px; /* код, мелкие плашки */
--r-s: 10px; /* поля, мелкие кнопки, сегменты */
--r-m: 14px; /* карточки, кнопки */
--r-l: 20px; /* шторка, большие панели */
--r-pill: 999px; /* чипы, табы */
--radius: var(--r-m); /* старое имя — на него завязан app.css */
/* касание */
--tap: 44px; /* минимум для всего нажимаемого */
--tap-l: 48px; /* главные действия, поля ввода */
/* производные цвета: считаются из палитры, поэтому верны в обеих темах */
--border-strong: color-mix(in srgb, var(--muted) 72%, var(--surface)); /* рамка поля ≥ 3:1 */
--primary-soft: color-mix(in srgb, var(--primary) 13%, var(--surface));
--press: color-mix(in srgb, var(--text) 9%, var(--surface));
--primary-press: color-mix(in srgb, var(--primary) 84%, var(--text));
--ring: 0 0 0 3px color-mix(in srgb, var(--primary) 32%, transparent);
--ring-low: 0 0 0 3px color-mix(in srgb, var(--low) 30%, transparent);
--shadow-1: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
--shadow-2: 0 10px 30px color-mix(in srgb, #000 28%, transparent);
}
/* ---------- 2. База и типографика ---------------------------------------- */
body { font: 400 var(--fs-body)/var(--lh-body) var(--font-ui); }
h1 {
font-family: var(--font-head); font-weight: 700;
font-size: var(--fs-title); line-height: var(--lh-title);
letter-spacing: -0.015em; text-wrap: balance;
}
h2, .meal h2 { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 600; }
.sub { font-size: 14px; line-height: 1.35; color: var(--muted); text-wrap: pretty; }
.section-title {
font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600;
letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
margin: var(--sp-8) 0 var(--sp-3);
}
.note, .plan, .was, .meta, .row .meta, .ex-type-about, .reps-label, .lab-norm, .lab-hint,
.task-why, .task-next, .mode-about, .field .hint, .cfg-hint, .meta-ish {
font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--muted); opacity: 1;
}
/* подписи мельче 12 px раньше были в таблицах и полях — поднимаем */
.cap, .grid4 .cap, .add-scheme .cap, .ex-row .cap, .cfg-cell span, .chk .unit,
.chk-title, .chk-block .chk-title, .pt-head, table.data th .ths, .card .hint-dim {
font-size: var(--fs-label); opacity: 1; color: var(--muted);
}
.num, .value, td, .pt-w, .pt-m, .grp-gain, .task-line, .lab-value, .chart-values {
font-variant-numeric: tabular-nums;
}
/* .dim был opacity .35 — текст терял контраст до 2:1. Теперь это обычная подпись. */
.dim { opacity: 1; color: var(--muted); }
a { color: var(--primary); }
/* ---------- 3. Шапка экрана с кнопкой возврата ---------------------------
Дефект: подзаголовок переносился и подходил вплотную к кнопке темы.
Решение: шапка — сетка. Заголовок в одной строке с кнопками,
подзаголовок — своей строкой на всю ширину, под кнопками. */
header {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center; column-gap: var(--sp-3); row-gap: 2px;
margin: var(--sp-1) 0 var(--sp-5);
}
header > div { display: contents; }
header > a.icon-btn:first-child { grid-column: 1; grid-row: 1; }
header h1 { grid-column: 2; grid-row: 1; min-width: 0; }
header > div > :not(h1) { grid-column: 2 / -1; min-width: 0; }
header > button.icon-btn, header > .icon-btn:not(:first-child) { grid-column: 3; grid-row: 1; }
header > .net-dot { grid-column: 4; grid-row: 1; margin: 0 0 0 -4px; }
/* без кнопки «назад» (главные вкладки) — на одну колонку меньше */
header:not(:has(> a.icon-btn:first-child)) { grid-template-columns: minmax(0, 1fr) auto auto; }
header:not(:has(> a.icon-btn:first-child)) h1 { grid-column: 1; }
header:not(:has(> a.icon-btn:first-child)) > div > :not(h1) { grid-column: 1 / -1; }
header:not(:has(> a.icon-btn:first-child)) > button.icon-btn { grid-column: 2; }
header:not(:has(> a.icon-btn:first-child)) > .net-dot { grid-column: 3; }
.sub.name-line { gap: 2px 8px; }
.name-text { font-weight: 600; color: var(--text); }
/* ---------- 4. Кнопки: основная · обычная · мелкая -----------------------
Состояния: обычное · нажатое (.is-press от app.js и :active) ·
недоступное (:disabled, [aria-disabled]) · загрузка (.is-busy) */
.btn {
min-height: var(--tap); padding: 0 var(--sp-4); gap: var(--sp-2);
border-radius: var(--r-m); border: 1px solid var(--border);
background: var(--surface); color: var(--text);
font: 600 15px/1.2 var(--font-ui); text-align: center;
}
.btn.primary { min-height: var(--tap-l); background: var(--primary); color: var(--on-primary);
border-color: transparent; }
.btn.primary:hover { opacity: 1; background: var(--primary); }
.btn.is-press, .btn:active { background: var(--press); }
.btn.primary.is-press, .btn.primary:active { background: var(--primary-press); }
.btn.wide { min-height: var(--tap-l); }
.mini {
min-height: var(--tap); min-width: var(--tap); padding: 0 var(--sp-3);
border-radius: var(--r-s); font: 600 var(--fs-cap)/1 var(--font-ui);
background: var(--surface-2); color: var(--text); border: 1px solid transparent;
}
.mini.is-press, .mini:active:not(:disabled) { background: var(--press); }
.btn:disabled, .btn[aria-disabled="true"], .mini:disabled, .mini[aria-disabled="true"],
.icon-btn:disabled, .auth button:disabled {
opacity: 1; cursor: default; pointer-events: none;
background: var(--surface-2); color: color-mix(in srgb, var(--muted) 70%, var(--surface-2));
border-color: transparent; box-shadow: none;
}
.icon-btn { width: var(--tap); height: var(--tap); flex: 0 0 var(--tap); border-radius: var(--r-s);
background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.icon-btn.is-press, .icon-btn:active { background: var(--press); }
.icon-btn svg { width: 22px; height: 22px; }
.is-busy::after { width: 18px; height: 18px; margin: -9px 0 0 -9px; border-width: 2.5px; }
/* нажатие: мгновенно, без въезда; фильтр яркости больше не нужен — есть свой цвет */
.is-press { filter: none; }
:root[data-theme="light"] .is-press { filter: none; }
/* ряд кнопок */
.actions { gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.btn-row { gap: var(--sp-2); }
/* ---------- 5. Выбор периода и табы ---------------------------------------
Дефект: кнопки периода переносились в два ряда, последняя висела одна.
Решение: сегментный переключатель — всегда одна строка, ячейки поровну. */
.tab {
display: inline-flex; align-items: center; justify-content: center;
min-height: var(--tap); padding: 0 var(--sp-4); border-radius: var(--r-pill);
font: 600 14px/1 var(--font-ui); color: var(--muted);
border: 1px solid var(--border); background: var(--surface);
}
.tab.active { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.tab.is-press { background: var(--press); }
.tabs { gap: var(--sp-2); margin-bottom: var(--sp-3); }
.tabs.block-tabs {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
padding-right: 28px;
}
.tabs:not(.block-tabs):has(> .tab[href*="period="]),
.actions:has(> .btn[href*="days="]) {
display: flex; flex-wrap: nowrap; gap: 2px; padding: 3px;
background: var(--surface-2); border-radius: var(--r-m);
overflow: visible; -webkit-mask-image: none; mask-image: none;
}
.tabs:not(.block-tabs):has(> .tab[href*="period="]) > .tab,
.actions:has(> .btn[href*="days="]) > .btn {
flex: 1 1 0; min-width: 0; min-height: var(--tap); padding: 0 var(--sp-1);
border: 0; border-radius: calc(var(--r-m) - 3px); background: transparent; box-shadow: none;
color: var(--muted); font: 600 14px/1 var(--font-ui);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tabs:not(.block-tabs):has(> .tab[href*="period="]) > .tab.active,
.actions:has(> .btn[href*="days="]) > .btn.primary {
background: var(--primary); color: var(--on-primary);
}
/* ---------- 6. Поля ввода --------------------------------------------------
Состояния: обычное · фокус · ошибка ([aria-invalid], :user-invalid) · недоступное */
.field input, .field select, input.unit, select.unit,
.ex-row input, .ex-row select, .reps-row .rep, .grid4 input, .grid4 select,
.add-scheme input, .add-scheme select, .cfg-cell input, .type-pick, .mode-pick,
.range-form input[type=date], .auth input, .date-btn {
background-color: var(--surface); color: var(--text);
border: 1px solid var(--border-strong); border-radius: var(--r-s);
font-family: var(--font-ui);
}
.field input, .field select, .ex-row input, .ex-row select, .grid4 input, .grid4 select,
.add-scheme input, .add-scheme select, .auth input { min-height: var(--tap-l); font-size: 17px; }
.reps-row .rep { min-height: 52px; font-size: 18px; font-weight: 600; }
.cfg-cell input, .range-form input[type=date], input.unit, select.unit, .type-pick, .mode-pick {
min-height: var(--tap); font-size: 15px;
}
.field label { font-size: 14px; color: var(--muted); }
.field input:focus, .field select:focus, input.unit:focus, select.unit:focus,
.ex-row input:focus, .ex-row select:focus, .reps-row .rep:focus, .grid4 input:focus,
.grid4 select:focus, .add-scheme input:focus, .add-scheme select:focus, .cfg-cell input:focus,
.type-pick:focus, .mode-pick:focus, .range-form input:focus, .auth input:focus {
outline: none; border-color: var(--primary); box-shadow: var(--ring);
}
input[aria-invalid="true"], select[aria-invalid="true"], input:user-invalid {
border-color: var(--low); box-shadow: var(--ring-low);
}
.field .error, .auth .error { color: var(--low); font-size: var(--fs-cap); }
input:disabled, select:disabled {
background-color: var(--surface-2); color: var(--muted); border-color: var(--border);
}
input::placeholder { color: color-mix(in srgb, var(--muted) 80%, var(--surface)); }
/* Подходы: пятое поле уезжало за правый край карточки */
.reps-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
.reps-row .rep { min-width: 0; width: 100%; }
/* ---------- 7. Карточка --------------------------------------------------- */
.card, .ex-card, .lab-card, .total, .rename-panel, .howto, .report-body {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-m); box-shadow: var(--shadow-1);
}
.card, .ex-card { padding: var(--sp-4); }
.ex-card { gap: var(--sp-3); }
/* Карточка-ссылка («Вес») красилась как ссылка: синий подчёркнутый текст */
a.card { display: block; color: inherit; text-decoration: none; }
a.card.is-press, a.card:active { background: var(--press); transform: none; }
.card .label { font-size: var(--fs-cap); color: var(--muted); }
.card .value { font-size: var(--fs-big); line-height: var(--lh-big); font-weight: 650;
letter-spacing: -.02em; margin-top: var(--sp-1); }
.card .delta { font-size: var(--fs-cap); margin-top: var(--sp-1); }
.cards { gap: var(--sp-3); margin-bottom: var(--sp-5); }
.row { min-height: 56px; padding: var(--sp-3) var(--sp-4); gap: var(--sp-3);
border-radius: var(--r-m); border-color: var(--border); }
.row .name { font-size: var(--fs-body); font-weight: 600; line-height: 1.3; }
/* .grow в app.css — и раскладка строки, и «зелёный = рост». Из-за этого названия
строк («Шаги», «Тренировки») красились в цвет нормы. Раскладке цвет не нужен. */
.row > .grow { color: var(--text); }
a.row.is-press, a.row:active { background: var(--press); transform: none; }
.list { gap: var(--sp-2); }
/* План тренера: номер шага всегда слева, текст — колонкой справа.
.row переносит содержимое (flex-wrap: wrap), и длинное название не влезало
рядом с кружком — уезжало строкой ниже, а короткое («Разгибание ног сидя»)
оставалось на одной строке с номером. Из-за этого левый край карточек
скакал. flex-basis: 0 снимает перенос: текст занимает остаток ширины
при любой длине названия. */
.row.task-row { flex-wrap: nowrap; align-items: flex-start; }
.row.task-row > .grow { flex: 1 1 0; min-width: 0; }
.row.task-row > .step { margin-top: 1px; }
/* Задание на сегодня — главный блок главного экрана */
.task { border-radius: var(--r-s); padding: var(--sp-3);
background: var(--primary-soft);
border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border)); }
.task-label { font-size: var(--fs-label); color: var(--muted); }
.task-line { font-size: 18px; line-height: 1.3; font-weight: 700; }
.task-more summary { min-height: var(--tap); display: flex; align-items: center;
padding: 0; font-size: var(--fs-cap); }
.more-link { display: inline-flex; align-items: center; min-height: var(--tap);
font-size: var(--fs-cap); font-weight: 600; margin-top: 0; }
/* ---------- 8. Длинное название упражнения --------------------------------
Дефект: «Вариант 2. Разгибание рук из-за головы…» в три строки, метка сбоку
наезжала. Решение: название получает всю ширину карточки и переносится
по словам; метка уходит строкой ниже, под название, и не сжимается. */
.ex-head { flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2) var(--sp-3); }
.ex-head > b, .ex-head > div:first-child {
flex: 1 1 100%; min-width: 0;
font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 600;
overflow-wrap: break-word; hyphens: auto; text-wrap: pretty;
}
.ex-head > div:first-child > b { display: block; font-weight: 600; }
.ex-head > div:first-child > .dim { font-size: var(--fs-cap); line-height: var(--lh-cap);
font-weight: 400; margin-top: 2px; }
.ex-head > .chip, .ex-head > .save-mark { flex: 0 0 auto; text-align: left; }
.ex-head > .save-mark:empty { display: none; }
.row .name, .pt-exname, .grp-name { hyphens: auto; overflow-wrap: break-word; }
/* ---------- 9. Метка-чип со значком ---------------------------------------
Цвет + значок: смысл читается без подписи и при цветовой слепоте.
✓ норма · ↓ недобор · ↑ перебор · ! внимание · × плохо/не подключено */
.chip {
display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
min-height: 24px; padding: 2px 10px; border-radius: var(--r-pill);
font: 600 var(--fs-label)/var(--lh-label) var(--font-ui); white-space: nowrap;
border: 0; background: var(--surface-2); color: var(--muted);
}
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.low { background: var(--low-soft); color: var(--low); }
.chip.high { background: var(--high-soft); color: var(--high); }
.chip.warn { background: var(--high-soft); color: var(--high); }
.chip.fail { background: var(--low-soft); color: var(--low); }
.chip:is(.ok, .low, .high, .warn, .fail)::before {
content: ""; flex: 0 0 12px; width: 12px; height: 12px; background: currentColor;
-webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.chip.ok { --ico: url("data:image/svg+xml;utf8,"); }
.chip.low { --ico: url("data:image/svg+xml;utf8,"); }
.chip.high { --ico: url("data:image/svg+xml;utf8,"); }
.chip.warn { --ico: url("data:image/svg+xml;utf8,"); }
.chip.fail { --ico: url("data:image/svg+xml;utf8,"); }
.save-mark .chip { white-space: nowrap; }
/* бейджи типа отчёта — нейтральные, не спорят со смысловыми цветами */
.badge { font-size: var(--fs-label); padding: 3px 9px; border-radius: var(--r-pill); }
/* ---------- 10. Таблица с числами и процентами ----------------------------
Дефект: тесно, мелко (9–11 px), длинные строки переносились.
Решение: числа 14–15 px моноширинными цифрами, колонки шире,
заголовки без разрядки. Значок ↓ ↑ у цветных ячеек — смысл без цвета. */
table.data th, table.data td { padding: 10px 10px; font-size: var(--fs-num); line-height: var(--lh-num); }
table.data td { font-weight: 500; }
table.data th { font-size: var(--fs-label); font-weight: 600; letter-spacing: .02em; color: var(--muted); }
table.data td:first-child { color: var(--text); font-weight: 400; }
table.data.mini { font-size: 14px; min-width: 0; }
/* История подходов в карточке упражнения: 5 колонок в 310 px не влезают
ни без переноса, ни без прокрутки (а прокрутка прячет «Шаг» — проценты).
Решение: строка в два этажа — дата подписью сверху, числа ровными
колонками под ней. Работает при любом числе колонок. */
table.data.mini { display: block; min-width: 0; width: 100%; border: 0; background: transparent; }
table.data.mini thead, table.data.mini tbody { display: block; }
table.data.mini tr { display: flex; flex-wrap: wrap; align-items: baseline;
column-gap: var(--sp-2); padding: var(--sp-2) 0; }
table.data.mini tbody tr { border-top: 1px solid var(--border); }
table.data.mini tbody tr + tr td { border-top: 0; }
table.data.mini th, table.data.mini td { display: block; flex: 1 1 0; min-width: 0;
padding: 0; border: 0; font-size: 15px; text-align: right; }
table.data.mini th { font-size: var(--fs-label); letter-spacing: 0; text-transform: none; }
table.data.mini th:first-child { display: none; }
table.data.mini td:first-child { flex: 0 0 100%; text-align: left; margin-bottom: 2px;
font-size: var(--fs-cap); color: var(--muted); }
table.data.mini td.reps-cell { letter-spacing: 0; }
table.data.mini th:first-child + th, table.data.mini td:first-child + td { text-align: left; }
.ex-card .scroll-x { overflow: visible; background: none; }
table.data td.fit, table.data .fit, .ex-head .fit { color: var(--ok); }
table.data span.low { color: var(--low); }
table.data td.low { color: var(--low); }
table.data td.high { color: var(--high); }
table.data td.low:not(:empty)::after { content: "↓"; font-size: .8em; margin-left: 2px; }
table.data td.high:not(:empty)::after { content: "↑"; font-size: .8em; margin-left: 2px; }
table.data tr.avg td { background: var(--surface-2); }
table.data tr.today td { background: var(--primary-soft); }
/* «Прогрессия по группам» на Сегодня */
.pt-head, .pt-group, .pt-ex { grid-template-columns: minmax(0, 1fr) 64px 72px; gap: var(--sp-2); }
.pt-head { padding: 0 var(--sp-3) var(--sp-1); font-size: var(--fs-label); letter-spacing: .02em; }
.pt-group { padding: 10px var(--sp-3); font-size: 15px; font-weight: 650; }
.pt-group .pt-w, .pt-group .pt-m, .pt-group .pt-name { font-size: 15px; }
.pt-ex { min-height: var(--tap); padding: 6px var(--sp-3); font-size: 14px; line-height: 1.3; }
.pt-w, .pt-m { font-size: 14px; }
.pt-exname { -webkit-line-clamp: 2; }
.pt-table { gap: 0; }
.pt-table > .pt-group:not(:first-child) { margin-top: var(--sp-2); }
/* ---------- 11. График и подсказка на нём ----------------------------------
Дефект: подсказка закрывала сами линии.
Решение: над полотном оставлена полоса под значения, подсказка живёт
только в ней — строкой во всю ширину, линии всегда открыты.
Пока палец не на графике, в полосе — подсказка «коснитесь». */
.chart { border-radius: var(--r-m); padding: var(--sp-4); }
.chart-live { position: relative; padding-top: calc(var(--sp-4) + 64px); }
.chart-live .ch-tip {
top: var(--sp-3); left: var(--sp-3) !important; right: var(--sp-3);
transform: none; min-height: 58px; max-height: 64px; overflow: hidden;
display: flex; flex-wrap: wrap; align-content: flex-start; align-items: baseline;
gap: 2px 12px; padding: 7px 10px; white-space: normal;
background: var(--surface-2); border: 0; border-radius: var(--r-s); box-shadow: none;
font-size: var(--fs-cap); line-height: 1.35; color: var(--text);
}
.chart-live .ch-tip[hidden] { display: none; }
.chart-live .ch-tip .ct-date { flex-basis: 100%; margin: 0; font-size: var(--fs-label);
font-weight: 600; color: var(--muted); opacity: 1; }
.chart-live .ch-tip .ct-row { gap: 5px; white-space: nowrap; }
.chart-live:has(> .ch-tip[hidden])::before {
content: "Коснитесь графика — покажу значения";
position: absolute; top: var(--sp-3); left: var(--sp-3); right: var(--sp-3);
min-height: 58px; display: flex; align-items: center; justify-content: center;
border: 1px dashed var(--border); border-radius: var(--r-s);
font-size: var(--fs-cap); color: var(--muted);
}
.chart-legend { font-size: var(--fs-label); gap: var(--sp-2); }
.chart-legend .lg { font-size: var(--fs-label); }
/* ---------- 12. Справка к показателю ---------------------------------------
Дефект: на «Прогрессе» пять строк мелкого шрифта про Score стояли ДО данных.
Решение: данные первыми, справка уходит в конец экрана блоком «Как читать». */
.wrap:has(> .ex-grid) { display: flex; flex-direction: column; }
.wrap:has(> .ex-grid) > * { flex: 0 0 auto; margin-top: 0; }
.wrap:has(> .ex-grid) > .note {
order: 10; margin: var(--sp-6) 0 0; padding: var(--sp-3) var(--sp-4);
background: var(--surface-2); border-radius: var(--r-m);
font-size: var(--fs-cap); line-height: 1.5; color: var(--muted);
}
.wrap:has(> .ex-grid) > .note::before {
content: "Как читать"; display: block; margin-bottom: var(--sp-1);
font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em;
text-transform: uppercase; color: var(--text);
}
/* ---------- 13. Поиск в справочнике ----------------------------------------
Дефект: два поля поиска подряд с разными кнопками.
Решение: поиск по тренировкам нужен, только когда тренировок много.
Пока их до пяти — все видны кнопками выше, поле прячется.
Поиск упражнений — одно поле с кнопкой-лупой в той же строке. */
.actions:not(:has(> :nth-child(7))) + form.form:has(#cat-wq) { display: none; }
form.form:has(#cat-q), form.form:has(#cat-wq) {
display: grid; grid-template-columns: minmax(0, 1fr) var(--tap-l);
align-items: end; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-4);
}
form.form:has(#cat-q) > .field, form.form:has(#cat-wq) > .field { grid-column: 1; grid-row: 1; }
form.form:has(#cat-wq) > .field { display: contents; }
form.form:has(#cat-wq) > .field > label { grid-column: 1 / -1; }
form.form:has(#cat-wq) > .field > input { grid-column: 1; }
form.form:has(#cat-wq) > .field > .hint { grid-column: 1 / -1; grid-row: 3; }
form.form:has(#cat-q) > .btn, form.form:has(#cat-wq) > .btn {
grid-column: 2; grid-row: 1; align-self: end;
width: var(--tap-l); min-height: var(--tap-l); height: var(--tap-l); margin: 0; padding: 0;
font-size: 0; background: var(--primary); border-color: transparent;
}
form.form:has(#cat-wq) > .btn { grid-row: 2; }
form.form:has(#cat-q) > .btn::before, form.form:has(#cat-wq) > .btn::before {
content: ""; width: 22px; height: 22px; background: var(--on-primary);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
form.form:has(#cat-q) > .btn.is-press { background: var(--primary-press); }
/* ---------- 14. Пустое состояние -------------------------------------------
Дефект: «— кг» крупно, как поломка.
Пустое — спокойная карточка: пунктир, подпись обычным текстом, без крупных цифр.
ВАЖНО: разметка карточки веса у пустого и заполненного кабинета одинаковая,
CSS их не различает. Нужен один класс от сервера: .card.is-empty
(или JS-фолбэк — см. README). */
.empty {
display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
padding: var(--sp-6) var(--sp-4); margin: var(--sp-2) 0;
border: 1px dashed var(--border-strong); border-radius: var(--r-m);
background: transparent; color: var(--muted);
font-size: 15px; line-height: 1.4; text-align: center; text-wrap: balance;
}
.empty::before {
content: ""; width: 28px; height: 28px; background: color-mix(in srgb, var(--muted) 60%, transparent);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.card.is-empty { background: transparent; box-shadow: none; border: 1px dashed var(--border-strong); }
.card.is-empty .value { font-size: var(--fs-body); font-weight: 400; letter-spacing: 0;
color: var(--muted); }
.card.is-empty .delta { color: var(--primary); font-weight: 600; }
/* ---------- 15. Галочки показателей — чипы в 44 px ------------------------- */
.chk-grid { display: flex !important; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-3); }
.chk {
min-height: var(--tap); padding: 0 var(--sp-3); gap: 6px;
border: 1px solid var(--border); border-radius: var(--r-pill);
background: var(--surface); font-size: 14px; cursor: pointer;
}
.chk:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
background: var(--primary-soft); }
.chk input { width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--primary); }
.seg { border-radius: var(--r-s); border-color: var(--border-strong); }
.seg label { font-size: 14px; }
.seg input:checked + span { color: var(--primary); }
.seg label:has(input:checked) { background: var(--primary-soft); }
/* ---------- 16. Нижняя панель ---------------------------------------------- */
nav { gap: 2px; padding: 6px 8px calc(6px + var(--sab)); border-top: 1px solid var(--border); }
nav a, nav .nav-menu-btn {
min-height: 52px; gap: 3px; border-radius: var(--r-s);
font: 500 var(--fs-label)/1.1 var(--font-ui); color: var(--muted);
}
nav a[aria-current="page"], nav .nav-menu-btn[aria-expanded="true"] {
color: var(--primary); background: var(--primary-soft); font-weight: 650;
}
nav a.is-press, nav .nav-menu-btn:active { background: var(--press); }
nav svg { width: 24px; height: 24px; }
@media (min-width: 1024px) { nav::before { content: "Ритм"; font-family: var(--font-head); } }
/* ---------- 17. Шторка меню ------------------------------------------------ */
.menu-back { background: color-mix(in srgb, #000 48%, transparent); }
.menu { border-radius: var(--r-l) 0 0 var(--r-l); border-left: 0; }
.menu.open { box-shadow: var(--shadow-2); } /* тень только у открытой: закрытая стоит за краем экрана */
.menu-head { padding: 0 var(--sp-1) var(--sp-3); }
.menu-head strong { font: 700 20px/1.2 var(--font-head); }
.menu-title { font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em; padding: var(--sp-2); }
.menu-item { min-height: var(--tap-l); padding: 0 var(--sp-3); border-radius: var(--r-s);
font-size: var(--fs-body); }
.menu-item.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.menu-item.is-press, .menu-item:active { background: var(--press); }
/* ---------- 18. Всплывающее сообщение -------------------------------------- */
#toast {
display: flex; align-items: center; gap: var(--sp-2);
min-height: var(--tap-l); padding: var(--sp-3) var(--sp-4);
background: var(--surface); color: var(--text);
border: 1px solid var(--border-strong); border-left: 0; border-radius: var(--r-m);
box-shadow: var(--shadow-2); font-size: 15px; font-weight: 500;
bottom: calc(84px + var(--sab));
width: max-content; max-width: min(92vw, 420px);
}
#toast[hidden] { display: none; }
#toast .tick { color: var(--ok); margin-right: 0; font-weight: 800; }
#toast.fail { border-color: var(--low); }
#toast.fail::before { content: "!"; display: grid; place-items: center; flex: 0 0 22px; height: 22px;
border-radius: 50%; background: var(--low); color: var(--surface);
font-weight: 800; font-size: 14px; }
/* ---------- 19. Прочее по касанию и фокусу --------------------------------- */
details.howto > summary, details.grp > summary { min-height: var(--tap); display: flex; align-items: center; }
details.howto > summary { padding: 0; margin: -4px 0; list-style: none; gap: var(--sp-2); }
details.howto > summary::-webkit-details-marker { display: none; }
details.howto > summary::after {
content: ""; width: 8px; height: 8px; margin-left: auto; margin-right: 4px;
border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
transform: rotate(45deg); transition: transform .15s ease;
}
details.howto[open] > summary::after { transform: rotate(-135deg); }
.date-btn { min-height: var(--tap-l); border-radius: var(--r-s); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.notice { border-radius: var(--r-m); }
.code-line, .howto code { border-radius: var(--r-xs); }
/* ══════════════════════════════════════════════════════════════════
Правки по итогам браузерной приёмки. Дописано поверх дизайн-системы:
её файл не трогаем, чтобы следующая версия от дизайнера встала чисто.
══════════════════════════════════════════════════════════════════ */
/* Режим упражнения на главном экране. Селект стоял справа с margin-left:auto
и при переносе повисал отдельной строкой, оторванный от подписи «Задание
на сегодня»: читалось как чужой элемент поверх блока. На узком экране
отдаём ему строку целиком, на широком возвращаем вправо. */
.task-top { align-items: center; row-gap: 8px; }
.task-top .mode-pick { flex: 1 1 100%; margin-left: 0; }
@media (min-width: 430px) {
.task-top .mode-pick { flex: 0 0 auto; margin-left: auto; max-width: 62%; }
}
/* Единица измерения рядом с весом («кг») выглядела пустым полем ввода:
человек видел две одинаковые рамки и не понимал, куда писать. Гасим её
до подписи, пока в неё не ткнули. */
input.unit, select.unit {
background: transparent; border-color: transparent;
color: var(--muted); text-align: center;
}
input.unit:focus, select.unit:focus, input.unit:hover, select.unit:hover {
background: var(--surface); border-color: var(--border-strong); color: var(--text);
}
/* Ряды фильтров и вкладок прокручиваются вбок, но обрыв на краю выглядел
как обрезанная вёрстка. Тень у правого края показывает, что там есть ещё. */
.tabs, .chips-row, .seg-scroll {
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.tabs > *, .chips-row > * { scroll-snap-align: start; }
/* Три кнопки записи на «Сегодня» ложились двумя рядами: две сверху, одна
снизу — ступенькой. Пусть делят строку поровну. */
.quick-actions { display: flex; gap: var(--sp-2, 8px); flex-wrap: nowrap; }
.quick-actions > .btn { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px;
text-align: center; white-space: nowrap; }