/* Урок Просто — страница «Сборка документа» (/app/jobs/:id) в стиле v2 «Строка запроса» (up-job.css), 05.11 ночь.
   Корень — .up.up-doc.up-job: шапка, чипы, липкая панель и сцена листа — из up-doc.css и up-doc-sheets.css как есть.
   Свои части (кандидаты в ДС — «блок прогресса сборки» и «лист-заготовка»):
   - up-jb-card — карточка прогресса поверх листа: содержимое принятого окна сборки (forms_common.progress_modal), полоса —
     тот же градиент и блик, что у окна в ките (up-kit.css, «окно сборки»), но не диалог: селектор кита по role="dialog" сюда
     не попадает, поэтому правило повторено классом up-jb-fill;
   - up-jb-pill — статус «Готовится» в панели вместо «Скачать» (как плашка статуса на сайте), вид — как процент документа
     в работе на «Моих документах» (up-docs-rec-busy), высота — как у кнопок панели (44);
   - up-jb-paper / up-jb-sheet — лист-заготовка: бумага up-paper (A4 альбомный, книжный или слайд 16:9), бруски в «пикселях
     листа» (--k), три части по шагам: done — ровные, now — с бликом, wait — бледные, off — лист после ошибки. */

/* ---------- сцена: карточка и лист в одной ячейке, карточка — поверх листа сверху ---------- */
.up-jb-box { display: grid; grid-template-columns: minmax(0, 1fr); }
.up-jb-box > .up-jb-card, .up-jb-box > .up-paper { grid-area: 1 / 1; }
/* п. 7 (06.11, «сразу открывать»): в конце живого хода на месте заготовки — листы документа, как на «Готовом документе» */
.up-jb-box > .up-ds-stack { grid-area: 1 / 1; }
.up-job .up-doc-stage .up-jb-paper.is-a4 { aspect-ratio: 210 / 297; }
.up-job .up-doc-stage .up-jb-paper.is-a4.is-land { aspect-ratio: 297 / 210; }
.up-jb-paper.is-slide { aspect-ratio: 16 / 9; container-type: inline-size; }

/* ---------- карточка прогресса ---------- */
.up-jb-card { position: relative; z-index: 2; align-self: start; justify-self: center; width: min(440px, calc(100% - 48px)); margin-top: 64px; display: grid; gap: 20px;
  padding: 28px; border-radius: 24px; background: var(--surface); border: 1px solid var(--up-card-line);
  box-shadow: 0 1px 2px rgba(31, 27, 58, .06), 0 32px 72px -26px rgba(60, 40, 120, .5);
  transition: opacity .3s var(--ease-out), transform .55s var(--spring-soft); }
@starting-style { .up-job .up-jb-card { opacity: 0; transform: translateY(16px) scale(.98); } }
.up[data-theme="dark"] .up-jb-card { box-shadow: 0 32px 72px -22px rgba(0, 0, 0, .8); }
.up-jb-box.is-sl > .up-jb-card { margin-top: 36px; }
.up-jb-head { display: grid; gap: 8px; justify-items: center; text-align: center; }
.up-jb-head.is-center { gap: 8px; animation: up-dialog-in .32s var(--ease-apple) both; }
.up-jb-h { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 28px; color: var(--ink); text-wrap: balance; }
.up-jb-sub { margin: 0; max-width: 360px; font-size: 14px; line-height: 20px; color: var(--text-2); text-wrap: pretty; }
.up-jb-badge { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 22px; }
.up-jb-badge.is-ok { background: var(--success-tint); color: var(--success); }
.up-jb-badge.is-err { background: var(--error-tint); color: var(--error); }

/* полоса: дорожка --ws-bar, заливка — градиент окна сборки с бликом */
.up-jb-prog { display: grid; gap: 6px; }
.up-jb-track { height: 6px; border-radius: 3px; background: var(--ws-bar); overflow: hidden; }
.up-jb-fill { position: relative; height: 100%; border-radius: 3px; overflow: hidden; background: linear-gradient(90deg, #4b40b8, #7c68ee, #ff9f7a); transition: width .9s var(--ease-out); }
.up-jb-fill::after { content: ""; position: absolute; inset: 0; width: 50%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); animation: up-sheen 1.4s ease-in-out infinite; }
.up-jb-pct { justify-self: end; font-size: 12px; line-height: 16px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* шаги: сделан — галочка --success, идёт — круг загрузки акцентом и жирнее, впереди — точка и --text-2 */
.up-jb-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.up-jb-step { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 22px; color: var(--text-2); transition: color .3s var(--ease-out); }
.up-jb-step[data-st="done"], .up-jb-step[data-st="now"] { color: var(--ink); }
.up-jb-step[data-st="now"] { font-weight: 600; }
.up-jb-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; color: var(--line-strong); }
.up-jb-step[data-st="done"] .up-jb-ic { color: var(--success); }
.up-jb-step[data-st="now"] .up-jb-ic { color: var(--ws-accent); }
.up-jb-ic .ws-spin { display: inline-grid; }
.up-jb-dot { display: block; width: 6px; height: 6px; border-radius: 3px; background: var(--line-strong); }

/* подсказка под шагами — как «Окно можно закрыть…» у окна сборки; «дольше обычного» — жёлтая, как предупреждение над листом */
.up-jb-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--bg); font-size: 14px; line-height: 20px; color: var(--text-2); }
.up-jb-note.is-warn { border: 1px solid var(--warning-line); background: var(--warning-tint); color: var(--ink); }
.up-jb-note.is-warn svg { flex: 0 0 auto; margin-top: 1px; color: var(--warning); }

/* кнопка карточки — как у окна сборки: во всю ширину, 48, пилюля */
.up-jb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 999px; font-size: 16px; line-height: 22px; font-weight: 600;
  text-decoration: none; transition: filter .15s, transform .12s var(--ease-out); }
.up-jb-btn:hover { filter: brightness(1.06); }
.up-jb-btn:active { transform: scale(.98); }
/* тёмная тема — как кнопки окна сборки на «Новом документе»: светлый акцент, тёмный текст (base()) */

/* ---------- статус в панели вместо «Скачать» ---------- */
.up-jb-pill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ws-accent-edge); color: var(--ws-accent-ink); font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.up-jb-pill .ws-spin { display: inline-grid; }
.up-jb-pill-pct { min-width: 4ch; text-align: right; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---------- лист-заготовка ---------- */
.up-jb-paper { pointer-events: none; }
.up-jb-sheet { --k: calc(100cqw / 760); --sk: #ebe8f3; --sk-h: #dedaea; --sk-line: #dcd8e6; display: grid; align-content: start; gap: calc(var(--k) * 26); box-sizing: border-box; height: 100%;
  padding: calc(var(--k) * 60) calc(var(--k) * 64); }
.up-jb-sheet.is-land { --k: calc(100cqw / 1040); gap: calc(var(--k) * 20); padding: calc(var(--k) * 44) calc(var(--k) * 48); }
.up-jb-sheet.is-slide { --k: calc(100cqw / 880); grid-template-rows: auto 1fr; gap: calc(var(--k) * 30); padding: calc(var(--k) * 52) calc(var(--k) * 60); }
.up-jb-g { display: grid; align-content: start; gap: calc(var(--k) * 14); transition: opacity .6s var(--ease-out), filter .6s var(--ease-out); }
.up-jb-g[data-st="wait"] { opacity: .32; }
.up-jb-g[data-st="off"] { opacity: .45; filter: grayscale(1); }
.up-jb-sk { display: block; width: var(--w); height: calc(var(--k) * 10); border-radius: calc(var(--k) * 5); background-color: var(--sk); }
.up-jb-sk.is-c { margin: 0 auto; }
.up-jb-sk.is-h { height: calc(var(--k) * 18); border-radius: calc(var(--k) * 9); background-color: var(--sk-h); }
.up-jb-sk.is-h2 { height: calc(var(--k) * 13); background-color: var(--sk-h); margin-top: calc(var(--k) * 6); }
/* часть, которую пишут сейчас: бруски чуть сиреневее и с бегущим бликом */
.up-jb-g[data-st="now"] .up-jb-sk { background-color: #e6e0f8; background-image: linear-gradient(90deg, transparent 0 38%, rgba(255, 255, 255, .85) 50%, transparent 62% 100%);
  background-size: 260% 100%; animation: up-jb-sheen 1.6s linear infinite; }
@keyframes up-jb-sheen { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.up-jb-lines { display: grid; gap: calc(var(--k) * 10); }

/* таблицы листа: шапка урока (2 столбца) и этапы техкарты (5 столбцов) — линии как у листа */
.up-jb-tbl { display: grid; border-top: 1px solid var(--sk-line); border-left: 1px solid var(--sk-line); }
.up-jb-tbl > span { display: grid; align-content: center; gap: calc(var(--k) * 7); min-height: calc(var(--k) * 30); box-sizing: border-box;
  padding: calc(var(--k) * 8) calc(var(--k) * 10); border-right: 1px solid var(--sk-line); border-bottom: 1px solid var(--sk-line); }
.up-jb-tbl.is-meta { grid-template-columns: var(--lw) minmax(0, 1fr); }
.up-jb-tbl.is-stages { grid-template-columns: 17% 8% 29% 26% 20%; }
.up-jb-tbl.is-stages > span { align-content: start; min-height: calc(var(--k) * 66); }
.up-jb-tbl.is-stages > .is-th { align-content: center; min-height: calc(var(--k) * 38); background: #f6f5fa; }
/* «Проверяем минуты» у техкарты: столбец минут подсвечен, пока идёт проверка */
.up-jb-sk.is-min { transition: background-color .4s var(--ease-out); }
.up-jb-sheet[data-min="now"] .up-jb-sk.is-min { background-color: rgba(var(--up-indigo), .38); animation: up-jb-pulse .9s ease-in-out infinite alternate; }
@keyframes up-jb-pulse { to { background-color: rgba(var(--up-indigo), .16); } }

/* книжный лист: задания с номером и строкой ответа */
.up-jb-task { display: grid; grid-template-columns: calc(var(--k) * 22) minmax(0, 1fr); gap: calc(var(--k) * 12); align-items: start; }
.up-jb-task b { width: calc(var(--k) * 20); height: calc(var(--k) * 20); border-radius: 50%; background: var(--sk-h); font-size: 0; }
.up-jb-task > div { display: grid; gap: calc(var(--k) * 9); }
.up-jb-sk.is-line { width: 100%; height: 1px; border-radius: 0; margin-top: calc(var(--k) * 14); background: var(--sk-line) !important; animation: none !important; }

/* слайд: подпись, заголовок, пункты слева, место под картинку справа */
.up-jb-sk.is-cap { height: calc(var(--k) * 9); }
.up-jb-sk.is-st { height: calc(var(--k) * 28); border-radius: calc(var(--k) * 9); background-color: var(--sk-h); }
.up-jb-sl-body { display: grid; grid-template-columns: 1.25fr 1fr; gap: calc(var(--k) * 36); align-items: start; }
.up-jb-bul { display: grid; gap: calc(var(--k) * 24); }
.up-jb-bul > span { display: flex; align-items: center; gap: calc(var(--k) * 14); }
.up-jb-bul .up-jb-sk { height: calc(var(--k) * 12); }
.up-jb-bdot { flex: 0 0 auto; width: calc(var(--k) * 9); height: calc(var(--k) * 9); border-radius: 50%; background: #cfc7f3; }
.up-jb-pic { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: calc(var(--k) * 16); background: #f2eff9; color: #bdb5df; }
.up-jb-g[data-st="now"] .up-jb-pic { animation: up-jb-pulse-pic 1.2s ease-in-out infinite alternate; }
@keyframes up-jb-pulse-pic { to { background: #e7e1f8; } }

/* ---------- ширины ---------- */
@media (max-width: 1023px) {
  .up-jb-card { margin-top: 40px; }
}
/* телефон: карточка — первой, во всю ширину; лист-заготовка под ней — началом листа (260 px) с затуханием вниз */
@media (max-width: 639px) {
  .up-jb-box > .up-jb-card { width: 100%; margin-top: 0; padding: 22px 18px; border-radius: 20px; gap: 18px; }
  .up-jb-box > .up-paper { grid-area: 2 / 1; margin-top: 16px; }
  .up-job .up-doc-stage .up-jb-paper.is-a4, .up-job .up-doc-stage .up-jb-paper.is-a4.is-land, .up-job .up-doc-stage .up-jb-paper.is-slide { aspect-ratio: auto; height: 260px;
    -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
  .up-jb-sheet, .up-jb-sheet.is-land, .up-jb-sheet.is-slide { --k: .62px; padding: 26px 22px; }
  .up-jb-h { font-size: 18px; line-height: 26px; }
  .up-jb-step { font-size: 14.5px; line-height: 21px; }
}

/* ---------- тёмная тема (владелец 06.11, п. 5: «на темной теме все сливается с фоном») ----------
   Карточка была --surface (#1f1b3a) на фоне #15122a с тенью, которой на тёмном не видно. Теперь — заметно светлее (градиент #312b5c → #29234c,
   у --surface-2 #28234a), рамка — акцентом .32 (вместо --up-card-line .12), сверху — тонкий блик, снизу — мягкий отсвет акцента, как у главных кнопок кита в
   тёмной теме. Лист на телефоне в тёмной — без растворения вниз: белый, тающий в тёмный фон, давал серую муть; теперь край ровный. */
.up-job[data-theme="dark"] .up-jb-card { background: linear-gradient(180deg, #312b5c, #29234c); border-color: rgba(179, 168, 255, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 32px 72px -22px rgba(0, 0, 0, .85), 0 18px 56px -26px rgba(123, 98, 255, .5); }
@media (max-width: 639px) {
  .up-job[data-theme="dark"] .up-doc-stage .up-jb-paper.is-a4, .up-job[data-theme="dark"] .up-doc-stage .up-jb-paper.is-a4.is-land, .up-job[data-theme="dark"] .up-doc-stage .up-jb-paper.is-slide { -webkit-mask-image: none; mask-image: none; height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .up-jb-fill::after, .up-jb-g[data-st="now"] .up-jb-sk, .up-jb-sheet[data-min="now"] .up-jb-sk.is-min, .up-jb-g[data-st="now"] .up-jb-pic, .up-jb-head.is-center { animation: none !important; }
  .up-jb-card, .up-jb-g, .up-jb-fill, .up-jb-step { transition: none !important; }
}