/* ══════════════════════════════════════════════════════════════ 👆 ПИПАЕМОСТТА — глобалният пас (план 21, блок Ж) ЗАРЕЖДА СЕ ПОСЛЕДЕН. И това е целият смисъл на файла. Първия път сложих тези правила в rooms.css — и не станаха. Причината: rooms.css е 3-ти, а mega.css (дето живеят .toc-b и .sec-chip) е 6-ти. При еднаква специфичност печели ПОСЛЕДНИЯТ. Оттук нататък всяко правило „минимална цел“ живее ТУК, за да няма повече изненади. Числата са от бота (dev/audit.js), не от око: .jr-chip 277 · .toc-b 217 · .gl-row 48 · .sec-chip 47 · .ask-chip 27 · .tk-b 24 · .cl-b 24 · .th-tooth 20 · .wt-o 12 · .wm-lrow 12 40px е минимумът за пръст на майка, която държи бебе с другата ръка. ══════════════════════════════════════════════════════════════ */ /* ── КОРЕНЪТ на прелелите: лентата се ПРЕНАСЯ, не излиза от екрана. ⚠️ САМО хоризонтални чип-ленти. .gl-list е ВЕРТИКАЛЕН списък (речник) — flex-wrap там нареди редовете хоризонтално и те излязоха от екрана (регресия 8→146 прелели). Него го оставяме на мира. ── */ .jr-quick, .toc-row { flex-wrap: wrap; justify-content: flex-start; align-items: stretch; } /* речник-редовете да не преливат: пълна ширина, съдържанието се свива */ .gl-row { width: 100%; box-sizing: border-box; min-width: 0; } .gl-term { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* ── всичко, което пръст пипа: ≥44px. 44, не 40: flex-items се свиват с ~2px (cross-axis subpixel), а прагът за пипаемост е 40 — така реалната височина остава ≥42, над прага. ── */ .jr-chip, .toc-b, .sec-chip, .ask-chip, .gl-row, .tk-b, .cl-b, .wt-o, .wm-lrow, .rv-emob, .rv-f, .art-fsb, .qd-row, .al-row, .ct-b, .jr-win, .np-b, .sp-cat, .rg-mark, .hs-chip, .nt-del, .nt-mic, .fb-btn, .jr-caprow, .mn-cell, .fs-tab, .rm-item { min-height: 44px; box-sizing: border-box; } /* „+" при диапазоните имаше min-height, но явна width: 28px — висок и тесен, колкото нокът. Явни 44×44, не `auto`: измерено в браузъра, `width:auto` в flex-реда даваше 62px и кръгът ставаше елипса. */ .rg-mark { width: 44px; height: 44px; min-width: 44px; } /* ‹ › ✕ в бебешките оверлеи са един тесен глиф в padding: 8px 14px → ~34px. Мама държи бебето с другата ръка; вместо „напред" уцелва „затвори". */ .bg-bar .jr-chip { min-width: 44px; } /* проход 3 T38: 👍/👎 под отговора на помощничката бяха гол емоджи-бутон (~26-30px) — под прага за пръст. Ширина + центриране + по-голямо емоджи. */ .fb-btn { min-width: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; /* 15.09 (снимка в истински Chrome, 390×844): без фон и рамка браузърът рисуваше своя сив квадрат по подразбиране. Сега — от семейството на .jr-chip. */ font-family: inherit; background: var(--card, #fff); border: 1.5px solid var(--lav-soft); border-radius: 14px; color: var(--ink); cursor: pointer; padding: 0 10px; } .fb-row { display: flex; gap: 8px; margin: 2px 0 10px 46px; } /* 15.09 (WCAG одит в истински Chrome, 390×844): категориите в „Статии" бяха 32px високи, въпросите-чипове в чата 42px — под прага за пръст. */ .art-cat, .ask-chip { min-height: 44px; display: inline-flex; align-items: center; } /* тези са inline-flex, за да центрират текста във вече по-високата кутия */ .jr-chip, .toc-b, .sec-chip, .ask-chip, .tk-b, .cl-b, .rv-f { display: inline-flex; align-items: center; justify-content: center; } /* 🚨 22.07, жива обиколка: цената на реда отгоре. `display` от авторски CSS бие вградения `[hidden] { display:none }` на браузъра — и всеки чип, който кодът крие с hidden, оставаше НА ЕКРАНА. Мама виждаше празен бутон-призрак в „Кога яде за последно?“, а „↺ Върни последното“ висеше завинаги, вместо да изчезне след 10 секунди — покана да върне запис, който не съществува. hidden значи скрито. Точка. */ [hidden] { display: none !important; } .toc-b, .sec-chip { padding: 8px 12px; } .tk-b, .cl-b { padding: 8px 12px; } /* „↩ последно попитах…“ под чата беше 18px висок текстов ред — най-малката цел в цялото приложение. Расте кутията, не буквите: редът си остава дискретен, но пръст го хваща. (жива обиколка 22.07, единствената истинска малка цел) */ .ask-last { min-height: 44px; display: flex; align-items: center; } /* 🌙 нощният режим в заглавието на кърмене-таймера беше 19px — а точно него мама търси в 3 през нощта, на тъмно, с една ръка. Расте целта, емоджито си остава дискретно. (жива обиколка 22.07) */ .nr-night { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* седмичните точки в „Сънят/Пелени днес“ бяха 39.x — на косъм под прага */ .jr-day { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } /* зъбчето е мъничко по дизайн — расте ЦЕЛТА, не рисунката */ .th-tooth { min-width: 40px; min-height: 40px; padding: 8px; } /* дъгата от зъби: 10 цели по 40px не се събират в тесен телефон (318px) и последните стърчаха 59px извън картата → пренасяме на втори ред. Дъгата пак се чете, а всеки зъб остава уцелваем. */ .th-arch { flex-wrap: wrap; } /* 🗑 изтрий бележка — беше смачкан на 10px ширина (flex-съсед го изяждаше). Важен бутон е — ако мама не го уцели, бележката не се трие; ако уцели съседа, трие погрешната. Дай му ясна цел и не го оставяй да се свива. */ .nt-del { min-width: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } /* ± на брояча в „Моето бебе“ (пелени/храна) — беше 30×30, под прага. Майка с бебе на ръка натиска с палец — 40×40 е минимумът. ⚠️ По-големите бутони направиха реда от 2 кутии по-широк от екрана (+89px). Затова: редът се ПРЕНАСЯ на тесен телефон (всяка кутия цял ред), а кутията може да се свива (min-width:0) — иначе flex:1 не помага. */ .bb-dip { flex-wrap: wrap; } .bb-dipbox { min-width: 0; } .bb-dipbtn { min-width: 40px; min-height: 40px; } /* безкласовите ± бутони на размерите — mega.css им слага явен height:24px, затова min-height не стигаше. #roRoom печели специфичността и махаме твърдата височина. */ #roRoom .wd-ctl button, .qa-step button, .nm-vote { min-width: 40px; min-height: 40px; height: auto; } /* „Уголеми текста“ (jr-btn в тесен ред) — да не се свива */ .jr-btn { min-height: 40px; } /* затварящите ✕ — най-търсеният бутон на всеки оверлей */ .rm-x, .rv-close, .prof-close, .bs-b, .bo-no { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* ── тесните екрани: гридовете се свиват, вместо да изтласкват ── */ .wp-box, .wd-grid, .wp-c, .wd-cell, .wd-ctl, .wd-sz { max-width: 100%; min-width: 0; } .pho-grid, .bg-sgrid, .np-grid, .yg-grid, .sy-grid { min-width: 0; } .wp-box, .wd-grid { overflow-x: auto; } /* ── профилът (одит-флот П23, проход 2 №14): цел-чипове, аватар-табове, ✏️ и ✕ бяха 16-28px — под пръста на майка с бебе на ръка ── */ .prof-gadd, .prof-avtab, .prof-av { min-height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } .prof-edit, .prof-gx { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* ── BL_UI: топлите вградени диалози (проход 2 тема 6) ── */ .bl-ui-row { display: flex; gap: 8px; margin-top: 16px; } .bl-ui-row .jr-btn { flex: 1; min-height: 44px; } .bl-ui-cancel { background: rgba(125,107,189,.12); color: var(--ink, #4a3f66); } .bl-ui-danger { background: linear-gradient(135deg, #e8657f, #d64b6b); } .bl-ui-text { white-space: normal; word-break: break-word; } [data-theme="dark"] .bl-ui-cancel { background: rgba(255,255,255,.09); color: #ece8f5; } /* ⚠️ Изключения — НЕ пипаме: .pin-btn (📍) е нарочно мъничък, стои в ъгъла на заглавието и не бива да го изяжда. .bub (балончетата в играта) са цел на игра, не бутон. */ /* 👉 „тук съм“ — полето, което бутонът чака да напълни. Мек пулс, без червено: не е грешка на мама, а подсещане. Само transform/box-shadow → без прерисуване. */ .bl-нужно { animation: blNuzhno .55s ease-out 2; border-color: var(--pink-soft, #f7a8cb) !important; } @keyframes blNuzhno { 0%, 100% { box-shadow: 0 0 0 0 rgba(247, 168, 203, 0); } 40% { box-shadow: 0 0 0 4px rgba(247, 168, 203, .35); } } @media (prefers-reduced-motion: reduce) { .bl-нужно { animation: none; box-shadow: 0 0 0 3px rgba(247, 168, 203, .35); } } /* 🎁 пресет, който вече е в списъка за подаръци — приглушен, с отметка */ .rg-presets .rg-added { opacity: .55; border-style: solid; } /* ✕ „махни този ред“ (jr-x) няма собствено CSS правило никъде — рендерираше се гол бутон 21px. Точно него мама натиска, за да изтрие грешен запис: ако не го уцели, трие съседния или нищо. 40px цел, същият дискретен вид. (армия 22.07 — единствената истинска малка цел извън нарочно малкия 📌) */ .jr-x { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; /* 🔴 05.08 (СКЕПТИКЪТ към №211): .jr-x нямаше НИКАКЪВ color — падаше на браузърния `buttontext` (почти черно). №211 сложи ✕ ВЪТРЕ в .fd-pill, а тъмната тема боядисва пилюлката #342f4e (dark.css:75) → черно върху тъмнолилаво. Измерено живо в браузъра, ефективен цвят след прозрачността: преди: светла 4.48:1 · ТЪМНА 1.66:1 ← ✕-ът беше невидим нощем само color:var(--ink) при .55: светла 2.43 · тъмна 4.35 ← смяна на счупено color:var(--ink) + opacity .85: светла 4.50 · тъмна 8.06 ← без загуба Затова двете вървят ЗАЕДНО: голият цвят щеше да счупи светлата тема. Лекува и всички стари .jr-x, които мълчаливо страдаха от същото. */ color: var(--ink); opacity: .85; } .jr-x:hover, .jr-x:focus-visible { opacity: 1; } /* ✕ на реда в историята на растежа — 19px. Последната цел под прага. */ .bb-del { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* ── 05.08 (одит г06, №128): три цели, на които горният списък даде само min-height, без ШИРИНА. Височина без ширина не е цел — става ивица. .sp-cat (кръгчетата за вид разход) носи в rooms.css твърди width/height:32px. min-height:44 отгоре го правеше кутия 32×44 — кръгът ставаше елипса и шестте стояха залепени по 3px. Явни 44×44 (същото лечение като .rg-mark по-горе), защото 40 щеше да остане под min-height:44 и елипсата да се запази. Редът се ПРЕНАСЯ: 6×44 + гапове не се събират в 320px телефон. .nt-mic (🎤 до бележника) е прозрачен бутон с font-size:17 → ~23px ширина, а съседът му .nt-del получи min-width:40 още на ред 113. Мама с бебе на ръка бута микрофона и уцелва кошчето. .tl-fav („💜 Запази“ под предложеното име) изобщо не фигурираше тук: padding 8px + 12.5px шрифт ≈ 31px висок. ── */ .sp-cats { flex-wrap: wrap; } .sp-cat { width: 44px; height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .nt-mic { min-width: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .tl-fav { min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; } /* хапчетата в „Алергия-паспорт“ вече носят ✕ (одит г06, №211). .jr-x е 40px цел — без това подравняване тя щеше да разкъса хапчето по вертикала. */ .ap-pill { display: inline-flex; align-items: center; gap: 2px; padding-right: 4px; } /* ══════════════════════════════════════════════════════════════ 👆 12.08 — ПАЗАЧЪТ НА ТЕЛЕФОНА, обиколка на 9-те стаи при 360×760 ИЗМЕРЕНО, не предположено: 1805 мишени в деветте стаи, 137 под 44×44. Те се събират в 13 групи — тоест 13 правила лекуват 137 места. ⚠️ ЗАЩО пак, щом файлът вече прави това: горните правила пазят праг 40, а заглавието на файла обещава 44. Двете не си говорят от самото начало. 40 не е сбъркано число — просто не е това, което пише отгоре. Тук довършваме до 44 САМО целите, които са мерени под него. ⚠️ ГРАНИЦА на този пас: пипа се само РАЗМЕРЪТ на кутията (расте с няколко пиксела). Нищо не се мести и нищо не сменя цвят — панелът на браузъча не рисуваше кадри в тази сесия, тоест НЕ МОГА ДА ВИДЯ екрана. Затова ✕-четата по снимките (.ec-del 22px, .fd-del 26px, .tl-favdel) остават НЕПИПНАТИ: за тях трябва да се измести нарисуваното кръгче, а промяна, която не мога да погледна, не се прави. Записани са като останали, не като готови. ══════════════════════════════════════════════════════════════ */ /* 🎤 ➤ до полето „питай помощничката“ — стоят във ВСЯКА от 9-те стаи. rooms.css:1130/1134 им дава явни width/height: 42px. Два пиксела под прага, 18 цели общо. Редът е flex, а .ask-inp е flex:1 с min-width:0 — тоест полето поема четирите пиксела, редът не се разширява. */ .ask-send, .ask-mic { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex-shrink: 0; } /* ✏️ текстовите полета в картите — 62 броя, във всичките 9 стаи. rooms.css:147: padding 10px + шрифт 14px + 2×2px кант = 43px. Един пиксел под прага, но същият един пиксел на 62 места. */ .jr-word { min-height: 44px; box-sizing: border-box; } /* 🦷 зъбчетата (20 цели) и ± на диапазоните (4) — горе им е дадено 40. .th-arch и .bb-dip вече се ПРЕНАСЯТ на нов ред (flex-wrap по-горе), затова по-широката цел не изтласква нищо настрани. */ .th-tooth { min-width: 44px; min-height: 44px; } .bb-dipbtn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } /* 🎤 микрофонът до бележника: получи min-height 44 в списъка горе, но ШИРИНАТА му остана 40 (ред 230). Височина без ширина не е цел. */ .nt-mic { min-width: 44px; } /* ▸ разгъващите се редове: в стаите мери 40.8px (15 цели, 4 стаи), а сгъваемото заглавие .jr-title.foldable — 35.6px. Точно тях мама натиска, за да отвори картата. ⚠️ НЕ `display:flex` — той изяжда триъгълничето на . `align-content` центрира съдържанието в блокова кутия; където го няма, текстът просто застава горе, а целта пак е 44. */ #roRoom summary, #roRoom .jr-title.foldable { min-height: 44px; box-sizing: border-box; align-content: center; } /* 🎚 плъзгачът „колко ти е силата днес“ — 22px висок. Палецът се хваща с палец, докато другата ръка държи бебето. */ .jr-range { min-height: 44px; } /* 🔍 търсачката в лентата на стаята — 30px (home.css:224, padding 6px). */ .sec-find { min-height: 44px; box-sizing: border-box; } /* ☑️ „Това е алерген“ в Захранване. Квадратчето мери 13×13 — най-малката цел в деветте стаи. Етикетът ОБГРЪЩА квадратчето (проверено: label.contains (input) = true), тоест истинската цел е целият ред, а той беше 281×33.6. Двете заедно: редът става ≥44 (цел за пръст), а квадратчето 24 — толкова иска WCAG 2.5.8 AA за минимална цел, и се вижда, вместо да се търси. ⚠️ Мерачът пак ще брои самото като „под 44“ — то си е 24. Целта, която мама пипа, е редът. Затова остава в списъка като ЗНАЙНО изключение. */ .fd-alrgchk { min-height: 44px; box-sizing: border-box; } .fd-alrgchk input { width: 24px; height: 24px; flex: none; } /* ⚠️ ЗНАЙНО ИЗКЛЮЧЕНИЕ, което НЕ се лекува: .jr-day (дните от седмицата). Измерено: редът .jr-week е 272px, седем дни с по 6px междина → (272 − 36) / 7 = 33.7px на ден. Седем цели по 44 искат 308px + междините. Не се събират. Единственият изход е седмицата да се пренесе на два реда — а тогава тя спира да се чете като СЕДМИЦА, което е целият ѝ смисъл. Височината вече е 44 (ред 102). 33.7 ширина минава прага на WCAG 2.5.8 AA (24px при отстояние). Оставя се нарочно. */ /* ═══════════════════════════════════════════════════════════ 12.08 — ОБИКОЛКАТА ПО 232-ТА МОДУЛА, ОСТАТЪКЪТ МЕРЕНО на живо в 6 стаи, със ЗАМРАЗЕНИ анимации: видими мишени 1623 · под 44px 396 от тях 186 са ЛЪЖЛИВА тревога — имат невидима зона през ::after (шаблонът на .pin-btn: иконата остава мъничка, пипаемото е 44×44) истински малки: 166 🪤 ДВА ПЪТИ ИЗМЕРИХ ГРЕШНО, преди да получа тези 166: · Първо мерих веднага след отваряне на стаята → 1330 „малки". Входната анимация мащабира панела с 0.96 и ЛЪЖЕ всяко getBoundingClientRect. Лек: замразяваш анимациите и чакаш, ПОСЛЕ мериш. · После мерих само елемента → 230. Но 122 от тях бяха .pin-btn, който отдавна има зоната си през ::after. Мерех кутията, не мишената. Лек: истинската цел е max(елемент, ::after, ::before). Долното лекува измереното. Правилото за формата се пази: широка хапка → само min-height (иначе се разтяга и разваля реда); кръгче → явни width/height (min-height сам би направил елипса — този капан е описан на ред 213 по-горе и не се повтаря); мъничък знак, който НЕ бива да расте → невидима зона през ::after. ═══════════════════════════════════════════════════════════ */ /* ── широки хапки: къси само по височина (31–42px) ── */ .td-chip, .askme-chip, .pt-btn, .td-mbtn, .t8-chip, .d24-go, .cta-mini, .cta-sos { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } /* ── кръгчета: 38×38 → 44×44, за да останат КРЪГЧЕТА ── */ .ro-nav, .qa-b { width: 44px; height: 44px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ── ✕ на брифинга: 10×16. Не расте — изяжда реда до себе си. Расте само пипаемата зона, невидимо. ── */ .brief-x { position: relative; } .brief-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); /* невидимо и без собствен фон — само лови пръста */ } /* ── точките на слайдера: 34×10 по устройство (те СА чертички, не бутони). Видът им е смисълът им, затова пак — зоната, не кутията. ── */ .mdot { position: relative; } /* ── 👆 01.09, ПЪРВО ПУСКАНЕ НА dev/dopir.js В БРАУЗЪРА ── Спешните бутони имат СВОЙ праг: 48px, не 44. „Спешни номера" стоеше на точно 44 — минаваше общото правило и падаше на спешното. Това е мястото, където майката бърза с една ръка, защото другата държи бебе. */ .cta-sos { min-height: 48px; } /* и вратата към „Здраве и SOS" от началната страница е спешна по същата логика — 194×44 при праг 48. По-високо копче не вреди на нищо. */ .d24-go { min-height: 48px; } /* ── балончето: 34px широко. То е кръгче и подуването му го разваля, затова расте ЗОНАТА, не кутията — както при .brief-x и .ec-del по-горе. */ .mascot { position: fixed; } .mascot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 48px; height: 60px; transform: translate(-50%, -50%); } .mdot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* ── втора мярка след горното: 166 → 40. От останалите 40 повечето са 40–42px и стоят тук нарочно (виж .bb-del по-горе: „последната цел под прага“, съзнателно решение). Тези двете обаче не са гранични, а малки: ── */ /* ✕ на ред в списъка с контакти — 22×22. Расте зоната, не знакът: редът е тесен и по-голям ✕ би избутал името. */ .ec-del { position: relative; } .ec-del::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* „пропусни“ в обиколката — 56×16. Това е изходът от онбординга; ако мама не го улучи, остава заключена в тур, който не иска. Височината расте. */ .tour-skip { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } /* ═══════════════════════════════════════════════════════════ 📱 12.08 — ПЪРВОТО ПУСКАНЕ НА dev/test_telefon.js Тестът виси три пъти и НИКОГА не върна число. Днес се пусна докрай в истински Chrome на точно 360×760, в двете теми, със ЗАМРАЗЕНИ анимации: 159 пуснати теста · 57 минали · 69 ЧЕРВЕНИ · 33 жълти самопроверка ОК (19 сцени, ловят счупеното И мълчат на здравото) Покритие: 15 екрана × 2 теми · 5744 текстови елемента · 3773 мишени. ⚠️ ЗАЩО КОНТРАСТЪТ ЖИВЕЕ В ФАЙЛ, КРЪСТЕН „touch“ Защото index.html не се пипа в тази сесия, тоест нов не може да се закачи, а touch.css е предпоследният лист (пред него са всичките 12). Тук правилото печели по РЕД, без да се надува специфичността с !important или с изкуствени вериги от класове. Ако някога се добави отделен contrast.css, целият блок се мести долу непроменен. ⚠️ ВСЯКО ЧИСЛО ДОЛУ Е СМЕТНАТО, НЕ ИЗБРАНО НА ОКО Прагът е WCAG 2.1 AA: 4.5 за обикновен текст. Фонът не е „бяло“, а реално измереният от теста (най-тъмният светъл фон е #f7f4fc) — затова алфите са пресметнати срещу НЕГО, не срещу #fff. ═══════════════════════════════════════════════════════════ */ /* ── 1. ГЛАВНИЯТ КОРЕН: `small { opacity }` върху --ink ──────────────── Един и същи дефект, преписан в 14 правила из 4 файла: --ink (#5a5470) сам по себе си дава 6.57 върху #f7f4fc — напълно здрав. Но всяко от тези правила го гаси с opacity .5–.78, а прозрачността мие буквата към фона. Измерено от теста: 2.24 · 2.29 · 2.7 · 2.8 · 3.34 · 3.37 · 3.49 … СМЕТКАТА (dev/kontrast): за да остане --ink над 4.5 му трябва алфа 0.845 върху най-тъмния светъл фон (#f7f4fc) и 0.815 върху чисто бяло. В тъмната тема --ink е #ece8f5 и иска само 0.565. Тоест ЕДНО число лекува двете теми: .86 минава и двете с малък запас (≈4.7). Приглушеността НЕ изчезва — .86 още се чете като „второстепенно“, просто спира да е невидимо в 3 през нощта на слаб екран. */ .ut-n small, .tk-t small, .rg-n small, .al-n small, .wm-rep small, .sp-trick small, .pg20-calt small, .fs-pt, .fs-foot, .mk-h, .ask-line, .fs-tab, .fs-arrow, .pb-r, /* втора вълна: тези изплуваха чак след като по-шумните им съседи млъкнаха — на един екран се пише ЕДИН ред „контраст“, тоест най-слабият закрива останалите, докато не падне. .bt-clock е 38px (едър, праг 3.0), но при opacity .50 стигаше само 2.29 — часовникът на паузата беше най-невидимото голямо число в приложението. */ .rg-leg, .qr-out, .bt-clock { opacity: .86; } /* „безплатно · за жена, която не се чувства…“ под зеления SOS бутон: #2f6b48 е здрав цвят (5.79 гол), но .85 го сваля на 4.21. Иска .885. */ .wm-sosb small { opacity: .92; } /* ⚠️ БЛИЗНАКЪТ: .mk-cnt („· 0 / 3“) седи ВЪТРЕ в .mk-h. Двете прозрачности се УМНОЖАВАТ: .75 × .65 = 0.49 → контраст 2.24. Ако тук се сложи .86, пак ще се умножи (.86 × .86 = .74) и редът ще остане червен. Затова детето се вдига на 1 и наследява групата на родителя. */ .mk-cnt { opacity: 1; } /* ── 2. ЛАВАНДУЛАТА КАТО БУКВА ──────────────────────────────────────── --lav (#b9a7e0) е ХУБАВ цвят — за кант, за фон, за иконка върху тъмно. Като ТЕКСТ върху светла карта дава 2.06. Тези две стрелки („▾“ на разгъващия ред и „+“ в мрежата със снимки) са единствените места, където се ползва за буква — и двете са ВЪТРЕ в бутон, тоест мама трябва да ги вижда, за да разбере, че редът се отваря. #6f5fa8 = 4.98 върху #f7f4fc, 5.41 върху бяло. Същото семейство. ⚠️ САМО СВЕТЛАТА ТЕМА. Върху тъмна карта --lav е правилният цвят и тестът НЕ го обяви за червен там. Затова нощта си го запазва. */ .gl-arr, .pho-plus, .dp-plus { color: #6f5fa8; } [data-theme="dark"] .gl-arr, [data-theme="dark"] .pho-plus, [data-theme="dark"] .dp-plus { color: var(--lav); } /* ── 3. РОЗОВОТО КАТО БУКВА ─────────────────────────────────────────── --pink-deep (#e56ba4) като текст върху светло: 2.79–3.01. Пет места, все смислови (стрелка „→“ на резултата, размерът на дрешката, броячът, „−“ на диапазона, „чакаме бебе!“). #c0396f = 4.76–5.18 и остава розово. Пак само за деня — нощем розовото върху тъмно е здраво. */ .sr-arr, .wd-sz, .mn-val, .bb-dipbtn, .tagline em { color: #c0396f; } [data-theme="dark"] .sr-arr, [data-theme="dark"] .wd-sz, [data-theme="dark"] .mn-val, [data-theme="dark"] .bb-dipbtn, [data-theme="dark"] .tagline em { color: var(--pink-deep); } /* ── 4. ЛЕНТАТА С ДЯЛОВЕТЕ (.st-seg) — и значката, която тя гасеше ───── .st-seg стои на opacity .58 с цвят #6f6288. Измерено: 2.17–2.28 в деня, 3.75 в нощта. И най-важното — сметката казва, че #6f6288 не стига 4.5 върху лилавата лента (#e8e2fb) ДОРИ на алфа 1.00. Тоест само вдигане на прозрачността не лекува: цветът също трябва да потъмнее. #3f3352 иска алфа 0.735; в тъмната тема #cfc4e4 иска 0.675 → .82 стига и на двете, а разликата „избран / неизбран“ (0.82 срещу 1.0) остава. 🪤 ЗАМАСКИРАНИЯТ БЛИЗНАК: .st-dot (значката с броя нови) е ДЕТЕ на .st-seg. opacity прави ГРУПА — тя гаси и фона на значката, и белите цифри в нея ЗАЕДНО, затова 3.01 ставаше 1.49. ⚠️ ТУК СБЪРКАХ ВЕДНЪЖ И ТЕСТЪТ МЕ ХВАНА — записвам го, защото поуката е по-ценна от поправката. Първо оставих opacity върху бутона (.82) и само потъмних значката до #a82a5c. Сметката ми на ръка даваше 4.83; тестът намери 3.78 и пак изкара червено. Разликата е в МОДЕЛА: аз смятах „бяло върху композирания фон, двете в една група“, а мерачът смята буквата с алфа .82 ВЪРХУ вече композирания фон — тоест прозрачността влиза два пъти. Кой от двата е по-верен няма значение за решението: докато значката виси в чужда opacity-група, числото зависи от модела, а не от цвета. Число, което се мени според това кой го смята, не е доказателство. Затова групата се МАХА, вместо да се преизчислява: прозрачността слиза от бутона върху двата надписа (.st-e и .st-n), а значката остава извън нея и се чете на пълна сила — бяло върху #a82a5c = 6.67, еднакво при всеки модел. Видът „избран / неизбран“ е непокътнат: същите .82 срещу 1.0, само че върху текста, не върху целия бутон. */ .st-seg { color: #3f3352; opacity: 1; } .st-seg .st-e, .st-seg .st-n { opacity: .82; } .st-seg.on .st-e, .st-seg.on .st-n { opacity: 1; } .st-dot { background: #a82a5c; } /* ── 5. БЯЛО ВЪРХУ СВЕТЪЛ ГРАДИЕНТ — двата бутона, които не се четат ── Тестът ги обяви ЧЕРВЕНИ, а не жълти, и това е важно: жълто значи „минава на едни спирки, пада на други“. Червено значи, че и НАЙ-ДОБРАТА спирка пада — тоест няма къде да попадне буквата и да е четима. ➤ в лентата на стаята: бяло върху #f7a8cb→#e56ba4 = 1.84 / 3.01 „📱 Добави ме на телефона“: бяло върху #8fc0e8→#4f8fc4 = 1.93 / 3.47 Новите спирки: 5.18/5.76 и 4.79/5.39. Формата, сянката и посоката на градиента не се пипат — само наситеността. */ .ro-inputbar button { background: linear-gradient(135deg, #c0396f, #ad2f5f); } .btn-blue { background: linear-gradient(135deg, #3777aa, #2f6f9f); } /* ── 6. ТРИТЕ ГРАНИЧНИ ─────────────────────────────────────────────── .sec-n (номерът на раздела) 4.20 · .jr-day („·“ на неотбелязания ден) 3.26. И двете са „почти“ — а „почти“ на слаб екран в тъмна стая е „не“. .sec-n: --ink-soft → --ink = 5.73 върху #eae3f7. .jr-day: #8b84a3 → #6e677f = 4.94. Коментарът в rooms.css:188 вече разказва, че този цвят веднъж е бил вдиган от #c9c2d8 (1.58) — това е същата поправка, доведена докрай. Нощта си остава (dark.css:143). */ .sec-n { color: var(--ink); } .jr-day { color: #6e677f; } /* #roSub („Помощникът на мама · твоята довереничка“) е същият --ink-soft върху същото #eae3f7 → същите 4.20. Един дефект, две места. */ #roSub { color: var(--ink); } /* ═══════════════════════════════════════════════════════════ 👆 МИШЕНИТЕ ОТ СЪЩОТО ПУСКАНЕ — 26 червени реда, 12 виновника Формата се пази точно както я описва файлът по-горе: широка хапка → само min-height · кръгче → явни width/height. ═══════════════════════════════════════════════════════════ */ /* 🧭 компасът в лентата на стаята — 20 от 26-те червени реда идват от него САМ (стои във всичките 9 стаи × 2 теми). rooms.css:2030 му дава 42px, после @media (max-width:380px) го свива на 38 — тоест точно на телефона, за който е писано приложението, целта е най-малка. Кръг → явни 44×44, иначе min-height би го направил елипса. Съседът .st-segs е flex:1 и поема шестте пиксела. */ .st-map { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } /* ── широки хапки: къси само по височина (31–41px) ── */ .ro-chip, .sf-more, .sos-edit, .art-navb { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; } /* .art-navb е „следваща статия“ и подравнява текста си вляво — да не се центрира, когато стане flex. */ .art-navb { justify-content: flex-start; text-align: left; } /* ── кръгчета: явни width/height, за да останат КРЪГЧЕТА ── .art-fsb (a A A — размерът на буквата в четеца) вече има min-height:44 от списъка на ред 40, но ШИРИНАТА му остана 26 → висока тясна ивица. Трите заедно са 132px + 4px междини в ред с margin-left:auto — събират се в 360. .sos-x и .search-close са 32×32 ✕-чета в заглавен ред. */ .art-fsb, .sos-x, .search-close, .sf-mic { width: 44px; height: 44px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* 🔍 самото поле за търсене — 181×22. Полето е цел за пръст като всяко друго: мама го бута, за да излезе клавиатурата. 🪤 `min-width: 0` НЕ Е УКРАШЕНИЕ — без него горният ред е СЧУПЕН, и то по начин, който тестът не може да види. Измерено, след като сам си го счупих: лентата е 324px, а с уголемените 🎤 и ✕ съдържанието ѝ стана 350 → #searchClose излизаше до 368 при десен ръб на лентата 342, тоест ✕-ът се РЕЖЕШЕ. Причината: е flex:1, но подразбиращото се `min-width:auto` му дава вътрешна ширина ~197px и той отказва да се свие; целият излишък отива в последния съсед. Защо мерачът мълчи: .search-panel е `overflow:hidden`, тоест щетата се ОТРЯЗВА, вместо да разлюлее документа — а проверката за разместване гледа html.scrollWidth. Видя се само с ПОГЛЕДНАТА снимка. Същият капан е решен веднъж вече при .ask-inp (rooms.css:1128 носи min-width:0) — затова .ask-send/.ask-mic минаха на 44 без последствие. */ .search-bar input { min-height: 44px; min-width: 0; box-sizing: border-box; } /* ⚠️ ДВЕТЕ ЗНАЙНИ ИЗКЛЮЧЕНИЯ ОСТАВАТ ЧЕРВЕНИ НАРОЧНО — и двете вече са обяснени по-горе в този файл, не се повтарят тук: · .jr-day (37×44) — седем дни по 44 не се събират в 272px ред; пренасянето на два реда убива смисъла „седмица“. WCAG 2.5.8 AA (24px) минава. · .fd-alrgchk input (24×24) — етикетът ОБГРЪЩА квадратчето, истинската цел е целият ред (≥44). Мерачът брои -а, защото не знае това. ══ 18.08 — ЧЕТИРИТЕ ЧЕРВЕНИ РЕДА СА ТЕЗИ ДВАТА, ПРЕБРОЕНИ ДВА ПЪТИ ══ dev/test_telefon.js обикаля всеки екран ВЕДНЪЖ ЗА ДЕН И ВЕДНЪЖ ЗА НОЩ и пише отделен ред за всяко минаване. Затова две изключения дават ЧЕТИРИ червени реда, а не четири различни цели: ред 1 Стая · Захранване · ден → .fd-alrgchk input [24×24] ред 2 Стая · Дневник · ден → .jr-day × 7 [37×44] ред 3 Стая · Захранване · нощ → същият input ред 4 Стая · Дневник · нощ → същите седем дни ИЗМЕРЕНО на 360×760, чист профил, замразени анимации: целият доклад съдържа ТРИ уникални пътя под 44 — `label.fd-alrgchk > input`, `button.jr-day` и `button.jr-day.today` (последните два са едно и също правило). Друга цел под прага НЯМА. Тоест: не се търси трети виновник — няма такъв. Ако някой ден редовете станат пет, значи Е СЕ ПОЯВИЛ нов, а не че този списък е непълен. ⚠️ ЗАЩО .fd-alrgchk НЕ СЕ „ЛЕКУВА" ПО ПРАВИЛОТО НА ФАЙЛА (ред ~213): трите лека там са „широка хапка → min-height", „кръгче → явни w/h" и „мъничък знак → невидима зона през ::after". За и трите се чупят: ::before/::after НЕ СЕ РИСУВАТ върху заменяем елемент в Chrome, а явни 44×44 правят квадратчето физически огромно — тоест СМЯНА НА ВИДА, не уголемяване на зона. Работещата цел вече съществува: .fd-alrgchk (ред 312 горе) е min-height:44px и е