/* cdn.css - стили раздела «CDN». Только свой файл: base.css / ui.css / shell.css общие и их
   правят все, поэтому раздел не трогает там ни строки. Все имена классов с префиксом cdn-,
   чтобы ничего не пересеклось с другими экранами.

   Раздел - витрина: владелец выбирает оператора по карточкам с логотипами, ценами и подвохом,
   а потом идёт по шагам, у каждого из которых видно текущее положение. Поэтому тут карточки,
   лента шагов и плашки диагноза, а не форма из пятнадцати полей подряд. */

/* --- карточки операторов --- */
.cdn-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.cdn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color .12s ease, background .12s ease;
}
.cdn-card:hover { border-color: var(--line-hover); }
.cdn-card.is-on {
  border-color: var(--accent-line);
  background: var(--accent-ghost);
}
.cdn-card.is-off { cursor: default; opacity: .75; }
.cdn-card__top { display: flex; align-items: center; gap: 10px; }
.cdn-card__logo {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 9px; object-fit: contain; background: #fff; padding: 3px;
}
.cdn-card__logo--none {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-faint);
  font: 700 13px var(--f-ui);
}
.cdn-card__name { font: 700 14px var(--f-ui); color: var(--text); }
.cdn-card__engine { font: 500 10.5px var(--f-mono); color: var(--text-faint); margin-top: 1px; }
.cdn-card__row { display: flex; justify-content: space-between; gap: 8px; font: 500 11.5px var(--f-ui); }
.cdn-card__k { color: var(--text-faint); }
.cdn-card__v { color: var(--text-2); text-align: right; }
.cdn-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.cdn-tag {
  font: 600 10px var(--f-ui); letter-spacing: .2px;
  padding: 2px 7px; border-radius: var(--r-pill);
  border: 1px solid var(--line-mid); color: var(--text-muted); background: var(--surface-2);
}
.cdn-tag--auto { border-color: var(--accent-line); color: var(--accent-soft); background: var(--accent-ghost); }
.cdn-tag--manual { border-color: var(--line-mid); }
.cdn-card__catch {
  font: 500 11.5px/1.5 var(--f-ui); color: var(--text-muted);
  text-wrap: pretty; margin-top: 2px;
}
.cdn-card__pick {
  position: absolute; top: 10px; right: 12px;
  font: 700 10px var(--f-ui); color: var(--accent-soft);
}

/* --- проходимость мобилы: четыре деления, а не проценты --- */
.cdn-bars { display: inline-flex; gap: 2px; vertical-align: middle; }
.cdn-bars i { display: block; width: 5px; height: 9px; border-radius: 1px; background: var(--line-mid); }
.cdn-bars i.on { background: var(--accent); }

/* --- помощник выбора --- */
.cdn-ask { display: flex; flex-direction: column; gap: 14px; }
.cdn-ask__q { font: 600 12.5px var(--f-ui); color: var(--text-2); margin-bottom: 7px; }
.cdn-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.cdn-opt {
  font: 600 12px var(--f-ui); padding: 7px 12px; cursor: pointer;
  border-radius: var(--r-pill); border: 1px solid var(--line-input);
  background: var(--surface); color: var(--text-2);
}
.cdn-opt.is-on { border-color: var(--accent-line); background: var(--accent-ghost); color: var(--accent-soft); }
.cdn-advice {
  margin-top: 2px; padding: 14px 16px;
  border-radius: var(--r-card); border: 1px solid var(--accent-line); background: var(--accent-ghost);
}
.cdn-advice__h { font: 700 14px var(--f-ui); color: var(--text); margin-bottom: 6px; }
.cdn-advice__p { font: 500 12.5px/1.6 var(--f-ui); color: var(--text-2); text-wrap: pretty; margin: 0 0 8px; }
.cdn-truths { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.cdn-truths li {
  font: 500 12px/1.55 var(--f-ui); color: var(--text-muted); text-wrap: pretty;
  padding-left: 14px; position: relative;
}
.cdn-truths li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-deep);
}

/* --- лента шагов мастера --- */
.cdn-steps { display: flex; flex-direction: column; gap: 10px; }
.cdn-step {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface); overflow: hidden;
}
.cdn-step.is-done { border-color: var(--ok-line); }
.cdn-step.is-now { border-color: var(--accent-line); }
.cdn-step__head {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px; cursor: pointer; user-select: none;
}
.cdn-step__num {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 11.5px var(--f-mono);
  border: 1px solid var(--line-mid); color: var(--text-muted); background: var(--surface-2);
}
.cdn-step.is-done .cdn-step__num { border-color: var(--ok-line); color: var(--ok-text); background: var(--ok-bg); }
.cdn-step.is-now .cdn-step__num { border-color: var(--accent-line); color: var(--accent-soft); background: var(--accent-ghost); }
.cdn-step__t { flex: 1; min-width: 0; }
.cdn-step__title { font: 700 13.5px var(--f-ui); color: var(--text); }
.cdn-step__sub { font: 500 11.5px var(--f-ui); color: var(--text-faint); margin-top: 2px; text-wrap: pretty; }
.cdn-step__body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.cdn-step__body.is-hidden { display: none; }

/* --- поля --- */
.cdn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.cdn-field label { display: block; font: 600 12.5px var(--f-ui); color: var(--text-2); margin-bottom: 5px; }
.cdn-field .hint { display: block; font: 500 11px var(--f-ui); color: var(--text-faint); margin-top: 2px; text-wrap: pretty; }
.cdn-inp {
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  border-radius: var(--r-input); border: 1px solid var(--line-input);
  background: var(--surface); color: var(--text); font: 500 13px var(--f-ui); outline: 0;
}
.cdn-inp:focus { border-color: var(--accent-line); }
.cdn-inp.is-bad { border-color: var(--risk); }
.cdn-err { font: 500 11.5px var(--f-ui); color: var(--risk-text); margin-top: 4px; text-wrap: pretty; }
.cdn-mono {
  font: 500 12px var(--f-mono); color: var(--text-mono);
  padding: 9px 12px; border-radius: var(--r-input);
  border: 1px solid var(--line); background: var(--surface-2); word-break: break-all;
}
.cdn-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.cdn-check input { width: 17px; height: 17px; flex: 0 0 17px; accent-color: var(--accent); }
.cdn-check b { display: block; font: 600 13px var(--f-ui); color: var(--text); }
.cdn-check span { display: block; font: 500 11.5px var(--f-ui); color: var(--text-faint); margin-top: 2px; text-wrap: pretty; }

/* --- инструкция кабинета оператора --- */
.cdn-cab { display: flex; flex-direction: column; gap: 12px; }
.cdn-cab__block { border-left: 2px solid var(--accent-line); padding-left: 13px; }
.cdn-cab__title { font: 700 12.5px var(--f-ui); color: var(--text); margin-bottom: 7px; }
.cdn-cab__item { padding: 5px 0; border-bottom: 1px dashed var(--line-soft); }
.cdn-cab__item:last-child { border-bottom: 0; }
.cdn-cab__name { font: 500 12px var(--f-ui); color: var(--text-2); }
.cdn-cab__val { font: 600 12px var(--f-mono); color: var(--accent-soft); margin-left: 6px; }
.cdn-cab__why { display: block; font: 500 11px/1.5 var(--f-ui); color: var(--text-faint); margin-top: 2px; text-wrap: pretty; }
.cdn-cab__wait { font: 500 11px var(--f-ui); color: var(--text-muted); margin-top: 6px; }

/* --- диагноз по слоям --- */
.cdn-layer {
  padding: 11px 14px; border-radius: var(--r-input);
  border: 1px solid var(--line-mid); background: var(--surface-2);
}
.cdn-layer + .cdn-layer { margin-top: 8px; }
.cdn-layer.is-ok { border-color: var(--ok-line); background: var(--ok-bg); }
.cdn-layer.is-bad { border-color: var(--risk); }
.cdn-layer__t { font: 700 12.5px var(--f-ui); color: var(--text); }
.cdn-layer__d { font: 500 12px/1.55 var(--f-ui); color: var(--text-2); margin-top: 4px; text-wrap: pretty; }
.cdn-layer__f { font: 500 12px/1.55 var(--f-ui); color: var(--text-muted); margin-top: 6px; text-wrap: pretty; }
.cdn-layer__f b { color: var(--text-2); }

/* --- предупреждения и заметки --- */
.cdn-note {
  padding: 10px 13px; border-radius: var(--r-input);
  border: 1px dashed var(--line-mid); background: var(--surface-2);
  font: 500 12px/1.55 var(--f-ui); color: var(--text-muted); text-wrap: pretty;
}
.cdn-note--warn { border-color: var(--risk); color: var(--text-2); }
.cdn-note--ok { border-style: solid; border-color: var(--ok-line); background: var(--ok-bg); color: var(--text-2); }

/* --- нижняя панель действий --- */
.cdn-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: var(--s-6); }
.cdn-status { font: 500 11.5px var(--f-mono); color: var(--text-mono); text-wrap: pretty; }

@media (max-width: 720px) {
  .cdn-grid { grid-template-columns: 1fr; }
  .cdn-cards { grid-template-columns: 1fr; }
}