/* Стили модуля «Видео» (UI.Video): страницы управления — список (/videos) и карточка ролика (/videos/{id}), классы
   .vd-*; элементы на чужих экранах — плеер, заглушка ролика в тексте, загрузка и выбор, классы .portal-video-*. */

.vd {
  --vd-bg: var(--bg-card);
  --vd-line: var(--border);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.6;
}

.vd :is(h1, h2, h3) {
  color: inherit;
  margin: 0 0 12px;
  line-height: 1.3;
}

.vd h1 {
  font-family: var(--font-display);
  font-size: var(--portal-page-title-size);
  letter-spacing: -.6px;
  overflow-wrap: anywhere;
}

.vd h2 { font-size: 19px; }
.vd h3 { font-size: 16px; font-weight: 600; margin: 0; }

/* Регистр кнопок снимает тема (PortalTheme, ButtonTypography); здесь только размер внутри крупного текста .vd. */
.vd .mud-button {
  font-size: 14px;
}

.vd-heading { margin: 0 0 24px; }
.vd-heading p { margin: 0; }
.vd-heading .mud-button-root { white-space: nowrap; }

.vd-eyebrow {
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
}

.vd-muted {
  color: var(--text-secondary);
  font-size: 14px;
}

.vd-panel {
  padding: 24px;
  background: var(--vd-bg);
  border: 1px solid var(--vd-line);
  border-radius: var(--portal-radius-xl);
}

.vd-results-heading.mud-typography { margin: 0; font-size: 16px; font-weight: 600; }

/* Строка списка: кадр ролика и рядом название с состоянием. */
.vd-row.vd-panel { padding: 16px 20px; }
.vd-row-main { flex: 1 1 0; min-width: 0; }
.vd-row-title.mud-typography { margin: 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }

.vd-thumb {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 112px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--portal-radius-md);
  background: var(--bg-panel);
}

.vd-thumb .mud-icon-root { color: var(--text-secondary); }

.vd-thumb .mud-image {
  width: 100%;
  height: 100%;
}

@media (max-width: 599.98px) {
  .vd-thumb { width: 80px; }
}

.vd-empty {
  margin-top: 12px;
  padding: 52px 24px;
  text-align: center;
}

/* Состояние ролика и субтитров: цвет даёт MudChip, форма — как у состояний новостей и мероприятий. */
.mud-chip.vd-state {
  flex: none;
  height: auto;
  margin: 0;
  padding: 4px 10px;
  border-radius: calc(var(--portal-radius-sm) * .75);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.mud-chip.vd-state .mud-chip-content { padding: 0; }

/* Сведения о файле: подпись над значением. */
.vd-facts { margin: 0; }
.vd-facts dt { color: var(--text-secondary); font-size: 13px; }
.vd-facts dd { margin: 0 0 12px; overflow-wrap: anywhere; }
.vd-facts dd:last-child { margin-bottom: 0; }

/* Общие элементы видео на чужих экранах и в диалогах (Components/VideoUploadPanel, VideoLinkPanel, VideoPurposeField,
   VideoSelectDialog, VideoReference, VideoPlayer, VideoExternal). */

/* Строка с выбранным файлом: та же пунктирная рамка, что у загрузки картинок. */
.portal-video-upload-file {
  padding: 12px 16px;
  border: 1px dashed var(--mud-palette-lines-default);
  border-radius: var(--portal-radius-lg);
}

/* Заглушка на месте плеера (VideoReference): ролик обрабатывается, не прошёл обработку или удалён. Та же пунктирная
   рамка, что у строки загрузки; свой размер текста, потому что стоит внутри текста статьи с его типографикой. */
.portal-video-note {
  padding: 16px 18px;
  border: 1px dashed var(--mud-palette-lines-default);
  border-radius: var(--portal-radius-lg);
  background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface));
  color: var(--mud-palette-text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.portal-video-note .mud-icon-root {
  flex-shrink: 0;
  font-size: 22px;
  color: var(--mud-palette-primary);
}

.portal-video-note-warning .mud-icon-root { color: var(--mud-palette-warning); }

/* Сброс отступов портала (theme.css: * { margin: 0; padding: 0; box-sizing: border-box }) для плеера vidstack —
   его самого, его разметки и контейнера меню, который на узком плеере выносится в конец body (div.vds-video-layout с
   display: contents). Раньше сторонние стили шли до theme.css, и общий сброс гасил их правила :where(…) с отступами
   (у тех и у других нулевая специфичность — выигрывает позднее подключённое). Стили модуля идут после theme.css, поэтому
   тот же каскад воспроизводится здесь, после vidstack.css: :where держит нулевую специфичность, и правила vidstack с
   классами и атрибутами по-прежнему сильнее. */
:where(.portal-video-player, .portal-video-player *, .vds-video-layout, .vds-video-layout *) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Плеер vidstack: кольцо фокуса — из палитры, а не синее по умолчанию. */
.portal-video-player {
  --video-focus-ring-color: var(--mud-palette-tertiary-lighten);
}

/* Место плеера (VideoPlayer — в карточке ролика, в тексте и в опросе; скелетон карточки): блок 16:9 во всю ширину ещё
   до того, как vidstack оживит <media-player>, — до этого тот строчный и нулевой высоты, и страница прыгала бы, когда
   скрипт загрузится. Место — flex-контейнер: плеер (и заглушка скелетона) растягивается по нему, а под строчным
   плеером не остаётся зазора строки. Пропорция стоит и на самом плеере: её наследуют провайдер и <video> vidstack. */
.portal-video-frame {
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.portal-video-frame > * {
  flex: 1 1 auto;
  min-width: 0;
}

.portal-video-frame > .portal-video-player { aspect-ratio: 16 / 9; }

/* Высоту заглушки задаёт место, а не 1.2em MudSkeleton. */
.portal-video-frame > .mud-skeleton { height: auto; }

/* Внешний ролик (VideoExternal): до нажатия — обложка портала на месте плеера, без картинок провайдера (ни одного
   запроса к нему, пока человек не решил смотреть); после — фрейм плеера провайдера. Обложка тёмная в обеих темах, как
   экран плеера, текст на ней — контрастный цвет того же фона; раскладка и отступы — классами MudBlazor в разметке. */
.portal-video-cover {
  border: 0;
  border-radius: var(--portal-radius-md);
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--mud-palette-primary-rgb), .32), transparent 62%),
    var(--mud-palette-dark);
  color: var(--mud-palette-dark-text);
  font: inherit;
  text-align: center;
}

.portal-video-cover:focus-visible {
  outline: 3px solid var(--mud-palette-primary);
  outline-offset: 2px;
}

.portal-video-cover-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--mud-palette-primary);
  color: var(--mud-palette-primary-text);
  transition: transform .2s ease;
}

.portal-video-cover-play .mud-icon-root { font-size: 36px; }

.portal-video-cover:hover .portal-video-cover-play { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .portal-video-cover-play { transition: none; }
}

.portal-video-cover-title {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.portal-video-cover-provider {
  color: color-mix(in srgb, var(--mud-palette-dark-text) 72%, transparent);
  font-size: 13px;
}

@media (max-width: 599.98px) {
  .portal-video-cover-play { width: 52px; height: 52px; margin-bottom: 4px; }
  .portal-video-cover-title { font-size: 15px; }
}

.portal-video-embed {
  border: 0;
  border-radius: var(--portal-radius-md);
  background: var(--mud-palette-dark);
}

/* Ссылки рядом с плеером и в окне выбора («Открыть на …», «Управление видео»). */
.portal-video-open {
  font-size: 14px;
}

/* Подписи и сообщения у полей на экранах видео — размер портала вместо Material caption. Сообщение об ошибке красит
   Color.Error (mud-error-text с !important), остальное — второстепенный цвет. */
.portal-video-caption {
  color: var(--mud-palette-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

/* Название ролика в окне выбора. */
.portal-video-pick-title {
  font-size: 15px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Карточка-ссылка: ролик на другом сайте или у провайдера, который в этой поставке не встраивается. Рамку и скругление
   даёт MudPaper Outlined, отступ — pa-4. */
.portal-video-link-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--portal-radius-md);
  background: var(--mud-palette-background-gray);
  color: var(--mud-palette-primary);
}

.portal-video-link-text {
  flex: 1 1 180px;
  min-width: 0;
}

.portal-video-link-title {
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.portal-video-link-host {
  color: var(--mud-palette-text-secondary);
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* Плеер на месте маркера в тексте (обёртка .portal-video — PortalHtml, её отступы — в article-content.css).
   Скругление — переменной vidstack: его правило [data-media-player][data-layout='video'] (0,3,0) сильнее
   нашего и ставит border-radius: var(--video-border-radius, 6px). */
.article-content .portal-video media-player {
  width: 100%;
  --video-border-radius: var(--portal-radius-md);
  overflow: hidden;
}

.portal-video-upload-file.is-error {
  border-color: var(--mud-palette-error);
}

.portal-video-upload-file-text {
  flex: 1 1 160px;
  min-width: 0;
}

.portal-video-upload-file-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Кнопка — подпись скрытого поля файла: у label нет своего курсора. */
.portal-video-upload label.mud-button-root {
  cursor: pointer;
}

.portal-video-purpose {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.portal-video-purpose legend {
  padding: 0;
  font-size: 14px;
  color: var(--text-secondary);
}