/* Токены — в tokens.css (подключается первым в index.html). Здесь остаётся только то, что не входит в общую систему. */ /* Глобальный guard «меньше движения» — пакет 5, п.6, 11.08. index.css грузят ВСЕ пять страниц, а анимации без причины (pulseGlow/mg-blink/spin/mg-slide/ anchorFlash — все определены ниже в этом файле) раньше гасились только такой же копией правила в ai.css/fuelplan.css. Эти два листа подключены не везде (на /health и /profile их нет вовсе, хотя anchor-flash там реально срабатывает — переход по якорю сайдбара есть на всех пяти страницах через общий app.js), поэтому пять экранов без ai.css/fuelplan.css оставались без защиты. Правило то же самое, что и в ai.css (не переименовывалось). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } } * { box-sizing:border-box; } /* B1.3 → Д2 (ТЗ-typography-and-plan): измеренное — Onest с tabular-nums, не отдельная моноширинная гарнитура (решение ревьюера Open §1 = A). Метрики сессии, БЖУ/вода, веса, сезонная статистика, пилюли зон. */ .chip b, .fcell b, td.num, .chips b, .heat-cell .hc-val, .hs-stats, .fs-cell > b, .trend-card .tc-big, .pc-stat b, .season-stats b, .sc-item .sc-val, .sc-form b, .z-w, .z-pct, .z-code { font-family:var(--font-num); font-variant-numeric:tabular-nums lining-nums; font-weight:inherit; } body { margin:0; font-size:var(--fs-md); line-height:1.55; font-family:var(--font-sans); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:clip; } /* страховка от горизонтального переполнения (не ломает sticky) */ .chip b, .fcell b, td.num, .chips b { font-variant-numeric:tabular-nums lining-nums; } a { color:inherit; text-decoration:none; } /* прилипающая шапка */ .sticky { position:sticky; top:0; z-index:30; background:var(--bg); padding:var(--sp-3) 0 var(--sp-3); margin-bottom:var(--sp-4); border-bottom:1px solid transparent; transition:border-color var(--transition-fast); } /* B1.4: было box-shadow (на тёмном читается как грязь, не как подъём) — границу «прилипшей» шапки теперь даёт линия, а не тень. */ .sticky.stuck { border-bottom-color:var(--pl); } /* П5.4: ОДНО определение карточки на весь продукт. Раньше их было три — .card, .hero-card и .trend-card, причём два последних побайтно совпадали, а .card отличался только именем токена фона (--card и --panel дают один и тот же цвет). Разные имена одного и того же расходятся при первой же правке: чинишь отступ в одном месте, а на двух страницах он прежний. */ .card, .hero-card, .trend-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-4); } .card { margin-bottom:var(--sp-4); } .card.err { background:#3a1d1d; border-color:#5a2a2a; color:#ffd2c8; } /* Заголовки карточек — h3 (h2 — заголовки секций .sec-h/.hero-h/.pl-h). Аудит №13, ТЗ-4: раньше все они были div, и скринридер получал плоскую простыню из одного h1 без единого h2/h3. Тег сменился, ВИД — нет: font-size задан явно, иначе браузер применил бы дефолт h3. */ .ttl { display:flex; align-items:center; gap:8px; font-weight:700; margin:0 0 var(--sp-1); font-size:var(--fs-base); } .ttl small { color:var(--mut); font-weight:500; font-size:var(--fs-xs); margin-left:auto; } .muted { color:var(--mut); font-size:var(--fs-sm); } label { display:block; font-weight:600; margin:0 0 var(--sp-2); font-size:var(--fs-sm); } input[type=date], input[type=text], input[type=number], select { width:100%; min-height:44px; padding:var(--sp-3) var(--sp-3); border-radius:var(--r-sm); border:1px solid var(--line); background:var(--card2); color:var(--ink); font-size:var(--fs-base); } /* select без кастомной обёртки (на случай, если JS не пришёл) — своя стрелка вместо браузерной */ select { appearance:none; -webkit-appearance:none; background-image:none; padding-right:36px; } /* minmax(0,1fr), не просто 1fr: голый 1fr = minmax(auto,1fr) — трек не сжимается уже своего контента (input/label), и на узких телефонах колонка .col2 вылезала за экран (Б10, 06.10: camp-create 334px при вьюпорте 320). minmax(0,…) разрешает треку сжаться до нуля — внутренние input/label и так имеют width:100%, переносу/эллипсису ничего не мешает. */ .grid { display:grid; gap:8px; grid-template-columns:repeat(4,minmax(0,1fr)); } .grid .col2 { grid-column:span 2; } /* ── КАСТОМНЫЙ ВИД остаётся поверх и прозрачным — клавиатуру, чтение скринридером и мобильный тап-пикер обслуживает настоящий select (никакой самодельной ARIA-логики, ноль риска что-то сломать). Снизу — стилизованный «фасад», который просто отражает текущий выбор. Работает одинаково на десктопе и мобиле: на телефоне тап по прозрачному select всё равно открывает нативный ОС-пикер — то есть на мобиле поведение остаётся полностью нативным. */ .csel { position:relative; display:block; } .csel select.csel-native { position:absolute; inset:0; width:100%; height:100%; min-height:0; margin:0; padding:0; opacity:0; cursor:pointer; z-index:2; } .csel-face { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:44px; padding:var(--sp-3) var(--sp-3); border-radius:var(--r-sm); border:1px solid var(--line); background:var(--card2); color:var(--ink); font-size:var(--fs-base); font-weight:400; line-height:1.3; } /* Долг-находка TZ-redesign-sections-en.md: без min-width:0 на флекс- элементе и overflow:hidden текст длинного значения (напр. «Пояс старта» → часовой пояс "America/Los_Angeles") не ужимался — флекс- родитель .csel-face растягивался по высоте вместо того, чтобы обрезать строку (на 500px — до пяти строк). Один видимый ряд + эллипсис, сама опция внутри нативного select остаётся полной (это только витрина). */ .csel-face-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1 1 auto; } .csel-arrow { flex:0 0 auto; width:16px; height:16px; color:var(--mut); transition:transform var(--transition-fast), color var(--transition-fast); } .csel:hover .csel-face { border-color:var(--mut); } .csel select.csel-native:focus-visible ~ .csel-face, .csel:focus-within .csel-face { border-color:var(--acc); outline:2px solid var(--acc); outline-offset:2px; } .csel:focus-within .csel-arrow { color:var(--acc); transform:rotate(180deg); } /* внутри label-обёртки текст названия поля не должен слипаться с селектом */ label > .csel { margin-top:var(--sp-2); } @media (max-width:480px){ .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ⛔ Пункт 7 приёмки редизайна «Сегодня»: глобальный переход на Manrope (addendum 07.10) чуть шире Onest на тех же кеглях — на 500px «Максимальный пульс» переставал влезать в четверть сетки и наезжал на «Пол» (найдено скриншотом /profile). Минимальная правка: тот же откат на 2 колонки, только порог чуть выше (520 вместо 480) — самая длинная подпись решает. */ @media (max-width:520px){ .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ── ДОСТУПНОСТЬ: фокус с клавиатуры и тап-цели (аудит №13, ТЗ-4) ────── Было: два правила :focus на весь дашборд и НИ ОДНОГО на /passport — пройти страницу с клавиатуры вслепую. Обводка контуром (outline), а не тенью: не сдвигает вёрстку и видна на любом фоне карточек. */ :where(button, .btn, a, input, select, textarea, summary, [tabindex]):focus-visible { outline:2px solid var(--acc); outline-offset:2px; border-radius:var(--r-sm); } /* Чекбокс — 20×20 в строке ≥44px: пальцем по 13×13 не попасть. */ .opt-check { display:flex; align-items:center; gap:8px; font-weight:400; margin:0; min-height:44px; cursor:pointer; } .opt-check input[type=checkbox] { width:24px; height:24px; min-height:0; flex:none; accent-color:var(--acc); cursor:pointer; } /* ── КНОПКИ: один primary + токены secondary/ai/ghost (без инлайн-хексов) ─ */ /* Заливка первичной кнопки идёт через --btn-bg/--btn-fg, а не напрямую из --acc: так демо-режим гасит ВСЕ первичные кнопки разом, переопределив две переменные на , и не воюет за специфичность с .btn-soft/.ghost/ .btn-ai (у них своя заливка, они это переопределение не видят). */ button, .btn { border:0; border-radius:var(--r-md); background:var(--btn-bg,var(--acc)); color:var(--btn-fg,var(--on-acc)); font-weight:700; font-size:var(--fs-base); padding:var(--sp-3) var(--sp-4); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; line-height:1.2; } button:hover, .btn:hover { filter:brightness(1.08); } button.full, .btn.full { width:100%; margin-top:var(--sp-3); } .btn-sm { font-size:var(--fs-xs); padding:var(--sp-3) var(--sp-4); } /* вторичная — нейтральная панель */ .btn-soft { background:var(--elev); color:var(--ink); border:1px solid var(--line); } .btn-soft:hover { filter:none; border-color:var(--mut); } /* вторичная-обводка и «тихая» (аудит №14: три вида кнопок, ОДНА первичная на экран — иначе три одинаковых серых подряд, и глазу не за что зацепиться) */ .btn-outline { background:transparent; color:var(--ink); border:1px solid var(--ink); } .btn-outline:hover { filter:none; background:var(--elev); } .btn-quiet { background:transparent; color:var(--mut); border:0; font-weight:600; padding:var(--sp-3) var(--sp-2); } .btn-quiet:hover { filter:none; color:var(--ink); text-decoration:underline; } /* действия ИИ/директора — холодный синий тон */ .btn-ai { background:#16202e; color:var(--ink); border:1px solid #243246; } .btn-ai:hover { filter:none; border-color:#33486a; } /* «Горящая» кнопка разбора: тренировка есть, разбора ещё нет */ .btn-analyze { background:var(--btn-bg,var(--acc)); font-size:var(--fs-md); padding:var(--sp-4) var(--sp-4); animation:pulseGlow 1.8s ease-in-out infinite; } /* B1.4: было пульсирующим box-shadow (тень на тёмном = грязь, не привлечение внимания) — тот же «дыши, жми меня» сигнал теперь лёгким масштабом. */ @keyframes pulseGlow { 0%,100% { transform:scale(1); } 50% { transform:scale(1.035); } } .btnrow { display:flex; gap:8px; justify-content:flex-end; align-items:center; margin-top:var(--sp-3); } .tbtn { background:transparent; border:1px solid var(--line); color:var(--mut); font-size:var(--fs-xs); font-weight:600; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); } .tbtn:hover { background:var(--card2); color:var(--ink); filter:none; } .tbtn.danger:hover { border-color:#5a2a2a; color:#ffb3a3; } /* «Удалить» — приглушённая иконка-корзина без текста (не постоянно на виду, как раньше), «Повторить» — текстовая кнопка (желанное действие, его видно). */ .tbtn.icon-only { border:0; padding:0; width:32px; height:32px; border-radius:var(--r-sm); display:inline-flex; align-items:center; justify-content:center; } .tbtn.icon-only .icon { width:16px; height:16px; } .tbtn.icon-only.danger:hover { background:rgba(90,42,42,.35); } /* ── СТИЛИЗОВАННЫЙ ВЫБОР ФАЙЛА (нативный input спрятан) ───────────── */ .file-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; } .file-trigger { cursor:pointer; } .file-name { display:block; color:var(--mut); font-size:var(--fs-xs); margin-top:var(--sp-2); min-height:1em; } /* сворачиваемые строки */ .row { background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:var(--sp-3); } .row > summary { display:flex; align-items:center; gap:8px; padding:var(--sp-4); cursor:pointer; font-weight:700; list-style:none; } .row > summary::-webkit-details-marker { display:none; } .row > summary .sub { color:var(--mut); font-weight:500; font-size:var(--fs-xs); margin-left:auto; } .row > summary .chev { color:var(--mut); transition:transform var(--transition-fast); display:inline-flex; } .row[open] > summary .chev { transform:rotate(90deg); } .row .body { padding:0 var(--sp-4) var(--sp-4); } /* цель — детальные полоски */ .bar { margin:var(--sp-3) 0; } .bar .lab { display:flex; justify-content:space-between; font-size:var(--fs-sm); margin-bottom:var(--sp-2); } .bar .lab b { font-weight:700; } .bar .rem { color:var(--mut); } .bar .rem.over { color:var(--warn); } .bar .rem.done { color:var(--good); } .track { height:10px; background:var(--card2); border:1px solid var(--line); border-radius:var(--r-full); overflow:hidden; } .fill { height:100%; border-radius:var(--r-full); } .fill.carb{background:var(--carb);} .fill.prot{background:var(--prot);} .fill.kcal{background:var(--kcal);} .fill.fat{background:var(--fat);} .pill { display:inline-block; padding:var(--sp-1) var(--sp-2); border-radius:var(--r-full); font-size:var(--fs-xs); background:var(--card2); color:var(--mut); margin:var(--sp-1) var(--sp-1) 0 0; } /* приём пищи — свёрнутая строка (Пакет 4, IA-аудит 07.08): время · название · ккал · углеводы, ≤72 px. Раскрытие —
+ .body ниже, паддинг переехал с .meal на > summary.mh и .body (паттерн как у .row/.row .body выше). Заглушки .meal-pending/.meal-pending-error — НЕ
(спиннер и кнопка «Повторить» не должны сворачиваться), поэтому им возвращаем паддинг явно отдельным правилом. */ .meal { background:var(--card2); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:var(--sp-3); } .meal-pending, .meal-pending-error { padding:var(--sp-4); } .meal > summary.mh { display:flex; align-items:center; gap:8px; padding:var(--sp-4); cursor:pointer; list-style:none; } .meal > summary.mh::-webkit-details-marker { display:none; } .meal[open] > summary.mh .chev { transform:rotate(90deg); } .meal .mh b { font-size:var(--fs-md); } .meal .mh .t { color:var(--mut); font-size:var(--fs-xs); white-space:nowrap; flex:0 0 auto; } /* Название — единственное, что тянется и обрезается многоточием (min-width:0 обязателен, иначе flex-элемент не сжимается меньше своего контента). */ .meal .mh .mname { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* flex-shrink:1 (не 0): при flex:0 0 auto .mnums держал полную ширину всегда, и на узком экране весь дефицит падал на .mname (min-width:0 у него же) — имя приёма пищи сжималось до clientWidth:0, то есть исчезало целиком (Б10, 06.10: 320 px, видно 0 из 25 символов названия). Теперь оба делят недостающее место, и своя многоточие при нужде получает и .mnums, а не только имя. */ .meal .mh .mnums { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-xs); color:var(--mut); } .meal .mh .mname::before, .meal .mh .mnums::before { content:"· "; color:var(--mut); font-weight:400; } .meal .mh .chev { flex:0 0 auto; color:var(--mut); transition:transform var(--transition-fast); display:inline-flex; } .meal > summary.mh .chev .icon { width:16px; height:16px; } .meal .body { padding:0 var(--sp-4) var(--sp-4); } .chips { display:flex; gap:8px; margin:var(--sp-3) 0 var(--sp-1); } /* 2×2-сетка на узком экране заменена компактной однострочной сводкой (см. .meal .chips в @media max-width:1000px ниже) — не оставляем промежуточный вариант, чтобы два мобильных правила не спорили друг с другом. */ .chip { flex:1; text-align:center; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-1); } .chip b { display:block; font-size:var(--fs-lg); } .chip span { color:var(--mut); font-size:var(--fs-2xs); } /* Вердикт дня — главный контент карточки, а не сноска. Был утоплен в холст (--bg) и компенсировал это оранжевой полосой слева; теперь заметность даёт иерархия — поднятая поверхность --s2, ради которой третий уровень и заводился. Радиус заодно приведён к системе (было 0 10px 10px 0). */ .verdict { padding:var(--sp-3); background:var(--elev); border:1px solid var(--pl-soft); border-radius:var(--r-md); margin:var(--sp-3) 0 var(--sp-2); font-size:var(--fs-base); } .advice { white-space:pre-wrap; font-size:var(--fs-sm); color:#d6dae2; } details.tog > summary { cursor:pointer; color:var(--mut); font-size:var(--fs-xs); margin-top:var(--sp-2); list-style:none; user-select:none; } details.tog > summary::-webkit-details-marker { display:none; } details.tog > summary:hover { color:var(--ink); } .tscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; } table { width:100%; border-collapse:collapse; margin-top:var(--sp-2); font-size:var(--fs-sm); } th,td { text-align:left; padding:var(--sp-2) var(--sp-1); border-bottom:1px solid var(--line); } th { color:var(--mut); font-weight:600; } td.num,th.num { text-align:right; white-space:nowrap; } /* Канонические ключи (ai_format.conf_key) + старые русские классы — вторые оставлены, чтобы уже отрисованные страницы не побледнели. */ .conf-low,.conf-низкая{color:var(--warn);} .conf-mid,.conf-средняя{color:var(--mut);} .conf-high,.conf-высокая{color:var(--good);} .conf-warn { margin-top:var(--sp-2); padding:var(--sp-2) var(--sp-3); background:rgba(224,166,59,.08); border:1px solid rgba(224,166,59,.3); border-radius:var(--r-sm); font-size:var(--fs-xs); color:var(--warn); } /* обычные блюда — повтор в один тап */ .fm-h { margin:var(--sp-4) 0 var(--sp-2); font-weight:700; font-size:var(--fs-sm); } .fm-h small { color:var(--mut); font-weight:500; margin-left:var(--sp-2); } .fm-chips { display:flex; flex-wrap:wrap; gap:8px; } .fm-chips form { flex:1 1 46%; min-width:150px; display:flex; } .fm-chip { flex:1; min-width:0; background:var(--card2); border:1px solid var(--line); color:var(--ink); border-radius:var(--r-md); padding:var(--sp-2) var(--sp-3); text-align:left; font-weight:500; display:block; } .fm-chip:hover { filter:none; border-color:var(--mut); } .fm-chip b { display:block; font-size:var(--fs-sm); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } .fm-chip span { color:var(--mut); font-size:var(--fs-2xs); } /* подсказки объёма при ручном вводе */ .phints { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:var(--sp-2) 0 var(--sp-1); } .phints:empty { margin:0; } .phint-tip { color:var(--mut); font-size:var(--fs-xs); margin-right:var(--sp-1); } .phint { background:var(--card2); border:1px solid var(--line); color:var(--ink); font-size:var(--fs-xs); font-weight:600; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-full); cursor:pointer; } .phint:hover { border-color:var(--acc); filter:none; } /* топливо */ .fuel-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:var(--sp-2) 0 var(--sp-3); } @media (max-width:480px){ .fuel-grid { grid-template-columns:repeat(2,1fr); } } /* вода */ .water .ttl small { color:var(--mut); font-weight:600; } .wbar { height:12px; background:var(--card2); border:1px solid var(--line); border-radius:var(--r-full); overflow:hidden; margin:var(--sp-2) 0 var(--sp-2); } .wbar-fill { height:100%; background:var(--prot); border-radius:var(--r-full); transition:width var(--transition-fast); } .wnote { font-size:var(--fs-xs); margin-bottom:var(--sp-3); } .wbtns { display:flex; gap:8px; flex-wrap:wrap; } .wbtns form { margin:0; } .wbtn { padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); border:1px solid var(--line); background:var(--card2); color:var(--ink); font-size:var(--fs-base); font-weight:700; cursor:pointer; } .wbtn:hover { border-color:var(--prot); filter:none; } .wbtn.ghost { background:transparent; color:var(--mut); font-weight:500; } .wbtn.active-rpe { background:var(--acc); color:var(--on-acc); border-color:var(--acc); } .wbtn.wbtn-sel { background:var(--acc); color:var(--on-acc); border-color:var(--acc); } /* свои бутылки */ .bwrap { position:relative; display:inline-flex; } .bwrap .wbtn { padding-right:var(--sp-8); } .bx { position:absolute; top:-6px; right:-6px; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--mut); cursor:pointer; padding:0; } .bx .icon { width:12px; height:12px; } .bx:hover { color:var(--warn); border-color:var(--warn); filter:none; } .baddbox { margin-top:var(--sp-3); } .baddbox summary { color:var(--mut); font-size:var(--fs-xs); font-weight:600; cursor:pointer; list-style:none; } .baddbox summary::-webkit-details-marker { display:none; } /* «Добавить сауну» — та же складушка, но summary выглядит как полноценная вторичная кнопка: мелкий серый текст юзер просто не находил. Остальные .baddbox (гели/блюда) намеренно не трогаем — там уместен тихий текст. */ .baddbox summary.sauna-add-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:var(--sp-3) var(--sp-4); border:1px solid var(--line); border-radius:var(--r-md); background:var(--card2); color:var(--ink); font-size:var(--fs-sm); font-weight:600; line-height:1.2; } .baddbox summary.sauna-add-btn:hover { border-color:var(--mut); } .baddbox[open] > summary.sauna-add-btn { border-color:var(--mut); } .baddform { display:flex; gap:8px; align-items:center; margin-top:var(--sp-2); flex-wrap:wrap; } .baddform input { width:96px; padding:var(--sp-3) var(--sp-3); border-radius:var(--r-sm); border:1px solid var(--line); background:var(--card2); color:var(--ink); font-size:var(--fs-base); } .baddform .hint { color:var(--mut); font-size:var(--fs-xs); } /* FTP-онбординг: «Не знаю свой FTP» (details.ftp-unknown, см. profile_fields) — мини-диалог из шагов .ftp-step, переключаемых JS без перезагрузки. */ .ftp-unknown-body { margin-top:var(--sp-2); padding:var(--sp-3); background:var(--card2); border:1px solid var(--line); border-radius:var(--r-md); } .ftp-unknown-body .wbtns form { margin:0; } .fcell { background:var(--card2); border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-2); text-align:center; } .fcell span { display:block; color:var(--mut); font-size:var(--fs-2xs); } .fcell b { display:block; font-size:var(--fs-lg); margin:var(--sp-1) 0; } .fcell small { color:var(--mut); font-size:var(--fs-2xs); } .frow { margin:var(--sp-2) 0; font-size:var(--fs-sm); } .recovery { background:rgba(47,170,106,.1); border:1px solid rgba(47,170,106,.3); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); margin:var(--sp-1) 0 var(--sp-3); } .recovery b { color:var(--good); } /* погода / готовность (внутри карточек) */ .ready-facts { margin:0 0 var(--sp-1); padding:0; font-size:var(--fs-xs); color:var(--mut); } .ready-facts li { list-style:none; padding:var(--sp-1) 0; } .ready-facts li::before { content:"· "; } .rf-tip { position:relative; border-bottom:1px dashed rgba(154,163,178,.4); cursor:help; } /* Тултип центрируем по горизонтали (left:50% + translateX(-50%)) вместо прижатия к левому краю: простое CSS-решение без JS-расчёта позиции, которое одинаково снижает риск обрезания и слева, и справа экрана. Для точечных случаев у самого правого края есть модификатор ниже. */ .rf-tip::after { content: attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:#1a1f2b; border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-3); font-size:var(--fs-2xs); line-height:1.6; color:var(--ink); /* pre-line, а не normal: существующие data-tip используют для явных переносов строк (FTP/CTL/ATL/TSB/ACWR) — pre-line сохраняет их И, в отличие от pre, переносит длинный текст по словам, не вылезая за max-width */ white-space:pre-line; width:max-content; max-width:min(320px, 80vw); z-index:50; opacity:0; pointer-events:none; transition:opacity var(--transition-fast); } .rf-tip:hover::after, .rf-tip.show::after { opacity:1; } /* модификатор для элементов у правого края экрана: тултип раскрывается влево */ .rf-tip.rf-tip-right::after { left:auto; right:0; transform:none; } .wchips { display:flex; flex-wrap:wrap; gap:8px; margin:var(--sp-2) 0 var(--sp-1); } .wchip { background:var(--card2); border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-1) var(--sp-3); font-size:var(--fs-xs); white-space:nowrap; } .wchip.hot { border-color:rgba(217,162,59,.5); color:var(--warn); } .wchip.rain { border-color:rgba(59,130,224,.5); color:#7bb3f0; } /* брифинг Performance Director — та же логика поднятой поверхности, что и .verdict (пакет 5, пункт 2): текст ИИ-директора лежит внутри .row/.card (--s1), и на --card2 (=--s0, холст) он визуально ПРОВАЛИВАЛСЯ ниже родителя вместо того, чтобы выделяться — тот же класс несоответствия, что чинили в .verdict. */ .briefing-box { background:var(--elev); border:1px solid var(--pl-soft); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-4); margin:var(--sp-4) 0 var(--sp-1); font-size:var(--fs-sm); line-height:1.55; } .briefing-box h3 { font-size:var(--fs-xs); font-weight:700; color:var(--mut); letter-spacing:.06em; margin:var(--sp-4) 0 var(--sp-1); text-transform:uppercase; } .briefing-box h3:first-child { margin-top:0; } /* Разбор заезда — единственное место, где .briefing-box лежит ВНУТРИ .row .body (у брифинга и разбора недели .briefing-box/.wreview стоят прямо в карточке, без второго вложенного паддинга). .row .body уже даёт боковой отступ var(--sp-4); свой паддинг+бордер у .briefing-box поверх него на узком экране съедал ~45% ширины текста (TZ-ai-text- readability-en.md, п.7, скрин shot_home_debrief_mobile.png). Токены те же, что у .briefing-box выше — убираем только второй слой инсета. */ @media (max-width:560px){ .row .body .briefing-box { padding:0; border:0; border-radius:0; background:transparent; } } /* «дорогой» разбор недели/сбора (weekreport.py) — тот же .briefing-box, плюс .wrep: секции пронумерованы (01…06) счётчиком, а не просто капсом, первый абзац — лид крупнее обычного текста, буллеты — с чертой-маркером вместо голого markdown "*". Всё на тех же переменных темы, что и .briefing-box. */ .wrep { padding:var(--sp-4) var(--sp-6); counter-reset:wrsec; } /* ТЗ-typography-and-plan Д5 «AI section heading»: было 12px капс .12em + мono-счётчик — две разные манеры заголовка на экране (P6 в ТЗ). Теперь sentence case, тот же вес, что и у .ai-full .ai-prose h4; счётчик и хairline-линия остаются, просто без капс-трекинга и без mono-гарнитуры. */ .wrep h3 { display:flex; align-items:center; gap:8px; margin:var(--sp-6) 0 var(--sp-3); font-size:var(--fs-sm); font-weight:var(--fw-semibold); letter-spacing:var(--ls-normal); color:var(--ink); text-transform:none; counter-increment:wrsec; } .wrep h3:first-child { margin-top:0; } .wrep h3::before { content:counter(wrsec, decimal-leading-zero); color:var(--faint); font-family:var(--font-sans); } .wrep h3::after { content:''; flex:1; height:1px; background:var(--line); } /* лид-абзац — первый вывод сразу после первого заголовка («Вердикт недели») */ .wrep h3:first-child + div { font-size:var(--fs-xl); font-weight:var(--fw-semibold); line-height:var(--lh-snug); max-width:var(--measure-prose); } .wrep div { font-size:var(--fs-md); line-height:var(--lh-prose); max-width:var(--measure-prose); } .wrep strong { font-weight:700; color:var(--ink); } .wrep .wr-li { position:relative; padding-left:var(--sp-4); margin:var(--sp-2) 0; font-size:var(--fs-md); max-width:var(--measure-prose); line-height:var(--lh-prose); } .wrep .wr-li::before { content:'–'; position:absolute; left:0; color:var(--faint); font-family:var(--font-sans); } /* «день: ПЛАН: … | ФАКТ: …» — Open §3 → A: было строкой прозы с капс- лейблами и "|"-разделителем (таблица, типографски набранная прозой). Теперь — блок дня: день жирным, план приглушённым, факт обычным цветом текста, каждый на своей строке. */ .wr-pf { margin:var(--sp-2) 0; max-width:var(--measure-prose); } .wr-pf-day { display:block; font-size:var(--fs-2xs); color:var(--mut); margin-bottom:2px; } .wr-pf-plan { color:var(--mut); font-size:var(--fs-md); line-height:var(--lh-body); } .wr-pf-fact { color:var(--ink); font-size:var(--fs-md); line-height:var(--lh-body); } /* Долг 72 (fix pass) — скелетон внутри зарезервированной высоты (.briefing-box[data-stream-reserve], app.js reserveStreamHeight). Только полосы, БЕЗ текста и БЕЗ цифр (CLAUDE.md, правило №1: не выдумывать содержание) — исчезает сам в момент первого настоящего текста (container.innerHTML='' в makeIncrementalRenderer). */ .stream-skeleton { display:flex; flex-direction:column; gap:var(--sp-3); padding-top:2px; } .skel-line { height:12px; border-radius:6px; background:var(--pl-soft); } @media (prefers-reduced-motion: no-preference){ .skel-line { background-image:linear-gradient(90deg, var(--pl-soft) 0%, var(--pl) 45%, var(--pl-soft) 90%); background-size:200% 100%; animation:mg-skel-shimmer 1.4s ease-in-out infinite; } @keyframes mg-skel-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } } } /* Долг 123 — на время стрима высота бокса РОВНО data-stream-reserve (app.js reserveStreamHeight ставит и class, и inline height); текст длиннее резерва просто обрезается — снизу его прикрывает .stream-expand-btn (fade + подпись, см. ниже). position:relative только на клампнутом состоянии — кнопке нужен якорь, самому боксу в обычном (не клампнутом) состоянии position не нужен нигде. */ .briefing-box.is-stream-clamped { overflow:hidden; position:relative; } /* Кнопка живёт ВНУТРИ зарезервированной высоты (position:absolute — не добавляет боксу ни пикселя, п.2 Decision). Фон — тот же токен, что и фон бокса (--elev), поэтому градиент честно гаснет «в фон», а не в случайный цвет. ⛔ Оранжевый (--acc-text) — она интерактивна (тап снимает потолок), см. design-orange-means-interactive. */ .stream-expand-btn { position:absolute; left:0; right:0; bottom:0; min-height:var(--tap-min); display:flex; align-items:flex-end; justify-content:center; padding:28px var(--sp-4) var(--sp-2); border:0; cursor:pointer; background:linear-gradient(to bottom, transparent, var(--elev) 65%); color:var(--acc-text); font-weight:700; font-size:var(--fs-xs); font-family:inherit; } .stream-expand-btn:hover, .stream-expand-btn:focus-visible { color:var(--acc); } /* Долг 142 — во время самого стрима текст временно 2–3× длиннее финального (проза без разметки), поэтому .stream-expand-btn загоралась почти на каждом разборе и гасла сама, когда структура укладывалась в резерв — ложная подсказка «тут скрыто», с которой нечего делать. Fade — тот же градиент, что у кнопки, но без текста и без тапа (pointer-events:none, aria-hidden в разметке): просто сигнал «текст длиннее окна», кнопка появляется только в конце, если это и правда так (settleStreamClamp). */ .stream-fade { position:absolute; left:0; right:0; bottom:0; height:56px; pointer-events:none; background:linear-gradient(to bottom, transparent, var(--elev) 65%); } /* стриминг ИИ-текста (брифинг/разбор тренировки/недели) — мигающая каретка */ .stream-caret { display:inline-block; animation:mg-blink 1s step-start infinite; color:var(--faint); } @keyframes mg-blink { 50% { opacity:0; } } /* появление новой строки во время стрима — мягкое проявление без сдвига layout (только opacity, без transform/height), чтобы не мигало резко. Уважаем prefers-reduced-motion — там строка сразу видна, без анимации. */ @media (prefers-reduced-motion: no-preference){ .stream-line-in { animation: mg-line-in .2s ease-out; } @keyframes mg-line-in { from { opacity:0; } to { opacity:1; } } } /* разбор недельного плана от директора — решение штаба, та же категория «вердикт», что .verdict/.briefing-box (пакет 5, п.2): было на --card2 (=--s0) внутри .planw (--s1) — тонуло вместо того, чтобы выделяться. */ .wreview { background:var(--elev); border:1px solid var(--pl-soft); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); margin:var(--sp-3) 0 var(--sp-1); font-size:var(--fs-sm); line-height:1.55; } .wreview .wr-day { font-weight:700; margin-top:var(--sp-3); font-size:var(--fs-sm); } .wreview .wr-day:first-child { margin-top:0; } .wreview .wr-coach { color:var(--mut); font-size:var(--fs-xs); margin:0 0; } /* Лид-строка «ВЕРДИКТ: …» и голый ALL-CAPS ярлык-заголовок («РАЗБОР ПЛАНА:» и т.п.) — ТЗ-ai-text-readability-en.md п.3. Тот же приём, что .ai-verdict/.briefing-box h3: вес/кегль несёт роль строки, а не цвет. */ .wreview .wr-verdict { font-size:var(--fs-lg); font-weight:700; line-height:1.45; margin:0 0 var(--sp-3); } .wreview .wr-verdict:first-child { margin-top:0; } .wreview .wr-label { font-weight:700; font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--mut); margin:var(--sp-3) 0 var(--sp-1); } .wreview .wr-label:first-child { margin-top:0; } .wreview .wr-st { font-weight:700; margin:var(--sp-1) 0; } .wreview .wr-keep { color:var(--good); } .wreview .wr-tweak { color:var(--warn); } .wreview .wr-change { color:var(--acc); } .wreview .wr-assign { color:#a07cf5; } .wreview .wr-reason { color:var(--ink); padding-left:var(--sp-1); } /* Назначенная сессия лесенкой (жалоба 03.08: одной строкой не читается). Цвет статуса задаёт класс-модификатор (.wr-tweak/.wr-change/.wr-assign), он же красит левую полосу — так сохраняется прежний язык цветов. */ .wreview .wr-sess { margin:var(--sp-1) 0 var(--sp-2); border-left:2px solid currentColor; padding:var(--sp-1) 0 var(--sp-1) var(--sp-3); } .wreview .ws-head { font-weight:700; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } .wreview .ws-total { color:var(--mut); font-weight:600; font-size:var(--fs-xs); } .wreview .ws-steps { list-style:none; margin:var(--sp-1) 0 0; padding:0; display:flex; flex-direction:column; gap:3px; } .wreview .ws-steps li { color:var(--ink); font-weight:500; font-size:var(--fs-sm); padding-left:var(--sp-4); position:relative; } /* Маркер шага: у работы — сплошная точка, у отдыха/разминки — контурная, чтобы «где пашем, а где катим» читалось без чтения текста. */ .wreview .ws-steps li::before { content:""; position:absolute; left:2px; top:.55em; width:6px; height:6px; border-radius:50%; border:1.5px solid var(--mut); box-sizing:border-box; } .wreview .ws-work { font-weight:700; } .wreview .ws-work::before { background:currentColor; border-color:currentColor; } .wreview .ws-rest, .wreview .ws-warmup, .wreview .ws-cooldown { color:var(--mut); } .wreview .ws-fuel { color:var(--mut); font-size:var(--fs-xs); } /* план тренера */ .plan-tomorrow { background:rgba(224,98,59,.08); border:1px solid rgba(224,98,59,.3); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); margin:0 0 var(--sp-3); } .plan-tomorrow .plan-label { color:var(--mut); font-size:var(--fs-2xs); margin-bottom:var(--sp-1); } .plan-tomorrow .plan-text { font-size:var(--fs-base); font-weight:600; line-height:1.45; } .plan-week { width:100%; border-collapse:collapse; font-size:var(--fs-xs); margin-top:var(--sp-1); } .plan-week td { padding:var(--sp-2) var(--sp-1); border-bottom:1px solid var(--line); vertical-align:top; } .plan-week .pw-date { color:var(--mut); white-space:nowrap; min-width:52px; font-size:var(--fs-2xs); padding-right:var(--sp-2); } .plan-week tr.pw-today .pw-date { color:var(--acc-text); font-weight:700; font-size:var(--fs-xs); } .plan-week tr.pw-today .pw-body { font-weight:700; } .plan-week tr.pw-tomorrow .pw-date { color:var(--warn); font-weight:600; } .plan-week .pw-body { color:var(--ink); line-height:1.4; } .plan-week .pw-none { color:var(--mut); } .pw-next-label { color:var(--mut); font-size:var(--fs-2xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin:var(--sp-3) 0 var(--sp-1); padding-top:var(--sp-2); border-top:1px dashed var(--line); } .empty { text-align:center; color:var(--mut); padding:var(--sp-4) 0; } .foot { text-align:center; color:#828c9c; font-size:var(--fs-xs); margin-top:var(--sp-6); } /* Кнопка «База знаний» в подвале — единственный вход в справочник на телефоне (там сайдбар с пунктом .sb-kb скрыт, см. мобильный @media: .sb-nav{display:none}). */ .foot .kb-btn { display:inline-flex; align-items:center; gap:8px; margin-bottom:var(--sp-3); padding:var(--sp-3) var(--sp-4); border:1px solid var(--line); border-radius:var(--r-full); background:var(--card); color:var(--ink); font-size:var(--fs-sm); font-weight:600; text-decoration:none; } .foot .kb-btn:hover { border-color:var(--acc); color:var(--acc); } .foot .kb-btn .icon { width:16px; height:16px; } /* карточка добавления приёма */ .ghost { background:var(--card2); border:1px solid var(--line); color:var(--ink); } .ghost:hover { filter:none; border-color:var(--mut); } .or { text-align:center; color:var(--mut); font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.5px; margin:var(--sp-4) 0 var(--sp-1); } a.synccard, button.synccard, div.synccard { display:flex; align-items:center; gap:8px; padding:var(--sp-4); font-weight:700; color:var(--ink); width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:var(--sp-3); font-family:inherit; font-size:var(--fs-base); cursor:pointer; } a.synccard .sub, button.synccard .sub, div.synccard .sub { color:var(--mut); font-weight:500; font-size:var(--fs-xs); margin-left:auto; } a.synccard .chev, button.synccard .chev { color:var(--mut); display:inline-flex; } /* призрак-превью интеграции в демо (Strava) — тот же вид карточки .synccard, но не кликабельный div (не /
): приглушаем и метим бейджем «пример», как у hr-ghost, чтобы не выдать за реальное подключение */ div.synccard.gc-ghost { position:relative; cursor:default; } div.synccard.gc-ghost > svg.icon, div.synccard.gc-ghost > span:not(.hr-ghost-badge) { opacity:.55; } /* нижняя шторка с фото-формой */ .backdrop { position:fixed; inset:0; z-index:44; background:rgba(0,0,0,.55); display:none; } .backdrop.show { display:block; } .sheet { position:fixed; left:0; right:0; bottom:0; z-index:46; transform:translateY(101%); transition:transform var(--transition-fast) ease; background:var(--card); border-radius:var(--r-md) var(--r-md) 0 0; border-top:1px solid var(--line); padding:var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom)); max-height:88vh; overflow:auto; } .sheet.show { transform:translateY(0); } .sheet .inner { max-width:680px; margin:0 auto; } .sheet .sh { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-2); } .sheet .sh b { font-size:var(--fs-md); } .sheet .close { background:transparent; border:0; color:var(--mut); font-size:var(--fs-3xl); line-height:1; padding:var(--sp-1) var(--sp-2); } /* ── адаптация к жаре: тепловая шкала ──────────────────────────── */ .heat-timeline { display:flex; gap:2px; align-items:flex-end; height:36px; margin:var(--sp-3) 0 var(--sp-1); } .heat-bar { flex:1; border-radius:var(--r-sm) var(--r-sm) 0 0; min-height:2px; background:var(--warn); opacity:.75; transition:opacity var(--transition-fast); } .heat-bar.today { background:var(--ink); opacity:1; } .heat-bar:hover { opacity:1; } .heat-dates { display:flex; justify-content:space-between; font-size:var(--fs-2xs); color:var(--mut); margin-bottom:var(--sp-2); } .heat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:var(--sp-3) 0; } .heat-cell { background:var(--card2); border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-3); } .heat-cell .hc-val { font-size:var(--fs-xl); font-weight:800; font-variant-numeric:tabular-nums; } .heat-cell .hc-lbl { font-size:var(--fs-2xs); color:var(--mut); margin-top:0; line-height:1.3; } .heat-cell .hc-band { font-size:var(--fs-2xs); font-weight:700; margin-top:var(--sp-1); } .heat-cell.warn .hc-val { color:var(--warn); } .heat-cell.good .hc-val { color:var(--good); } .heat-cell.acc .hc-val { color:var(--over); } .hready-bar { height:8px; background:var(--card2); border:1px solid var(--line); border-radius:var(--r-full); overflow:hidden; margin:var(--sp-1) 0 var(--sp-2); } .hready-fill { height:100%; border-radius:var(--r-full); } .hready-fill.high { background:var(--good); } .hready-fill.mid { background:var(--warn); } .hready-fill.low { background:var(--over); } .sauna-form { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:var(--sp-3); } .sauna-form select { width:100%; } .sauna-row { background:var(--card2); border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-3); display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-2); font-size:var(--fs-sm); } .sauna-row .sr-info { color:var(--mut); font-size:var(--fs-xs); margin-left:var(--sp-2); } /* оверлей загрузки */ .busy { position:fixed; inset:0; z-index:60; display:none; place-items:center; background:rgba(8,10,14,.8); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } .busy.show { display:grid; } .busy .box { text-align:center; padding:var(--sp-6); } .spin { width:46px; height:46px; margin:0 auto var(--sp-4); border-radius:50%; border:4px solid var(--line); border-top-color:var(--acc); animation:spin .9s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } .busy .msg { font-weight:700; font-size:var(--fs-md); } .busy .sub { color:var(--mut); font-size:var(--fs-xs); margin-top:var(--sp-2); max-width:280px; } /* лёгкий индикатор быстрых (не-ИИ) операций с перезагрузкой — вместо полноэкранного оверлея: тонкая бегущая полоса сверху страницы + приглушение карточки формы */ .mg-progress { position:fixed; top:0; left:0; right:0; height:3px; overflow:hidden; z-index:70; opacity:0; pointer-events:none; transition:opacity var(--transition-fast); } .mg-progress.show { opacity:1; } .mg-progress::after { content:""; position:absolute; top:0; left:0; height:100%; width:35%; background:var(--ink); animation:mg-slide 1s ease-in-out infinite; } @keyframes mg-slide { 0% { left:-35%; } 100% { left:100%; } } .is-saving { opacity:.6; pointer-events:none; transition:opacity var(--transition-fast); } /* точка-чип цвета зоны (Z1–Z5) — рядом с типом сессии/интенсивностью, текст рядом остаётся обычного цвета (см. правило проекта: зона красит только чип/точку, никогда сам текст) */ .zdot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:var(--sp-1); vertical-align:1px; flex-shrink:0; } /* гейдж-кольцо готовности (см. macro ready_gauge) */ .ready-gauge { flex-shrink:0; } .ready-gauge .rg-bg { stroke:var(--elev); } .ready-gauge .rg-tick { stroke:var(--line); stroke-width:2px; } .ready-gauge .rg-val { stroke-linecap:round; } .ready-gauge.rg-good .rg-val { stroke:var(--good); } .ready-gauge.rg-warn .rg-val { stroke:var(--warn); } .ready-gauge.rg-acc .rg-val { stroke:var(--over); } .ready-gauge .rg-num { fill:var(--ink); font-weight:800; font-family:var(--font-num); letter-spacing:-.03em; font-variant-numeric:tabular-nums lining-nums; } .ready-gauge .rg-den { fill:var(--mut); font-weight:600; font-family:var(--font-num); font-variant-numeric:tabular-nums lining-nums; } /* Сигнатурный момент: при ПЕРВОМ за день открытии кольцо дорисовывается от нуля до вердикта, число считается вверх синхронно (JS ниже вешает .rg-reveal и ведёт счёт). Второй заход в тот же день — кольцо просто стоит, иначе «момент» превращается в надоедливый тик. Анимируем stroke-dashoffset, а не dasharray: браузер тянет его плавнее. Без JS кольцо статично и целое — ничего не ломается. */ .ready-gauge.rg-reveal .rg-val { animation: rg-draw 1100ms cubic-bezier(.22,1,.36,1) both; } @keyframes rg-draw { from { stroke-dashoffset: var(--rg-circ); } to { stroke-dashoffset: var(--rg-off); } } @media (prefers-reduced-motion: reduce) { .ready-gauge.rg-reveal .rg-val { animation: none; } } /* ════════════════════════════════════════════════════════════════════ РЕДИЗАЙН «КОМАНДНЫЙ ЦЕНТР»: сайдбар + герой + полоса формы + дашборд. ════════════════════════════════════════════════════════════════════ */ /* --sidebar/--panel/--elev/--sbw — в tokens.css (алиасы на s0/s1/s2). */ html { scroll-behavior:smooth; } body, button, input, select, textarea { font-family:var(--font-sans); } [id^="sec-"] { scroll-margin-top:108px; } /* Вспышка-ориентир после перехода по якорю из сайдбара: на двухколоночном дашборде рядом с целевой карточкой на той же высоте стоит соседняя — без подсветки непонятно, куда именно ты перешёл (жалоба 13.07). */ .anchor-flash { animation: anchorFlash 1.6s ease-out; } @keyframes anchorFlash { 0%, 35% { outline: 2px solid var(--acc); outline-offset: 3px; } 100% { outline: 2px solid transparent; outline-offset: 3px; } } /* единый набор иконок (Lucide через ) */ .icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } .sec-h .icon, .ttl .icon, .row > summary > .icon, .synccard > .icon { width:16px; height:16px; } .row > summary .chev .icon { width:16px; height:16px; } .app { display:grid; grid-template-columns:var(--sbw) 1fr; min-height:100vh; align-content:start; } /* ── САЙДБАР ─────────────────────────────────────────────────────── */ .sidebar { position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; background:var(--sidebar); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:var(--sp-4) var(--sp-3); } .sb-brand { display:flex; align-items:center; gap:8px; padding:var(--sp-1) var(--sp-2) var(--sp-3); font-size:var(--fs-base); font-weight:800; letter-spacing:.2px; line-height:1.15; } .sb-brand .logo { width:32px; height:32px; border-radius:var(--r-sm); display:grid; place-items:center; background:#0E1013; flex-shrink:0; color:#F2F3F4; } /* знак Ingegnere на графите, как иконка приложения (09.10) */ .sb-brand .logo .icon { width:18px; height:18px; } .sb-brand small { display:block; color:var(--mut); font-size:var(--fs-2xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-top:var(--sp-1); } .sb-day { display:flex; align-items:center; gap:4px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-1); margin:var(--sp-1) var(--sp-1) var(--sp-2); } /* Аудит №14 назвал стрелки дня «основной навигацией продукта» с целью 30×30. Зона тапа была добрана псевдоэлементом и раньше, но сама кнопка осталась мелкой — и на глаз, и в замерах. Теперь 40×40 визуально (полоса дня от этого не растёт: её высота задана паддингом) и 44×44 по касанию. */ .sb-day a.step { width:40px; height:40px; display:grid; place-items:center; border-radius:var(--r-sm); color:var(--mut); position:relative; } .sb-day a.step::before { content:""; position:absolute; inset:-2px; } .sb-day a.step:hover { background:var(--elev); color:var(--ink); } .sb-day .d { flex:1; text-align:center; font-size:var(--fs-xs); font-weight:700; } .sb-day .d small { display:block; color:var(--mut); font-weight:500; font-size:var(--fs-2xs); } .sb-nav { display:flex; flex-direction:column; gap:1px; } .sb-nav a, .sb-navhead { display:flex; align-items:center; gap:8px; padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); border-radius:var(--r-sm); border-left:2px solid transparent; color:var(--mut); font-size:var(--fs-xs); font-weight:600; } .sb-nav a:hover, .sb-navhead:hover { background:var(--elev); color:var(--ink); } /* Аудит №14: вид и секция подсвечивались ОДИНАКОВО — два активных пункта разом, и непонятно, где ты. Теперь уровни разные: активный ВИД — фон (это «где я»), активная секция — только тонкая полоса слева («докуда долистал»). B1.4: полоса раньше была inset box-shadow (без сдвига раскладки) — теперь border-left, а базовый паддинг заранее уменьшен на 2px слева, чтобы появление полосы не сдвигало текст. */ .sb-navhead.active { background:rgba(224,98,59,.12); color:var(--ink); border-left-color:var(--acc); } .sb-nav a.active { background:transparent; color:var(--ink); border-left-color:var(--mut); } /* Заголовок группы вида (Сегодня/План/Тренды/Профиль) — сама навигация теперь ОДНА система (сайдбар); бывшие горизонтальные .viewtabs удалены (жалоба нескольких аудитов подряд на «двойную навигацию»). Заголовок — button с data-view-tab, существующий JS переключения видов подхватывает его сам. */ /* justify-content обязателен: у