/*
 * Стили умного поиска по порталу (partials/search-dialog.html + js/portal-search.js).
 * Всё на переменных портала, поэтому тёмная и светлая темы работают без отдельных правил;
 * точечные правки для светлой темы — в конце файла.
 */

.psearch {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(12px, 7vh, 96px) 16px 24px;
  font-family: var(--course-font);
}

.psearch[hidden] {
  display: none;
}

.psearch__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--course-page-overlay, rgba(7, 9, 13, 0.9));
  backdrop-filter: blur(3px);
}

.psearch__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: min(720px, 86vh);
  overflow: hidden;
  border: 1px solid var(--course-line);
  border-radius: calc(var(--course-radius) * 1.5);
  background: var(--course-panel);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

@media (min-width: 641px) {
  .psearch__panel:has(.psearch__about[open]) {
    overflow: visible;
  }

  .psearch__panel:has(.psearch__about[open]) .psearch__header {
    border-radius: calc(var(--course-radius) * 1.5) calc(var(--course-radius) * 1.5) 0 0;
  }

  .psearch__panel:has(.psearch__about[open]) .psearch__footer {
    border-radius: 0 0 calc(var(--course-radius) * 1.5) calc(var(--course-radius) * 1.5);
  }
}

/* ---------- Шапка ---------- */

.psearch__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--course-line);
  background: var(--course-surface);
}

.psearch__header > svg {
  flex: none;
  color: var(--course-cyan);
}

.psearch__input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 6px 0;
  font: inherit;
  font-size: 1.05rem;
  color: var(--course-text);
  background: transparent;
}

.psearch__input::placeholder {
  color: var(--course-subtle);
}

.psearch__input:focus {
  outline: none;
}

.psearch__input::-webkit-search-cancel-button {
  display: none;
}

.psearch__kbd,
.psearch__footer kbd {
  flex: none;
  padding: 2px 6px;
  border: 1px solid var(--course-line);
  border-radius: 5px;
  font-family: var(--course-mono);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--course-subtle);
  background: var(--course-control);
}

.psearch__close {
  flex: none;
}

/* ---------- Область поиска ---------- */

.psearch__scopebar {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--course-line);
  background: var(--course-surface-soft, var(--course-surface));
}

.psearch__scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-width: 0;
  gap: 4px;
  padding: 6px;
}

.psearch__scope-button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: var(--course-radius);
  padding: 5px 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--course-muted);
  background: transparent;
  cursor: pointer;
}

.psearch__scope-button:hover {
  color: var(--course-text);
  background: var(--course-control-hover);
}

.psearch__scope-button.is-active {
  color: var(--course-text);
  border-color: var(--course-line-strong, var(--course-line));
  background: var(--course-control);
  box-shadow: inset 0 -2px 0 var(--course-cyan);
}

.psearch__scope-button:focus-visible {
  outline: 2px solid var(--course-focus);
  outline-offset: -2px;
}

.psearch__about {
  position: relative;
  flex: none;
  margin-right: 6px;
}

.psearch__about-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--course-line);
  border-radius: var(--course-radius);
  color: var(--course-muted);
  background: var(--course-control);
  cursor: pointer;
  list-style: none;
}

.psearch__about-toggle::-webkit-details-marker {
  display: none;
}

.psearch__about-toggle:hover,
.psearch__about[open] .psearch__about-toggle {
  color: var(--course-text);
  border-color: var(--course-cyan);
  background: var(--course-control-hover);
}

.psearch__about-toggle:focus-visible {
  outline: 2px solid var(--course-focus);
  outline-offset: 2px;
}

.psearch__about-card {
  position: absolute;
  z-index: 8;
  top: calc(100% + 8px);
  right: 0;
  width: min(430px, calc(100vw - 44px));
  padding: 15px;
  border: 1px solid var(--course-line-strong, var(--course-line));
  border-radius: var(--course-radius);
  color: var(--course-muted);
  background: var(--course-panel);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}

.psearch__about-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}

.psearch__about-head strong {
  font-size: 0.96rem;
  color: var(--course-text);
}

.psearch__about-eyebrow {
  font-family: var(--course-mono);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--course-cyan);
}

.psearch__about-card p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
}

.psearch__about-card p + p {
  margin-top: 8px;
}

.psearch__about-card strong {
  color: var(--course-text);
}

.psearch__about-note {
  padding: 9px 10px;
  border-left: 2px solid var(--course-cyan);
  background: var(--course-control);
}

/* ---------- Фильтры ---------- */

.psearch__filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--course-line);
  background: var(--course-surface-soft, var(--course-surface));
}

.psearch__filters[hidden] {
  display: none;
}

.psearch__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.psearch__chips[hidden] {
  display: none;
}

/* Треков может быть много — прячем их в горизонтальную прокрутку. */
.psearch__chips--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.psearch__chips--scroll::-webkit-scrollbar {
  height: 4px;
}

.psearch__chips--scroll::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: var(--course-line);
}

.psearch__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  max-width: 260px;
  padding: 4px 10px;
  border: 1px solid var(--course-line);
  border-radius: 999px;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--course-muted);
  background: var(--course-control);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.psearch__chip > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.psearch__chip:hover {
  color: var(--course-text);
  background: var(--course-control-hover);
}

.psearch__chip.is-active {
  color: var(--course-bg);
  border-color: var(--course-cyan);
  background: var(--course-cyan);
}

.psearch__chip-count {
  flex: none;
  font-family: var(--course-mono);
  font-size: 0.68rem;
  opacity: 0.75;
}

/* ---------- Статус и результаты ---------- */

.psearch__status {
  margin: 0;
  padding: 9px 14px;
  font-size: 0.78rem;
  color: var(--course-muted);
  border-bottom: 1px solid var(--course-line);
}

.psearch__results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin;
}

.psearch__results::-webkit-scrollbar {
  width: 8px;
}

.psearch__results::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: var(--course-line);
}

.psearch__results:focus {
  outline: none;
}

.psearch__group + .psearch__group {
  margin-top: 4px;
}

.psearch__group-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 10px 6px;
}

.psearch__group-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--course-text);
}

.psearch__group-stage {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  color: var(--course-subtle);
}

.psearch__group-count {
  flex: none;
  font-family: var(--course-mono);
  font-size: 0.7rem;
  color: var(--course-subtle);
}

.psearch__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--course-radius);
  color: inherit;
  text-decoration: none;
}

.psearch__item:hover {
  background: var(--course-control-hover);
}

/* Активный результат — тот, на котором стоит клавиатурный курсор. */
.psearch__item.is-active {
  border-color: var(--course-cyan);
  background: var(--course-control-active);
}

.psearch__item:focus-visible {
  outline: 2px solid var(--course-focus);
  outline-offset: -2px;
}

.psearch__item-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.psearch__item-title {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--course-text);
}

.psearch__item-snippet,
.psearch__item-meta {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--course-muted);
}

.psearch__item-meta {
  -webkit-line-clamp: 1;
  color: var(--course-subtle);
}

.psearch__item mark {
  padding: 0 1px;
  border-radius: 3px;
  color: var(--course-cyan);
  background: rgba(64, 224, 208, 0.16);
}

.psearch__badge {
  flex: none;
  padding: 1px 7px;
  border: 1px solid var(--course-line);
  border-radius: 999px;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--course-subtle);
  background: var(--course-control);
}

.psearch__badge--video {
  color: var(--course-orange);
  border-color: rgba(255, 173, 102, 0.35);
}

.psearch__item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.psearch__tag {
  padding: 1px 7px;
  border-radius: 999px;
  font-family: var(--course-mono);
  font-size: 0.66rem;
  color: var(--course-subtle);
  background: var(--course-control);
}

/* ---------- Рекомендации курсов ---------- */

.psearch__course {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 6px;
  padding: 13px 14px;
  border: 1px solid var(--course-line);
  border-radius: var(--course-radius);
  color: inherit;
  text-decoration: none;
  background: var(--course-surface);
}

.psearch__course:hover {
  border-color: var(--course-line-strong, var(--course-line));
  background: var(--course-control-hover);
}

.psearch__course.is-active {
  border-color: var(--course-cyan);
  box-shadow: inset 3px 0 0 var(--course-cyan);
}

.psearch__course:focus-visible {
  outline: 2px solid var(--course-focus);
  outline-offset: -2px;
}

.psearch__course-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.psearch__course-stage {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--course-mono);
  font-size: 0.68rem;
  color: var(--course-subtle);
}

.psearch__match {
  flex: none;
  padding: 2px 7px;
  border: 1px solid var(--course-line);
  border-radius: 999px;
  font-size: 0.66rem;
  color: var(--course-subtle);
  background: var(--course-control);
}

.psearch__match--strong {
  color: var(--course-cyan);
  border-color: rgba(64, 224, 208, 0.35);
}

.psearch__course-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--course-text);
}

.psearch__course-summary {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--course-muted);
}

.psearch__course-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.psearch__course-evidence-label,
.psearch__course-evidence-item {
  font-size: 0.68rem;
  color: var(--course-subtle);
}

.psearch__course-evidence-item {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--course-control);
}

.psearch__course-suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 10px;
}

.psearch__course-suggestion {
  min-height: 58px;
  border: 1px solid var(--course-line);
  border-radius: var(--course-radius);
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--course-muted);
  background: var(--course-surface);
  cursor: pointer;
}

.psearch__course-suggestion:hover {
  color: var(--course-text);
  border-color: var(--course-cyan);
  background: var(--course-control-hover);
}

/* ---------- Пустой запрос: подсказки ---------- */

.psearch__idle {
  padding: 6px 4px 10px;
}

.psearch__idle-title {
  margin: 0 0 8px;
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--course-subtle);
}

.psearch__idle-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 10px;
}

.psearch__item--compact {
  gap: 2px;
}

/* ---------- Подвал ---------- */

.psearch__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border-top: 1px solid var(--course-line);
  font-size: 0.72rem;
  color: var(--course-subtle);
  background: var(--course-surface);
}

.psearch__footer span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.psearch__footer-spacer {
  flex: 1;
}

/* ---------- Светлая тема ---------- */

html[data-theme="light"] .psearch__panel {
  box-shadow: 0 24px 64px rgba(23, 33, 38, 0.18);
}

html[data-theme="light"] .psearch__item mark {
  background: rgba(0, 125, 130, 0.13);
}

html[data-theme="light"] .psearch__chip.is-active {
  color: #ffffff;
}

html[data-theme="light"] .psearch__about-card {
  box-shadow: 0 18px 44px rgba(23, 33, 38, 0.16);
}

/* ---------- Мобильные ---------- */

@media (max-width: 640px) {
  .psearch {
    padding: 0;
  }

  .psearch__panel {
    width: 100%;
    max-height: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .psearch__kbd,
  .psearch__footer span:not(.psearch__footer-spacer):not(:last-child) {
    display: none;
  }

  .psearch__item-tags {
    display: none;
  }

  .psearch__course-suggestions {
    grid-template-columns: 1fr;
  }

  .psearch__about-card {
    width: calc(100vw - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .psearch__chip {
    transition: none;
  }
}