/* topoplan.cloud/razr — разряжение облака. Основа — app.css и free.css (шаги, условия, загрузка) */

/* ожидание: очередь, подсчёт, разряжение */
.wait { display: grid; gap: 10px; }
.wait-line { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.spin {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--accent-soft); border-top-color: var(--accent); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }

/* таблица шагов */
.rtab { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-variant-numeric: tabular-nums; }
.rrow {
  display: grid; grid-template-columns: minmax(118px, 1.2fr) 1fr .7fr 1fr 1fr; gap: 0 12px; align-items: center;
  padding: 10px 14px; border-top: 1px solid var(--line); font-size: 14.5px;
}
.rrow:first-child { border-top: 0; }
.rrow.head { background: var(--bg); color: var(--muted); font-size: 12.5px; font-weight: 600; padding-top: 8px; padding-bottom: 8px; }
.rrow.src { color: var(--muted); }
.rrow.src .c-step { font-weight: 600; color: var(--text); }
.rrow.pick { cursor: pointer; transition: background .12s; }
.rrow.pick:hover { background: var(--accent-soft); }
.rrow.pick.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.rrow .num { text-align: right; white-space: nowrap; }
.rrow.head .num { text-align: right; }
.c-step { display: flex; align-items: center; gap: 10px; font-weight: 600; white-space: nowrap; }
.c-step input[type=radio] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); flex: none; }
.c-pct { color: var(--muted); }
.rrow.same .c-pts, .rrow.same .c-pct { color: var(--muted); }
.own-in {
  width: 64px; height: 32px; padding: 0 8px; font: inherit; font-weight: 600; color: var(--text); text-align: right;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 8px;
}
.own-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.own-in.bad { border-color: var(--err); }
.own-lbl { color: var(--muted); font-weight: 500; }
.tab-note { margin: 10px 0 0; }

/* формат */
.fmt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0; }
.fmt-lbl { font-size: 13px; font-weight: 600; }
.seg { display: inline-flex; padding: 3px; background: var(--track); border-radius: 11px; }
.seg-b {
  height: 32px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; color: var(--muted);
  font: inherit; font-weight: 650; font-size: 14px; cursor: pointer;
}
.seg-b.on { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.seg-b:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.fmt-hint { margin: 0; flex: 1 1 220px; }

/* результат */
.cmp { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.cmp-c { padding: 14px 16px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); min-width: 0; }
.cmp-c span { display: block; font-size: 12.5px; color: var(--muted); }
.cmp-c b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cmp-c i { display: block; font-style: normal; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cmp-c.ok { background: var(--ok-soft); border-color: transparent; }
.cmp-c.ok b { color: var(--ok); }
.cmp-arrow { width: 22px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dl { display: grid; gap: 10px; margin: 16px 0 12px; }
.dl .btn { height: 48px; text-decoration: none; }
.dl .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dl .btn small { font-weight: 500; opacity: .8; }
#itogActions { margin-top: 14px; }

@media (max-width: 560px) {
  .rrow { grid-template-columns: minmax(104px, 1.3fr) 1fr 1fr; padding: 10px 12px; font-size: 14px; }
  .rrow .c-pct, .rrow .c-rcp { display: none; }
  .cmp { grid-template-columns: 1fr; }
  .cmp-arrow { justify-self: center; transform: rotate(90deg); }
}