/* Форма добавления рецепта. Использует цвета темы. */

.gm-add{max-width:820px}

.gm-blok{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;margin-bottom:18px;box-shadow:var(--shadow);
}
.gm-zagolovok{margin:0 0 6px;font-size:19px}
.gm-poyasnenie{margin:0 0 16px;font-size:13.5px;color:var(--ink-3);line-height:1.5}

.gm-podpis{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 6px}
/* iPhone сам зумит страницу, если шрифт в поле меньше 16px. Держим ровно 16px.
   :where() не добавляет вес, поэтому .gm-pole и .gm-pole-bolshoe ниже
   по-прежнему задают своё. */
.gm-add :where(input[type="text"],input[type="number"],input[type="url"],input[type="search"],input[type="tel"],input[type="email"],input[type="password"],select,textarea){font-size:16px}
.gm-pole{
  width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;
  font:inherit;font-size:16px;outline:none;background:var(--surface);color:var(--ink);
}
.gm-pole:focus{border-color:var(--accent)}
.gm-pole-bolshoe{font-size:17px;font-weight:600;margin-bottom:16px}
.gm-pole-kolvo{max-width:130px}

.gm-ryad{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.gm-ryad > div{min-width:0}

/* ── переключатель «Рецепт / Заметка» ── */

.gm-blok-tip{padding:14px}
.gm-tip{display:flex;gap:6px;background:var(--warm);border:1px solid var(--line);border-radius:var(--radius-s);padding:5px}
.gm-tip-segment{position:relative;flex:1 1 0;display:flex;min-width:0;cursor:pointer}
.gm-tip-segment input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.gm-tip-nadpis{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:46px;padding:0 14px;border-radius:calc(var(--radius-s) - 3px);
  font-size:15px;font-weight:600;color:var(--ink-2);
  transition:background .15s,color .15s;
}
.gm-tip-segment input:checked + .gm-tip-nadpis,
.gm-tip-segment.gm-vybrannyy .gm-tip-nadpis{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.gm-tip-segment:hover .gm-tip-nadpis{color:var(--ink)}
.gm-tip-segment input:focus-visible + .gm-tip-nadpis{outline:2px solid var(--accent);outline-offset:2px}

/* Блоки, которые нужны только рецепту */
.gm-tolko-recept.gm-skryto{display:none !important}
.gm-tolko-zametka.gm-skryto{display:none !important}
/* Галочка «это вопрос» — крупная, под палец. */
.gm-galochka{display:flex;align-items:center;gap:11px;min-height:44px;cursor:pointer;font-size:15px}
.gm-galochka input{width:22px;height:22px;flex:none}

/* ── фотографии ── */

.gm-foto-zona{
  border:2px dashed var(--line);border-radius:var(--radius-s);padding:26px 18px;
  text-align:center;cursor:pointer;transition:border-color .15s,background .15s;
}
.gm-foto-zona:hover,.gm-foto-zona.gm-nad{border-color:var(--accent);background:var(--warm)}
.gm-foto-podskazka{font-size:14px;color:var(--ink-3)}

.gm-foto-spisok{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.gm-foto{
  position:relative;width:132px;border-radius:var(--radius-s);
  overflow:hidden;border:1px solid var(--line);background:var(--warm);
}
.gm-foto img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.gm-foto.gm-tashchim{opacity:.4}
/* Кнопка «Обложка» — во всю ширину плитки сверху.
   Номер переезжает под неё, чтобы не налезать. */
.gm-foto-oblozhka{
  position:absolute;left:0;right:0;top:0;height:32px;padding:0;border:0;
  background:rgba(0,0,0,.62);color:#fff;font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;
}
.gm-foto-oblozhka:hover{background:var(--accent);color:var(--on-accent)}
.gm-foto-oblozhka:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.gm-foto.gm-oblozhka-est{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gm-foto.gm-oblozhka-est .gm-foto-oblozhka{background:var(--accent);color:var(--on-accent)}
.gm-foto.gm-oblozhka-est .gm-foto-oblozhka::after{content:" ✓"}

/* Номер: сразу видно, какое фото станет главным. */
.gm-foto-nomer{
  position:absolute;top:38px;left:6px;min-width:23px;height:23px;padding:0 5px;
  border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
/* Кнопки под пальцем: 44px, работают и мышью, и с клавиатуры. */
.gm-foto-knopki{position:absolute;left:0;right:0;bottom:0;display:flex;height:44px}
.gm-foto-knopki button{
  flex:1 1 0;min-width:0;height:44px;padding:0;border:0;border-radius:0;cursor:pointer;
  background:rgba(0,0,0,.62);color:#fff;font-size:18px;line-height:1;
}
.gm-foto-knopki button:hover:not(:disabled){background:var(--accent)}
.gm-foto-knopki button:disabled{opacity:.3;cursor:default}
.gm-foto-knopki button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.gm-foto-ubrat{flex:0 0 50px}

.gm-foto-hod,.gm-video-hod{margin-top:14px;font-size:13.5px;color:var(--ink-2)}
.gm-foto-hod span{display:block;background:var(--warm);border-radius:6px;padding:5px 9px;font-weight:600}

/* ── ингредиенты ── */

.gm-stroka-ing{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.gm-stroka-ing .gm-pole:first-child{flex:1 1 auto;min-width:0}

.gm-ubrat-stroku{
  flex:none;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);color:var(--ink-3);font-size:18px;line-height:1;cursor:pointer;padding:0;
}
.gm-ubrat-stroku:hover{border-color:var(--accent);color:var(--accent)}

.gm-dobavit{
  margin-top:6px;height:38px;padding:0 16px;border:1px dashed var(--line);border-radius:999px;
  background:transparent;color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
}
.gm-dobavit:hover{border-color:var(--accent);color:var(--accent)}

/* ── шаги ── */

.gm-shag{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.gm-nomer{
  flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;margin-top:5px;
}
.gm-shag-telo{flex:1 1 auto;min-width:0}
.gm-shag-foto{margin-top:8px;display:flex;align-items:center;gap:12px}
.gm-dobavit-foto{
  height:32px;padding:0 13px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
}
.gm-dobavit-foto:hover{border-color:var(--accent);color:var(--accent)}
.gm-shag-foto img{width:64px;height:64px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}

/* ── видео ── */

.gm-video-zona{
  border:2px dashed var(--line);border-radius:var(--radius-s);padding:26px 18px;
  text-align:center;cursor:pointer;transition:border-color .15s,background .15s;
}
.gm-video-zona:hover,.gm-video-zona.gm-nad{border-color:var(--accent);background:var(--warm)}
.gm-video-podskazka{font-size:14px;color:var(--ink-3)}

.gm-hod-polosa{height:8px;background:var(--warm);border-radius:999px;overflow:hidden;margin-bottom:8px}
.gm-hod-polosa span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.gm-hod-tekst{font-size:13.5px;color:var(--ink-2)}

.gm-video-gotovo{
  margin-top:14px;padding:12px 15px;border-radius:var(--radius-s);
  background:var(--warm);font-size:14px;
}
.gm-video-gotovo.gm-preduprezhdenie{background:#3A1E24;color:#F5A9B8}
.gm-net-zvuka{display:block;margin-top:5px;font-weight:600}

/* ── отправка ── */

.gm-otpravka{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:24px 0 10px}
.gm-knopka{height:48px;padding:0 30px;font-size:16px}
.gm-otpravka-poyasnenie{font-size:13.5px;color:var(--ink-3)}

@media(max-width:760px){
  .gm-ryad{grid-template-columns:1fr}
  .gm-blok{padding:17px}
  .gm-foto{width:calc(50% - 6px)}
  .gm-stroka-ing{flex-wrap:wrap}
  .gm-pole-kolvo{max-width:none;flex:1 1 100%}
}

/* Выходы, когда в видео нет звука: фото из кадра, музыка, другое видео */
.gm-vybor{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.gm-knopka-vybor{
  height:34px;padding:0 14px;border-radius:999px;border:1px solid currentColor;
  background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
}
.gm-knopka-vybor:hover{background:rgba(255,255,255,.14)}
.gm-knopka-vybor:disabled{opacity:.55;cursor:default}
.gm-vybor-tekst{margin-top:10px;font-size:13px;font-weight:600}

/* Предупреждение над формой, если рецепт чужой */
.gm-preduprezhdenie-blok{
  padding:14px 18px;margin-bottom:18px;border-radius:var(--radius-s);
  background:#3A1E24;color:#F5A9B8;font-size:14px;
}
:root:not([data-theme="dark"]) .gm-preduprezhdenie-blok{
  background:#FDF0F3;color:#8E0428;border:1px solid #F3D5DC;
}

/* Отклик на нажатие в форме — как в теме. */
.gm-dobavit:active,.gm-ubrat-stroku:active,.gm-knopka:active,
.gm-foto-knopki button:active,.gm-tip-segment:active,.gm-dobavit-foto:active{
  transform:translateY(1px);filter:brightness(.94);
}

/* Сообщение об ошибке загрузки видео — заметное, но не кричащее. */
.gm-video-hod.gm-oshibka .gm-hod-tekst{background:rgba(193,5,55,.12);color:var(--accent);font-weight:600}
.gm-video-hod.gm-oshibka .gm-hod-polosa span{background:var(--accent)}

/* Ход обработки фото: понятный текст вместо системного окна. */
.gm-foto-hod .gm-hod-tekst{margin-top:8px;line-height:1.4}
.gm-foto-hod.gm-oshibka .gm-hod-tekst{
  background:rgba(193,5,55,.12);color:var(--accent);font-weight:600;
  border-radius:6px;padding:7px 10px;
}
.gm-foto-hod.gm-oshibka span{background:var(--accent)}