/* =====================================================================
   АФІША: сам флаєр і конструктор.
   Флаєр малюється тими самими правилами й у превʼю, і на головній —
   інакше людина складала б одне, а сусіди бачили інше.
   ===================================================================== */

/* ── Флаєр ─────────────────────────────────────────────────────────── */

.flyer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--flyer-bg, #174f46);
  color: var(--flyer-ink, #fff);
  isolation: isolate;
}

.flyer-photo,
.flyer-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.flyer-photo {
  background-size: cover;
  background-repeat: no-repeat;
}

/* Затемнення під текстом: без нього напис на строкатому знімку зникає. */
.flyer-scrim {
  background: linear-gradient(180deg, rgba(8, 24, 21, .15) 0%, rgba(8, 24, 21, .95) 100%);
}

.flyer-tone-dark { color: #14312b; }
.flyer-tone-dark .flyer-scrim { background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .92) 100%); }

.flyer-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
}

.flyer-badge {
  align-self: flex-start;
  padding: 0.3125rem 0.6875rem;
  border-radius: 1.875rem;
  background: var(--flyer-accent, #e87855);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.flyer-headline {
  margin: 0;
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  line-height: 1.15;
  font-weight: 800;
}

.flyer-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.45;
  opacity: .88;
}

.flyer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.875rem;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
}

.flyer-author { opacity: .75; }

.flyer-phone {
  font-weight: 800;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* Макети відрізняються розкладкою, а не набором полів. */
.flyer--color .flyer-photo,
.flyer--color .flyer-scrim { display: none; }

.flyer--split { justify-content: flex-end; }
.flyer--split .flyer-photo { inset: 0 0 45% 0; }
.flyer--split .flyer-scrim { display: none; }
.flyer--split .flyer-body { background: var(--flyer-bg, #174f46); border-radius: 1.25rem 1.25rem 0 0; }

/* Кутова стрічка живе поза текстовим блоком, інакше правило для неї
   перебивалось звичайною плашкою всередині тексту. */
.flyer-ribbon {
  position: absolute;
  top: 1.125rem;
  right: -2.75rem;
  z-index: 1;
  padding: 0.375rem 2.75rem;
  transform: rotate(35deg);
  background: var(--flyer-accent, #e87855);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
}

/* ── Конструктор ───────────────────────────────────────────────────── */

.afisha-modal {
  width: min(53rem, 96vw);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 1.5rem;
  color: var(--ink);
  background: #fbfaf6;
  box-shadow: 0 1.875rem 6.25rem rgba(0, 0, 0, .3);
}

.afisha-modal::backdrop {
  background: rgba(8, 34, 30, .72);
  backdrop-filter: blur(0.25rem);
}

.afisha-shell {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2rem);
  /* Панель властивостей не повинна розсувати вікно вшир. */
  overflow-x: hidden;
  overflow-y: auto;
  /* Докрутивши форму до кінця, прокрутка не має перекидатись на
     сторінку під вікном. */
  overscroll-behavior: contain;
  max-height: 92vh;
}

.afisha-close { position: absolute; top: 1rem; right: 1rem; }
.afisha-lead { margin: 0.375rem 0 1.25rem; line-height: 1.6; opacity: .72; }

.afisha-grid {
  display: grid;
  /* Ліворуч аркуш завширшки з себе, праворуч властивості предмета й
     поля заявки. Перша колонка не розтягується на весь залишок —
     інакше між аркушем і панеллю зяяла порожнеча. */
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.afisha-fields { display: grid; gap: 1rem; min-width: 0; }

.afisha-choice { border: 0; margin: 0; padding: 0; }
.afisha-choice legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .6;
}

.afisha-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.afisha-chip,
.afisha-swatch {
  padding: 0.5rem 0.875rem;
  border: 1px solid rgba(23, 59, 53, .18);
  border-radius: 3.125rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

/* Удень кнопки білі, як поля вводу поруч: на кремовому тлі вікна
   прозорі вони здавались бежевими плямами. */
.afisha-chip { background: #fff; }

.afisha-chip.is-active { background: var(--deep); border-color: var(--deep); color: #fff; }
/* Білий зразок на світлій панелі без обідка просто зникав. */
.afisha-swatch { border-color: rgba(23, 59, 53, .22); }
html[data-theme="dark"] .afisha-swatch { border-color: rgba(225, 239, 234, .28); }
.afisha-swatch.is-active { outline: 2px solid var(--coral); outline-offset: 2px; }

.afisha-label { display: block; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.afisha-label input,
.afisha-label textarea {
  display: block;
  width: 100%;
  margin-top: 0.375rem;
  padding: 0.6875rem 0.875rem;
  border: 1px solid rgba(23, 59, 53, .18);
  border-radius: 0.75rem;
  background: #fff;
  font: inherit;
  resize: vertical;
}

.afisha-counter,
.afisha-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: .6;
}

.afisha-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }

.afisha-photo { display: grid; gap: 0.625rem; margin-top: 0.75rem; }
/* Власне правило перебивало службовий атрибут hidden, і поля фото
   лишались на екрані навіть при суцільному кольорі. */
.afisha-photo[hidden] { display: none; }
.afisha-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;
  border: 1px dashed rgba(23, 59, 53, .3);
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.afisha-file input { display: none; }

.afisha-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
}
.afisha-row select,
.afisha-row input[type="range"] { flex: 0 1 11.25rem; min-width: 0; }

.afisha-price { margin: 0.625rem 0 0; font-size: 0.8125rem; font-weight: 700; color: var(--green); }

.afisha-preview { position: sticky; top: 0; display: grid; gap: 0.75rem; }
.afisha-preview-title { font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }
.afisha-preview-box { max-width: 20rem; }

/* Знімок у превʼю тягнеться мишкою, тому курсор показує це прямо. */
.afisha-preview-box:has(.flyer-photo) { cursor: grab; touch-action: none; }
.afisha-preview-box.is-dragging { cursor: grabbing; user-select: none; }
.afisha-preview-box.is-dragging * { pointer-events: none; }

.afisha-note { margin: 0; font-size: 0.8125rem; line-height: 1.55; opacity: .72; }
.afisha-note.is-warning { color: #b05834; opacity: 1; font-weight: 700; }
.afisha-submit { width: 100%; }

@media (max-width: 52rem) {
  .afisha-grid { grid-template-columns: 1fr; }
  .afisha-preview { position: static; }
  .afisha-preview-box { max-width: 17.5rem; margin: 0 auto; }
  .afisha-two { grid-template-columns: 1fr; }
}

html[data-theme="dark"] .afisha-modal { background: #12302a; color: #eef5f1; }
html[data-theme="dark"] .afisha-label input,
html[data-theme="dark"] .afisha-label textarea { background: #0f2420; color: #eef5f1; border-color: rgba(225, 239, 234, .18); }
html[data-theme="dark"] .afisha-chip { border-color: rgba(225, 239, 234, .22); background: transparent; }
html[data-theme="dark"] .afisha-chip.is-active { background: var(--deep); }

/* ── Смуга афіші на головній ───────────────────────────────────────── */

.afisha-section[hidden] { display: none; }

.afisha-rail {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Гортання — звичайна прокрутка зі снапом: одразу працює пальцем,
   колесом і клавіатурою, без самописного слайдера. */
.afisha-track {
  /* Основа ширини — нуль, а не вміст. З «auto» виходило замкнене коло:
     ширина смуги рахувалась від карток, а ширина карток — у відсотках
     від смуги. Усередині карток живуть контейнерні запити (cqw), і
     браузер на цьому колі зависав назовсім — сторінка вмирала. */
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  /* Ширина картки — просте число, що міняється сходинками за розміром
     екрана. Ні відсотка від смуги, ні vw тут бути не може: перше
     замикало коло (смуга залежить від карток, картки — від смуги),
     друге коливалось разом зі смугою прокрутки сторінки. Усередині
     карток живуть контейнерні запити (cqw), і на такому колі браузер
     зависав назовсім — сторінка переставала відповідати. */
  grid-auto-columns: 21rem;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}

@media (max-width: 75rem) { .afisha-track { grid-auto-columns: 17rem; } }
@media (max-width: 56rem) { .afisha-track { grid-auto-columns: 14rem; } }

.afisha-track:focus-visible { outline: 2px solid var(--green); outline-offset: 0.25rem; }
.afisha-slide { scroll-snap-align: start; min-width: 0; }

.afisha-arrow {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(23, 59, 53, .2);
  border-radius: 50%;
  background: #fff;
  color: var(--deep);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.afisha-arrow[hidden] { display: none; }
.afisha-arrow:hover { border-color: var(--green); color: var(--green); }

.afisha-create { margin-top: 1.5rem; }

/* На телефоні — два флаєри в полі зору, як і домовлялись. */
@media (max-width: 40rem) {
  .afisha-track { grid-auto-columns: 11rem; gap: 0.75rem; }
  .afisha-arrow { display: none; }
  .afisha-create { width: 100%; }
}

html[data-theme="dark"] .afisha-arrow { background: #123029; border-color: rgba(225, 239, 234, .2); color: #eef5f1; }

/* ── Вільне полотно ─────────────────────────────────────────────────
   Розміри шарів задані у відсотках від аркуша, а розмір шрифту — у
   cqw, тобто у відсотках ширини самого флаєра. Тому та сама афіша
   однаково виглядає і в конструкторі, і карткою на головній, і
   дрібним превʼю в черзі модерації.
   ------------------------------------------------------------------ */

.flyer { container-type: inline-size; }
.flyer--canvas { display: block; }

.lay {
  position: absolute;
  box-sizing: border-box;
}

.lay--text {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.lay-line { display: block; width: 100%; }

/* Рядковий шар: підкладка лягає під самі слова й повторюється на
   кожному рядку, як заливка тексту у Word. */
.lay-ink {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lay-ink.is-editing { outline: 2px solid var(--coral, #e87855); outline-offset: 0.25rem; cursor: text; }

.lay--image {
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, .06);
}

/* Рамка без знімка — щоб було видно, куди його класти. */
.lay--image.is-empty {
  border: 2px dashed rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .12);
}

/* ── Робоче поле конструктора ──────────────────────────────────────── */

.cv-stage { position: relative; touch-action: none; }
.cv-stage.is-busy { user-select: none; }
.cv-paper { position: relative; }
.cv-paper .lay { cursor: move; }

.cv-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cv-frame {
  position: absolute;
  outline: 1.5px solid #7b5cff;
  outline-offset: 0;
}

.cv-frame.is-locked { outline-style: dashed; outline-color: rgba(123, 92, 255, .6); }

.cv-handle,
.cv-rotate {
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  margin: -0.375rem 0 0 -0.375rem;
  border: 1.5px solid #7b5cff;
  border-radius: 50%;
  background: #fff;
  pointer-events: auto;
}

.cv-handle--nw { left: 0; top: 0; cursor: nwse-resize; }
.cv-handle--n { left: 50%; top: 0; cursor: ns-resize; border-radius: 0.25rem; width: 1rem; margin-left: -0.5rem; }
.cv-handle--ne { left: 100%; top: 0; cursor: nesw-resize; }
.cv-handle--w { left: 0; top: 50%; cursor: ew-resize; border-radius: 0.25rem; height: 1rem; margin-top: -0.5rem; }
.cv-handle--e { left: 100%; top: 50%; cursor: ew-resize; border-radius: 0.25rem; height: 1rem; margin-top: -0.5rem; }
.cv-handle--sw { left: 0; top: 100%; cursor: nesw-resize; }
.cv-handle--s { left: 50%; top: 100%; cursor: ns-resize; border-radius: 0.25rem; width: 1rem; margin-left: -0.5rem; }
.cv-handle--se { left: 100%; top: 100%; cursor: nwse-resize; }

.cv-rotate {
  left: 50%;
  top: 100%;
  width: 1.5rem;
  height: 1.5rem;
  margin: 1rem 0 0 -0.75rem;
  display: grid;
  place-items: center;
  font-size: 0.875rem;
  color: #7b5cff;
  cursor: grab;
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, .18);
}

/* Панель дій над предметом — як у звичних редакторах афіш. */
.cv-tools {
  position: absolute;
  transform: translate(-50%, -140%);
}

/* Предмет під самим верхом аркуша: панель дій переїжджає під нього,
   інакше вона лізла б на кнопки конструктора. */
.cv-tools.is-below {
  transform: translate(-50%, 40%);
  display: flex;
  gap: 0.125rem;
  padding: 0.25rem;
  border-radius: 0.625rem;
  background: #fff;
  box-shadow: 0 0.375rem 1.25rem rgba(0, 0, 0, .22);
  pointer-events: auto;
  white-space: nowrap;
}

.cv-tools button {
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  /* Панель завжди біла, тож колір значків задаємо прямо: успадкований
     від вікна світлий текст на ній був невидимий у темній темі. */
  color: #173b35;
  font-size: 0.8125rem;
  line-height: 1;
  cursor: pointer;
}

.cv-tools button:hover { background: rgba(123, 92, 255, .12); }

/* Лінії рівняння: видно лише поки предмет рухається. */
.cv-guide { position: absolute; background: #ff3d9a; pointer-events: none; }
.cv-guide--x { top: -6%; bottom: -6%; width: 1px; }
.cv-guide--y { left: -6%; right: -6%; height: 1px; }

/* ── Панелі конструктора ───────────────────────────────────────────── */

.afisha-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.afisha-bar-gap { flex: 1 1 auto; }
.afisha-wide { width: 100%; }

.afisha-canvas-side { display: grid; gap: 1rem; align-content: start; }
/* Аркуш не повинен бути вищим за вікно: інакше, щоб побачити його
   низ, доводилось би щоразу крутити форму. Пропорція 4/5, тому ширину
   рахуємо від доступної висоти. */
.afisha-canvas-side .afisha-preview-box {
  max-width: min(24rem, calc((92vh - 22rem) * 0.8));
  width: 100%;
}

.afisha-bg { display: grid; gap: 0.5rem; max-width: 24rem; }
.afisha-bg-title { font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }

.afisha-props {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.875rem;
  border: 1px solid rgba(23, 59, 53, .14);
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, .6);
}

.afisha-props-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.afisha-props-keys { font-size: 0.6875rem; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .55; }
.afisha-props textarea { width: 100%; margin-top: 0.375rem; padding: 0.5rem 0.625rem; border: 1px solid rgba(23, 59, 53, .18); border-radius: 0.625rem; background: #fff; font: inherit; resize: vertical; }
.afisha-props .afisha-row input[type="color"] { flex: 0 0 3rem; height: 1.75rem; padding: 0; border: 1px solid rgba(23, 59, 53, .18); border-radius: 0.375rem; background: none; }
.afisha-props .afisha-row input[type="checkbox"] { flex: none; width: 1.125rem; height: 1.125rem; }
.afisha-empty { margin: 0; line-height: 1.55; }

html[data-theme="dark"] .afisha-props { background: rgba(15, 36, 32, .6); border-color: rgba(225, 239, 234, .16); }
html[data-theme="dark"] .afisha-props textarea { background: #0f2420; color: #eef5f1; border-color: rgba(225, 239, 234, .18); }

/* ── Перегляд афіші ─────────────────────────────────────────────────
   Показуємо флаєр у тих самих розмірах, у яких він ляже на головній:
   карткою на комп'ютері (у ряд три) і вдвічі вужче на телефоні (у ряд
   два). Так одразу видно, чи читається дрібний напис.
   ------------------------------------------------------------------ */

.afisha-view {
  width: min(44rem, 96vw);
  /* Висота задана, а не «не більше ніж»: інакше вкладеній картці не
     було б від чого рахувати свій зріст і вона зникала в нуль. */
  height: min(92vh, 56rem);
  padding: 0;
  border: 0;
  border-radius: 1.5rem;
  color: var(--ink);
  background: #fbfaf6;
  box-shadow: 0 1.875rem 6.25rem rgba(0, 0, 0, .3);
}

.afisha-view::backdrop { background: rgba(8, 34, 30, .78); backdrop-filter: blur(0.25rem); }

/* Вікно перегляду не крутиться: картка сама вкладається в те місце,
   що лишилось між заголовком і кнопкою. Тому висотою керує розкладка,
   а не обчислення в пікселях. */
.afisha-view-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}

.afisha-view-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  margin: 1.25rem 0;
}

/* Флаєр росте від висоти, а ширину йому дають сторони 4/5. Ширший за
   30rem не робимо — на великому екрані картка виглядала б плакатом. */
.afisha-view-box--desk { height: 100%; }
.afisha-view-box--desk .flyer {
  height: 100%;
  width: auto;
  max-width: min(30rem, 100%);
  margin: 0 auto;
}

.afisha-view .button { width: 100%; }

@media (max-width: 34rem) {
  .afisha-view-box--desk .flyer { max-width: 100%; }
}

html[data-theme="dark"] .afisha-view { background: #12302a; color: #eef5f1; }

/* ── Вирівнювання, шари, числа, заготовки ───────────────────────────── */

.afisha-align { display: grid; gap: 0.5rem; max-width: 24rem; }
.afisha-align .afisha-chip { min-width: 2.5rem; text-align: center; font-size: 0.9375rem; line-height: 1; }

.afisha-layers { display: grid; gap: 0.5rem; }

.afisha-layers-list {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 11rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.afisha-layer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}

.afisha-layer:hover { background: rgba(23, 59, 53, .07); }
.afisha-layer.is-active { border-color: var(--deep); background: rgba(23, 59, 53, .1); font-weight: 700; }
.afisha-layer-icon { flex: none; opacity: .7; }
.afisha-layer-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afisha-layer-lock { flex: none; font-size: 0.75rem; }

/* Числа місця й розміру: чотири поля в два стовпці. */
/* Чотири поля в два стовпці. minmax(0,…) обов’язковий: без нього
   стовпці беруть ширину за вмістом і панель вилазить за вікно. */
.afisha-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem 0.625rem; }
.afisha-num { font-size: 0.6875rem; min-width: 0; gap: 0.25rem; }
.afisha-num input {
  flex: 0 0 3.25rem;
  min-width: 0;
  padding: 0.25rem 0.375rem;
  border: 1px solid rgba(23, 59, 53, .18);
  border-radius: 0.375rem;
  background: #fff;
  font: inherit;
  font-size: 0.75rem;
}

/* Прокрутку тримає сама оболонка вікна, а не сітка. Коли крутилась
   сітка, картки-флаєри всередині неї мали власні контейнерні запити —
   і браузер зациклювався на перерахунку розмірів, а сторінка вмирала. */
.afisha-tpl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.875rem;
  margin: 1.25rem 0;
}

.afisha-picker .afisha-view-shell { overflow-y: auto; overscroll-behavior: contain; }

.afisha-tpl {
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem;
  border: 1px solid rgba(23, 59, 53, .16);
  border-radius: 0.875rem;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.afisha-tpl:hover { border-color: var(--deep); box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, .12); }
.afisha-tpl-box { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0.5rem; pointer-events: none; }
.afisha-tpl-name { font-size: 0.8125rem; font-weight: 800; }
.afisha-tpl-hint { font-size: 0.6875rem; line-height: 1.35; opacity: .65; }

/* Вікно заготовок вище за перегляд: у ньому сітка, а не одна картка. */
.afisha-picker { height: min(92vh, 52rem); }
.afisha-picker .afisha-view-shell { display: flex; flex-direction: column; }

@media (max-width: 52rem) {
  .afisha-tpl-grid { grid-template-columns: repeat(2, 1fr); }
}

html[data-theme="dark"] .afisha-layer:hover { background: rgba(225, 239, 234, .1); }
html[data-theme="dark"] .afisha-layer.is-active { background: rgba(225, 239, 234, .14); border-color: rgba(225, 239, 234, .4); }
html[data-theme="dark"] .afisha-num input { background: #0f2420; color: #eef5f1; border-color: rgba(225, 239, 234, .18); }
html[data-theme="dark"] .afisha-tpl { background: #12302a; border-color: rgba(225, 239, 234, .16); }

/* ── Афіша всередині чужих сторінок ─────────────────────────────────
   Дошка оголошень задає власний вигляд усім вікнам: `.board-page
   dialog` вужчий за наш і ховає все, що не влізло. Той селектор
   вагоміший за простий клас, тому наші правила повторюють клас двічі —
   так вони важать більше й конструктор скрізь однаковий.
   ------------------------------------------------------------------ */

.afisha-modal.afisha-modal {
  width: min(53rem, 96vw);
  max-height: 92vh;
  border-radius: 1.5rem;
  background: #fbfaf6;
  color: var(--ink);
  overflow: visible;
  display: block;
}

.afisha-modal.afisha-modal[open] { display: block; }

.afisha-view.afisha-view {
  width: min(44rem, 96vw);
  height: min(92vh, 56rem);
  max-height: 92vh;
  border-radius: 1.5rem;
  background: #fbfaf6;
  color: var(--ink);
  overflow: hidden;
  display: block;
}

.afisha-view.afisha-view[open] { display: block; }
.afisha-picker.afisha-picker { height: min(92vh, 52rem); }

html[data-theme="dark"] .afisha-modal.afisha-modal,
html[data-theme="dark"] .afisha-view.afisha-view { background: #12302a; color: #eef5f1; }