/* Правки поверх собранного React-бандла (исходники фронта недоступны).
   Подключается из index.html. При пересборке фронта перенести в исходники и удалить. */

/* Карточка курса: бейджи «по приглашению» и «личная проверка» переносятся аккуратно,
   не налезают друг на друга, а кнопка «Открыть курс» всегда на своей строке. */
.glass > .relative > span.rounded-full.font-black[class*="text-[10px]"] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  margin: 8px 6px 0 0;
  line-height: 1.4;
  vertical-align: top;
}
.glass > .relative > span.rounded-full[class*="text-[10px]"] ~ p.inline-flex {
  display: flex;
  width: fit-content;
}

/* Текст для поисковиков до запуска приложения (сервер кладёт его в #root).
   В стиле сайта; появляется только если приложение не запустилось за 0.6 с —
   при обычной загрузке React заменяет его раньше и посетитель его не видит. */
.jhw-ssr {
  min-height: 100vh;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  animation: jhw-ssr-reveal .25s ease-out .6s both;
}
@keyframes jhw-ssr-reveal { from { opacity: 0; } to { opacity: 1; } }
.jhw-ssr__inner { max-width: 56rem; margin: 0 auto; padding: 32px 16px 64px; }
.jhw-ssr h1 { font-size: 1.875rem; font-weight: 900; line-height: 1.2; margin: 12px 0 8px; }
.jhw-ssr h2 { font-size: 1.125rem; font-weight: 900; margin: 0 0 8px; }
.jhw-ssr > .jhw-ssr__inner > h2 { margin-top: 28px; }
.jhw-ssr a { color: hsl(var(--primary)); text-decoration: none; }
.jhw-ssr a:hover { text-decoration: underline; }
.jhw-ssr__crumbs { font-size: .8rem; font-weight: 700; color: hsl(var(--muted-foreground)); }
.jhw-ssr__crumbs span { color: hsl(var(--muted-foreground)); }
.jhw-ssr__lead { color: hsl(var(--muted-foreground)); font-weight: 600; max-width: 44rem; }
.jhw-ssr__muted { color: hsl(var(--muted-foreground)); font-size: .85rem; margin-top: 20px; }
.jhw-ssr__card {
  display: block; margin-top: 12px; padding: 18px 20px; border-radius: 1.5rem;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .82); color: hsl(var(--card-foreground));
}
a.jhw-ssr__card { color: inherit; }
a.jhw-ssr__card:hover { border-color: hsl(var(--primary) / .5); text-decoration: none; }
.jhw-ssr__card b { display: block; font-weight: 900; }
.jhw-ssr__card span { display: block; margin-top: 4px; font-size: .85rem; color: hsl(var(--muted-foreground)); }
.jhw-ssr__card p { white-space: pre-line; margin: 0; }
.jhw-ssr__card ul { margin: 0; padding-left: 18px; }
.jhw-ssr__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.jhw-ssr__grid .jhw-ssr__card { margin-top: 0; }
.jhw-ssr__words { list-style: none; padding: 0 !important; columns: 2 220px; }
.jhw-ssr__words li { break-inside: avoid; padding: 2px 0; }
.jhw-ssr__words span { color: hsl(var(--muted-foreground)); }
.jhw-ssr__pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; font-weight: 800; }
.jhw-ssr__links { display: flex; flex-wrap: wrap; gap: 8px; }
.jhw-ssr__links a { padding: 8px 14px; border-radius: 1rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); font-weight: 800; font-size: .9rem; }

/* Встроенные разделы во вкладках админки и кабинета репетитора (патч r6): без рамки и фона,
   высота подгоняется по содержимому (app-ui.js), до первого сообщения — разумный минимум */
iframe.jhw-embed {
  display: block;
  width: 100%;
  min-height: 60vh;
  border: 0;
  background: transparent;
}

/* Увеличение картинок урока (app-ui.js). Внешний вид — классы оверлея RichText; здесь только
   появление/исчезновение (как у его анимации) и жесты масштаба. */
img.jhw-zoomable { cursor: zoom-in; }
.jhw-lightbox { animation: jhw-lb-fade .18s ease-out; touch-action: none; user-select: none; -webkit-user-select: none; }
.jhw-lightbox__img { animation: jhw-lb-pop .26s cubic-bezier(.2, .9, .3, 1.15); transition: transform .08s linear; will-change: transform; -webkit-user-drag: none; }
.jhw-lightbox--zoomed { cursor: grab; }
.jhw-lightbox--zoomed:active { cursor: grabbing; }
.jhw-lightbox--out { animation: jhw-lb-fade .18s ease-in reverse forwards; }
@keyframes jhw-lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jhw-lb-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

/* «Отправлено на согласование» — подтверждение для управляющего курсом */
.jhw-proposal {
  position: fixed; inset: auto 0 24px 0; z-index: 200; display: flex; justify-content: center; padding: 0 16px;
  animation: jhw-in .25s ease-out;
}
.jhw-proposal--out { animation: jhw-out .25s ease-in forwards; }
.jhw-proposal__card {
  display: flex; gap: 14px; max-width: 520px; width: 100%; padding: 18px 20px; border-radius: 24px;
  background: hsl(var(--card, 30 10% 10%)); color: hsl(var(--foreground, 30 20% 95%));
  border: 1px solid hsl(var(--primary, 352 78% 60%) / .45); box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.jhw-proposal__icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: hsl(var(--primary, 352 78% 60%)); color: hsl(var(--primary-foreground, 0 0% 100%)); font-size: 20px; font-weight: 900;
}
.jhw-proposal__title { font-weight: 900; font-size: 16px; }
.jhw-proposal__text { margin-top: 4px; font-size: 13px; color: hsl(var(--muted-foreground, 30 10% 65%)); }
.jhw-proposal__summary { margin-top: 8px; font-size: 12px; padding: 8px 10px; border-radius: 12px; background: hsl(var(--muted, 30 10% 16%)); }
.jhw-proposal__actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.jhw-proposal__btn {
  font: inherit; font-size: 12px; font-weight: 900; padding: 8px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid hsl(var(--border, 30 10% 25%)); background: transparent; color: inherit; text-decoration: none;
}
.jhw-proposal__btn--primary { background: hsl(var(--primary, 352 78% 60%)); border-color: transparent; color: hsl(var(--primary-foreground, 0 0% 100%)); }
@keyframes jhw-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes jhw-out { to { opacity: 0; transform: translateY(20px); } }