/* Общий слой живёт в @layer osnova (пакет №37). Порядок внутри
   слоя прежний — вид не меняется. Сайтовые стили лежат в слое
   «sayt» и потому слабее канона, а поправки места — вне слоёв
   и потому сильнее всех. */
@layer sayt, osnova;

@layer osnova {
/* РЕДАКТОР — общий вид на три сайта. Цвета берутся из переменных шелла,
   поэтому на каждом сайте он в своём тоне и ничего не переопределяет.
   Порядок на экране один и тот же: ФАЙЛ → ЗАДАЧА → РЕЗУЛЬТАТ. */

.ed {
  /* Ширину держит общая полоса содержимого (шелл), а не сам редактор:
     иначе его край не совпадает с баннером и шапкой. */
  width: 100%;
  margin: 0 auto;
  padding: 4px 0 132px;                 /* снизу место под липкую полосу и док;
                                           боковые поля даёт полоса содержимого */
  color: inherit;
}

.ed__step { margin: 0 0 22px; }

.ed__num {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 10px;
  font: 700 12px/1 "Golos Text", system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, currentColor 62%, transparent);
}
.ed__num i {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-size: 11px;
  border: 1px solid color-mix(in srgb, var(--brand, #888) 42%, transparent);
  color: var(--brand-soft, currentColor);
}
.ed__step[data-done="1"] .ed__num i {
  background: var(--brand, #888); border-color: var(--brand, #888);
  color: var(--shell-na-brende, #17170f);
}

/* ── шаг 1: файл ── */
.ed__drop {
  display: grid; gap: 10px; justify-items: center;
  padding: 26px 16px; text-align: center;
  border: 1px dashed color-mix(in srgb, currentColor 26%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 4%, transparent);
  transition: border-color .15s, background .15s;
}
.ed__drop.is-over {
  border-color: var(--brand, #888);
  background: color-mix(in srgb, var(--brand, #888) 10%, transparent);
}
.ed__drop p { margin: 0; font-size: 15px; }
.ed__drop small { color: color-mix(in srgb, currentColor 55%, transparent); font-size: 12px; }
.ed__dropbtns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.ed__chosen {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--brand, #888) 30%, transparent);
  background: color-mix(in srgb, var(--brand, #888) 7%, transparent);
}
.ed__chosen img, .ed__chosen video { width: 60px; height: 60px; object-fit: cover; border-radius: 7px; display: block; }
.ed__chosen .ed__note { min-width: 0; }
.ed__chosen b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed__chosen span { font-size: 12px; color: color-mix(in srgb, currentColor 55%, transparent); }

/* ── шаг 2: задача ── */
/* «Под площадку» — первая группа Редактора, пакет №26. Чуть заметнее
   остальных: это самая частая нужда человека, а не рядовой пункт. */
.ed__group--ploshchadki .ed__task {
  border-color: color-mix(in srgb, var(--brand, #c5d16b) 42%, transparent);
  background: color-mix(in srgb, var(--brand, #c5d16b) 8%, transparent);
}
.ed__group--ploshchadki .ed__task:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--brand, #c5d16b) 70%, transparent);
}

.ed__group { margin: 0 0 16px; }
.ed__grouptitle {
  margin: 0 0 9px; font: 700 11px/1 "Golos Text", system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, currentColor 50%, transparent);
}
.ed__tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }

.ed__task {
  display: grid; gap: 3px; text-align: left; cursor: pointer;
  padding: 11px 12px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  background: color-mix(in srgb, currentColor 4%, transparent);
  color: inherit; font: inherit;
  transition: border-color .14s, background .14s, transform .1s;
}
.ed__task:hover { border-color: color-mix(in srgb, var(--brand, #888) 45%, transparent); }
.ed__task:active { transform: translateY(1px); }
.ed__task[aria-pressed="true"] {
  border-color: var(--brand, #888);
  background: color-mix(in srgb, var(--brand, #888) 13%, transparent);
}
.ed__task b { font: 700 14px/1.2 inherit; }
.ed__task small { font-size: 11.5px; line-height: 1.3; color: color-mix(in srgb, currentColor 55%, transparent); }
.ed__price {
  justify-self: start; margin-top: 3px; padding: 1px 7px; border-radius: 999px;
  font: 700 11px/1.5 system-ui, sans-serif;
  border: 1px solid color-mix(in srgb, var(--brand, #888) 34%, transparent);
  color: var(--brand-soft, inherit);
}
.ed__price--free { border-color: color-mix(in srgb, currentColor 20%, transparent);
  color: color-mix(in srgb, currentColor 52%, transparent); }

/* настройки выбранной задачи */
.ed__fields { display: grid; gap: 11px; margin: 12px 0 0; padding: 13px;
  border-radius: 10px; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.ed__field { display: grid; gap: 5px; }
.ed__field label { font-size: 12.5px; color: color-mix(in srgb, currentColor 62%, transparent); }
.ed__field input, .ed__field select {
  min-height: 40px; padding: 0 11px; border-radius: 8px; font: inherit; font-size: 14px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  background: color-mix(in srgb, currentColor 5%, transparent); color: inherit;
}
.ed__field input[type="range"] { padding: 0; accent-color: var(--brand, #888); }
.ed__rangeval { font-size: 12px; color: var(--brand-soft, inherit); font-weight: 700; }

/* ── шаг 3: результат ── */
.ed__result {
  display: grid; gap: 11px; padding: 14px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  background: color-mix(in srgb, currentColor 4%, transparent);
}
.ed__result img, .ed__result video { max-width: 100%; border-radius: 8px; display: block; }
.ed__result audio { width: 100%; }
.ed__wait { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ed__wait i {
  width: 15px; height: 15px; border-radius: 50%; font-style: normal;
  border: 2px solid color-mix(in srgb, var(--brand, #888) 30%, transparent);
  border-top-color: var(--brand, #888); animation: ed-spin .8s linear infinite;
}
@keyframes ed-spin { to { transform: rotate(360deg); } }
.ed__err { color: #ff9b8e; font-size: 14px; }

/* ── кнопки ── */
.ed__btn {
  min-height: 40px; padding: 0 15px; border-radius: 8px; cursor: pointer;
  font: 700 13.5px/1 "Golos Text", system-ui, sans-serif;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  background: color-mix(in srgb, currentColor 6%, transparent); color: inherit;
}
.ed__btn:hover { border-color: color-mix(in srgb, var(--brand, #888) 50%, transparent); }
.ed__btn--main {
  background: var(--brand, #888); border-color: var(--brand, #888);
  color: var(--shell-na-brende, #17170f);
}
.ed__btn--main[disabled] { opacity: .4; cursor: not-allowed; }

/* ── липкая полоса над доком ── */
.ed__bar {
  position: fixed; left: 50%; bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  z-index: 40; width: min(calc(100% - 24px), 560px);
  transform: translate(-50%, 130%); opacity: 0;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  /* Фон панели — переменной канона, а НЕ системным Canvas: при светлой
     системной теме Canvas белеет, и светлый текст на нём пропадает. */
  background: color-mix(in srgb, var(--brand-bg, #101116) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: transform .22s ease, opacity .22s ease;
}
.ed__bar.is-on { transform: translate(-50%, 0); opacity: 1; }
.ed__bar .ed__what { min-width: 0; }
.ed__bar b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed__bar span { font-size: 12px; color: color-mix(in srgb, currentColor 62%, transparent); }

@media (min-width: 768px) {
  .ed { padding: 6px 0 128px; }   /* боковые поля даёт полоса содержимого */
  .ed__tasks { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* ── кисть: закрасить лишнее ── */
.ed__brush { display: grid; gap: 9px; }
.ed__brushwrap { position: relative; width: fit-content; max-width: 100%; }
.ed__brushwrap img, .ed__brushwrap canvas { max-width: 100%; display: block; border-radius: 8px; }
.ed__brushwrap canvas { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }

/* Подсказка про галерею под результатом. */
.ed__hint { margin: 0; font-size: 13px; line-height: 1.4;
  color: color-mix(in srgb, currentColor 60%, transparent); }


/* ── ФАЙЛ В БАННЕРЕ ───────────────────────────────────────────────────
   Никакой коробки: кнопки лежат ПРЯМО НА БАННЕРЕ — той же сборкой, что
   переключатель «По описанию / По изображению» на «Создать». Мерка снята
   с него: обёртка без фона, рамки и отступов, flex, зазор 8; кнопка —
   таблетка 36 высотой, подложка 4% белого, рамка цветом сайта.
   Подписи «перетащите» и «до N МБ» убраны: бросать файл можно на ВЕСЬ
   баннер, это делает editor.js. */
.shell-banner__tools [data-slot="file"] {
  width: 100%;
  /* Обёртка ровно как у переключателя способа: flex и зазор 8, без фона,
     рамки и отступов — иначе «та же сборка» только на словах. */
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  --фц: var(--olive, var(--brand, currentColor));
}

.shell-banner__tools .ed__drop {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0; border: 0; background: none; min-height: 0; border-radius: 0;
}
.shell-banner__tools .ed__drop p,
.shell-banner__tools .ed__drop small { display: none; }
.shell-banner__tools .ed__dropbtns { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }

/* Кнопка — та же таблетка, что у переключателя способа. */
.shell-banner__tools .ed__btn {
  min-height: 36px; padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--фц);
  background: rgba(255, 255, 255, .04);
  color: inherit;
  font: 700 13px/1 Inter, system-ui, sans-serif;
  white-space: nowrap;
  transition: background .14s;
}
.shell-banner__tools .ed__btn:hover { background: color-mix(in srgb, var(--фц) 22%, transparent); }

/* Файл взят — тоже без коробки: превью, имя, «Другой» в строку. */
.shell-banner__tools .ed__chosen {
  display: flex; align-items: center; gap: 10px;
  padding: 0; border: 0; background: none;
}
.shell-banner__tools .ed__chosen img,
.shell-banner__tools .ed__chosen video {
  width: 40px; height: 40px; object-fit: cover; border-radius: 10px; flex: 0 0 40px;
}
.shell-banner__tools .ed__chosen .ed__note { min-width: 0; display: flex; flex-direction: column; }
.shell-banner__tools .ed__chosen .ed__note b {
  font: 700 13px/1.2 Inter, system-ui, sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw;
}
.shell-banner__tools .ed__chosen .ed__note span {
  font: 500 11px/1.3 Inter, system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 52%, transparent);
}
.shell-banner__tools .ed__price,
.shell-banner__tools .ed__chosen > .ed__price { display: none; }

/* Пока грузится — строка без плашки. */
.shell-banner__tools .ed__wait {
  display: flex; align-items: center; gap: 9px;
  padding: 0; border: 0; background: none;
  font: 600 13px/1 Inter, system-ui, sans-serif;
}

/* Весь баннер подсвечивается, когда над ним тащат файл. */
.shell-banner.is-drop-over .shell-banner__frame {
  outline: 2px dashed color-mix(in srgb, var(--olive, var(--brand, currentColor)) 70%, transparent);
  outline-offset: -6px;
}

/* ТЕЛЕФОН: кнопки в столбик — «Взять из Фотоальбома» не влезает в половину. */
@media (max-width: 640px) {
  .shell-banner__tools .ed__dropbtns { width: 100%; display: grid;
    grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .shell-banner__tools .ed__btn { width: 100%; white-space: normal; min-height: 40px; }
  .shell-banner__tools .ed__chosen .ed__note b { max-width: 38vw; }
}


/* ── ПАКЕТ (11.08.2026) ──────────────────────────────────────────────
   Счёт и полоска хода: человек должен видеть, что идёт третий кадр из
   пяти, а не гадать, повис редактор или нет. */
.ed__paket-schet { margin: 0 0 8px; font: 700 14px/1.3 Inter, system-ui, sans-serif; }
.ed__paket-polosa {
  height: 4px; border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,.1); margin-bottom: 10px;
}
.ed__paket-polosa i {
  display: block; height: 100%; border-radius: 3px;
  background: var(--brand, #8d929c); transition: width .35s ease;
}

}