/* DKA GROUP · лендинг · B14 (30.10.2026, владелец): «Upload your project — get a quote» компактнее и с мягким движением.
   Компьютер и планшет: карточка 24 / промежутки 12, зона файла 128 (была 152) и сжатие зоны в строку 52 по высоте
   (а не строка в пустом поле 152), поля 44 (были 48), кнопка 44. Телефон — свои размеры остаются (m-apple-b2.css),
   общие здесь только полоса прогресса и появление элементов. Логика — app/patch-upload.js. */
:root{--b14-ease:cubic-bezier(.22,1,.36,1)}

/* — общее (телефон и компьютер) — */
#upload .l-up{transition:height 360ms var(--b14-ease),min-height 360ms var(--b14-ease),background-color 200ms var(--b14-ease),box-shadow 200ms var(--b14-ease),border-color 200ms var(--b14-ease)}
/* строка файла: плитка, имя, размер и крестик появляются по очереди, сдвиг 4 px */
#upload .l-up--done>:is(.l-up__tile,.l-up__file,.l-up__meta,.l-up__x){animation:b14-in 360ms var(--b14-ease) both}
#upload .l-up--done>.l-up__file{animation-delay:40ms}
#upload .l-up--done>.l-up__meta{animation-delay:80ms}
#upload .l-up--done>.l-up__x{animation-delay:120ms}
#upload .l-up__meta{transition:color 200ms var(--b14-ease)}
#upload .b14-sent .l-up__meta{color:var(--text-success,#1F8A4C)}
/* полоса прогресса по низу строки: проверка файла — плавно за 0,72 с (CSS), отправка — по настоящему ходу (--b14-up) */
#upload .b14-bar{position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;overflow:hidden;pointer-events:none;
  background:rgba(91,63,214,.10);opacity:0;transition:opacity 280ms var(--b14-ease) 120ms}
#upload .b14-bar>i{display:block;height:100%;border-radius:inherit;transform-origin:0 50%;transform:scaleX(var(--b14-up,0));
  background:linear-gradient(90deg,var(--brand-500,#6E4FF0),var(--brand-300,#A892FF));transition:transform 260ms var(--b14-ease)}
#upload :is(.b14-prep,.b14-send) .b14-bar{opacity:1;transition-delay:0ms}
#upload .b14-prep .b14-bar>i{animation:b14-fill 720ms cubic-bezier(.3,.7,.2,1) both}
/* «File uploaded», сообщения и итог отправки — мягкое появление */
#upload .l-up__ok,#upload .up-sent,#upload .up-card>.dka-note,#upload .up-card .dka-field__hint{animation:b14-in 320ms var(--b14-ease) both}
#upload .l-up__ok{animation-delay:120ms}
#upload .up-sent{animation-delay:60ms}
#upload .up-card .dka-btn{transition:background-color 220ms var(--b14-ease),border-color 220ms var(--b14-ease),color 220ms var(--b14-ease),box-shadow 220ms var(--b14-ease),transform 160ms var(--b14-ease)}
#upload .up-card .dka-btn:active:not(:disabled){transform:scale(.985)}
#upload .l-up--err .l-up__panel{animation:b14-in 280ms var(--b14-ease) both}

/* — компьютер и планшет — */
:root:not([data-layout=phone]) #upload .up-card{padding:24px;gap:12px}
:root:not([data-layout=phone]) #upload .l-up{height:128px}
:root:not([data-layout=phone]) #upload .l-up--done{height:52px;padding:0 8px 0 12px;border-radius:12px;border:1px solid rgba(91,63,214,.22);
  background:#fff;box-shadow:0 1px 2px rgba(16,12,30,.04)}
:root:not([data-layout=phone]) #upload .l-up--err{height:auto;min-height:0;padding:8px}
/* рамка фокуса — только с клавиатуры (после щелчка мышью вокруг строки файла не остаётся фиолетовой рамки) */
:root:not([data-layout=phone]) #upload .l-up:focus-within{outline:0}
:root:not([data-layout=phone]) #upload .l-up:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px}
:root:not([data-layout=phone]) #upload .l-up__ok{display:flex;align-items:center;gap:6px;margin:-2px 0 0;font-size:13px;line-height:18px;font-weight:500;color:var(--text-success,#1F8A4C)}
:root:not([data-layout=phone]) #upload .l-up__ok::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
:root:not([data-layout=phone]) #upload .up-fields{gap:12px}
:root:not([data-layout=phone]) #upload .up-card .dka-field{gap:4px}
:root:not([data-layout=phone]) #upload .up-card .dka-field__label .dka-eyebrow{font-size:11px;line-height:16px;letter-spacing:.07em}
:root:not([data-layout=phone]) #upload .up-card .dka-field__box{height:44px;border-radius:12px;background:#FBFAFE;border-color:rgba(19,19,21,.12);
  transition:border-color 180ms var(--b14-ease),box-shadow 240ms var(--b14-ease),background-color 180ms var(--b14-ease)}
:root:not([data-layout=phone]) #upload .up-card .dka-field__box:hover{border-color:rgba(19,19,21,.24)}
:root:not([data-layout=phone]) #upload .up-card .dka-field__box:focus-within{background:#fff;border-color:var(--brand-500,#6E4FF0);outline:0;box-shadow:0 0 0 4px rgba(110,79,240,.14)}
:root:not([data-layout=phone]) #upload .up-card .dka-field--error .dka-field__box{border-color:rgba(196,48,43,.55);background:#FFFBFA}
:root:not([data-layout=phone]) #upload .up-card .dka-field--error .dka-field__box:focus-within{border-color:var(--danger,#C4302B);box-shadow:0 0 0 4px rgba(196,48,43,.12)}
:root:not([data-layout=phone]) #upload .up-card .dka-btn{height:44px;border-radius:12px;margin-top:4px}
:root:not([data-layout=phone]) #upload .up-sent{margin-top:-2px}

@keyframes b14-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes b14-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  #upload .l-up,#upload .b14-bar,#upload .b14-bar>i,#upload .up-card .dka-btn,#upload .up-card .dka-field__box{transition:none!important}
  #upload :is(.l-up--done>*,.l-up__ok,.up-sent,.up-card>.dka-note,.dka-field__hint,.l-up__panel,.b14-bar>i){animation:none!important}
}