/* ВНИМАНИЕ: имена классов здесь не произвольные.
   Тема уже занимает .agree (на него повешен ГЛОБАЛЬНЫЙ обработчик, открывающий
   её собственную модалку с политикой — наш чекбокс из-за этого не работал),
   а также .panel, .h2 и .lead в своих файлах. Поэтому всё, что пересекается,
   носит префикс jvc-. Перед добавлением нового класса проверяйте, не занят ли
   он темой: селекторы темы глобальные и делегированные. */

/* ============================================================================
   «Конкурс проектов» (/konkurs-proektov) — бенто по образцу «О компании».
   Подключается только на этой странице (addStyle в jv_contest.php).

   Токены берём из jv-variables.css, кнопки — компонент .jw-btn (jw-buttons.css),
   раскладка — те же приёмы, что в jv_about.css: сетка 12 колонок с gap 14,
   плитки радиусом 24 и панели 30, модификаторы --dark/--accent, eyebrow.

   Исходник вёрстки и согласованный вид: docs/mockups/jv-contest-stand.html
   ========================================================================= */

/* серая подложка страницы: бенто читается только на не-белом фоне.
   Приём и отрицательные поля — как в jv_about.css (#258). */
.wrapper-middle{background:var(--jv-bg-surface);margin-top:-20px;padding-top:20px}
@media(max-width:1890px){
  .wrapper-middle{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
}
@media(max-width:540px){
  .wrapper-middle{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
}
#jv-contest{color:var(--jv-text-secondary);font-size:15px;line-height:1.5;overflow-x:clip;
  /* геометрия бенто. Имена и значения — из jv_about.css, чтобы две страницы
     на одной системе не разъезжались при правке. */
  --bx-gap:14px; --bx-r-panel:30px; --bx-r-tile:24px; --bx-r-btn:15px;
  --bx-ease:cubic-bezier(.22,1,.36,1)}
#jv-contest *{min-width:0}

/* ======================= каркас бенто ======================= */
.cnx{max-width:1840px;margin:0 auto;padding:20px 20px 44px;
  display:flex;flex-direction:column;gap:var(--bx-gap)}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:minmax(0,auto);gap:var(--bx-gap)}
.bento,.bento *{min-width:0}
.bento [id],.sechead[id]{scroll-margin-top:var(--jvc-sticky-top,150px)}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}
.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}

.tile{background:var(--jv-bg-white);border-radius:var(--bx-r-tile);padding:22px 24px;
  display:flex;flex-direction:column;gap:10px}
/* плитки в ряду равны по высоте, а текста в них разное количество — без этого
   содержимое липнет к верху и внизу зияет пустота разной величины. Надзаголовок
   остаётся вверху, всё остальное уезжает к низу: у соседних плиток совпадают и
   верхняя, и нижняя линии текста. */
.tile>.eyebrow:first-child{margin-bottom:auto}
.tile--dark{background:var(--jv-text-secondary);color:#fff}
.tile--accent{background:var(--jv-primary);color:#fff}
.jvc-panel{background:var(--jv-bg-white);border-radius:var(--bx-r-panel);padding:30px 34px;
  display:flex;flex-direction:column;gap:16px}

.eyebrow{font-size:12px;font-weight:500;line-height:1;letter-spacing:.12em;
  text-transform:uppercase;color:var(--jv-text-muted)}
.eyebrow--on-dark{color:rgba(255,255,255,.6)}
.eyebrow--on-accent{color:rgba(255,255,255,.75)}
.eyebrow--accent{color:var(--jv-primary);letter-spacing:.14em}
.jvc-h2{margin:0;font-size:34px;font-weight:700;line-height:1.05;letter-spacing:-.025em;
  color:var(--jv-text-primary)}
.sechead{padding:14px 2px 2px}
.sechead p{margin:6px 0 0;color:var(--jv-text-muted);font-size:14px}

/* Кнопки — компонент темы (.jw-btn, jw-buttons.css). База и --primary/--secondary
   здесь НЕ переопределяются: это глобальный компонент, его правки должны идти
   в брендбуковый файл. Локально только геометрия бенто через переменные
   компонента и два архетипа для оранжевого героя, которых в теме нет. */
#jv-contest .jw-btn{--jw-btn-radius:var(--bx-r-btn);padding:14px 24px;font-size:15px;
  font-weight:500}
#jv-contest .jw-btn--lg{padding:18px 28px;font-size:16px}

/* белая кнопка на бренд-оранжевом фоне: --primary на нём нечитаем */
#jv-contest .jw-btn--light{background:var(--jv-bg-white);color:var(--jv-text-secondary);
  border-color:transparent}
#jv-contest .jw-btn--light:hover{color:var(--jv-text-secondary);transform:translateY(-2px)}
/* прозрачная с белой рамкой — вторая кнопка героя */
#jv-contest .jw-btn--outline{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
#jv-contest .jw-btn--outline:hover{background:rgba(255,255,255,.14);color:#fff}

/* ======================= 1. Лист: герой + условия (#839, вариант B) =======================
   Одна карточка на две колонки: слева бренд-оранжевая часть с названием и
   кнопками, справа условия списком «параметр — значение». Заменила герой,
   плитку срока и отдельную панель условий — те читались как разные объекты. */
.jvc-sheet{background:var(--jv-bg-white);border-radius:var(--bx-r-panel);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.jvc-sheet__left{background:var(--jv-primary);color:#fff;padding:44px 48px;
  display:flex;flex-direction:column;gap:24px}
.jvc-sheet__left h1{margin:0;font-size:clamp(34px,3.8vw,60px);font-weight:700;line-height:.98;
  letter-spacing:-.03em;color:#fff;text-wrap:balance}
.jvc-sheet__lead{margin:0;max-width:600px;font-size:clamp(15px,1.2vw,17px);line-height:1.5;
  color:rgba(255,255,255,.92)}
.jvc-sheet__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}
.jvc-sheet__right{margin:0;padding:30px 40px;display:flex;flex-direction:column;justify-content:center}
.jvc-sheet__right[id]{scroll-margin-top:var(--jvc-sticky-top,150px)}
.jvc-sheet__row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:18px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--jv-border)}
.jvc-sheet__row:first-child{border-top:0;padding-top:6px}
.jvc-sheet__row dt{margin:0}
.jvc-sheet__v{margin:0;font-size:16px;font-weight:600;line-height:1.4;color:var(--jv-text-primary)}
.jvc-sheet__v--big{font-size:clamp(26px,2.4vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1}
.jvc-sheet__v em{font-style:normal;color:var(--jv-primary)}
.jvc-sheet__n{display:block;margin-top:4px;font-size:13.5px;font-weight:400;color:var(--jv-text-muted)}
.jvc-sheet__v .geo{margin-top:0}
@media(max-width:1100px){
  .jvc-sheet{grid-template-columns:minmax(0,1fr)}
  .jvc-sheet__left{padding:34px}
  .jvc-sheet__right{padding:22px 34px 28px}
}
@media(max-width:620px){
  .jvc-sheet{border-radius:var(--bx-r-tile)}
  .jvc-sheet__left{padding:28px 22px}
  .jvc-sheet__right{padding:14px 22px 22px}
  .jvc-sheet__row{grid-template-columns:minmax(0,1fr);gap:6px}
  .jvc-sheet__acts .jw-btn{flex:1 1 100%}
}

/* география пилюлями — теперь на светлом, а не на тёмной плитке */
.geo{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.geo span{font-size:12.5px;border:1px solid var(--jv-border);border-radius:999px;
  padding:4px 11px;color:var(--jv-text-secondary)}

/* ======================= 3. Сроки ======================= */
.phase{min-height:140px;gap:14px}
.phase__val{font-size:clamp(19px,1.8vw,24px);font-weight:700;line-height:1.15;
  letter-spacing:-.02em;color:var(--jv-text-primary)}
.phase--done .phase__val,.phase--now .phase__val{color:#fff}
.phase__sub{margin:0;font-size:14px;line-height:1.4;color:var(--jv-text-muted)}
.phase--now .phase__sub{color:rgba(255,255,255,.82)}
.phase--done .phase__sub{color:rgba(255,255,255,.62)}
.phase__mark{display:inline-flex;align-items:center;gap:8px}
.dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* ================= ФОРМА (структура не менялась) ================= */
.form-shell{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--bx-gap);
  align-items:start}
fieldset{border:0;border-radius:var(--bx-r-tile);padding:24px 26px;margin:0 0 var(--bx-gap);
  background:var(--jv-bg-white);min-width:0}
/* <legend> по спецификации рисуется в области ГРАНИЦЫ fieldset, а не внутри его
   padding-бокса: кружок с номером вылезал за левый край плитки, а заголовок садился
   верхом на скругление. float возвращает legend в обычный поток — тогда он слушается
   padding как любой блок. Ниже ::after гасит этот float. */
/* Разделитель задаём СВОЙ: у темы legend имеет border-bottom вплотную к тексту,
   и кружок с номером (26px, он выше строки) упирался в линию. */
legend{float:left;width:100%;font-weight:700;font-size:18px;letter-spacing:-.02em;
  padding:0 0 14px;margin:0 0 18px;color:var(--jv-text-primary);
  border:0;border-bottom:1px solid var(--jv-border);
  display:flex;align-items:center;gap:10px}
/* float вынимает legend из потока, и следующий блок обтекает его с нулевой
   доступной шириной — содержимое формы вылетало за экран. clear возвращает
   поток сразу после заголовка; ::after гасит float на выходе из fieldset. */
legend + *{clear:both}
fieldset::after{content:'';display:table;clear:both}
legend i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--jv-bg-surface);
  color:var(--jv-text-muted);font-size:12px;font-weight:700;display:inline-flex;
  align-items:center;justify-content:center}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:620px){.grid2{grid-template-columns:minmax(0,1fr)}}
.f{display:flex;flex-direction:column;gap:6px}
.f--wide{grid-column:1/-1}
label{font-size:13px;font-weight:600;color:var(--jv-text-secondary)}
label .req{color:var(--jv-primary)}
label .opt{color:var(--jv-text-muted);font-weight:400}
input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{
  font:400 14px/1.4 var(--jv-font-family);color:var(--jv-text-primary);
  border:1px solid var(--jv-border);border-radius:var(--jv-radius-md);padding:12px 14px;
  background:#fff;width:100%;transition:border-color .15s}
/* Двойное кольцо: своя рамка фокуса плюс глобальный :focus-visible из
   custom.css (outline 2px оранжевым) — вокруг заполненного поля получалось
   зелёное кольцо и оранжевое поверх него. Outline темы — это доступность,
   убирать его нельзя, поэтому кладём его ВПЛОТНУЮ на границу поля
   (outline-offset:-1px): видно одно кольцо, клавиатурный фокус на месте.
   Свой border при фокусе не перекрашиваем — цвет даёт outline. */
#jv-contest input:focus,
#jv-contest select:focus,
#jv-contest textarea:focus{outline:none}
#jv-contest input:focus-visible,
#jv-contest select:focus-visible,
#jv-contest textarea:focus-visible{
  outline:2px solid var(--jv-primary);
  outline-offset:-1px}
/* Зелёная рамка «поле засчитано» проигрывала в каскаде: у правила выше border
   задан шорткатом, и цвет из .ok до поля не доходил (фон доходил). Поднимаем
   специфичность до страничного контейнера — файл всё равно грузится только
   на /konkurs-proektov. */
#jv-contest input.ok,
#jv-contest select.ok,
#jv-contest textarea.ok{border-color:#3aa655;background:#fbfffc}
/* заметный отклик на заполнение: рамка вспыхивает и гаснет */
@keyframes jvcFilled{
  0%{box-shadow:0 0 0 0 rgba(58,166,85,.45)}
  100%{box-shadow:0 0 0 7px rgba(58,166,85,0)}
}
/* Вспышка только когда поле УЖЕ не в фокусе: иначе зелёный ореол лезет
   из-под оранжевой рамки фокуса и читается как ошибка вёрстки. */
#jv-contest input.just-filled:not(:focus),
#jv-contest select.just-filled:not(:focus),
#jv-contest textarea.just-filled:not(:focus){animation:jvcFilled .6s ease-out}
@media(prefers-reduced-motion:reduce){
  input.just-filled,select.just-filled,textarea.just-filled{animation:none}
}
textarea{resize:vertical;min-height:78px}
.hint{font-size:12px;color:var(--jv-text-muted)}
.hint--bonus{color:var(--jv-text-muted);font-weight:400}

/* таблица оборудования */
.eq{width:100%;border-collapse:collapse;margin-bottom:12px}
.eq th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--jv-text-muted);padding:0 8px 8px 0;font-weight:600}
.eq td{padding:0 8px 8px 0;vertical-align:top}
.eq td:last-child,.eq th:last-child{padding-right:0;width:40px}
.eq-del{width:40px;height:40px;border:1px solid var(--jv-border);background:#fff;
  border-radius:var(--jv-radius-md);cursor:pointer;color:var(--jv-text-muted);font-size:17px}
.eq-del:hover{border-color:var(--jv-primary);color:var(--jv-primary)}
/* overflow-x резал рамку фокуса у крайних полей — отбиваем внутренним полем,
   чтобы обводке было куда лечь */
.eq-wrap{overflow-x:auto;margin:0 -3px;padding:3px}

/* загрузки — вложенные плитки на серой заливке */
/* ---- загрузки: зоны перетаскивания (вариант 3 стенда jv-contest-docs.html) ----
   Вся плитка — это <label>, поэтому клик в любом месте открывает выбор файла,
   а файл можно ещё и бросить мышью. Признак обязательности объяснён легендой
   под блоком, а не повторён в каждой зоне. */
.ups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.up{border-radius:var(--jv-radius-lg);border:1.5px solid var(--jv-border);
  background:var(--jv-bg-surface);transition:.18s var(--bx-ease)}
.up.bonus{border-style:dashed;background:#fcfcfd}
.up__drop{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:8px;min-height:176px;padding:20px 18px;cursor:pointer}
.up__drop input[type=file]{display:none}
.up__i{width:34px;height:34px;color:var(--jv-text-muted);transition:color .18s}
.up__i svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.up__t{font-size:14px;font-weight:600;line-height:1.25;color:var(--jv-text-primary)}
.up__d{font-size:12px;line-height:1.35;color:var(--jv-text-muted)}
.up__pts{font-size:11.5px;font-weight:700;color:var(--jv-primary);white-space:nowrap}

.up:hover{border-color:var(--jv-primary)}
.up:hover .up__i{color:var(--jv-primary)}
/* файл тащат над зоной */
.up.dragover{border-color:var(--jv-primary);background:#fff3ee}
.up.dragover .up__i{color:var(--jv-primary);transform:scale(1.12)}
/* что-то уже приложено */
.up.filled{border-style:solid;border-color:#3aa655;background:#f6fbf7}
.up.filled .up__i{color:#3aa655}

.up__list{list-style:none;margin:0;padding:0 14px 14px;display:flex;flex-direction:column;gap:6px}
.up__list:empty{padding:0}
.up__list li{display:flex;align-items:center;gap:10px;font-size:13px;background:#fff;
  border:1px solid var(--jv-border);border-radius:var(--jv-radius-sm);padding:9px 11px}
.up__list .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up__list .sz{color:var(--jv-text-muted);font-size:12px}
.up__list .rm{border:none;background:none;color:var(--jv-text-muted);cursor:pointer;
  font-size:16px;padding:0 2px}
.up__list .rm:hover{color:var(--jv-primary)}
.up__list li.pending{opacity:.75;flex-wrap:wrap}
.up__list li.pending .bar{flex:0 0 100%;margin-top:6px}
.bar{height:3px;background:var(--jv-bg-surface);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--jv-primary);transition:width .25s}
.up__err{margin:0;padding:0 14px 12px;font-size:12.5px;font-weight:600;color:#c0392b}

/* легенда обязательности — одна на весь блок */
.ups__legend{margin:16px 0 0;font-size:12.5px;color:var(--jv-text-muted)}
.ups__legend .sep{margin:0 8px}
.solid,.dash{display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:7px;vertical-align:-1px}
.solid{background:var(--jv-primary)}
.dash{border:1.5px dashed var(--jv-text-muted)}

.eq-file{margin-top:16px;padding-top:16px;border-top:1px solid var(--jv-border)}
.eq-file .up__drop{min-height:140px}

/* панель баллов — тёмная плитка бенто */
/* Липкая шапка сайта перекрывала верх панели: top отсчитывается от окна, а не
   от контента. Высота шапки + плашка «Тестируем новую версию» ≈ 150px, поэтому
   держим запас переменной — её же используют якоря (scroll-margin-top). */
/* Своей прокрутки у панели нет: она обрезала содержимое сверху и снизу, а
   после снятия подсказки панель и так помещается в экран. */
.score{position:sticky;top:var(--jvc-sticky-top,150px);
  background:var(--jv-text-secondary);color:#fff;
  border-radius:var(--bx-r-tile);padding:28px 26px}
.score__top{margin:12px 0 2px}
.score__num{font-size:46px;font-weight:700;line-height:1;
  letter-spacing:-.03em;display:flex;align-items:baseline;gap:6px}
.score__max{margin-left:6px;font-size:15px;color:rgba(255,255,255,.45);font-weight:400;letter-spacing:0}
.score__stage{margin-top:7px;font-size:12.5px;font-weight:600;color:var(--jv-primary);
  line-height:1.3}

.score__bar{height:6px;background:rgba(255,255,255,.14);border-radius:3px;overflow:hidden;
  margin:18px 0 16px}
.score__bar i{display:block;height:100%;width:0;background:var(--jv-primary);
  transition:width .35s var(--bx-ease)}
.score__rows{list-style:none;margin:0;padding:0;font-size:12.5px;
  display:flex;flex-direction:column;gap:8px}
.score__rows li{display:flex;justify-content:space-between;gap:10px;color:rgba(255,255,255,.5)}
.score__rows li.on{color:#fff}
.score__rows li.on b{color:var(--jv-primary)}
.pop{position:fixed;z-index:50;pointer-events:none;font-weight:700;font-size:14px;
  color:var(--jv-primary);animation:pop 1s ease-out forwards}
@keyframes pop{0%{opacity:0;transform:translateY(0) scale(.8)}
  20%{opacity:1;transform:translateY(-6px) scale(1)}
  100%{opacity:0;transform:translateY(-34px) scale(1)}}

/* Сцена вместо иконки: объект, на котором зажигаются светильники по мере
   заполнения анкеты. Канон иллюстраций проекта (.claude/skills/jazzway-illustrations):
   изометрия, линии #3D3D3D, серый рамп, оранжевый — ТОЛЬКО свет.
   Поэтому сцена сидит на светлой плитке: на тёмной панели линии канона не видны. */
.score__scene{background:#fff;border-radius:var(--jv-radius-lg);padding:10px 12px;
  margin:14px 0 2px;overflow:hidden}
.score__scene svg{display:block;width:100%;height:auto}
.sc-floor{fill:#fff;stroke:#3D3D3D;stroke-width:4;stroke-linejoin:round}
.sc-wall{fill:#C9C9C9;stroke:#3D3D3D;stroke-width:4;stroke-linejoin:round}
.sc-wall--r{fill:#A8A8A8}
.sc-line{stroke:#3D3D3D;stroke-width:4;stroke-linecap:round;fill:none}
.sc-fix polygon{fill:#C9C9C9;stroke:#3D3D3D;stroke-width:4;stroke-linejoin:round}
.sc-fix polyline{fill:none;stroke:#3D3D3D;stroke-width:4;stroke-linejoin:round}
.sc-fix.on polygon{fill:#E94E1B}
.sc-box polygon{fill:#C9C9C9;stroke:#3D3D3D;stroke-width:4;stroke-linejoin:round}
.sc-box polygon:nth-child(2){fill:#8A8A8A}
.sc-box polygon:nth-child(3){fill:#A8A8A8}
.sc-box--far polygon{fill:#C9C9C9}

/* свет — плоская заливка акцентом, без градиентов */
.sc-beam{fill:#E94E1B;opacity:0;transition:opacity .5s var(--bx-ease)}
.sc-pool{fill:#E94E1B;opacity:0;transition:opacity .5s var(--bx-ease)}
.sc-beam.on{opacity:.18}
.sc-pool.on{opacity:.34}
.sc-fix polygon{transition:fill .4s var(--bx-ease)}
.score__scene.bump{animation:bump .5s var(--bx-ease)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.03)}100%{transform:scale(1)}}
/* Сборка комнаты по мере заполнения анкеты: элемент с data-build скрыт, пока
   JS не поставит .built. Стены «вырастают» от пола, коробки и светильники
   опускаются на место. transform-box — чтобы origin считался от самой фигуры,
   а не от всего холста SVG. */
.sc-ghost{fill:none;stroke:#D9D9D9;stroke-width:4;stroke-dasharray:16 14}
#jvc-scene [data-build]{opacity:0;transform-box:fill-box;
  transition:opacity .45s var(--bx-ease),transform .6s var(--bx-ease)}
#jvc-scene .sc-floor[data-build]{transform-origin:50% 50%;transform:scale(.7)}
#jvc-scene .sc-wall[data-build]{transform-origin:50% 100%;transform:scaleY(0)}
#jvc-scene .sc-box[data-build]{transform:translateY(-70px)}
#jvc-scene .sc-fix[data-build]{transform:translateY(-90px)}
#jvc-scene [data-build].built{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  #jvc-scene [data-build]{transition:none}
  .sc-beam,.sc-pool,.sc-fix polygon{transition:none}
  .score__scene.bump{animation:none}
}

.submit-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.jvc-agree{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--jv-text-secondary);
  margin-bottom:18px}
.jvc-agree input{margin-top:2px;width:16px;height:16px;accent-color:var(--jv-primary);flex:0 0 auto}
.jvc-agree a{color:var(--jv-primary)}
.hp{position:absolute;left:-9999px}
.legal{margin:0;font-size:13px;line-height:1.5;color:var(--jv-text-muted)}

/* ======================= адаптив (брейкпоинты бенто) ======================= */
@media(max-width:1280px){
  /* шесть колонок: плитки встают по две в ряд, а не растягиваются на всю ширину
     полосами — из-за этого они читались «длинными» */
  .bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .bento>*{grid-column:span 3}
  .bento>.jvc-panel,.bento>.s12{grid-column:span 6}
  .bento>.phase{grid-column:span 2}
}
@media(max-width:1000px){
  /* minmax(0,1fr), а не 1fr: 1fr = minmax(auto,1fr), и таблица оборудования
     распирала колонку по min-content — форма вылезала за экран на 224px */
  .form-shell{grid-template-columns:minmax(0,1fr)}
  .bento>.phase{grid-column:span 3}
  .score{position:fixed;left:0;right:0;bottom:0;top:auto;
    border-radius:0;padding:12px 16px;
    display:flex;align-items:center;gap:14px;z-index:40}
  .score .eyebrow{display:none} .score__bar{flex:1;margin:0} .score__rows{display:none}
  .score__stage,.score__scene{display:none}
  .score__top{margin:0} .score__num{font-size:26px}
  body{padding-bottom:64px}
}
@media(max-width:760px){
  .cnx{gap:12px;padding:12px 16px 40px}
  .ups{grid-template-columns:minmax(0,1fr)}
  .up__drop{min-height:150px}
  /* две колонки, а не одна: плитки условий и сроков идут парами.
     Широкие блоки (герой, дедлайн, панель, s12) занимают обе колонки —
     их селекторы перечислены явно, иначе span 6 из брейкпоинта 1280 остаётся
     в силе по специфичности и выносит содержимое за сетку (переполнение 224px). */
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .bento>*,.bento>.phase{grid-column:span 1}
  .bento>.jvc-panel,.bento>.s12{grid-column:1 / -1}
  .jvc-panel{padding:26px 22px;border-radius:22px}
  .tile{padding:22px 20px}
  .jvc-h2{font-size:26px}
  fieldset{padding:22px 20px}
  .phase{min-height:0}
  .sechead{padding:14px 2px 2px}
}

/* ---- загрузка: ошибка раздела и плитка «летит на сервер» ---- */
.up__err{margin:10px 0 0;font-size:12.5px;font-weight:600;color:#c0392b}
.up__list li.pending{opacity:.75}
.up__list li.pending .bar{flex:0 0 100%;margin-top:6px}

/* ---- экран после отправки ---- */
.jvc-done{grid-column:1/-1;background:var(--jv-bg-white);border-radius:var(--bx-r-tile);
  padding:48px 40px;text-align:center}
.jvc-done__mark{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;
  background:var(--jv-primary);color:#fff;font-size:26px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.jvc-done h3{margin:0 0 10px;font-size:24px;font-weight:700;letter-spacing:-.02em;
  color:var(--jv-text-primary)}
.jvc-done p{margin:0 auto;max-width:520px;color:var(--jv-text-muted);font-size:15px}

/* ---- перечень оборудования файлом ---- */
/* строка «кнопка + пояснение»: на ПК пояснение справа, на узких — под кнопкой */
.eq-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.eq-actions .hint{flex:1 1 280px;margin:0}

.eq-file{margin-top:14px;padding-top:14px;border-top:1px solid var(--jv-border)}
.eq-file .up{margin:0}

/* ---- номинации: Гран-при плашкой, остальные ровной сеткой ---- */
.nom-grand{background:var(--jv-primary);color:#fff;border-radius:var(--bx-r-tile);
  padding:26px 30px;margin-bottom:var(--bx-gap);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.nom-grand::after{content:'';position:absolute;right:-70px;top:-70px;width:240px;height:240px;
  border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.nom-grand > *{position:relative;z-index:1}
.nom-grand__t{font-size:clamp(24px,2.6vw,30px);font-weight:700;letter-spacing:-.03em;
  line-height:1;margin-top:10px}
.nom-grand__sub{margin:0;font-size:14px;color:rgba(255,255,255,.85);max-width:420px}
.nom{justify-content:center;min-height:92px}
.nom__name{font-size:15px;font-weight:600;line-height:1.25;color:var(--jv-text-primary)}
/* восемь плиток по четыре в ряд; на средних — по три, на узких — по две */
@media(max-width:1280px){.bento>.nom{grid-column:span 2}}
@media(max-width:760px){.bento>.nom{grid-column:span 1}}