/* ═══════════════════════════════════════════════════════════════════════════
   apps/draw.css — міні-застосунок «Намалювати».

   Префікс .smca-draw- : жоден селектор теми і жоден вузол .sm-* / .smc-* цим
   файлом не зачеплений. Видалення файлу лишає сторінку рівно такою, якою вона
   була до застосунку.

   Змінні беремо ті самі, що й чат (--sm-* оголошені на #sm-app.sm), але скрізь
   із фолбеками: корінь застосунку — position:fixed, і якщо його колись
   доведеться винести з-під .sm, він мусить лишитись бордовим, а не системним.

   ⚠️⚠️ У цьому проєкті НЕ МОЖНА писати скорочене `font: 700 14px/1.2 inherit`.
   `inherit` у позиції сімейства робить усе оголошення недійсним, і разом із
   сімейством мовчки зникають вага, кегль та інтерліньяж. Тільки довгі
   властивості font-weight / font-size / line-height.
   ═══════════════════════════════════════════════════════════════════════════ */

.smca-draw {
    /* ⚠️ Довгі top/right/bottom/left, а не inset: старі мобільні Safari, заради
       яких і тримається ES5, скороченої форми не знають — і оверлей у них
       схлопується в точку.
       ⚠️ І не 100vh: на iOS ця одиниця більша за видиму частину екрана, нижній
       ряд кнопок опиняється під адресною стрічкою. */
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 100000;

    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 12px;

    background: var(--sm-paper, #FAF3F1);
    color: var(--sm-ink, #311E1E);
    font-family: inherit;

    /* Прокрутка сторінки під оверлеєм — головний спосіб «загубити» полотно
       на телефоні. Гасимо і саму прокрутку, і сірий спалах на дотик. */
    overscroll-behavior: contain;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-select: none;
    user-select: none;
}
.smca-draw *, .smca-draw *::before, .smca-draw *::after { box-sizing: border-box; }
.smca-draw [hidden] { display: none !important; }
.smca-draw :focus-visible { outline: 2px solid var(--sm-coral, #EE7070); outline-offset: 2px; }
.smca-draw:focus { outline: none; }

/* ---------- Шапка ---------- */
.smca-draw__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.smca-draw__head-txt { min-width: 0; }
.smca-draw__title {
    font-weight: 800; font-size: 15px; line-height: 1.2;
    color: var(--sm-bordo, #6E1220);
}
.smca-draw__sub {
    margin-top: 2px;
    font-weight: 500; font-size: 11.5px; line-height: 1.2;
    color: var(--sm-muted, #7E5F5C);
}
.smca-draw__x {
    margin-left: auto; flex: 0 0 auto;
    width: 44px; height: 44px; padding: 0; cursor: pointer;
    border: 1px solid var(--sm-line, #EFDFDC); border-radius: 12px;
    background: #fff; color: #7E5F5C;
    font-weight: 600; font-size: 17px; line-height: 1;
}
.smca-draw__x:hover { border-color: #8E2136; color: #8E2136; }

/* ---------- Полотно ----------
   Сцена забирає весь вільний простір, квадрат усередині рахує JS: він мусить
   бути рівно min(ширина, висота), інакше на альбомній орієнтації полотно
   вилазить за екран. min-height:0 обовʼязковий — без нього flex-елемент
   відмовляється стискатись і сцена виштовхує кнопки за межу вікна. */
.smca-draw__stage {
    overflow: auto;   /* полотно може бути більшим за сцену: див. масштаб у draw.js */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Квадрат не стискається, тож у мить між поворотом екрана і перерахунком
       він може бути більшим за сцену. Ховаємо надлишок тут, щоб він не
       розпихав ряд кнопок під нижній край вікна. */
    overflow: hidden;
}
.smca-draw__wrap {
    position: relative;
    /* ⚠️ flex:0 0 auto, інакше стискається. Квадрат задає JS у пікселях, але у
       flex-елемента типове flex-shrink:1, і варто стороні на мить виявитись
       більшою за сцену (поворот екрана, зміна висоти адресної стрічки), як
       браузер мовчки тисне ширину, лишаючи висоту. Заміряно 355×386: коло
       різу перетворювалось на еліпс, тобто підказка починала брехати про те,
       що саме відріжеться при друку. */
    flex: 0 0 auto;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px -4px rgba(96, 0, 0, .28);
    /* ⚠️ touch-action:none — єдиний спосіб малювати пальцем: без нього браузер
       забирає жест собі під прокрутку і лінія рветься на першому ж русі.
       Плата: звести пальці ПОВЕРХ полотна не вийде, масштаб сторінки міняють
       на будь-якому іншому місці оверлея (там touch-action:manipulation). */
    touch-action: none;
}
.smca-draw__cv {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: block;
    /* Події ловить обгортка: так координати рахуються від одного прямокутника,
       а не від трьох шарів, які теоретично можуть розʼїхатись на пів пікселя. */
    pointer-events: none;
}

/* ---------- Підказка про друк ---------- */
.smca-draw__hint {
    flex: 0 0 auto;
    padding: 0 2px;
    text-align: center;
    font-weight: 500; font-size: 11.5px; line-height: 1.35;
    color: var(--sm-muted, #7E5F5C);
}

/* ---------- Інструменти ---------- */
.smca-draw__tools {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.smca-draw__row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Колір. Кнопка 44×44 навіть на миші: ряд із шести стоїть під полотном, і
   промах тут означає штрих не тим кольором поверх готового малюнка. */
.smca-draw__sw {
    flex: 0 0 auto;
    width: 44px; height: 44px; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--sm-line, #EFDFDC); border-radius: 12px;
    background: #fff;
}
.smca-draw__sw-dot {
    display: block;
    width: 24px; height: 24px;
    border-radius: 50%;
    /* Обводка потрібна саме білому кружку: без неї він зникає на білій кнопці. */
    box-shadow: inset 0 0 0 1px rgba(49, 30, 30, .22);
}
.smca-draw__sw.is-on {
    border-color: var(--sm-bordo, #6E1220);
    box-shadow: 0 0 0 3px rgba(238, 112, 112, .22);
}

/* Товщина. Кружок усередині показує реальний масштаб лінії. */
.smca-draw__w {
    flex: 0 0 auto;
    width: 44px; height: 44px; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--sm-line, #EFDFDC); border-radius: 12px;
    background: #fff;
}
.smca-draw__w-dot {
    display: block;
    border-radius: 50%;
    background: var(--sm-ink, #311E1E);
}
.smca-draw__w.is-on {
    border-color: var(--sm-bordo, #6E1220);
    box-shadow: 0 0 0 3px rgba(238, 112, 112, .22);
}

/* Гумка — з підписом, а не піктограмою: значок «стирачки» люди плутають із
   «очистити все», і різниця виявляється вже після втрати малюнка. */
.smca-draw__era {
    flex: 0 0 auto;
    min-height: 44px; padding: 0 16px; cursor: pointer;
    border: 1px solid var(--sm-line, #EFDFDC); border-radius: 12px;
    background: #fff; color: #7E5F5C;
    font-weight: 600; font-size: 13.5px; line-height: 1.2;
}
.smca-draw__era.is-on {
    border-color: var(--sm-bordo, #6E1220);
    background: var(--sm-paper-2, #F3E4E1);
    color: var(--sm-bordo, #6E1220);
}

/* ---------- Дії ---------- */
.smca-draw__foot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.smca-draw__row--act { flex-wrap: nowrap; }
.smca-draw__btn {
    flex: 1 1 0;
    min-height: 44px; padding: 10px 12px; cursor: pointer;
    border: 1px solid var(--sm-line, #EFDFDC); border-radius: 12px;
    background: #fff; color: #7E5F5C;
    font-weight: 600; font-size: 13.5px; line-height: 1.2;
}
.smca-draw__btn:hover:not(:disabled) { border-color: #8E2136; color: #8E2136; }
.smca-draw__btn:disabled { opacity: .45; cursor: default; }
.smca-draw__btn--warn { color: #A2564F; }

.smca-draw__done {
    width: 100%;
    min-height: 50px; padding: 13px 16px; cursor: pointer;
    border: none; border-radius: 14px;
    background: linear-gradient(135deg, #8E2136 0%, #600D1B 100%);
    color: #fff;
    font-weight: 800; font-size: 15px; line-height: 1.2; letter-spacing: .02em;
    box-shadow: 0 12px 26px -14px rgba(110, 18, 32, .65);
    transition: filter .15s;
}
.smca-draw__done:hover:not(:disabled) { filter: brightness(1.08); }
.smca-draw__done:disabled { opacity: .5; cursor: default; box-shadow: none; }
.smca-draw__note {
    text-align: center;
    font-weight: 500; font-size: 11.5px; line-height: 1.3;
    color: var(--sm-muted, #7E5F5C);
}

/* ---------- Питання перед виходом ---------- */
.smca-draw__ask {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(49, 30, 30, .45);
}
.smca-draw__ask-in {
    width: 100%; max-width: 320px;
    padding: 16px;
    border-radius: var(--sm-radius, 20px);
    background: var(--sm-card, #fff);
    box-shadow: 0 18px 40px -18px rgba(96, 0, 0, .55);
}
.smca-draw__ask-txt {
    margin-bottom: 12px;
    text-align: center;
    font-weight: 700; font-size: 14px; line-height: 1.4;
    color: var(--sm-ink, #311E1E);
}
.smca-draw__ask-row { display: flex; gap: 8px; }

/* ---------- Телефон ----------
   Заміряно на 375×667: шапка 44 + інструменти 96 + дії 110 + підказка 32 +
   відступи лишають сцені близько 350 px, тобто квадрат упирається в ширину,
   а не у висоту. На 320×568 сторона виходить 296 — усе ще робоча зона. */
@media (max-width: 640px) {
    .smca-draw { padding: 8px 10px 10px; gap: 7px; }
    .smca-draw__title { font-size: 14px; }
    .smca-draw__row { gap: 6px; }
    .smca-draw__era { padding: 0 12px; }
}

/* Низькі екрани в альбомній орієнтації: підказка й підзаголовок зайві, місце
   під полотно важливіше за пояснення, яке людина вже прочитала. */
@media (max-height: 460px) {
    .smca-draw__sub { display: none; }
    .smca-draw__hint { display: none; }
    .smca-draw__tools { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .smca-draw__done { transition: none; }
}


/* Перемикач підкладки (див. draw.js): вимкнений — звичайна кнопка, увімкнений —
   винна заливка, як у решти активних станів майстерні. */
.smca-draw__under.is-on { background: #6E1220; border-color: #6E1220; color: #fff; }