/* Утилітарний шар: одна властивість — один клас.
 *
 * Згенеровано з РЕАЛЬНО вжитих у шаблонах значень (scripts не вигадує шкалу),
 * щоб заміна інлайн-стилів на класи не змінила жодного пікселя. Правило проєкту:
 * шаблон описує структуру, вигляд живе тут (див. .claude/skills/code-standard).
 *
 * БЕЗ !important — з одним винятком (.u-d-none, див. нижче). Файл підключається
 * ОСТАННІМ, тож серед рівних за специфічністю правил виграє він. Але НЕ покладайся
 * на це там, де від цього залежить поведінка: порядок ламається кешем браузера,
 * проксі й помилкою деплою.
 */

/* align-items */
.u-ai-center { align-items: center; }
.u-ai-flex-end { align-items: flex-end; }
.u-ai-flex-start { align-items: flex-start; }

/* align-self */
.u-as-center { align-self: center; }

/* cursor */
.u-cur-pointer { cursor: pointer; }

/* display */
.u-d-block { display: block; }
.u-d-contents { display: contents; }
.u-d-flex { display: flex; }
.u-d-inline { display: inline; }
.u-d-inline-flex { display: inline-flex; }
/* Єдиний виняток із правила «без !important» (див. шапку файлу): сховане має
   перемагати і компонентні класи, і правила на ID. Конфлікту з JS немає —
   Sky.show() спершу знімає клас. Дубль-запобіжник є і в style.css. */
.u-d-none { display: none !important; }

/* flex */
.u-flex-1 { flex: 1; }
.u-flex-none { flex: none; }

/* flex-direction */
.u-fd-column { flex-direction: column; }

/* flex-wrap */
.u-fw-wrap { flex-wrap: wrap; }

/* font-size */
.u-fs-0p6em { font-size: 0.6em; }
.u-fs-12p5px { font-size: 12.5px; }
.u-fs-12px { font-size: 12px; }
.u-fs-18px { font-size: 18px; }
.u-fs-26px { font-size: 26px; }
.u-fs-p78rem { font-size: .78rem; }
.u-fs-p7em { font-size: .7em; }
.u-fs-p85rem { font-size: .85rem; }
.u-fs-p8rem { font-size: .8rem; }

/* font-weight */
.u-fwt-600 { font-weight: 600; }
.u-fwt-700 { font-weight: 700; }

/* gap */
.u-gap-10px { gap: 10px; }
.u-gap-11px { gap: 11px; }
.u-gap-12px { gap: 12px; }
.u-gap-14px { gap: 14px; }
.u-gap-16px { gap: 16px; }
.u-gap-20px { gap: 20px; }
.u-gap-24px { gap: 24px; }
.u-gap-4px { gap: 4px; }
.u-gap-5px { gap: 5px; }
.u-gap-6px { gap: 6px; }
.u-gap-7px { gap: 7px; }
.u-gap-8px { gap: 8px; }
.u-gap-p35rem { gap: .35rem; }
.u-gap-p5rem { gap: .5rem; }
.u-gap-p75rem { gap: .75rem; }

/* height */
.u-h-64px { height: 64px; }

/* justify-content */
.u-jc-space-between { justify-content: space-between; }

/* line-height */
.u-lh-1p55 { line-height: 1.55; }
.u-lh-1p6 { line-height: 1.6; }
.u-lh-1p8 { line-height: 1.8; }

/* margin */
.u-m-0 { margin: 0; }
.u-m-0-0-0-18px { margin: 0 0 0 18px; }
.u-m-0-0-10px { margin: 0 0 10px; }
.u-m-0-0-14px { margin: 0 0 14px; }
.u-m-0-0-16px { margin: 0 0 16px; }
.u-m-0-0-6px { margin: 0 0 6px; }
.u-m-0-0-8px { margin: 0 0 8px; }
.u-m-10px-0-0 { margin: 10px 0 0; }
.u-m-10px-0-4px { margin: 10px 0 4px; }
.u-m-14px-0-0 { margin: 14px 0 0; }
.u-m-14px-0-8px { margin: 14px 0 8px; }
.u-m-1rem-0-p3rem { margin: 1rem 0 .3rem; }
.u-m-4px-0 { margin: 4px 0; }
.u-m-4px-0-0 { margin: 4px 0 0; }
.u-m-4px-0-10px { margin: 4px 0 10px; }
.u-m-6px-0-0 { margin: 6px 0 0; }
.u-m-8px-0 { margin: 8px 0; }
.u-m-8px-0-0 { margin: 8px 0 0; }
.u-m-8px-0-12px { margin: 8px 0 12px; }
.u-m-8px-0-4px { margin: 8px 0 4px; }
.u-m-8px-0-6px { margin: 8px 0 6px; }
.u-m-p25rem-0-0 { margin: .25rem 0 0; }
.u-m-p25rem-0-p5rem { margin: .25rem 0 .5rem; }
.u-m-p35rem-0-0 { margin: .35rem 0 0; }
.u-m-p5rem-0-0 { margin: .5rem 0 0; }

/* margin-bottom */
.u-mb-10px { margin-bottom: 10px; }
.u-mb-12px { margin-bottom: 12px; }
.u-mb-14px { margin-bottom: 14px; }
.u-mb-16px { margin-bottom: 16px; }
.u-mb-18px { margin-bottom: 18px; }
.u-mb-1rem { margin-bottom: 1rem; }
.u-mb-4px { margin-bottom: 4px; }
.u-mb-6px { margin-bottom: 6px; }
.u-mb-8px { margin-bottom: 8px; }
.u-mb-p2rem { margin-bottom: .2rem; }

/* margin-left */
.u-ml-18px { margin-left: 18px; }
.u-ml-8px { margin-left: 8px; }
.u-ml-auto { margin-left: auto; }

/* margin-right */
.u-mr-6px { margin-right: 6px; }

/* margin-top */
.u-mt-0p5rem { margin-top: 0.5rem; }
.u-mt-0p6rem { margin-top: 0.6rem; }
.u-mt-0p8rem { margin-top: 0.8rem; }
.u-mt-10px { margin-top: 10px; }
.u-mt-12px { margin-top: 12px; }
.u-mt-14px { margin-top: 14px; }
.u-mt-16px { margin-top: 16px; }
.u-mt-1rem { margin-top: 1rem; }
.u-mt-4px { margin-top: 4px; }
.u-mt-6px { margin-top: 6px; }
.u-mt-7px { margin-top: 7px; }
.u-mt-8px { margin-top: 8px; }
.u-mt-auto { margin-top: auto; }
.u-mt-p75rem { margin-top: .75rem; }

/* max-height */
.u-maxh-240px { max-height: 240px; }
.u-maxh-90vh { max-height: 90vh; }

/* max-width */
.u-maxw-680px { max-width: 680px; }
.u-maxw-720px { max-width: 720px; }
.u-maxw-760px { max-width: 760px; }

/* min-width */
.u-minw-0 { min-width: 0; }
.u-minw-64px { min-width: 64px; }
.u-minw-70px { min-width: 70px; }

/* opacity */
.u-op-p8 { opacity: .8; }

/* overflow */
.u-ov-auto { overflow: auto; }

/* overflow-x */
.u-ovx-auto { overflow-x: auto; }

/* padding */
.u-p-0 { padding: 0; }
.u-p-2px-8px { padding: 2px 8px; }
.u-p-4px { padding: 4px; }
.u-p-8px-10px { padding: 8px 10px; }

/* padding-left */
.u-pl-18px { padding-left: 18px; }

/* padding-top */
.u-pt-12px { padding-top: 12px; }

/* text-align */
.u-ta-right { text-align: right; }

/* visibility */
.u-vis-hidden { visibility: hidden; }

/* white-space */
.u-ws-pre-wrap { white-space: pre-wrap; }

/* width */
.u-w-0pct { width: 0%; }
.u-w-100pct { width: 100%; }
.u-w-100px { width: 100px; }
.u-w-10rem { width: 10rem; }
.u-w-110px { width: 110px; }
.u-w-120px { width: 120px; }
.u-w-140px { width: 140px; }
.u-w-14rem { width: 14rem; }
.u-w-150px { width: 150px; }
.u-w-160px { width: 160px; }
.u-w-170px { width: 170px; }
.u-w-180px { width: 180px; }
.u-w-200px { width: 200px; }
.u-w-230px { width: 230px; }
.u-w-340px { width: 340px; }
.u-w-54px { width: 54px; }
.u-w-56px { width: 56px; }
.u-w-60px { width: 60px; }
.u-w-64px { width: 64px; }
.u-w-70px { width: 70px; }
.u-w-7rem { width: 7rem; }
.u-w-80px { width: 80px; }
.u-w-90px { width: 90px; }
.u-w-92pct { width: 92%; }