/* ============================================================
   plotter-cutting-app/styles.css
   /large-format-printing/plotter-cutting-app/styles.css
   ============================================================

   Те, що є ТІЛЬКИ на сторінці плотерної порізки: зона завантаження,
   картка макета з превʼю й аналізом, поля розмірів.

   Оболонка калькулятора (секція, заголовок, групи параметрів, поле
   тиражу, картки терміну, темна плашка підсумку) приїжджає зі
   спільного /assets/configurator.css, а плитки, чипи й кнопки — з
   /assets/ui.css. Тут їх НЕ дублюємо: рівно з цієї причини
   configurator.css і з'явився — див. коментар у його шапці.

   Спирається на токени ui.css, тож має підключатися ПІСЛЯ нього.

   ── ПРО ПРЕФІКС mk- ──────────────────────────────────────────
   Усе, що стосується макета замовника (maket), названо mk-*. Ці ж
   класи однаково працюють в обох калькуляторах сторінки: картка
   макета в порізці й у наліпках відрізняється лише тим, що поруч із
   аналізом стоять параметри. Другого набору класів для цього не
   треба — досить модифікатора .mk-card--wide.
   ============================================================ */


/* ============================================
   HIDDEN ПЕРЕМАГАЄ DISPLAY

   ⚠ Не косметика, а виправлення реальної помилки.

   Браузерне правило для атрибута — [hidden] { display: none }.
   Специфічність у нього така сама, як у звичайного класу, а наші
   класи оголошені пізніше — тож будь-який .mk-*, у якого є свій
   display: flex або grid, ігнорував hidden і лишався на екрані.
   Так зона завантаження висіла над уже завантаженими макетами, а
   кнопки «Додати / Очистити» — над порожнім калькулятором.

   Ловити це поклассно означало б наступати на ті самі граблі щоразу,
   коли в блоці з'явиться display. Тому одне правило на обидва
   калькулятори — і воно свідомо обмежене їхніми секціями, щоб не
   міняти поведінку hidden для спільних компонентів сайту.
   ============================================ */
#cutConfig [hidden],
#decalConfig [hidden] { display: none !important; }


/* ============================================
   ЗОНА ЗАВАНТАЖЕННЯ

   Порахувати ціну можна й до завантаження — люди часто спершу
   дивляться, у скільки це стане, і лише потім шукають файл. Тому
   зона не блокує калькулятор, а стоїть поруч із параметрами.
   ============================================ */
.mk-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-5) var(--sp-4);
    min-height: 230px;
    border: 2px dashed var(--g-300);
    border-radius: var(--r-lg);
    background: var(--g-0);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.mk-drop:hover,
.mk-drop:focus-within {
    border-color: var(--c-brand-line);
    background: var(--c-brand-soft);
}
/* Перетягування підсвічуємо помітніше за наведення: у цей момент
   людина вже не вибирає, куди кинути, — вона перевіряє, що влучила. */
.mk-drop.is-dragover {
    border-color: var(--c-brand);
    background: var(--c-brand-soft);
}

.mk-drop__icon {
    width: 54px;
    height: 54px;
    color: var(--c-brand);
}
.mk-drop__icon svg { width: 100%; height: 100%; fill: currentColor; }

.mk-drop__text {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semi);
    color: var(--g-900);
}
.mk-drop__sub,
.mk-drop__hint {
    font-size: var(--fs-sm);
    color: var(--g-600);
}

.mk-drop__btn {
    margin-top: var(--sp-1);
    padding: 10px 24px;
    border: 0;
    border-radius: var(--r-btn);
    background: var(--c-brand);
    color: var(--g-0);
    font: inherit;
    font-weight: var(--fw-semi);
    cursor: pointer;
    box-shadow: var(--sh-brand);
    transition: background var(--transition);
}
.mk-drop__btn:hover { background: var(--c-brand-dark); }

/* Посилання під зоною, а не всередині неї: уся зона ловить клік і
   відкриває вибір файлу, тож посилання всередині давало б і перехід,
   і вікно вибору одночасно. */
.mk-guide {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--c-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--g-300);
}
.mk-guide:hover { color: var(--c-brand); border-bottom-color: var(--c-brand-line); }
.mk-guide + .mk-guide { margin-left: var(--sp-4); }


/* ============================================
   ДІЇ НАД СПИСКОМ МАКЕТІВ
   «Змінити» й «прибрати» живуть на самих картках — тут лише те, що
   стосується всього набору.
   ============================================ */
.mk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}
.mk-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border: 1px solid var(--g-300);
    border-radius: var(--r-btn);
    background: var(--g-0);
    color: var(--g-800);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}
.mk-actions button:hover { border-color: var(--c-brand-line); color: var(--c-brand); }
.mk-actions__clear:hover { color: var(--c-danger); border-color: var(--c-danger-line); }


/* ============================================
   КАРТКА МАКЕТА
   ============================================ */
.mk-card {
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    background: var(--g-0);
    box-shadow: var(--sh-sm);
}
.mk-card.is-dragover { border-color: var(--c-brand); background: var(--c-brand-soft); }

/* Широка картка — там, де поруч із аналізом стоять параметри позиції
   (калькулятор наліпок). Дві колонки: ліворуч те, що ми прочитали з
   файлу, праворуч те, що вибирає людина. */
.mk-card__body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--sp-4);
    align-items: start;
}
@media (max-width: 900px) {
    .mk-card__body { grid-template-columns: 1fr; }
}

.mk-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--g-100);
}
.mk-head__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--fw-semi);
    color: var(--g-900);
}
.mk-head__meta {
    flex: 0 0 auto;
    font-size: var(--fs-sm);
    color: var(--g-600);
}
.mk-head__acts { flex: 0 0 auto; display: flex; gap: 6px; }

.mk-iconbtn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--g-200);
    border-radius: var(--r-sm);
    background: var(--g-0);
    color: var(--g-600);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}
.mk-iconbtn svg { width: 18px; height: 18px; fill: currentColor; }
.mk-iconbtn:hover { border-color: var(--c-accent); color: var(--c-navy); }
.mk-iconbtn--danger:hover { border-color: var(--c-danger-line); color: var(--c-danger); }


/* ============================================
   ПРЕВʼЮ

   Підкладка в шахівницю навмисно: макети для порізки майже завжди з
   прозорим фоном, і на суцільно білому тлі білий контур зливався б
   із ним. Клітинки одразу показують, де прозорість, а де заливка.
   ============================================ */
.mk-scene {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: var(--sp-3);
    border: 1px solid var(--g-200);
    border-radius: var(--r-md);
    background-color: var(--g-50);
    background-image:
        linear-gradient(45deg, var(--g-100) 25%, transparent 25%),
        linear-gradient(-45deg, var(--g-100) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--g-100) 75%),
        linear-gradient(-45deg, transparent 75%, var(--g-100) 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.mk-scene img {
    max-width: 100%;
    max-height: 340px;
    object-fit: contain;
    /* Тінь, а не рамка: рамка читалася б як частина макета, хоча
       наліпка ніякої рамки не має. */
    filter: drop-shadow(0 2px 6px rgba(16, 24, 40, .12));
}
.mk-scene__ext {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--g-400);
    letter-spacing: .04em;
}

.mk-spin {
    position: absolute;
    width: 34px;
    height: 34px;
    border: 3px solid var(--g-200);
    border-top-color: var(--c-brand);
    border-radius: var(--r-round);
    animation: mk-spin .8s linear infinite;
}
@keyframes mk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .mk-spin { animation-duration: 2.4s; }
}


/* ============================================
   АНАЛІЗ МАКЕТА

   Загальний вердикт одним рядком стоїть НАД таблицею, а не під нею:
   більшість читає тільки його.
   ============================================ */
.mk-analysis { margin-top: var(--sp-3); }

.mk-verdict {
    margin: 0 0 var(--sp-3);
    padding: 10px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--g-200);
    background: var(--g-50);
    font-weight: var(--fw-semi);
    color: var(--g-800);
}
.mk-verdict--ok   { background: var(--c-ok-bg);     border-color: var(--c-ok-line);     color: var(--c-ok); }
.mk-verdict--warn { background: var(--c-warn-bg);   border-color: var(--c-warn-line);   color: var(--c-warn); }
.mk-verdict--bad  { background: var(--c-danger-bg); border-color: var(--c-danger-line); color: var(--c-danger); }

.mk-rows { margin: 0; }
.mk-row {
    display: grid;
    grid-template-columns: minmax(120px, 40%) 1fr;
    gap: var(--sp-2);
    padding: 7px 0;
    border-bottom: 1px solid var(--g-100);
    font-size: var(--fs-sm);
}
.mk-row:last-child { border-bottom: 0; }
.mk-row dt { margin: 0; color: var(--g-600); }
.mk-row dd { margin: 0; color: var(--g-900); }

.mk-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    white-space: nowrap;
}
.mk-badge--ok   { background: var(--c-ok-bg);     color: var(--c-ok); }
.mk-badge--warn { background: var(--c-warn-bg);   color: var(--c-warn); }
.mk-badge--bad  { background: var(--c-danger-bg); color: var(--c-danger); }

/* Кожен рядок веде до дії, яку людина зробить сама, у своєму
   редакторі. Тому це список порад, а не список проблем — і крапка
   зліва кольором показує, наскільки все серйозно. */
.mk-notes {
    list-style: none;
    margin: var(--sp-3) 0 0;
    padding: 0;
    display: grid;
    gap: var(--sp-2);
}
.mk-note {
    padding: 10px 14px;
    border-left: 3px solid var(--g-300);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--g-50);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--g-800);
}
.mk-note a { color: var(--c-brand); }
.mk-note--info { border-left-color: var(--c-accent);      background: var(--c-accent-soft); }
.mk-note--warn { border-left-color: var(--c-warn-strong); background: var(--c-warn-bg); }
.mk-note--bad  { border-left-color: var(--c-danger);      background: var(--c-danger-bg); }


/* ============================================
   ПОЛЯ РОЗМІРІВ
   ============================================ */
.mk-fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}
.mk-field { flex: 1 1 140px; min-width: 0; }
.mk-field__label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--g-700);
}
.mk-field__wrap { position: relative; }
.mk-field__input { width: 100%; padding-right: 42px; }
/* Одиниця виміру всередині поля, а не в підписі: «Висота, см» над
   полем змушує повертатися очима вгору щоразу, коли перевіряєш
   набране число. */
.mk-field__suffix {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-size: var(--fs-sm);
    color: var(--g-500);
    pointer-events: none;
}
/* Поле, яке рахується саме (висота від ширини за пропорціями макета).
   Видно, що воно не для введення, — але число лишається чорним і
   читабельним: це не «вимкнено», це «ми вже порахували». */
.mk-field--derived .mk-field__input {
    background: var(--g-50);
    border-style: dashed;
    cursor: default;
}
.mk-field__auto {
    font-weight: var(--fw-normal);
    font-size: var(--fs-xs);
    color: var(--g-600);
}

.mk-field__hint {
    display: block;
    margin-top: 5px;
    font-size: var(--fs-xs);
    color: var(--g-600);
}

/* Плашка «так не вийде». Не попередження в списку порад, а стоп:
   матеріалу такої ширини просто не існує. */
.mk-alert {
    margin: var(--sp-3) 0 0;
    padding: 12px 16px;
    border: 1px solid var(--c-danger-line);
    border-radius: var(--r-sm);
    background: var(--c-danger-bg);
    color: var(--c-danger);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

/* Підказка від аналізу поруч із перемикачем деталізації. Кнопка
   «Поставити» тут обовʼязкова: без неї підказка вимагає від людини
   зіставити міліметри з назвами варіантів самотужки. */
.mk-hint {
    display: block;
    margin-top: var(--sp-2);
    padding: 9px 13px;
    border-radius: var(--r-sm);
    background: var(--c-accent-soft);
    border: 1px solid var(--c-accent-line);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--g-800);
}
.mk-hint__apply {
    margin-left: 6px;
    padding: 3px 12px;
    border: 1px solid var(--c-navy);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--c-navy);
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    cursor: pointer;
}
.mk-hint__apply:hover { background: var(--c-navy); color: var(--g-0); }


/* ============================================
   ЗГОДА ЗАМОВНИКА

   З'являється, лише коли є через що: без вектора плотер не поріже
   нічого, і контур доведеться малювати окремо — а це інша сума.
   Рішення має бути замовниковим, свідомим і зафіксованим.
   ============================================ */
.mk-consent {
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--c-warn-line);
    border-radius: var(--r-md);
    background: var(--c-warn-bg);
}
.mk-consent__row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--g-850);
    cursor: pointer;
}
.mk-consent__row input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--c-brand);
    cursor: pointer;
}
.mk-consent__row a { color: var(--c-brand); }


/* ============================================
   ПОРОЖНІЙ СТАН КАЛЬКУЛЯТОРА НАЛІПОК

   Дві колонки: ліворуч зона завантаження, праворуч параметри для
   попереднього розрахунку. Коли макети з'являться, параметри
   переїжджають у картки, а цей блок ховається.
   ============================================ */
.mk-empty {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--sp-4);
    align-items: start;
}
@media (max-width: 900px) {
    .mk-empty { grid-template-columns: 1fr; }
}
.mk-empty__col { min-width: 0; }
.mk-empty__params { min-width: 0; }


/* ============================================
   ЦІНА КАРТКИ
   ============================================ */
.mk-card__price {
    margin: var(--sp-4) 0 0;
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--g-200);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--g-900);
    text-align: right;
}
/* Чому перша картка дорожча за наступні з тими самими параметрами.
   Не розкладаємо ціну на складові — кажемо лише те, що правда:
   підготовка замовлення робиться раз. */
.mk-card__price-note {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal);
    color: var(--g-600);
}


/* ============================================
   ДРІБНИЦІ РОЗКЛАДКИ СТОРІНКИ
   ============================================ */

/* Калькулятор наклейок — перший блок після hero, і він має бути на
   БІЛОМУ, а не на типовому сірому .sticker-config-section.

   Причина не в смаку: одразу під ним іде секція «Що таке наклейки з
   оракалу» на .sec--muted, тобто на тому самому сірому. Два однакові
   тони підряд зливаються в одну довгу пляму, і межа між калькулятором
   і статтею зникає. З білим тлом сторінка чергується рівно:
   hero → білий → сірий → білий → сірий.

   Калькулятор порізки нижче лишається сірим за замовчуванням — там
   він стоїть після білої секції з цінами, і чергування тримається
   само собою. */
#decalConfig { background: var(--g-0); }

/* ============================================
   КАРТКИ ГОТОВИХ МАКЕТІВ ЗІ ЗНІМКАМИ

   .subcategory-card зі spільного blocks.css — це плашка з текстом і
   внутрішніми полями. Тут у неї додається знімок, і він має йти
   ВСТИК до країв, а не всередині полів: картинка в рамочці з відступом
   читається як іконка, а не як фото роботи.

   Тому правила scoped на #readyTemplates — решта сторінок сайту
   використовує ті самі картки без знімків, і чіпати їх не можна.
   ============================================ */
#readyTemplates .subcategory-card {
    /* Поля прибираємо зверху й з боків — їх бере на себе картинка;
       знизу лишаємо, щоб підписи не липли до краю. */
    padding: 0 0 var(--sp-4);
    overflow: hidden;
    justify-content: flex-start;
}

#readyTemplates .subcategory-thumb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    /* Без стрибка верстки, поки знімок вантажиться */
    background: var(--g-100);
    margin-bottom: var(--sp-2);
    transition: transform var(--transition);
}

/* Легке наближення на наведенні — те саме, що в .gallery-grid вище на
   сторінці. overflow:hidden на картці не дає знімку виповзти за
   скруглені кути. */
#readyTemplates .subcategory-card:hover .subcategory-thumb {
    transform: scale(1.04);
}

/* Підписи повертають собі бічні поля, які втратила картка. */
#readyTemplates .subcategory-name,
#readyTemplates .subcategory-desc {
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
}

/* Картки з фото ширші за текстові: у 190 px знімок 3:2 стає смужкою
   заввишки 127 px, на якій нічого не розібрати. */
#readyTemplates .subcards {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

@media (prefers-reduced-motion: reduce) {
    #readyTemplates .subcategory-card:hover .subcategory-thumb { transform: none; }
}


/* ============================================
   ТАБЛИЦЯ ЦІН

   Клітинки не переносяться. Ціна — це одне число, і розрив «156 /
   ₴» або «5 × / 5 см» читається як два різні значення; на телефоні
   таблиця через це розповзалася на три рядки в клітинці.

   Замість переносу лишаємо горизонтальну прокрутку — її вже дає
   .ui-table-wrap (overflow-x: auto в ui.css). Для прайса це
   правильний обмін: краще посунути таблицю вбік, ніж зіпсувати
   числа.
   ============================================ */
#decalPrices .ui-table th,
#decalPrices .ui-table td { white-space: nowrap; }

/* Бейдж ціни за штуку — під числом, а не поруч: у вузькій колонці
   поруч він розштовхував рядок удвічі. */
#decalPrices .ptable-badge {
    display: inline-block;
    margin-left: 6px;
}
@media (max-width: 640px) {
    #decalPrices .ptable-badge { display: block; margin: 4px 0 0; }
}


/* Якір під «липку» шапку: без цього перехід «Одразу до ціни» ховає
   заголовок калькулятора під нею. */
.mk-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 110px;
}