/* Компоненты дизайн-системы.
   Источники — docs/redesign/canvas/body_Components.html и _head.part.
   Владелец — блок A (контракты). Файл заморожен: недостающий компонент — это
   заявка в docs/redesign/impl/<блок>/notes.md, а не своя кнопка в секции. */

/* ---- Иконки ---- */
.ic, .ic14, .ic18, .ic20, .ic28, .ic44 {
  stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.ic { width: 16px; height: 16px; }
.ic14 { width: 14px; height: 14px; }
.ic18 { width: 18px; height: 18px; }
.ic20 { width: 20px; height: 20px; }
.ic28 { width: 28px; height: 28px; stroke-width: 1.4; }
.ic44 { width: 44px; height: 44px; stroke-width: 1.2; }
/* Заливка вместо обводки — для «играть» и прочих сплошных знаков. */
.ic-fill { fill: currentColor; stroke: none; }

/* ---- Кнопки ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: 8px; border: 1px solid transparent;
  background: none;
  font: 600 12.5px/1 var(--font-ui);
  color: var(--ink2);
  cursor: pointer; white-space: nowrap;
}
.btn-p { background: var(--accent); color: var(--on-dark); }
.btn-p:hover { background: var(--accent2); }
.btn-p:active { background: var(--accent2); transform: translateY(1px); }
.btn-s { background: var(--surface); border-color: var(--line2); color: var(--ink2); }
.btn-s:hover { background: var(--surf2); }
.btn-s:active { background: var(--surf3); }
.btn-g { color: var(--ink3); }
.btn-g:hover { background: var(--surf2); color: var(--ink2); }
.btn-g:active { background: var(--surf3); color: var(--ink); }
.btn-d { background: var(--errSoft); color: var(--err); }
.btn-d:hover { background: var(--err); color: var(--on-dark); }
.btn-i { width: 32px; padding: 0; }
.btn-sm { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 7px; }
.btn-sm.btn-i { width: 26px; padding: 0; }
.btn-lg { height: 40px; padding: 0 18px; font-size: 14px; border-radius: 10px; }
.btn[disabled], .is-off { opacity: .45; cursor: not-allowed; }
a.btn:hover { text-decoration: none; }

/* Кнопка в состоянии запроса: спиннер вместо иконки, ширина не меняется. */
.spin {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  border: 2px solid currentColor; border-top-color: transparent;
  opacity: .55;
  animation: yts-spin .8s linear infinite;
}
.btn-p .spin { border-color: rgba(255, 255, 255, .45); border-top-color: var(--on-dark); opacity: 1; }
@keyframes yts-spin { to { transform: rotate(360deg); } }

/* ---- Поля ---- */
.inp {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 10px;
  border: 1px solid var(--line2); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  font-size: 13px; font-family: inherit;
}
.inp::placeholder { color: var(--ink4); }
.inp:focus-visible, .inp:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accentSoft);
}
.inp.is-off, .inp[disabled] { background: var(--surf2); opacity: .45; cursor: not-allowed; }
.inp-ml {
  height: auto; min-height: 56px;
  align-items: flex-start; padding: 8px 10px;
  line-height: 1.45; resize: vertical;
}

/* ---- Сегменты ---- */
.seg {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--surf2); border-radius: 8px;
}
.seg > span, .seg > button {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 10px;
  border: 0; border-radius: 6px; background: none;
  font: 600 12px/1 var(--font-ui);
  color: var(--ink3); cursor: pointer; white-space: nowrap;
}
.seg > .on, .seg > [aria-selected="true"] {
  background: var(--surface); color: var(--ink); box-shadow: var(--sh1);
}
.seg > [disabled] { opacity: .45; cursor: not-allowed; }

/* ---- Чипы, тайм-коды ---- */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 7px;
  border-radius: 6px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--surf2); color: var(--ink3);
}
.tag-accent { background: var(--accentSoft); color: var(--accent); }
.tag-ok { background: var(--okSoft); color: var(--ok); }
.tag-warn { background: var(--warnSoft); color: var(--warn); }
.tag-err { background: var(--errSoft); color: var(--err); }
.tag-ai { background: var(--violetSoft); color: var(--violet); }
.tag-mute { background: var(--surf2); color: var(--ink4); }

.tc {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 11.5px; font-weight: 600;
  color: var(--accent); background: var(--accentSoft);
  padding: 2px 6px; border-radius: 5px; white-space: nowrap;
}

/* ---- Прогресс, скелетоны ---- */
.prog { height: 4px; border-radius: 99px; background: var(--surf3); overflow: hidden; }
.prog > i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.prog-warn > i { background: var(--warn); }

.skel {
  background: linear-gradient(90deg, var(--surf2), var(--surf3), var(--surf2));
  background-size: 200% 100%;
  border-radius: 6px;
  animation: yts-skel 1.4s ease-in-out infinite;
}
@keyframes yts-skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---- Носители контента ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.thumb { border-radius: 7px; object-fit: cover; background: var(--surf3); display: block; flex: none; }
.ava { border-radius: 50%; object-fit: cover; background: var(--surf3); display: block; flex: none; }

.list-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.list-row:hover { background: var(--surf2); }
.sel { background: var(--surf2); box-shadow: inset 2px 0 0 var(--accent); }

.stick {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  background: var(--surf2);
  border-bottom: 1px solid var(--line);
}

/* ---- Сообщения ---- */
.note {
  display: flex; gap: 8px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 12px; line-height: 1.4;
  background: var(--surf2); color: var(--ink2);
}
.note > .ic14 { flex: none; margin-top: 1px; }
.note-err { background: var(--errSoft); }
.note-err > .ic14 { color: var(--err); }
/* Ряд кнопок под текстом заметки (ошибка поиска, ошибка входа). */
.note-actions { display: flex; gap: 8px; margin-top: 10px; }

.kbd {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600; color: var(--ink4);
  border: 1px solid var(--line2); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 5px;
}

.tip {
  position: absolute; z-index: 5;
  background: var(--dark-surface); color: var(--on-dark);
  font-size: 11px; font-weight: 500;
  padding: 4px 8px; border-radius: 6px;
  white-space: nowrap; box-shadow: var(--sh2);
}

/* ---- Пустое состояние ---- */
.empty { padding: 16px; text-align: center; }
.empty-ic {
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--surf2); color: var(--ink3);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.empty-text { margin: 4px 0 10px; }

/* ---- Каркас модалки ---- */
.overlay {
  position: fixed; inset: 0; z-index: 40;
  background: var(--overlay);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--sh3);
  display: flex; flex-direction: column;
  overflow: hidden;
  max-width: 100%; max-height: 100%;
}
.modal-player { width: 1300px; height: 648px; max-height: calc(100vh - 48px); }
/* Почти во весь вьюпорт: окно браузера внутри должно оставаться читаемым
   (владелец жаловался на мелкий текст в тесной модалке 940×~410). */
.modal-signin { width: min(1480px, 96vw); height: min(94vh, 900px); }
/* «Во весь экран»: тот же приём, что у театра панели «Просмотр»
   (view.css #view-pane.is-theater) — класс-переключатель на самой модалке,
   оверлей теряет отступы. */
#signin-overlay.is-fullscreen { padding: 0; }
#signin-overlay.is-fullscreen .modal-signin {
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  border-radius: 0;
}
.modal-head {
  height: 52px; flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}
/* Шапка входа — заголовок в одну строку, без второй строки пояснения:
   три шага ниже уже объясняют, что делать. */
.modal-signin .modal-head { height: 44px; }
.modal-signin .modal-head .t-h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* min-height:0 — без него колонка растёт под содержимое, и <video>,
   берущий высоту из своей пропорции, выносит подвал за края модалки. */
.modal-body { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
/* Внутренняя раскладка модалки плеера (.modal-main / .modal-side /
   .modal-foot) удалена вместе с самой модалкой: по plan2.md §1.2 слот
   #player-modal пуст, а её работу делает панель «Просмотр». Каркас
   .modal-player остаётся — он в разметке. */

/* Свёрнутая модалка входа: сессия браузера на сервере продолжает жить. */
.signin-pill {
  position: fixed; right: 14px; bottom: 14px; z-index: 39;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px;
  border: 1px solid var(--line2); border-radius: 99px;
  background: var(--surface); color: var(--ink2);
  font: 600 12.5px/1 var(--font-ui);
  box-shadow: var(--sh2); cursor: pointer;
}
.signin-pill:hover { background: var(--surf2); }
/* Зелёная точка «сессия на сервере жива» (артборд body_SignIn.html). */
.signin-pill-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--ok);
}

/* ---- Тосты ---- */
.toasts {
  position: fixed; right: 14px; bottom: 14px; z-index: 60;
  display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--dark-surface); color: var(--on-dark);
  box-shadow: var(--sh2);
  font-size: 12px; font-weight: 600;
  pointer-events: auto;
}
.toast-text { flex: 1; }
.toast .btn { color: var(--on-dark); background: rgba(255, 255, 255, .14); }
.toast .btn:hover { background: rgba(255, 255, 255, .24); }
.toast-close { color: rgba(255, 255, 255, .6); cursor: pointer; }
.toast-ok .toast-ic { color: var(--toast-ok-ic); }
.toast-warn .toast-ic { color: var(--mark); }
.toast-err .toast-ic { color: var(--toast-err-ic); }
.toast-info .toast-ic { color: var(--toast-info-ic); }

/* ---- Счётчик на кнопке загрузок ---- */
.dl-badge {
  position: absolute; top: 2px; right: 1px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 99px;
  background: var(--accent); color: var(--on-dark);
  font: 700 9.5px/1 var(--font-ui);
  display: flex; align-items: center; justify-content: center;
}
.dl-badge.is-failed { background: var(--err); }

/* ---- Выпадашка подсказок поиска ---- */
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  z-index: 30;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--sh2);
  overflow: hidden;
}

/* ---- Страница попапа OAuth (auth_popup.html) ---- */
.popup-page {
  display: flex; align-items: center; justify-content: center;
  height: 100vh; padding: 24px; text-align: center;
  overflow: auto;
}
.popup-msg { max-width: 26rem; }
.popup-err { color: var(--err); }
.popup-hint { margin-top: 8px; }
.back { margin-top: 16px; }