/* PRLab · экраны до результата: ждём старта, очередь, сбор (StageCard). Макет: StageCard.dc.html, Screen02, Screen03. */

.s-stage-head { display: flex; flex-direction: column; gap: var(--space-2); }
.s-stage-head .pl-h1 { overflow-wrap: anywhere; }
.s-stage-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 13.5px; }

.s-stage { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6); }

/* степпер: 4 этапа */
.s-stage-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.s-stage-steps li { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.s-stage-bar { display: block; height: 4px; border-radius: var(--radius-full); background: var(--line); overflow: hidden; }
.is-done > .s-stage-bar { background: var(--accent); }
.is-now > .s-stage-bar { background: var(--accent-soft); }
.s-stage-bar i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--accent); }
.s-stage-step { display: flex; flex-wrap: wrap; column-gap: var(--space-2); font-size: 13px; line-height: 18px; }
.s-stage-step b { font-weight: 600; }
.is-todo .s-stage-step b { color: var(--ink-muted); }

/* слева — этап, справа — карта проверок */
.s-stage-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-8) var(--space-10); }
.s-stage-main { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.s-stage-chip { display: flex; }
.s-stage-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); }
.s-stage-big b { font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -0.03em; }
.s-stage-big span { font-size: 15px; }
.s-stage-text { margin: 0; font-size: 13.5px; line-height: 20px; overflow-wrap: anywhere; }
.s-stage-foot { margin: 0; font-size: 13px; line-height: 20px; }

/* сегменты: секунды до старта или пары «запрос × поисковик» */
.s-stage-meter { display: flex; flex-direction: column; gap: var(--space-2); }
.s-stage-segs { display: grid; gap: 3px; }
.s-stage-segs.is-pairs { gap: 2px; }
.s-stage-segs.is-dense { gap: 1px; }
.s-stage-segs i { display: block; height: 24px; border-radius: 2px; }
.s-stage-ends { display: flex; justify-content: space-between; font-size: 12px; }
.s-stage-meter .s-legend { font-size: 12.5px; }
.s-stage-meter .s-legend b { color: var(--ink); }

/* очередь: блоки «идёт / ждут / ваша» */
/* блоки в ряд; на узком экране третий уходит на следующую строку, чтобы «проверка» не вылезала из рамки */
.s-stage-queue { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-2); }
.s-stage-q { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); }
.s-stage-q-n { font-size: 12px; color: var(--ink-muted); }
.s-stage-q b { font-size: 14px; font-weight: 500; }
.s-stage-q .pl-muted { font-size: 12.5px; }
.s-stage-q.is-mine { border: 1.5px solid var(--accent); background: var(--accent-soft); }
.s-stage-q.is-mine .s-stage-q-n { font-weight: 600; color: var(--accent); }
.s-stage-q.is-mine b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* карта проверок: поисковик × запрос, по 12 клеток в строке */
.s-stage-map { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.s-stage-map-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.s-stage-map-head .pl-muted { font-size: 12.5px; }
.s-stage-blocks { display: flex; flex-direction: column; gap: var(--space-4); }
.s-stage-block { display: flex; flex-direction: column; gap: 6px; }
.s-stage-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 52px; gap: var(--space-3); align-items: center; }
.s-stage-row.is-nums { align-items: end; }
.s-stage-row.is-nums .s-stage-cells { grid-column: 2; }
.s-stage-eng { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-stage-count { font-size: 12px; text-align: right; }
.s-stage-cells { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.s-stage-num { font-size: 10.5px; text-align: center; }
.s-stage-cell { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-width: 0; overflow: hidden; border-radius: 4px; color: var(--ink); font-size: 10.5px; font-weight: 600; line-height: 1; }
.s-stage-cell.s-f-t10 { color: var(--on-accent); }
.s-stage-cell.s-f-none { color: var(--ink-muted); font-size: 10px; font-weight: 500; }
.s-stage-cell.s-f-fail { color: var(--warn); font-size: 11px; font-weight: 700; }
.s-stage-cell.s-f-skip { color: var(--ink-faint); font-weight: 400; }

/* сбор: таблица по запросам под карточкой */
.s-stage-live { display: flex; flex-direction: column; gap: var(--space-3); }
.s-stage-live-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.s-stage-live-head .pl-muted { font-size: 12.5px; }

/* мобильный: подпись поисковика и счётчик над клетками — клетки на всю ширину */
@media (max-width: 860px) {
  .s-stage-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eng count" "cells cells"; row-gap: var(--space-1); }
  .s-stage-eng { grid-area: eng; }
  .s-stage-count { grid-area: count; }
  .s-stage-row > .s-stage-cells { grid-area: cells; }
  .s-stage-row.is-nums { display: block; }
}

/* степпер на самых узких телефонах: подписи не вылезают из колонок */
@media (max-width: 400px) {
  .s-stage-steps { gap: 8px; }
  .s-stage-step { font-size: 12px; }
  .s-stage-step b { overflow-wrap: anywhere; }
}