/* ═══════════════ «МОЁ» ═══════════════ Зона: личный стол «Моё» целиком (.moyo и всё внутри), лента по эталону frontend/mockups/moyo_final.html, дневник, записки (панель справа), шапка доски человека, запасной экран viewMe (.me-…, .thought). ПРАВИЛО РАЗРЕЗА: этот файл правит ОДИН агент за раз и только свою зону. Подключается ЧЕТВЁРТЫМ — после card, до screens. Цвета — только var(--…) платформы (§1), радиусы/тени — только платформенные. */ /* шапка доски человека */ .person-sub{font-size:12.5px;color:var(--ink-2);margin-top:2px} .person-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .pchip{font-size:12px;font-weight:600;color:var(--ink-2);background:var(--surface-2);border-radius:8px;padding:4px 9px} .pchip.hot{color:var(--st-fire);background:color-mix(in srgb,var(--st-fire) 12%,transparent)} /* ═════════════ ВКЛАДКА «МОИ МЫСЛИ И ЗАДАЧИ» (запасной viewMe) ═════════════ */ .me-focus{background:var(--accent-soft);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:15px 18px;margin-bottom:22px;display:flex;gap:13px;align-items:flex-start} .me-focus .fx-ic{width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;flex:none} .me-focus .fx-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .me-focus .fx-b{min-width:0} .me-focus .fx-l{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:4px} .me-focus .fx-txt{font-size:13.5px;line-height:1.5;color:var(--ink);white-space:pre-wrap} .me-note{display:flex;gap:9px;background:var(--surface);border-radius:var(--r-card);box-shadow:var(--sh-2);padding:12px;margin-bottom:16px} .me-note textarea{flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;resize:none;min-height:46px;outline:none;transition:border .15s,box-shadow .15s;line-height:1.4} .me-note textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .me-note .add{align-self:stretch;padding:0 16px;border-radius:11px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:13px;box-shadow:var(--sh-1);transition:background .2s} .me-note .add:hover{background:var(--accent-hover)} .thought{background:var(--surface);border-radius:14px;box-shadow:var(--sh-1);padding:13px 15px;margin-bottom:10px;border-left:3px solid var(--st-new)} .thought .tx{font-size:14px;line-height:1.42;margin-bottom:8px;white-space:pre-wrap} .thought .tb{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .thought .tg{font-size:11.5px;color:var(--ink-2);font-weight:500} .thought .to-task{margin-left:auto;font-size:12px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:5px;background:var(--accent-soft);padding:6px 11px;border-radius:8px;transition:transform .16s var(--ease)} .thought .to-task:active{transform:scale(.95)} .thought .to-task svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* ═══════════════ ЭКРАН «МОЁ» — общий корень ═══════════════ Правило переноса (§3.4): каждый селектор живёт под корнем .moyo, приставка m. Исключение одно и обоснованное: записки живут в платформенном #drawer, который стоит ВНЕ .moyo, — их классы носят уникальную приставку mnd-. */ .moyo{min-width:0} .moyo .mn{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .moyo .mbrand{font-size:17px;font-weight:700;white-space:nowrap;letter-spacing:.01em} /* ─────────── ЛИПКАЯ ПОЛОСА: имя + вкладки + записки + счётчики + неделя ─────────── Всё служебное живёт В липкой полосе и не отодвигает работу вниз (эталон). */ .moyo .mfbar{position:sticky;top:var(--mhdr,96px);z-index:20;background:var(--bg); box-shadow:0 1px 0 var(--line);margin:-18px -16px 0;padding:6px 16px 6px} /* ⚠️ ПРИ ОТКРЫТОЙ КАРТОЧКЕ ЛИПКОСТИ НЕТ. Карточка (#inlineTask) встраивается в поток НИЖЕ полосы и не позиционирована, а `position:sticky` с z-index:20 рисуется поверх любого непозиционированного потока — никаким z-index это не лечится, только снятием позиционирования. Замер 03.09 на карточке 787: палец в центре органов карточки возвращал .mftop и чипы проектов (10 из 19 на 375) и .mpc, .mpc-eye, .mpb (8 из 27 на 1440). Признак берём тот, что уже ставит app-core.js при открытии, — саму секцию #inlineTask; своего класса не заводим. Карточку закрыли — узла нет, полоса снова липкая. .hrbar (липкая полоса узла на «Хронике», z-index:19) в правило НЕ входит — это проверено, а не забыто. На «Хронике» якорей [data-tanchor] нет ни одного, карточка уходит последней веткой app-core.js в конец #screen, ЗА весь блок хроники; липкий ход .hrbar ограничен её родителем и к этому месту уже кончается. Замер 03.09 при ЖИВОЙ липкой .hrbar: перекрытие с карточкой 0 px (.hrbar 55…109, карточка 139…814), 6 ПАЛЕЦ промахов 0 на 375 и 1440. Брака нет — правило ей не нужно, а липкость полосы дня стоит денег. */ body:has(#inlineTask) .moyo .mfbar{position:static} .moyo .mftop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0} .moyo .mftabs{display:flex;gap:4px;padding:4px;background:var(--surface);border-radius:var(--r3); box-shadow:var(--sh-1);min-width:0} .moyo .mftabs button{min-height:44px;padding:0 13px;border-radius:var(--r2);font-size:13px; font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center; gap:7px;white-space:nowrap;transition:background .15s var(--ease),color .15s var(--ease)} .moyo .mftabs button:hover{color:var(--ink)} .moyo .mftabs button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)} /* min-width наравне с min-height: на 700 и уже подпись прячется (правило ниже), и от кнопки остаётся значок — тач-цель падала до 35×44, а §3 требует 44×44 */ .moyo .mfnotesb{min-height:44px;min-width:44px;justify-content:center;padding:0 10px;border-radius:var(--r1);font-size:13px; font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px; white-space:nowrap;transition:background .15s var(--ease),color .15s var(--ease)} .moyo .mfnotesb:hover{color:var(--accent);background:var(--surface)} /* ⚠️ СЧЁТЧИКОВ-КНОПОК (.mfnums) ЗДЕСЬ БОЛЬШЕ НЕТ, И ПРАВИЛ ПОД НИХ ТОЖЕ. Они дублировали шапки полос («18 ЖДУТ ВАС» на y=115 и «18 ЖДУТ ВАШЕГО СЛОВА» на y=228 в одном поле зрения) и не работали: на 1440 обе полосы и так на экране, нажатие не двигало прокрутку. Разметку снял moyoBarHtml. Побочная польза: липкая полоса на 768 больше не раздувается до 320 px — вкладки и «Записки» помещаются в одну строку без правила @820. */ .moyo .mfnotesb{margin-left:auto} @media(max-width:820px){ .moyo .mftop{gap:8px} } @media(max-width:700px){ /* min-width наравне с min-height (§3): с четвёртой вкладкой кнопки ужались до 42,1 px по ширине — сторож вёрстки поймал это числом на индонезийском, где подписи короче. Тач-цель органа управления не бывает меньше 44×44. */ .moyo .mftabs button{flex:1 1 0;min-width:44px;padding:0 6px;gap:5px;font-size:12px} .moyo .mftabs{padding:3px} .moyo .mfnotesb span{display:none} } /* ═══════════════ ЛЕНТА «МОЁ» — ПЕРЕСБОРКА 10.08.2026 (карточка 718) ═══════════════ Три уровня внимания и ничего сверх них. Ритм считан, а не подобран на глаз: модуль 4 px, строка ровно ДВУХ высот — 56 px (название в одну линию) и 75 px (в две). Внутри строки: 8 сверху · название 19 · зазор 4 · вторая линия 18 · 7 снизу (+1 px волосок = оптические 8). Расстояние ВНУТРИ строки (4) втрое меньше расстояния МЕЖДУ полосами (16) — только так группы читаются группами. */ /* ── ТРЕТЬЯ СТУПЕНЬ СЕРОГО, ЛОКАЛЬНАЯ ──────────────────────────────────────── Замер: --ink-2 #67635A и --ink-3 #6B675E отличаются на 1.06:1 — глаз их не различает, поэтому «три уровня» на экране были двумя. Правка самого токена — это вся платформа сразу и решение владельца (§1), поэтому здесь ступень считается ИЗ платформенных переменных, без единого нового хекса: --ink-2, разбавленный бумагой карточки, даёт ~4.5:1 к фону и ~1.3:1 к --ink-2. В тёмной теме --ink-3 (#9A9384) уже честная ступень — берём её как есть. */ .moyo{--m3:color-mix(in srgb, var(--ink-2) 88%, var(--card))} :root[data-theme="dark"] .moyo{--m3:var(--ink-3)} @media (prefers-color-scheme:dark){ .moyo{--m3:var(--ink-3)} } :root[data-theme="light"] .moyo{--m3:color-mix(in srgb, var(--ink-2) 88%, var(--card))} /* ── ЦВЕТА ЗНАЧКОВ ПРОЕКТОВ (п.3 владельца: «у каждого проекта должны быть значки — как у имён») ────────────────────────────────────────────────────── БЫЛО: одиннадцать сырых хексов --pj0..--pj4/--pj-ink на две темы. Это прямое нарушение §1 («новых цветов не существует»), и сторож их не ловил — он проверяет ИНЛАЙН-стили, а не файл стилей, то есть дыра была ещё и в проверке. СТАЛО: ЛЕСТНИЦА ОДНОГО АКЦЕНТА. Ни одного нового цвета — только платформенные переменные разной глубины и насыщенности: ps0 — сам --accent; ps1 — акцент, углублённый чернилами (--ink); ps2 — акцент, приглушённый до серо-стального (--ink-2); ps3 — акцент с уходом в шалфей (--st-done); ps4 — нейтраль (--ink-2), гнездо «прочие проекты». Почему это безопаснее прежних хексов: лестница строится ИЗ акцента, поэтому не конкурирует с каналом статуса (спина строки красится --st-*, и ни одна ступень значка не совпадает с ней), а смена темы и смена акцента везут значки за собой сами. Текст значка — платформенный --on-accent (в тёмной теме он тёмный), контраст в обеих темах от 5,7:1 до 10:1. Опознание проекта несёт МОНОГРАММА, она уникальна по построению (moyoProjIndex); цвет — только грубая группировка боковым зрением. */ .moyo .mpb.ps0{--pj:var(--accent)} .moyo .mpb.ps1{--pj:color-mix(in srgb, var(--accent) 55%, var(--ink))} .moyo .mpb.ps2{--pj:color-mix(in srgb, var(--accent) 30%, var(--ink-2))} .moyo .mpb.ps3{--pj:color-mix(in srgb, var(--accent) 62%, var(--st-done))} .moyo .mpb.ps4{--pj:var(--ink-2)} /* «моя неделя» словами — ПЕРЕЕХАЛА С ЛЕНТЫ НА «ДНЕВНИК»: над работой стоял третий пересказ того же («сколько»), а счётчики отвечают на это первыми */ .moyo .mfweek{font-size:13px;line-height:1.55;color:var(--ink-2);padding:0 0 12px;min-width:0} .moyo .mfweek b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums} .moyo .mfar{color:var(--ink-3);font-weight:600;padding:0 2px} /* число «ждут вашего слова» — настоящий ход на полосу ленты, поэтому оно выглядит нажимаемым и имеет полную тач-цель (§3), не ломая строку текста */ .moyo .mfwgo{display:inline-flex;align-items:center;justify-content:center;min-width:44px; min-height:44px;margin:-13px 0;padding:0 8px;border-radius:var(--r1);color:var(--accent); font-weight:700;font-size:13px;text-decoration:underline;text-underline-offset:3px; vertical-align:middle;transition:background .15s var(--ease)} .moyo .mfwgo:hover{background:var(--accent-soft)} /* ─────────── БЫСТРЫЙ ФИЛЬТР ПО ПРОЕКТАМ (п.10) ─────────── Ряда нет вовсе, если проект один: кнопка-одиночка это шум, а не фильтр. В ЭТОЙ ЖЕ СТРОКЕ СТОИТ ПЕРЕКЛЮЧАТЕЛЬ ВИДА (.mpvid) на вкладке «Моя доска». Лента чипов и переключатель — РАЗНЫЕ коробки: лента (.mpscroll) на телефоне едет вбок прокруткой, и всё, что положено внутрь неё, уезжает за край вместе с чипами. Переключатель закреплён снаружи ленты и не двигается. НА ШИРОКОМ ЭКРАНЕ переключатель остаётся на своей строке — flex-basis 100% переносит его целиком под чипы, как он и стоял до правки. */ .moyo .mprow{display:flex;gap:6px;flex-wrap:wrap;padding:0 0 6px;margin-top:-2px} .moyo .mpscroll{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 auto;min-width:0} .moyo .mpvid{flex:0 0 100%;display:flex;align-items:center;justify-content:flex-end;padding-top:2px} .moyo .mpc{min-height:44px;padding:0 11px;border-radius:var(--r2);display:inline-flex; align-items:center;gap:7px;background:var(--surface);color:var(--ink-2);font-size:12px; font-weight:600;transition:background .15s var(--ease),color .15s var(--ease)} .moyo .mpc:hover{color:var(--ink)} .moyo .mpc.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)} .moyo .mpc .t{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .moyo .mpc .n{color:var(--ink-3);font-weight:700} /* ─────────── КОЛОНКИ ЛЕНТЫ: одна до 1100, две дальше ─────────── */ .moyo .mfwrap{padding-top:10px} .moyo .mfcols{display:grid;gap:16px;grid-template-columns:1fr;align-items:start} .moyo .mfcols > div{min-width:0;display:flex;flex-direction:column;gap:16px} @media(min-width:1100px){ .moyo .mfcols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .moyo .mfcols.one{grid-template-columns:minmax(0,880px)} } /* ─────────── ПОЛОСА И ЕЁ БУМАГА ─────────── */ /* Подвод к полосе считается от РЕАЛЬНОЙ высоты липкой полосы (--mfbarh ставит moyoAfterRender), а не от зашитых 128 px: на 768 полоса вырастала до 320 px и шапка полосы уходила под неё почти на сто пикселей. */ .moyo .mfband{min-width:0;scroll-margin-top:calc(var(--mhdr,96px) + var(--mfbarh,128px) + 10px)} .moyo .mfbh{display:flex;align-items:baseline;gap:8px;min-height:18px;padding:0 4px 7px} .moyo .mfbh .n{font-size:13px;font-weight:700;color:var(--ink)} .moyo .mfbh .w{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ─────────── БУМАЖНАЯ СТРОКА, А НЕ ТАБЛИЦА ─────────── Замер адвоката: расстояние между соседними строками 0 px, радиуса нет, тени нет, разделял только волосок — строки склеились в таблицу. Владелец требовал «какое-то минимальное расстояние — визуально» и хвалил эталон mockups/moyo2.html, где строка = отдельная бумажка (рамка, радиус, тень, просвет 8 px). Возвращаем ровно это: .mfpaper больше не единый лист, а КОЛОНКА отдельных бумажек с просветом 8 px. Ритм сохранён: 8 внутри строки против 8 между строками и 16 между полосами — группы по-прежнему читаются группами, потому что между полосами вдвое больше воздуха, чем между строками, и там ещё стоит шапка. */ .moyo .mfpaper{display:flex;flex-direction:column;gap:8px;min-width:0} /* «что будет с просмотренным» — экран отвечает словами, а не перестановкой строк под рукой (п.11 владельца + §8 регламента) */ /* примечание живёт В ШАПКЕ полосы справа (см. moyo.lenta.vid.js): в потоке оно толкало следующую полосу на 21px при первом же подтверждении. Здесь оно занимает пустое место справа от заголовка и ничего не двигает. ⚠️ КОРОБКА РАССЧИТАНА НА ФРАЗУ, А НЕ НАОБОРОТ. Одна линия с многоточием на 390 px вмещает около 30 знаков, и пока сюда склеивались две фразы по 50, из ответа читалась половина первой. Фраза теперь одна и короткая («3 уедут вниз» — 12 знаков, «3 turun» — 7), а 60% ширины оставлены запасом на двузначное число и на длинную ступень множественного числа. Многоточие и nowrap оставлены СТОРОЖЕМ: перенос на вторую линию поднял бы шапку на 15 px и двинул весь поток вниз — то самое движение под рукой, которое §8 запрещает. */ .moyo .mfnote{margin-left:auto;padding:0 0 0 10px;font-size:11px;line-height:1.4; color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; max-width:60%;flex:none;text-align:right} /* ─────────── СТРОКА: три уровня, две высоты, ни одной кнопки действия ─────────── .mfhit — подложка на всю строку (открыть карточку), текст поверх неё pointer-events:none: наложение невозможно по построению. Единственный второй элемент — «Отложить», он flex-соседом справа, а не поверх текста. */ .moyo .mfr{position:relative;display:flex;align-items:stretch;width:100%;min-height:56px; background:var(--card);border:1px solid var(--line);border-radius:var(--r3); box-shadow:var(--sh-1);overflow:hidden; transition:background .15s var(--ease),box-shadow .15s var(--ease)} .moyo .mfr:hover{background:var(--accent-ghost);box-shadow:var(--sh-2)} .moyo .mfr.on{background:var(--accent-ghost);box-shadow:var(--sh-2)} /* канал А — СТАТУС: цветная спина слева, ровно четыре краски */ .moyo .mfr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--st-new);z-index:1} .moyo .mfr.s-rev::before{background:var(--st-review)} .moyo .mfr.s-prog::before{background:var(--st-prog)} .moyo .mfr.s-new::before{background:var(--st-new)} .moyo .mfr.s-done::before{background:var(--st-done)} .moyo .mfhit{position:absolute;inset:0;width:100%;height:100%;background:none;z-index:0; text-align:left;border-radius:0} .moyo .mfbody{position:relative;z-index:1;pointer-events:none;box-sizing:border-box; flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px;justify-content:center; padding:8px 8px 7px 15px} /* УРОВЕНЬ 1 — НАЗВАНИЕ: единственное тёмное и единственное полужирное в строке. Клампим в две линии (а не режем в одну): 72 % названий однострочные, в две укладывается всё, кроме одного чудовища на 126 знаков — у него title и карточка. Больше двух линий нет никогда — отсюда ровно две высоты строки. */ .moyo .mft{font-size:15px;font-weight:600;line-height:19px;color:var(--ink); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; overflow-wrap:anywhere} /* УРОВЕНЬ 2 и 3 — одна линия: значок проекта · где · одно событие */ .moyo .mfl2{display:flex;align-items:center;gap:6px;height:18px;min-width:0; font-size:11px;line-height:18px;overflow:hidden} /* точка-разделитель ставится ТОЛЬКО между текстовыми кусками (.mfx) и никогда перед первым: значок проекта и точка отчёта — не текст, отделять их нечем */ .moyo .mfl2 > .mfx ~ .mfx::before{content:"· ";opacity:.55} /* ИМЯ ИСПОЛНИТЕЛЯ — первым из текста в полосе «Я РАЗДАЛ — СЛЕЖУ»: полоса про людей, и раньше в ней не было ни одного имени на тридцать строк. */ .moyo .mfwho{flex:0 1 auto;max-width:42%;font-weight:600;color:var(--ink-2); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .moyo .mps{flex:0 1 auto;max-width:45%;font-weight:600;color:var(--m3); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .moyo .mpe{flex:1 1 auto;min-width:0;color:var(--m3); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ═══ § МОЁ: ХОД — ГЛАГОЛ МОЕГО СЛЕДУЮЩЕГО ШАГА ═══ Одно слово с сервера (hod_vidy): делать · принять · ответить · назначить. Стандарт «запах информации»: строка списка обязана дать понять, что за ней, ДО открытия. Краска — та же ступень, что у имени исполнителя рядом (--ink-2), новых цветов не заводим (§1). Слово короткое и не переносится: вторая линия строки одна и высотой ровно 18 px. */ .moyo .mfhod{flex:none;font-weight:600;color:var(--ink-2);white-space:nowrap} /* под курсором и у открытой строки третий уровень темнеет до --ink-2: на подсветке --accent-ghost светлая ступень не добирает 4.5:1, а читают именно эту строку */ .moyo .mfr:hover .mpe,.moyo .mfr.on .mpe{color:var(--ink-2)} /* немой признак отчёта: точка вместо 614 знаков текста отчёта в списке. Залитая — отчёт есть, полая — сдали молча. Краска ОДНА и та же, что у спины строки (--st-review = «на проверке»): нового канала не заводим, терракоту сюда не пускаем — она про срок и только про срок (§1). */ .moyo .mpd{flex:none;width:7px;height:7px;border-radius:50%;background:var(--st-review)} .moyo .mpd.no{background:transparent;box-shadow:inset 0 0 0 1.5px var(--st-review)} /* ЗНАЧОК ПРОЕКТА: квадрат со скруглением — круг на платформе занят людьми (.avatar), два разных объекта не имеют права выглядеть одинаково. Стоит в начале ВТОРОЙ линии, а не перед названием: цветное пятно левее названия перехватывало бы первую фиксацию глаза, а первым обязано быть имя. */ .moyo .mpb{--pj:var(--accent);flex:none;width:18px;height:18px;border-radius:var(--r1); display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700; line-height:1;letter-spacing:.01em;background:var(--pj);color:var(--on-accent)} /* разобранная строка: значок становится контурным — «потухло» видно боковым зрением по столбцу значков, без единого нового цвета и без opacity */ .moyo .mpb.out{background:transparent;color:var(--pj);box-shadow:inset 0 0 0 1.5px var(--pj)} /* канал Б — СРОК: терракота, и только когда срок ГОРИТ (сегодня/просрочен). Негорящие даты печатались у 31 строки из 34 — это и был второй «сегодня». */ .moyo .mfdue{position:relative;z-index:1;pointer-events:none;flex:none;align-self:center; margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600; white-space:nowrap;color:var(--alarm);background:var(--alarm-bg)} .moyo .mfdue.late{box-shadow:inset 0 0 0 1px var(--alarm-line)} /* у решённой строки срок не горит — чипа НЕ ВИДНО, но его место сохранено: visibility, а не display, иначе название получало бы лишние 87 px и строка худела 77 → 58 px в момент приёмки (§8, «экран не прыгает под руками») */ .moyo .mfdue.mute{visibility:hidden} /* ОТЛОЖИТЬ (п.9) — единственная вторая цель строки. Это не действие над задачей, а личная полка смотрящего: на сервер не ходит, отменяется тостом. */ .moyo .mfsnz{position:relative;z-index:2;flex:none;align-self:center;width:44px;height:44px; margin-right:5px;display:grid;place-items:center;color:var(--ink-3);border-radius:var(--r1); transition:color .15s var(--ease),background .15s var(--ease)} .moyo .mfsnz:hover{color:var(--accent);background:var(--surface)} .moyo .mfsnz svg{flex:none} /* РАЗОБРАННАЯ СТРОКА: вес и плотность, а не цвет и не прозрачность. Цветовые каналы уже заняты законом, а opacity валит контраст. ⚠️ Гаснет ТОЛЬКО ВЕС. Сведения (кто сдал, когда, кому раздано) остаются — «прочитал» не равно «решил», и по бледной строке без слов решать нечем. */ .moyo .mfr.seen .mft{font-weight:500;color:var(--ink-2)} /* ПОДЗАГОЛОВОК ПАЧКИ: одинаковое подряд идущее событие печатается ОДИН раз с числом строк. Раньше «ПП Баги сдал Прораб ИИ, вчера» стояло пять раз подряд — это и есть жалоба владельца «зачем повторяется два раза». */ /* краска --ink-3, а НЕ локальная третья ступень --m3: подзаголовок стоит на фоне страницы, а --m3 посчитана к бумаге карточки и на --bg даёт 4.35:1 — ниже AA (поймано сторожем на 390 в светлой теме). Здесь та же краска, что у шапки полосы рядом, и она на --bg честные 5.4:1. */ .moyo .mfsub{display:flex;align-items:baseline;gap:6px;min-width:0; padding:2px 6px 0;font-size:11px;line-height:1.35;color:var(--ink-3)} .moyo .mfsub .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .moyo .mfsub .n{flex:none;font-weight:700;color:var(--ink-2)} /* ГРАНИЦА ПАЧКИ: подзаголовок висел над семнадцатью бумажками, и по экрану было не понять, докуда пачка. Тонкая линия слева идёт от подзаголовка до последней строки пачки и обрывается там, где пачка кончилась. Отступ 9 px — тот же модуль 4, что и весь ритм ленты (8+1 на саму линию). Краска платформенная (--line), новых цветов не заводим (§1). Внутренний зазор тот же, что у .mfpaper: пачка меняет ГРАНИЦУ группы, а не ритм строк. */ .moyo .mfpack{display:flex;flex-direction:column;gap:8px;min-width:0; padding-left:9px;border-left:2px solid var(--line)} /* подзаголовок внутри пачки прижат к своей линии: 6 px отступа стояли, пока линии не было, теперь они отодвигали заголовок от собственной границы */ .moyo .mfpack > .mfsub{padding-left:0} /* РЕШЁННАЯ СТРОКА, ОСТАВШАЯСЯ НА МЕСТЕ (главный вопрос владельца п.11): потухшая бумажка с пометкой словом. Пунктир — «этой бумажки здесь уже нет по делу, но с глаз она не пропала»; вниз уедет при следующем заходе. */ .moyo .mfr.gone{background:var(--surface);box-shadow:none;border-style:dashed} .moyo .mfr.gone:hover{background:var(--accent-ghost);box-shadow:none} .moyo .mfr.gone .mft{font-weight:500;color:var(--ink-2)} /* ⚠️ ЗАЧЁРКНУТОЕ НАЗВАНИЕ — ПРИЗНАК «ЭТОЙ СТРОКИ БОЛЬШЕ НЕТ В ДЕЛЕ», и он стоит только там, где это правда: у подтверждённой и у закрытой. ПРОСМОТРЕННАЯ (g-seen) живёт дальше: человек её ПРОЧИТАЛ, а не решил, и зачёркнутое название читалось бы как «сделано». Она гаснет весом и краской — ровно то, чего требовал владелец: «потухло», а не «сделано». */ .moyo .mfr.gone.g-done .mft,.moyo .mfr.gone.g-closed .mft{ text-decoration:line-through;text-decoration-color:var(--line)} /* ⚠️ ВТОРАЯ ЛИНИЯ У ПРИЗРАКА ОСТАЁТСЯ — ТЕМ ЖЕ СОСТАВОМ, ПРОСТО ПРИГЛУШЁННАЯ. Раньше решённая строка не печатала ни значка, ни места, ни события: высота падала 77 → 56 px, соседняя снизу подпрыгивала на 21 px под рукой (замер: 14 строк из 17, 294 px хода). §8 запрещает ровно это, и владелец требовал дословно «экран не прыгает под руками». Состав вернул moyoFeedRow, здесь — только приглушение: значок гаснет в контур, текст уходит на третью ступень. Ни opacity, ни новых красок: гаснет вес, а не сведения. */ .moyo .mfr.gone .mfl2{color:var(--m3)} .moyo .mfr.gone .mps,.moyo .mfr.gone .mpe,.moyo .mfr.gone .mfwho{ color:var(--m3);font-weight:500} .moyo .mfr.gone .mpb{background:transparent;color:var(--pj); box-shadow:inset 0 0 0 1.5px var(--pj)} /* ТОЧКИ ОТЧЁТА У ПРИЗРАКА НЕТ, И ПРАВИЛА ПОД НЕЁ ТОЖЕ. Здесь стояло «.mfr.gone .mpd» с подписью «место в строке занято, высота держится» — правило не срабатывало НИ РАЗУ: точку печатает только полоса решений (band="decide"), а призрак приходит с band="gone". Мёртвое правило с обещанием, которого оно не выполняет, хуже отсутствия правила. Высоту призрака держат слово о судьбе, место и событие — они на месте (см. moyoFeedRow). ПОМЕТКА СПРАВА — СЛОТ ПОСТОЯННОЙ ШИРИНЫ (44+5, как у «Отложить»). ⚠️ Здесь была пилюля СЛОВОМ на 77–113 px. Она сменяла кнопку в 49 px, то есть отнимала у названия до 64 px, и на 390 однострочное название переносилось — строка росла 58 → 77 px под рукой. Слово переехало во вторую линию (.mfdw), справа остался немой значок в том же следе: ширина названия у живой строки и у её призрака теперь одна и та же, значит одна и та же высота (§8). */ .moyo .mfok{position:relative;z-index:1;pointer-events:none;flex:none;align-self:center; width:44px;height:44px;margin-right:5px;display:grid;place-items:center;color:var(--ink-3)} .moyo .mfok svg{flex:none} /* слово «подтверждено / закрыто / просмотрено» во второй линии: обычный текстовый кусок со своей точкой-разделителем, приглушённый заодно со всей линией */ .moyo .mfdw{flex:none;font-weight:600;color:var(--ink-2)} /* ⚠️ ЗЕЛЕНЬ «ГОТОВО» — ТОЛЬКО У НАСТОЯЩЕГО ГОТОВОГО. Она стояла у ЛЮБОГО призрака и была третьим враньём подряд — после слова «решено» и галки: своя прочитанная задача выглядела принятой. Слово, значок и краска идут теперь из одного ключа (moyoGoneKind), поэтому разъехаться им больше негде. */ .moyo .mfr.gone.g-done .mfok,.moyo .mfr.gone.g-done .mfdw{color:var(--st-done)} /* «Показать все · N» — тоже отдельная бумажка, иначе она приклеивалась бы к последней строке ровно тем швом, который мы только что расшили */ .moyo .mfmore{width:100%;min-height:44px;padding:0 15px;font-size:13px;font-weight:600; color:var(--accent);background:var(--card);border:1px solid var(--line); border-radius:var(--r3);box-shadow:var(--sh-1); display:flex;align-items:center;gap:8px;text-align:left} .moyo .mfmore:hover{background:var(--accent-ghost)} .moyo .mfmore svg{flex:none} /* ─────────── МЕТКА ВИДА СОБЫТИЯ: ЗНАЧОК + ОДНО СЛОВО ─────────── ⚠️ ЭТО НЕ УКРАШЕНИЕ, А ТРЕБОВАНИЕ ДОСТУПНОСТИ. WCAG 1.4.1: цвет не может быть единственным признаком. Красно-зелёную пару не различают около 8 % мужчин (в замере по школьникам Джакарты — 4,6 % мальчиков), а вся бригада читает этот экран с телефона на солнце, где краска садится первой. Признаков три и они независимы: СЛОВО (читается вслух), ФОРМА ЗНАЧКА (рука, стрелка назад, галка, часы, точка, глаз, стрелка вниз) и МЕСТО строки в потоке. Убери краску целиком — экран останется читаемым. Краска здесь только подпирает: своих новых цветов не заводим, берём платформенные статусные и терракоту срока (§1). */ .moyo .mfv{flex:none;display:inline-flex;align-items:center;gap:4px; font-weight:700;color:var(--ink-2)} .moyo .mfv svg{flex:none} .moyo .mfv .w{white-space:nowrap} .moyo .mfv.v-help{color:var(--st-fire)} .moyo .mfv.v-ret{color:var(--st-fire)} /* позвали «@» — акцентом, как «новое»: это разговор, а не горящая работа, краснеть ему незачем. Различает его форма значка и своё слово. */ .moyo .mfv.v-mention{color:var(--accent)} .moyo .mfv.v-decide{color:var(--st-review)} /* v-hot в разметку не попадает: у горящего срока метки нет, его слово стоит чипом справа (.mfdue). Правило оставлено бы мёртвым — поэтому его тут нет. */ .moyo .mfv.v-new{color:var(--accent)} .moyo .mfv.v-watch{color:var(--ink-3)} .moyo .mfv.v-later{color:var(--ink-3)} /* у прочитанной строки метка гаснет заодно со всей второй линией: «новое», которое уже видели, не имеет права кричать тем же голосом */ .moyo .mfr.seen .mfv{color:var(--m3)} /* ОТЛОЖЕННАЯ СТРОКА в самом низу потока: тише соседей, но НЕ спрятана — человек убрал её с глаз, а не ослеп. Гасим бумагу и название, слово «отложено» при этом остаётся читаемым: иначе непонятно, почему строка тихая */ .moyo .mfr[data-vid="later"]{background:var(--surface);box-shadow:none} .moyo .mfr[data-vid="later"] .mft{font-weight:500;color:var(--ink-2)} /* ⚠️ ПОЛОСЫ «ОТЛОЖЕНО» БОЛЬШЕ НЕТ, и её стилей (.mflh) тоже. Отложенная строка уезжает в самый низ ЕДИНОГО потока и помечается словом «отложено» — раздела со своей шапкой владелец не принял. */ /* ─────────── ПУСТО: причина и действие, а не голое «ничего нет» (§6) ─────────── */ .moyo .mfempty{background:var(--card);border-radius:var(--r3);box-shadow:var(--sh-2); padding:20px;margin-top:12px;display:flex;flex-direction:column;align-items:flex-start;gap:12px} .moyo .mfempty p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:56ch} /* ─────────── ТЕЛЕФОН 390: тот же ритм, тот же счёт высот ─────────── Липкая полоса на телефоне съедала 30 % экрана (замер: до первой задачи 449 px). Здесь она худеет: счётчики уходят — их числа и так стоят в шапке каждой полосы, а фильтр по проектам остаётся и едет одной строкой вбок (прокрутка внутри ряда, страница вбок не едет). */ @media(max-width:700px){ .moyo .mfbody{padding-left:13px;padding-right:6px} .moyo .mps{max-width:34%} .moyo .mfwho{max-width:38%} .moyo .mbrand{display:none} /* имя снято — вкладки и «Записки» помещаются в ОДНУ строку */ .moyo .mftabs{order:0;flex:1 1 auto} /* СТРОКА ЧИПОВ ДЕЛИТСЯ НАДВОЕ: лента едет вбок, переключатель вида стоит. Прокрутка переехала с самой строки на ленту — иначе переключатель уезжал бы за правый край вместе с чипами. Нижние 8 px оставлены ленте: тень выбранного чипа обрезалась бы краем прокрутки. */ .moyo .mprow{flex-wrap:nowrap;align-items:center;padding-bottom:0} .moyo .mpscroll{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain; scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:8px} .moyo .mpscroll::-webkit-scrollbar{display:none} /* переключатель — не резиновый и не переносится: своей строки на телефоне у него больше нет, он третий житель уже существующей строки. margin-left:auto — для случая «проект один»: ленты чипов тогда нет вовсе, и без него полоса съехала бы влево, хотя во всех остальных случаях стоит справа. Нижние 2 px ровняют коробку под ленту (44+8 против пилюли 50+2): без них строка была бы на шесть пикселей выше, а весь смысл правки — эти пиксели вернуть. */ .moyo .mpvid{flex:none;margin-left:auto;padding:0 0 2px} .moyo .mpc{flex:none} /* ⚠️ НЕ СЖИМАТЬ ОБЁРТКУ ЧИПА. С появлением глазка «скрыть проект» чип уехал внутрь .mpc-wrap, а «не сжиматься» осталось написано у самого чипа. Обёртка же — обычный гибкий элемент строки (flex-shrink 1) и при overflow:hidden резала кнопку прямо по буквам: сторож вёрстки на 390 px мерил шесть обрезок подряд («Платформа «Прораб»» в коробке 67 px при содержимом 224) и ставил БРАК всему экрану. Строка и так прокручивается вбок — сжимать нечего. */ .moyo .mpc-wrap{flex:none} .moyo .mpc .t{max-width:112px} } /* ─────────── ВКЛАДКА «МОЯ ДОСКА» ─────────── */ .moyo .mfboardw{min-width:0} /* ⚠️ ОТДЕЛЬНОЙ СТРОКИ ПЕРЕКЛЮЧАТЕЛЯ (.mfvid) БОЛЬШЕ НЕТ, и её стилей тоже. На 375 она была четвёртой полосой подряд и опускала первую колонку доски с 434 на 492 px. Переключатель переехал в строку чипов проектов — .mpvid, рядом с .mprow выше. Заодно снято мёртвое правило `.mfvid .seg{flex-wrap:wrap}`: полосе нужно было 229 px при доступных 343, оно не срабатывало никогда, а сработав — развалило бы пилюлю на два этажа. */ /* ─────────── ВКЛАДКА «ДНЕВНИК»: переключатель дня ─────────── */ .moyo .mfday{display:flex;align-items:center;gap:4px;min-height:44px;flex-wrap:wrap;margin-bottom:4px} .moyo .mdw{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden; text-overflow:ellipsis;min-width:0;padding:0 6px} .moyo .mdw.past{color:var(--alarm)} .moyo .mdw.future{color:var(--accent)} .moyo .marr{width:44px;height:44px;flex:none;display:grid;place-items:center;color:var(--ink-2); border-radius:var(--r1);transition:color .16s var(--ease),background .16s var(--ease)} .moyo .marr:hover{color:var(--accent);background:var(--surface)} .moyo .marr[disabled]{opacity:.35;pointer-events:none} .moyo .mtoday{height:44px;padding:0 12px;flex:none;border-radius:var(--r1);border:1px solid var(--line); background:var(--card);color:var(--ink-2);font-size:13px;font-weight:600;margin-left:auto} .moyo .mtoday:hover{border-color:var(--accent);color:var(--accent)} .moyo .mcol{min-width:0} /* ──── зона дневника (сдано в этот день / долг дня) ──── */ .moyo .mzone{margin-top:16px} .moyo .mzone:first-child{margin-top:0} .moyo .mzh{height:56px;width:100%;display:flex;align-items:center;gap:12px;padding:0 16px; border-bottom:1px solid var(--line);transition:background .16s var(--ease);text-align:left} .moyo .mzh:hover{background:var(--surface)} .moyo .mzh .mchev{width:16px;height:16px;color:var(--ink-3);flex:none;display:grid;place-items:center; transition:transform .16s var(--ease)} .moyo .mzh .mtt{min-width:0;flex:1} .moyo .mzh .mt1{font-size:17px;font-weight:600;letter-spacing:.01em;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;display:block} .moyo .mzh .mcn{font-size:17px;font-weight:600;color:var(--ink-2);flex:none} .moyo .mzone[data-open="0"] .mzbody{display:none} .moyo .mzone[data-open="0"] .mchev{transform:rotate(-90deg)} .moyo .mzempty{padding:16px;font-size:13px;color:var(--ink-3);line-height:1.35;background:var(--card); border-radius:var(--r1);box-shadow:inset 0 -1px 0 var(--line-2)} /* ──── строка дневника (только просмотр): 88 px с третьей строкой, 64 без ──── */ .moyo .mrw{position:relative;background:var(--card);box-shadow:inset 0 -1px 0 var(--line-2); transition:background .15s var(--ease)} .moyo .mrw:hover{background:var(--accent-ghost)} .moyo .mrw.on{background:var(--accent-ghost)} .moyo .mrow{height:44px;width:100%;display:flex;flex-direction:column;justify-content:center;gap:4px; padding:0 16px;text-align:left} .moyo .mrw.short .mrow{height:64px} .moyo .ml1{display:flex;align-items:baseline;gap:8px;font-size:11px;color:var(--ink-3);line-height:1.15} .moyo .ml1 .mcx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .moyo .ml1 .mdu{flex:none} .moyo .ml1 .mdu.late{color:var(--alarm);font-weight:600} .moyo .ml1 .mdu.now{color:var(--accent);font-weight:600} .moyo .ml2{font-size:15px;color:var(--ink);line-height:1.35;display:flex;align-items:baseline;gap:8px;min-width:0} .moyo .ml2 .mtl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .moyo .ml2 .msoon{flex:none;font-size:11px;color:var(--ink-3)} .moyo .ml3{min-height:44px;display:flex;align-items:center;gap:8px;padding:0 16px;font-size:13px; color:var(--ink-2);flex-wrap:wrap} .moyo .ml3 .mwhy{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .moyo .ml3 .mwhy.ret{color:var(--alarm);font-weight:600} .moyo .mcnt{flex:none;font-size:13px;color:var(--ink-3);margin-left:auto} .moyo .mcnt.full{color:var(--st-done);font-weight:600} .moyo .mbar{flex:none;width:64px;height:3px;border-radius:var(--r1);background:var(--line);overflow:hidden} .moyo .mbar i{display:block;height:100%;background:var(--ink-3);transition:width .3s var(--ease)} .moyo .mbar.full i{background:var(--st-done)} .moyo .mmv{flex:none;color:var(--accent);font-weight:600} .moyo .mtmr{position:absolute;right:16px;top:0;height:44px;padding:0 12px;border-radius:var(--r1); border:1px solid var(--line);background:var(--card);color:var(--alarm);font-size:11px;font-weight:600; display:flex;align-items:center;gap:4px;z-index:2} .moyo .mtmr:hover{border-color:var(--alarm-line);background:var(--alarm-bg)} .moyo .mrw.duebtn .ml1{padding-right:112px} .moyo .mnote{margin-top:8px;font-size:11px;color:var(--ink-3);line-height:1.35} /* Карточку задачи платформа встраивает под кликнутой строкой сама (render()). */ .moyo .task-inline{margin-top:8px} /* ─────────── ЗАПИСКИ — содержимое платформенного #drawer ─────────── Панель стоит ВНЕ .moyo (штатный