/* Раскладка страниц сайта: то, что не покрывают компоненты kh-*. Читает только токены (цвета, отступы, --type-*).
   Правки компонентов живут в kh.css, здесь их не переопределяем. */

:root{--section-gap:var(--space-12)}
/* Липкая шапка сверху (и панели снизу, см. ниже) не закрывают элемент в фокусе и цель якоря: WCAG 2.4.11 */
html{scroll-padding-top:calc(var(--header-h) + var(--space-4))}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column}
.kh-root :where(img){max-width:100%;height:auto}

/* ---------- шапка ---------- */
.site-header{position:sticky;top:0;z-index:10;background:var(--snow-raised);box-shadow:0 1px 0 var(--line)}
.site-header__in{display:flex;align-items:center;gap:var(--space-4);min-height:var(--header-h);padding-block:var(--space-2)}
.site-brand{display:flex;flex-direction:column;justify-content:center;min-height:var(--touch-min);color:var(--night);text-decoration:none;font:var(--type-h4);font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.site-brand:hover{color:var(--night)}
.site-brand small{font:var(--type-note);color:var(--night-muted)}
/* Четыре раздела и кнопка для инструкторов. У текущего раздела в «таблетке» стоит райдер (лыжник или сноубордист).
   Наведение меняет только фон: ширина пунктов постоянна, соседи не сдвигаются. Без JS, только CSS. */
.site-nav{display:flex;align-items:center;gap:var(--space-1);margin-left:auto}
.site-nav a{position:relative;display:inline-flex;align-items:center;min-height:var(--touch-min);padding:0 var(--space-4);border-radius:var(--radius-pill);color:var(--night);text-decoration:none;font:var(--type-button);white-space:nowrap;overflow:hidden}
.site-nav a:hover{background:var(--snow-sunken);color:var(--night)}
@media (hover:hover){.site-nav a:not([aria-current]){transition:background-color .15s ease-out}}
.site-nav a[aria-current="page"]{background:var(--current);box-shadow:inset 0 0 0 2px var(--current-edge);color:var(--on-current);padding-left:var(--space-3)}   /* рамка current-edge: ночью «таблетка» к шапке 1,5:1 */
.site-nav a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.site-nav > a > svg{flex:none;width:20px;height:20px;margin-right:var(--space-2)}
.site-nav__cta{margin-left:var(--space-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.site-nav a.site-nav__cta:hover{background:var(--snow-sunken)}
.site-badge{display:inline-block;min-width:20px;height:20px;margin-left:var(--space-2);padding:0 6px;border-radius:10px;background:var(--night);color:var(--snow);font:var(--type-num);font-variant-numeric:tabular-nums;text-align:center}
.site-nav a[aria-current="page"] .site-badge{background:var(--on-current);color:var(--current)}   /* счётчик непрочитанного — нейтральная инверсия, не dawn (dawn — «мало мест» и ожидание) */

.rider-defs{position:absolute;width:0;height:0;overflow:hidden}
.rider{display:block;flex:none;height:32px}
.rider svg{display:block;width:40px;height:32px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.site-nav a[aria-current="page"] .rider{width:46px}
.site-nav a[aria-current="page"] .rider svg{color:var(--aurora-on-current)}
/* Райдер въезжает один раз, при входе на сайт (класс is-entry ставит base.html по Sec-Fetch-Site), и только если
   движение не отключено. При переходе между разделами «таблетка» с райдером переезжает на новый пункт
   (view-transition ниже), внутри раздела стоит на месте. */
@media (prefers-reduced-motion:no-preference){
  .is-entry .site-nav a[aria-current="page"] .rider svg{animation:rider-arrive .9s cubic-bezier(.2,.8,.3,1) .25s both}
}
@keyframes rider-arrive{0%{opacity:0;transform:translateX(-120px) rotate(-12deg)}60%{opacity:1;transform:translateX(4px) rotate(5deg)}100%{opacity:1;transform:none}}

/* Планшет: «Гид» без хвоста, кнопка для инструкторов в подвале */
@media (min-width:640px) and (max-width:1023px){
  .site-header__in{gap:var(--space-2)}
  .site-brand small{display:none}
  .site-nav{gap:0}
  .site-nav a{padding:0 var(--space-3)}
  .site-nav__more,.site-nav__cta{display:none!important}
}
@media (min-width:1024px) and (max-width:1199px){.site-nav__more{display:none}}
@media (min-width:640px) and (max-width:899px){.site-nav a{padding:0 10px;font:var(--type-note);font-weight:600}.site-nav > a > svg{display:none}.site-nav a[aria-current="page"] .rider{width:42px}}

/* Переход между страницами без белой вспышки: браузер плавно сменяет кадр, шапка остаётся на месте.
   Только CSS (Chrome, Edge, Safari 18+); где не поддерживается, страница просто открывается как раньше. */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
.site-nav a[aria-current="page"]{view-transition-name:nav-current}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
/* «Таблетку» рисует сама группа: её фон плавно меняет ширину. Снимки пунктов не растягиваем (иначе текст
   «резиновый»), они в натуральную величину по центру и сменяются один за другим, без двойного изображения. */
::view-transition-group(nav-current){animation-duration:.25s;animation-timing-function:cubic-bezier(.23,1,.32,1);background:var(--current);border-radius:var(--radius-pill);overflow:hidden}
::view-transition-old(nav-current),::view-transition-new(nav-current){width:auto;height:auto;left:50%;translate:-50% 0;animation-fill-mode:both}
::view-transition-old(nav-current){animation-duration:.14s}
::view-transition-new(nav-current){animation-duration:.2s;animation-delay:.05s}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ---------- страница ---------- */
.site-main{flex:1;padding-block:var(--space-6) var(--space-16)}
.site-section{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--section-gap)}
.site-section--tight{margin-top:var(--space-6)}
.site-h2{font:var(--type-h2);letter-spacing:var(--type-h2-ls);color:var(--night);margin:0;text-wrap:balance}
.site-muted{color:var(--night-muted);font:var(--type-note);margin:0}
.site-crumbs{margin-bottom:var(--space-4)}

/* Служебная видимость: скрытие с !important, показ (block по умолчанию) задаётся в одном селекторе с классом элемента */
.only-mobile,.only-desktop{display:block}
.tabbar{display:none}                     /* нижняя панель только на телефоне, см. блок max-width:639px */
@media (min-width:1024px){.only-mobile{display:none!important}}
@media (max-width:1023px){.only-desktop{display:none!important}}

/* ---------- длинный текст: статьи, «О себе», документы ---------- */
.prose{max-width:var(--content-max);color:var(--night);font:var(--type-article)}
.prose p{margin:0 0 var(--space-3);white-space:pre-line}
.prose p:last-child{margin-bottom:0}
.prose ul,.prose ol{margin:0 0 var(--space-4);padding-left:22px}
.prose li{margin-bottom:var(--space-1)}
.prose strong{font-weight:600}
.site-section.prose{gap:var(--space-3)}
.site-section.prose>*{margin:0}
.site-section.prose>.site-h2:not(:first-child){margin-top:var(--space-4)}
/* На телефоне в колонке ~38 знаков «О себе» и статьи без переносов дают рваный правый край: русские переносы по
   lang="ru". Заголовки не переносятся (kh.css: text-wrap:balance) */
@media (max-width:639px){.prose{hyphens:auto;-webkit-hyphens:auto}.prose h2,.prose h3,.prose h4{hyphens:none;-webkit-hyphens:none}}

/* ---------- профиль инструктора ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-2);margin:0;padding:0;list-style:none}
.gallery img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 25%;border-radius:var(--radius-md);background:var(--snow-sunken)}
/* Край фото (photo-edge, 1px внутрь): светлый снимок не растворяется в фоне страницы, тёмный — в ночи */
.gallery img,.kh-cover img,.article__figure img{outline:1px solid var(--photo-edge);outline-offset:-1px}
.gallery li:first-child img{aspect-ratio:var(--ratio-hero)}
.gallery li:first-child{grid-column:1/-1}

.profile{display:grid;gap:var(--space-8);grid-template-columns:minmax(0,1fr)}
.profile__main{display:flex;flex-direction:column;min-width:0}
.profile__bookline.only-mobile{display:flex;flex-direction:column;gap:var(--space-1);margin-top:var(--space-2)}
/* Под ценой строки-пояснения (кто указывает цену, есть ли даты): между собой чуть свободнее, чем с ценой */
.profile__bookline .profile__contacts + .profile__contacts{margin-top:var(--space-1)}
.profile__aside{position:sticky;top:calc(var(--header-h) + var(--space-4));flex-direction:column;gap:var(--space-3);padding:var(--space-6)}
.profile__aside .kh-btn{width:100%}
.profile__contacts{margin:0;font:var(--type-note);color:var(--night-muted);overflow-wrap:anywhere}
@media (min-width:1024px){
  .profile{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
  .profile__aside.only-desktop{display:flex}
  .gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* Фото инструкторов почти все вертикальные: в 16:9 оставалось ~40 % кадра и голова уходила к краю (селфи сверху,
     райдер в полный рост — к нижнему краю). 3:2 оставляет половину кадра: при 35 % видно и лицо селфи на четверти
     высоты, и лицо райдера посередине кадра. Фокуса в данных фото нет */
  .gallery li:first-child img{aspect-ratio:3 / 2;max-height:520px;object-position:50% 35%}
  .gallery li:not(:first-child) img{aspect-ratio:4 / 3}
  .kh-grid--catalog{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Липкая панель действий на телефоне и планшете (профиль, занятие). Запас под ней даёт body, а не main:
   иначе подвал оказывается под панелью. scroll-padding-bottom держит элемент в фокусе над панелью. */
.site-ctabar.only-mobile{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9}
@media (max-width:1023px){
  body.has-ctabar{padding-bottom:calc(var(--ctabar-h) + var(--space-2) + env(safe-area-inset-bottom,0px))}
  html:has(body.has-ctabar){scroll-padding-bottom:calc(var(--ctabar-h) + var(--space-4) + env(safe-area-inset-bottom,0px))}
}
.site-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.site-actions.only-desktop{display:flex}

/* ---------- подвал ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:var(--space-8);color:var(--night-muted);font:var(--type-note)}
.site-footer__in{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);justify-content:space-between;align-items:flex-start}
.site-footer p{margin:0}
.site-footer nav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}
.site-footer a{display:inline-flex;align-items:center;color:var(--night-muted)}
.site-footer a:hover{color:var(--night)}

.skip-link{position:absolute;left:-9999px;top:var(--space-2);z-index:20;padding:var(--space-2) var(--space-3);background:var(--snow-raised);color:var(--night);border-radius:var(--radius-sm);border:1px solid var(--line-strong)}
.skip-link:focus{left:var(--space-4)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- формы ---------- */
.form{display:flex;flex-direction:column;gap:var(--space-4);max-width:var(--content-max)}
.fieldset-reset{border:0;padding:0;margin:0;min-width:0}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.hp input{width:1px;height:1px;opacity:0}
.seats-wide{max-width:320px;margin-top:var(--space-2)}

/* ---------- переписка ---------- */
.chat-log{display:flex;flex-direction:column;gap:var(--space-3)}
.kh-chat{padding-block:var(--space-2)}
.threads{display:flex;flex-direction:column;gap:var(--space-2);list-style:none;margin:0;padding:0;max-width:var(--content-max)}
.chat-erase{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);margin-top:var(--space-8);max-width:var(--content-max)}
.thread-row__link{display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-4);text-decoration:none;color:var(--night)}
.thread-row__link:hover{color:var(--night);background:var(--snow-sunken)}
.thread-row__name{font:var(--type-h4)}
.thread-row__last{font:var(--type-note);color:var(--night-muted);overflow-wrap:anywhere}

/* ---------- статьи: колонка текста, «Коротко», оглавление сбоку ---------- */
.article{display:flex;flex-direction:column;gap:var(--space-6);max-width:calc(var(--article-col) + var(--toc-w) + var(--space-12))}
.article__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
.article__content{min-width:0}
.article__body{max-width:var(--article-col)}
.article__body p{white-space:normal}
.article__body h2{font:var(--type-h2);letter-spacing:var(--type-h2-ls);margin:var(--space-12) 0 var(--space-3);text-wrap:balance}
.article__body h2:first-child{margin-top:0}
.article__body h3{font:var(--type-h3);letter-spacing:var(--type-h3-ls);margin:var(--space-6) 0 var(--space-2)}
.article__body blockquote{margin:var(--space-4) 0;padding:var(--space-2) var(--space-4);border-left:3px solid var(--line-strong);color:var(--night-muted)}
.table-scroll{overflow-x:auto;overscroll-behavior-x:contain;margin:0 0 var(--space-4);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--snow-raised)}
.article__body table{border-collapse:collapse;width:100%;min-width:480px;font:var(--type-body)}
.article__body th,.article__body td{padding:var(--space-3);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.article__body th{font-weight:600;color:var(--night);background:var(--snow-sunken)}
.article__body tr:last-child td{border-bottom:0}
.sources{max-width:var(--content-max);font:var(--type-note);color:var(--night-muted)}
.sources summary{font-weight:600}
.sources ul{margin:var(--space-2) 0 0;padding-left:22px}
.sources li{padding-block:var(--space-2);overflow-wrap:anywhere}
.kh-inlinecta{margin-block:var(--space-6)}

/* обложка и иллюстрации: подпись с автором и лицензией под снимком */
.kh-cover{margin:0}
.kh-cover img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;border-radius:var(--radius-lg);background:var(--snow-sunken)}
.article__figure{margin:var(--space-6) 0}
.article__figure img{display:block;width:100%;height:auto;border-radius:var(--radius-md);background:var(--snow-sunken)}
.kh-cover figcaption,.article__figure figcaption{margin-top:var(--space-2);font:var(--type-note);color:var(--night-muted)}
.kh-cover figcaption a,.article__figure figcaption a{color:inherit}

/* «Коротко»: карточка (kh-card) с плитками */
.factbox{padding:var(--space-6)}
.factbox .factbox__title{margin:0 0 var(--space-4);padding:0;font:var(--type-h3);letter-spacing:var(--type-h3-ls);color:var(--night)}
.factbox .kh-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--card-min),1fr));gap:var(--space-3);margin:0;padding:0;border:0;border-radius:0;background:none;max-width:none}
.factbox .kh-facts > div{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4);background:var(--snow-sunken);border-radius:var(--radius-md)}
.factbox .kh-facts dd{font:var(--type-h2);font-weight:600;letter-spacing:var(--type-h2-ls);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}   /* значение, а не заголовок: вес чисел */
.factbox .kh-facts dd small{margin-top:var(--space-1)}
.factbox .kh-facts__updated{margin:var(--space-4) 0 0}

/* оглавление: карточка (kh-card) со сворачиванием; на десктопе колонка справа, «липнет» */
.article__toc{max-width:none;padding:0;border-radius:var(--radius-lg)}
.article__toc summary{padding:var(--space-4);font:var(--type-body);font-weight:600}
.article__toc ol{margin:0;padding:0 var(--space-4) var(--space-4) calc(var(--space-4) + 22px)}
.article__toc li{padding-block:var(--space-2)}
@media (min-width:1024px){
  .article__grid{grid-template-columns:minmax(0,var(--article-col)) var(--toc-w);gap:var(--space-12);align-items:start}
  .article__toc{grid-column:2;grid-row:1;position:sticky;top:calc(var(--header-h) + var(--space-4))}
  .article__content{grid-column:1;grid-row:1}
  .article__toc--side.only-desktop{display:block;padding:var(--space-4)}
  .article__toc--side .kh-toc__title{font:var(--type-body);font-weight:600;color:var(--night)}
  .article__toc--side ol{padding:0 0 0 22px}
}

/* ---------- документы: политика, согласия, правила (app/web/templates/legal) ---------- */
.doc__edition{font:var(--type-note);color:var(--night-muted)}
.doc,.prose{overflow-wrap:break-word}                  /* длинный адрес сайта или почты в документе не распирает страницу */
.doc a,.prose a{overflow-wrap:anywhere}
.doc-table{margin:0 0 var(--space-4)}
.doc-table table{border-collapse:collapse;width:100%;min-width:0;font:var(--type-body);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--snow-raised)}
.doc-table th,.doc-table td{padding:var(--space-3);border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:break-word;hyphens:auto}
.doc-table thead th{font-weight:600;background:var(--snow-sunken)}
.doc-table tbody th{font-weight:600}
.doc-table tr:last-child>*{border-bottom:0}
@media (max-width:899px){       /* пять колонок не помещаются: каждая цель становится карточкой с подписями полей */
  .doc-table table,.doc-table tbody,.doc-table tr,.doc-table th,.doc-table td{display:block;width:auto}
  .doc-table table{border:0;background:none}
  .doc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .doc-table tr{margin-bottom:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--snow-raised)}
  .doc-table tbody th{font:var(--type-h4);background:var(--snow-sunken)}
  .doc-table td{border-bottom:0;padding-top:0}
  .doc-table td::before{content:attr(data-label);display:block;font:var(--type-note);font-weight:600;color:var(--night-muted)}
}
.doc-alert .kh-notice{max-width:var(--article-col)}
.resort-note{margin:0;max-width:var(--content-max);font:var(--type-note);color:var(--night-muted)}
.resort-note a{color:inherit}
.site-footer__about{display:flex;flex-direction:column;gap:var(--space-2);max-width:440px}
.site-footer .site-footer__owner a{display:inline;min-height:0;text-decoration:underline}

/* ================= Телефон ================= */
@media (max-width:639px){
  :root{--section-gap:var(--space-8)}
  .site-header__in{flex-wrap:nowrap;padding-block:var(--space-1)}
  .site-brand small{display:none}
  .site-nav{display:none}
  .site-main{padding-block:var(--space-4) var(--space-12)}
  body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px))}
  body.no-tabbar{padding-bottom:0}
  html{scroll-padding-bottom:calc(var(--tabbar-h) + var(--space-4) + env(safe-area-inset-bottom,0px))}
  html:has(body.no-tabbar){scroll-padding-bottom:0}
  .site-footer a{min-height:var(--touch-min)}

  /* Нижняя панель вкладок вместо меню в шапке */
  .tabbar{view-transition-name:tabbar}
  .site-ctabar{view-transition-name:ctabar}
  .tabbar{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:12;grid-template-columns:repeat(4,1fr);background:var(--snow-raised);box-shadow:var(--shadow-bar);padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--tabbar-h);padding:0 2px;color:var(--night-muted);text-decoration:none;font:var(--type-tab);letter-spacing:var(--type-tab-ls);white-space:nowrap}
  .tabbar svg{width:24px;height:24px}
  .tabbar .rider{width:40px;height:32px;margin:-4px 0 -4px}
  .tabbar .rider svg{width:40px;height:32px;opacity:1;transform:none;stroke-width:2.2;animation:none}
  .tabbar__icon{position:relative;display:block}
  .tabbar__icon .site-badge{position:absolute;top:-4px;left:calc(100% - 8px);margin:0}
  .tabbar a:hover,.tabbar a:active{color:var(--night)}
  .tabbar a[aria-current="page"]{color:var(--aurora)}
  .has-ctabar .tabbar,.no-tabbar .tabbar{display:none}

  /* Профиль: фото первым, листается свайпом, следующее фото выглядывает сбоку */
  .profile__main .site-section--gallery{order:-1;margin-top:0}
  .profile__main .kh-heading{margin-top:var(--space-4)}
  .gallery{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:var(--space-2);margin-inline:calc(var(--page-pad-l) * -1) calc(var(--page-pad-r) * -1);padding-inline:var(--page-pad-l) var(--page-pad-r);scroll-padding-inline:var(--page-pad-l) var(--page-pad-r);scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .gallery li,.gallery li:first-child{flex:0 0 84%;grid-column:auto;scroll-snap-align:start}
  .gallery li:only-child{flex-basis:100%}
  .gallery img,.gallery li:first-child img{aspect-ratio:var(--ratio-card);border-radius:var(--radius-lg)}

  /* Липкая панель: две равные кнопки */
  .site-ctabar{gap:var(--space-3);padding:var(--space-3) var(--page-pad-r) var(--space-3) var(--page-pad-l);padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom,0px))}
  .site-ctabar .kh-btn{flex:1;min-width:0;padding-inline:var(--space-3)}

  /* Каталог: компактная сетка */
  .kh-grid{gap:var(--space-3)}

  /* Переписка: заголовок и поле ввода прилипают, как в мессенджере */
  .kh-chat{min-height:calc(100dvh - var(--header-h) - var(--space-4))}
  .kh-chat .chat-log{flex:1}
  .kh-chat__head{position:sticky;top:var(--header-h);z-index:5;background:var(--snow)}
  .kh-composer{position:sticky;bottom:0;z-index:5;background:var(--snow);margin-inline:calc(var(--page-pad-l) * -1) calc(var(--page-pad-r) * -1);padding:var(--space-2) var(--page-pad-r) var(--space-2) var(--page-pad-l);padding-bottom:calc(var(--space-2) + env(safe-area-inset-bottom,0px));box-shadow:0 -1px 0 var(--line)}
  .kh-composer__hint{display:none}

  /* Статья: байлайн в две строки, «Коротко» списком, таблица шире экрана с подсказкой о прокрутке */
  .kh-byline__who{flex:1 1 calc(100% - 32px - var(--space-2))}
  .kh-byline__who + .kh-byline__sep{display:none}
  .factbox{padding:var(--space-4)}
  .factbox .kh-facts{grid-template-columns:1fr;gap:0}
  .factbox .kh-facts > div{background:none;border-radius:0;padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
  .factbox .kh-facts > div:last-child{border-bottom:0}
  .article__body h2{margin-top:var(--space-8)}
  .table-scroll::after{content:"Таблица шире экрана: листайте вправо →";display:block;position:sticky;left:0;padding:var(--space-2) var(--space-3);border-top:1px solid var(--line);font:var(--type-note);color:var(--night-muted)}
}

/* ================= «Сейчас в Хибинах»: табло под шапкой каталога =================
   Одна тёмная строка, как табло канатки: цифры светлые Geologica одной ширины (tabular-nums), подписи тише.
   Не карточка с плитками: между пунктами только воздух. С 1200px всё стоит в одну строку высотой 48px
   (на 1024 — пока цифры короткие), источники прижаты к правому краю. Пояснения (облачность и ветер,
   «дата зависит от снега») не помещаются ни на какой ширине (контейнер 1200px) и видны только скринридеру.
   Заголовок виден с 1200px, уже — только скринридеру, а время съёмки цифр встаёт к источникам:
   «yr.no · bigwood.ru, 09:45». Ссылка подчёркнута по цифрам, если они есть: две подчёркнутые строки подряд
   на телефоне читались как список ссылок. На телефоне строки переносятся в три-четыре короткие:
   ничего не уходит за край и не листается вбок. */
.kh-board{background:var(--board);color:var(--board-muted);font:var(--type-note);border-bottom:1px solid var(--board-line)}
.kh-board__in{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-6);padding-block:var(--space-3)}
.kh-board__title{margin:0;color:var(--on-board);font:var(--type-note);font-weight:600;white-space:nowrap}
.kh-board__time{margin-left:var(--space-1);font-weight:400;color:var(--board-muted);font-variant-numeric:tabular-nums}
.kh-board__list{flex:1 1 0;min-width:min(100%,480px);display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-4);margin:0;padding:0;list-style:none}
.kh-board__item{white-space:nowrap}
.kh-board__num{font:var(--type-h4);color:var(--on-board);font-variant-numeric:tabular-nums}
.kh-board__word,.kh-board__sep{color:var(--board-muted)}
.kh-board__note{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* как .visually-hidden */
.kh-board__link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--board-muted);text-underline-offset:5px}
.kh-board__link:has(.kh-board__num){text-decoration:none}
.kh-board__link .kh-board__num{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--board-muted);text-underline-offset:5px}
.kh-board__link:hover,.kh-board__link:hover .kh-board__num{color:var(--on-board);text-decoration-color:var(--on-board)}
.kh-board__link:hover .kh-board__word{color:var(--on-board)}
.kh-board__link:focus-visible{box-shadow:none;outline:2px solid var(--on-board);outline-offset:3px;border-radius:2px}
.kh-board__src{white-space:nowrap;margin-left:auto}  /* последним пунктом справа: откуда цифры (yr.no по условиям CC BY) */
.kh-board__stamp{display:none}                     /* время у источников: только там, где заголовок скрыт */
@media (max-width:1199px){
  .kh-board__title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* имя региона для скринридера */
  .kh-board__stamp{display:inline}
}
@media (max-width:767px){
  .kh-board__in{padding-block:var(--space-2)}
  /* Строки табло встают друг под другом, и ссылки (канатки, сезон) оказываются соседями по вертикали: WCAG 2.5.8
     требует цель от 24px или центры не ближе 24px. Ссылка строчная, поэтому padding-block растит её область касания
     до 25px, не меняя высоту строки, а зазор между строками разводит эти области, чтобы они не наезжали */
  .kh-board__list{min-width:0;row-gap:var(--space-1)}
  .kh-board__link{padding-block:4px}
  .kh-board__src{margin-left:0}                    /* на телефоне строки выровнены по левому краю, одинокий пункт справа висел бы */
}
@media (max-width:639px){
  .kh-board__item{white-space:normal}              /* строка длиннее экрана переносится сама, а не уходит за край */
}

/* ---------- гребень под шапкой главной ----------
   Линия хребта (kh.css, .kh-ridge) встаёт под табло «Сейчас в Хибинах» по ширине контента, заголовок стоит под ней. */
.site-ridge{width:100%;margin-top:var(--space-6)}   /* body — flex-колонка: без width контейнер ужался бы до ширины гребня */
.site-ridge + .site-main{padding-top:var(--space-4)}
@media (max-width:639px){.site-ridge{margin-top:var(--space-4)}}

/* ---------- установка сайта и уведомления (pwa.js) ----------
   Всё это в HTML со скрытым атрибутом hidden и показывается скриптом. [hidden] сильнее display у компонентов
   (у .kh-bind display:flex перебил бы атрибут). */
[hidden]{display:none !important}
.pwa-install{display:flex;flex-direction:column;gap:var(--space-2)}
.pwa-install__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:0}
.pwa-install__row > span{flex:1 1 240px}
.site-footer .pwa-install__row a{display:inline;min-height:0;text-decoration:underline}
.push-box__status,.push-settings__status{color:var(--night);font:var(--type-note);margin:0}
.push-settings{display:flex;flex-direction:column;gap:var(--space-4);max-width:var(--content-max)}
.push-settings__form{display:flex;flex-direction:column;gap:var(--space-4)}
.push-settings__consent{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--snow-raised)}
.push-settings__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* ---------- кабинет инструктора (app/web/cabinet*.py, templates/kabinet/) ----------
   Компоненты те же (kh-card, kh-chip, kh-choice, kh-status, kh-facts, kh-notice, чат), здесь только раскладка:
   полоса разделов, строки списков, сетка дней, плитки фото. Глубина — тон, как везде: без теней и рамок. */
.kab-nav{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4)}
.kab-nav__list{display:flex;gap:var(--space-2);flex:1;min-width:0;margin:0 0 0 calc(-1 * var(--space-1));padding:var(--space-1);list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.kab-nav__list li{flex:none}
.kab-nav form{margin:0}
.kab-nav__list li:last-child{margin-left:auto}           /* «Выйти» — в конце полосы, справа */
@media (min-width:1024px){.kab-nav__list{flex-wrap:wrap;overflow:visible}}
.kab-nav + .kh-heading{margin-top:var(--space-6)}
.kh-chip .kab-count{margin-left:var(--space-1)}

/* Счётчик: нейтральная инверсия (night на snow), как у «Переписок» в шапке; у текущего чипа — наоборот */
.kab-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-pill);background:var(--night);color:var(--snow);font:600 var(--type-note-size)/1 var(--font-display);font-variant-numeric:tabular-nums}
.kh-chip[aria-current="page"] .kab-count{background:var(--on-current);color:var(--current)}

/* Блок-карточка */
.kab-card{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);max-width:var(--content-max)}
@media (min-width:640px){.kab-card{padding:var(--space-6)}}
.kab-card__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-3)}
.kab-card__title{margin:0;font:var(--type-h3);letter-spacing:var(--type-h3-ls);color:var(--night)}
.kab-card p{margin:0}
.kab-card .site-actions{margin-top:0}
.kab-quote{margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--snow-sunken);font:var(--type-body);color:var(--night);white-space:pre-wrap;overflow-wrap:anywhere}

/* Главная: на десктопе две колонки — дела слева, настройки справа */
.kab-cols{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr)}
.kab-cols > .kab-col{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
@media (min-width:1024px){.kab-cols{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}}
.kab-cols .kab-card{max-width:none}

/* Плитки «нужно ответить»: ссылка на всю плитку, число крупно */
.kab-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin:0;padding:0;list-style:none}
.kab-tile{display:flex;flex-direction:column;gap:2px;min-height:var(--touch-min);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--snow-sunken);color:var(--night);text-decoration:none}
a.kab-tile:hover{color:var(--night);background:var(--line)}
.kab-tile__num{font:var(--type-h2);font-family:var(--font-display);font-weight:600;letter-spacing:var(--type-h2-ls);font-variant-numeric:tabular-nums}
.kab-tile__label{font:var(--type-note);color:var(--night-muted)}
.kab-tile--hot{box-shadow:inset 3px 0 0 var(--dawn)}      /* гость ждёт: dawn значит ожидание */

/* Чек-лист анкеты */
.kab-check{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.kab-check li + li{border-top:1px solid var(--line)}
.kab-check a{display:flex;align-items:center;gap:var(--space-3);min-height:var(--touch-min);color:var(--night);text-decoration:none;font:var(--type-body)}
.kab-check a:hover{color:var(--aurora-strong)}
.kab-check svg{width:20px;height:20px;flex:none;color:var(--night-faint)}
.kab-check .is-done a{color:var(--night-muted)}
.kab-check .is-done svg{color:var(--ok)}
.kab-check__state{margin-left:auto;font:var(--type-note);color:var(--night-muted)}

/* Строка списка: переписка, заявка, занятие, устройство, сессия */
.kab-list{display:flex;flex-direction:column;gap:var(--space-2);margin:0;padding:0;list-style:none;max-width:var(--content-max)}
.kab-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-3);align-items:start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);background:var(--snow-raised)}
.kab-row__title{margin:0;font:var(--type-h4);color:var(--night);min-width:0;overflow-wrap:anywhere}
.kab-row__title a{color:inherit;text-decoration:none}
.kab-row__title a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.kab-row:has(.kab-row__title a:focus-visible){box-shadow:0 0 0 2px var(--snow),0 0 0 4px var(--focus)}
@supports selector(:has(*)){.kab-row__title a:focus-visible{box-shadow:none}}
@media (hover:hover){.kab-row:has(.kab-row__title a):hover{background:var(--snow-sunken)}}
.kab-row__side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1);font:var(--type-note);color:var(--night-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.kab-row__meta{grid-column:1/-1;margin:0;font:var(--type-note);color:var(--night-muted);overflow-wrap:anywhere}
.kab-row__text{grid-column:1/-1;margin:0;font:var(--type-body);color:var(--night);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kab-row__actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--space-2);position:relative;z-index:1}
.kab-row__actions form{margin:0}
.kab-row--wait{box-shadow:inset 3px 0 0 var(--dawn)}
.kab-row--muted .kab-row__title{color:var(--night-muted)}

/* Свободные даты: строка дня — дата и четыре плитки «есть / мало / занято / —» */
.kab-days{display:flex;flex-direction:column;gap:var(--space-2);margin:0;padding:0;list-style:none;max-width:var(--content-max)}
.kab-day{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--space-2) var(--space-3);align-items:center;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--snow-raised);border:0;margin:0;min-width:0}
.kab-day__date{display:flex;flex-direction:column;padding:0;font:var(--type-note);color:var(--night-muted)}
.kab-day__date b{font:var(--type-h4);color:var(--night);font-variant-numeric:tabular-nums}
.kab-day--weekend .kab-day__date span{color:var(--night);font-weight:600}
.kab-day .kh-choice{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-1)}
.kab-day .kh-choice label{justify-content:center;padding:0 var(--space-1)}
/* «Без отметки» — состояние по умолчанию у большинства дней: выбранным оно показано тише, тоном и рамкой, чтобы
   сетка не превращалась в ряд тёмных плиток, а отмеченные дни были видны сразу */
.kab-day .kh-choice label.kab-day__none:has(input:checked){background:var(--snow-sunken);color:var(--night);border-color:var(--line-strong);outline:2px solid var(--line-strong);outline-offset:-2px}
@media (max-width:639px){
  .kab-day{grid-template-columns:minmax(0,1fr);padding:var(--space-3)}
  .kab-day__date{flex-direction:row;align-items:baseline;gap:var(--space-2)}
}
.kab-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);max-width:var(--content-max)}
.kab-pager__label{font:var(--type-body-strong);font-variant-numeric:tabular-nums}
.kab-sticky{position:sticky;bottom:calc(var(--tabbar-h) + var(--space-2));z-index:2;display:flex;justify-content:flex-end;max-width:var(--content-max)}
@media (min-width:1024px){.kab-sticky{bottom:var(--space-4)}}
.kab-sticky .kh-btn{box-shadow:var(--shadow-float)}

/* Фото: плитки 4:5 с кнопками порядка и подписью */
.kab-photos{display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));margin:0;padding:0;list-style:none}
@media (min-width:640px){.kab-photos{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
.kab-photo{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-2);border-radius:var(--radius-lg);background:var(--snow-raised);min-width:0}
@media (min-width:640px){.kab-photo{padding:var(--space-3)}}
.kab-photo__img{position:relative}
.kab-photo__img img{display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;border-radius:var(--radius-md);background:var(--snow-sunken);outline:1px solid var(--photo-edge);outline-offset:-1px}
.kab-photo__img .kh-status{position:absolute;left:var(--space-2);top:var(--space-2)}
.kab-photo__bar{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.kab-photo__bar form{margin:0}
.kab-photo__alt{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:flex-end}
.kab-photo__alt .kh-field{flex:1 1 140px}
.kab-photo__alt .kh-btn{flex:1 0 auto}
.kab-file{display:block;width:100%;max-width:var(--content-max);padding:var(--space-4);border:1px dashed var(--line-strong);border-radius:var(--radius-md);background:var(--snow-raised);color:var(--night);font:var(--type-body)}
.kab-file::file-selector-button{margin-right:var(--space-3);min-height:var(--touch-min);padding:0 var(--space-4);border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--snow);color:var(--night);font:var(--type-button);cursor:pointer}
.kab-file:focus-visible{outline:none;box-shadow:0 0 0 2px var(--snow),0 0 0 4px var(--focus)}

/* Группа полей формы: заголовок раздела и плитки выбора */
.kab-fieldset{display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding:0;border:0;min-width:0}
.kab-fieldset legend{padding:0;margin-bottom:var(--space-2);font:var(--type-body);font-weight:500;color:var(--night)}
.kab-fieldset legend small{color:var(--night-muted);font-weight:400;font-size:var(--type-note-size)}
.kab-form-section{display:flex;flex-direction:column;gap:var(--space-4);padding-top:var(--space-6);border-top:1px solid var(--line)}
.kab-form-section:first-of-type{padding-top:0;border-top:0}
.kab-form-section__title{margin:0;font:var(--type-h3);letter-spacing:var(--type-h3-ls);color:var(--night)}
.kab-form-section__note{margin:0;font:var(--type-note);color:var(--night-muted)}
.kab-inline{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

/* Заявка: телефон гостя после «Принять» */
.kab-phone{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);background:var(--ok-soft)}
.kab-phone__num{font:var(--type-h3);font-family:var(--font-display);font-variant-numeric:tabular-nums;color:var(--night)}

/* Переписка в кабинете: шапка с действиями */
.kab-thread-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.kab-thread-actions form{margin:0}
.kab-preview-note{max-width:var(--content-max)}
.kab-card .kh-facts{padding:0;background:none;border:0;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
/* ---------- модерация (app/web/moderation.py, templates/kabinet/mod_*.html) ---------- */
/* Полоса подразделов под заголовком: та же лента чипов, что у разделов кабинета; на телефоне листается вбок */
.kab-subnav{margin-top:var(--space-4)}
.kab-subnav__list{display:flex;gap:var(--space-2);margin:0 0 0 calc(-1 * var(--space-1));padding:var(--space-1);list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.kab-subnav__list li{flex:none}
@media (min-width:1024px){.kab-subnav__list{flex-wrap:wrap;overflow:visible}}
.kab-subnav + .site-section{margin-top:var(--space-4)}
.kab-tiles--wide{max-width:var(--content-max)}
@media (min-width:1024px){.kab-tiles--wide{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}}
.kab-card--wide{max-width:none}
.kab-photos--small{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
@media (min-width:640px){.kab-photos--small{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}
.kab-break{overflow-wrap:anywhere;word-break:break-word}
.kab-link{font:var(--type-note);font-family:var(--font-mono);overflow-wrap:anywhere;user-select:all}

/* Поиск и фильтр: поля в строку на широком экране, кнопка по нижнему краю полей */
.kab-filter{display:grid;gap:var(--space-3);grid-template-columns:minmax(0,1fr);max-width:var(--content-max)}
@media (min-width:640px){.kab-filter{grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;align-items:end}}
.kab-filter__go .kh-btn{width:100%}
.kab-inline--end{align-items:end}

/* Варианты одной строкой каждый (аудитория рассылки, причина жалобы): длинные подписи не помещаются в плитки */
.kab-options{display:flex;flex-direction:column;gap:var(--space-2)}
.kab-options .kh-check{min-height:var(--touch-min);align-items:center;padding:var(--space-2) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--snow-raised);font:var(--type-body)}
.kab-options .kh-check:has(input:checked){border-color:var(--current-edge);outline:1px solid var(--current-edge);outline-offset:-2px}
.kab-options .kh-check:has(input:focus-visible){box-shadow:0 0 0 2px var(--snow),0 0 0 4px var(--focus)}
.kh-check__box--radio{border-radius:50%}

/* «Было — стало»: на телефоне друг под другом, с 640px — две колонки; изменённые поля отмечены полосой слева */
.kab-diff{display:flex;flex-direction:column;gap:var(--space-3);margin:0}
.kab-diff__row{display:grid;gap:var(--space-2);grid-template-columns:minmax(0,1fr);padding:var(--space-3);border-radius:var(--radius-md);background:var(--snow-sunken)}
.kab-diff__row.is-changed{box-shadow:inset 3px 0 0 var(--dawn);background:var(--snow-raised);border:1px solid var(--line)}
@media (min-width:640px){.kab-diff__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.kab-diff__label{grid-column:1/-1}}
.kab-diff__label{font:var(--type-body-strong);color:var(--night)}
.kab-diff__label small{font:var(--type-note);color:var(--night-muted)}
.kab-diff dd{display:flex;flex-direction:column;gap:var(--space-1);margin:0;min-width:0}
.kab-diff__tag{font:var(--type-note);color:var(--night-muted)}
.kab-diff__text{font:var(--type-body);color:var(--night);white-space:pre-wrap;overflow-wrap:anywhere}
.kab-diff__row:not(.is-changed) .kab-diff__before{display:none}
.kab-diff__row:not(.is-changed) .kab-diff__after .kab-diff__tag{display:none}
@media (min-width:640px){.kab-diff__row:not(.is-changed){grid-template-columns:minmax(0,1fr)}}

/* Отзывы в модерации: панель «скрыть по причине» под отзывом */
.kab-review{padding:var(--space-4);border-radius:var(--radius-lg);background:var(--snow-raised)}
.kab-review.is-hidden{background:var(--snow-sunken)}
.kab-review.is-hidden .kh-review__text{color:var(--night-muted)}
.kab-review__bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-2) var(--space-3);margin-top:var(--space-3)}
.kab-review__bar .kh-field{flex:1 1 220px}
.kab-review__bar form{margin:0}

/* Сворачиваемый блок (жалоба на отзыв, жалоба из письма) */
.kab-details{max-width:var(--content-max)}
.kab-details__summary{display:flex;align-items:center;min-height:var(--touch-min);cursor:pointer;font:var(--type-body-strong);color:var(--link)}
.kab-details__summary::-webkit-details-marker{display:none}
.kab-details__summary::after{content:"";flex:none;width:8px;height:8px;margin-left:var(--space-3);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.kab-details[open] .kab-details__summary::after{transform:translateY(2px) rotate(225deg)}
.kab-details__summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-xs)}
.kab-details[open] .kab-details__summary{margin-bottom:var(--space-3)}
.kab-card.kab-details{padding-block:var(--space-2)}

/* Переписка, открытая по жалобе: только чтение, автор словом */
.kab-msgs{display:flex;flex-direction:column;gap:var(--space-2);margin:0;padding:0;list-style:none;max-width:var(--content-max)}
.kab-msg{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--snow-raised);border:1px solid var(--line)}
.kab-msg--instructor{background:var(--snow-sunken)}
.kab-msg--system{background:none;border-style:dashed}
.kab-msg__meta{margin:0 0 var(--space-1);font:var(--type-note);color:var(--night-muted)}
.kab-msg__meta b{color:var(--night);font-weight:600}
.kab-msg__body{margin:0;font:var(--type-body);color:var(--night);white-space:pre-wrap;overflow-wrap:anywhere}

/* Предпросмотр рассылки: как выглядит уведомление на Android и iPhone и письмо */
.kab-push{display:flex;flex-direction:column;gap:2px;max-width:420px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);background:var(--snow-sunken);border:1px solid var(--line)}
.kab-push--ios{flex-direction:row;align-items:flex-start;gap:var(--space-3);border-radius:22px}
.kab-push--ios > div{min-width:0;flex:1}
.kab-push p{margin:0}
.kab-push__app{display:flex;align-items:center;gap:var(--space-2);font:var(--type-note);color:var(--night-muted)}
.kab-push__icon{flex:none;width:16px;height:16px;border-radius:4px;background:var(--night)}
.kab-push__icon--lg{width:36px;height:36px;border-radius:9px}
.kab-push__title{display:flex;justify-content:space-between;gap:var(--space-2);font:var(--type-body-strong);color:var(--night);overflow-wrap:anywhere}
.kab-push__when{flex:none;font:var(--type-note);color:var(--night-muted);font-weight:400}
.kab-push__body{font:var(--type-body);color:var(--night);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.kab-mail{display:flex;flex-direction:column;gap:var(--space-2);max-width:520px;padding:var(--space-4);border-radius:var(--radius-md);background:var(--snow-raised);border:1px solid var(--line);font:var(--type-body);color:var(--night)}
.kab-mail p{margin:0;overflow-wrap:anywhere}
.kab-mail__subject{font:var(--type-body-strong);padding-bottom:var(--space-2);border-bottom:1px solid var(--line)}
.kab-mail__button{align-self:flex-start;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);background:var(--night);color:var(--snow);font:var(--type-button)}
.kab-recipients{font:var(--type-body)}
.kab-recipients b{font:var(--type-h3);font-family:var(--font-display);font-variant-numeric:tabular-nums}

/* Гость: оценка занятия плитками и ссылка «Пожаловаться» под перепиской */
.review-rating label{min-height:var(--touch-min)}
.chat-report{margin-top:var(--space-4)}

/* Страница /prilozhenie/: схемы экранов телефона по шагам, вкладки устройств, подсказка поверх Safari */
.inst{display:flex;flex-direction:column;gap:var(--space-6)}
.inst__done{margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--ok-soft);color:var(--night);font:var(--type-body)}
.inst__tabs{display:inline-flex;align-self:flex-start;gap:var(--space-1);padding:var(--space-1);border-radius:var(--radius-pill);background:var(--snow-sunken)}
.inst__tab{min-height:var(--touch-min);padding:0 var(--space-4);border:0;border-radius:var(--radius-pill);background:none;color:var(--night-muted);font:var(--type-body);font-weight:600;cursor:pointer}
.inst__tab[aria-pressed="true"]{background:var(--snow-raised);color:var(--night);box-shadow:var(--shadow-float)}
.inst__tab:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.inst__pane{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.inst__pane .site-h2{margin:0}
.inst__lede,.inst__text{margin:0;max-width:var(--content-max);color:var(--night);font:var(--type-body)}
.inst__note{margin:0;max-width:var(--content-max);color:var(--night-muted);font:var(--type-note)}
.inst__native{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);margin:0}
.inst__steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--space-6) var(--space-4);margin:0;padding:0;list-style:none;counter-reset:none}
.inst__steps--wide{grid-template-columns:minmax(0,520px)}
.inst-step{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.inst-step__cap{display:flex;gap:var(--space-2);align-items:flex-start;margin:0;color:var(--night);font:var(--type-note)}
.inst-step__cap b{font-weight:700}
.inst-step__n{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--night);color:var(--snow);font-size:14px;font-weight:700;line-height:1}
.inst-step__n--ok{background:var(--aurora);color:var(--on-aurora)}
@media (max-width:639px){
  .inst__steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-3)}
  .inst__steps--wide{grid-template-columns:minmax(0,1fr)}
}
.inst-glyph{display:inline-block;width:1.05em;height:1.15em;vertical-align:-0.2em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.ph{display:block;width:100%;max-width:220px;height:auto}
.ph--wide{max-width:520px}
.ph-body{fill:var(--snow-raised);stroke:var(--line-strong);stroke-width:1.5}
.ph-screen{fill:var(--snow)}
.ph-wall{fill:var(--snow-sunken)}
.ph-time{fill:var(--night);font:600 8px var(--font-sans)}
.ph-notch{fill:var(--board)}
.ph-head{fill:var(--current)}
.ph-on-head{fill:var(--on-current);opacity:.7}
.ph-ink{fill:var(--line)}
.ph-ink-strong{fill:var(--night-faint)}
.ph-card{fill:var(--snow-raised);stroke:var(--line);stroke-width:1}
.ph-bar{fill:var(--snow-raised);stroke:var(--line);stroke-width:1}
.ph-dim{opacity:.5}
.ph-fill{fill:var(--night)}
.ph-stroke{fill:none;stroke:var(--night);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ph-stroke--hl{stroke:var(--aurora-strong)}
.ph-small{fill:var(--night-muted);font:7.5px var(--font-sans)}
.ph-scrim{fill:var(--night);opacity:.28}
.ph-sheet{fill:var(--snow-raised)}
.ph-sheet--float{stroke:var(--line);stroke-width:1}
.ph-grip{fill:var(--line-strong)}
.ph-row{fill:var(--night);font:9px var(--font-sans)}
.ph-row--sm{font-size:8px}
.ph-row--b{font-weight:700}
.ph-row--hl{fill:var(--aurora-strong);font-weight:700}
.ph-row-bg{fill:var(--snow-sunken)}
.ph-hl{fill:var(--aurora-soft);stroke:var(--aurora);stroke-width:1.2}
.ph-sep{stroke:var(--line);stroke-width:1}
.ph-link{fill:var(--piste-blue);font:9px var(--font-sans)}
.ph-link--b{font-weight:700}
.ph-app{fill:var(--snow-raised);stroke:var(--line);stroke-width:1}
.ph-icon{clip-path:inset(0 round 22%)}
.ph-label{fill:var(--night);font:600 6.5px var(--font-sans)}
.ph-dock{fill:var(--snow-raised);opacity:.7}
.ph-switch{fill:var(--ok)}
.ph-knob{fill:#fff}
.ph-btn{fill:var(--aurora)}
.ph-on-btn{fill:var(--on-aurora);font:700 8px var(--font-sans)}
.ph-tap{fill:var(--aurora);fill-opacity:.1;stroke:var(--aurora);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ph-tap 1.6s ease-out infinite}
.ph-tap-box{fill:none;stroke:var(--aurora);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ph-box 1.6s ease-in-out infinite}
@keyframes ph-box{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.06)}}
@keyframes ph-tap{0%{transform:scale(.6);opacity:1}70%{transform:scale(1.25);opacity:.15}100%{transform:scale(1.25);opacity:0}}
@media (prefers-reduced-motion:reduce){.ph-tap,.ph-tap-box{animation:none;opacity:.9}}

.inst-coach{position:fixed;z-index:80;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 16px);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--night);color:var(--snow);font:var(--type-body);box-shadow:var(--shadow-float)}
.inst-coach::after{content:"";position:absolute;bottom:-9px;width:18px;height:18px;background:inherit;transform:rotate(45deg);border-radius:3px}
.inst-coach--right::after{right:22px}
.inst-coach--center::after{left:calc(50% - 9px)}
.inst-coach--top{top:calc(env(safe-area-inset-top,0px) + 16px);bottom:auto}
.inst-coach--top::after{top:-9px;bottom:auto;right:22px}
.inst-coach__text{flex:1 1 200px;margin:0}
.inst-coach__close{min-height:var(--touch-min);padding:0 var(--space-4);border:0;border-radius:var(--radius-pill);background:var(--snow);color:var(--night);font:var(--type-body);font-weight:600;cursor:pointer}
.inst-coach__close:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.inst-coach-on .tabbar{display:none}     /* стрелка показывает на панель Safari, нижнее меню сайта не мешает */

/* ---------- почта гостя: /chat/pochta/ (app/web/guest_mail.py) ---------- */
.guest-mail__line{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-1) var(--space-3)}
.guest-mail__label{font:var(--type-note);color:var(--night-muted)}
.guest-mail__value{font:var(--type-body);font-weight:600;color:var(--night);overflow-wrap:anywhere}
.guest-mail .site-actions form{margin:0}