/* Инструкторы Хибин · компоненты kh-*
   Ведётся в репозитории (стартом была копия макета). Подключается после tokens.css и читает только токены:
   цвета, отступы, радиусы и шкалу текста (--type-*). Без JS и без инлайновых стилей:
   состояния через атрибуты (aria-pressed, aria-current, disabled), <details> и <progress>. */

/* ---------- корень ----------
   Ссылки по умолчанию стилизуются только без класса и с низкой специфичностью (:where): любое правило компонента их перебивает.
   Ссылке с классом, которая должна выглядеть как текстовая, добавляется kh-link. */
.kh-root{font:var(--type-body);color:var(--night);background:var(--snow);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.kh-root *,.kh-root *::before,.kh-root *::after{box-sizing:border-box}
.kh-root :focus-visible{outline:none;box-shadow:0 0 0 2px var(--snow),0 0 0 4px var(--focus)}
@media (forced-colors:active){.kh-root :focus-visible{outline:2px solid;outline-offset:2px}}
.kh-root :where(a:not([class])),.kh-link{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.kh-root :where(a:not([class])):hover,.kh-link:hover{color:var(--aurora-strong)}
.kh-root h1,.kh-root h2,.kh-root h3{font-family:var(--font-display);color:var(--night);text-wrap:balance;margin:0}
/* Числа в тексте (цены, даты, время, счётчики): Geologica 600 одной ширины, кегль родителя. Данные отличаются от прозы
   без моноширинного шрифта. Внутри font:var(--type-…) пишется после font: шорткат сбрасывает tabular-nums */
.kh-num{font-family:var(--font-display);font-weight:600;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.kh-root *{transition:none!important;animation:none!important}}

/* ---------- раскладка ---------- */
/* Боковые поля страницы. С viewport-fit=cover на iPhone в альбомной ориентации экран заходит под вырез
   и Dynamic Island: поле не меньше safe-area. Им же пользуются липкие панели и ленты в край экрана. */
:root{--page-pad-l:max(var(--gutter),env(safe-area-inset-left,0px));--page-pad-r:max(var(--gutter),env(safe-area-inset-right,0px))}
@media (min-width:1024px){:root{--page-pad-l:max(var(--gutter-lg),env(safe-area-inset-left,0px));--page-pad-r:max(var(--gutter-lg),env(safe-area-inset-right,0px))}}
.kh-container{max-width:var(--container-max);margin:0 auto;padding-inline:var(--page-pad-l) var(--page-pad-r)}
.kh-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(var(--card-min),1fr))}
.kh-prose{max-width:var(--content-max)}
.kh-skeleton{background:var(--snow-sunken);border-radius:var(--radius-sm);animation:kh-pulse 1.2s ease-in-out infinite}
@keyframes kh-pulse{50%{opacity:.55}}

/* ---------- Button ---------- */
.kh-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--touch-min);padding:0 var(--space-4);border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;font:var(--type-button);color:var(--night);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out}
.kh-btn svg{width:20px;height:20px;flex:none}
.kh-btn--primary{background:var(--aurora);color:var(--on-aurora)}
.kh-btn--primary:hover,.kh-btn--primary:active{background:var(--aurora-strong)}
.kh-btn--secondary{background:var(--snow-raised);color:var(--night);border-color:var(--line-strong)}
.kh-btn--secondary:hover{border-color:var(--night-muted)}
.kh-btn--secondary:active{background:var(--snow-sunken)}
.kh-btn--ghost{color:var(--aurora)}
.kh-btn--ghost:hover,.kh-btn--ghost:active{background:var(--aurora-soft)}
.kh-btn--danger{color:var(--danger);border-color:var(--danger)}
.kh-btn--danger:hover,.kh-btn--danger:active{background:var(--danger-soft)}
.kh-btn--sm{min-height:36px;padding:0 var(--space-3);font-size:var(--type-note-size)}
.kh-btn--lg{min-height:52px;padding:0 var(--space-6)}
.kh-btn--block{display:flex;width:100%}
.kh-btn[disabled],.kh-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ---------- Chip (фильтры) ---------- */
.kh-chips{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:0;padding:0;list-style:none}
.kh-chip{display:inline-flex;align-items:center;gap:var(--space-1);min-height:36px;padding:0 var(--space-3);border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--snow-raised);color:var(--night);font:var(--type-note);font-weight:600;text-decoration:none;cursor:pointer;transition:border-color .15s ease-out,background-color .15s ease-out}
.kh-chip:hover{border-color:var(--line-strong);color:var(--night)}
.kh-chip:active{background:var(--snow-sunken)}
.kh-chip[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}
.kh-chip__count{color:var(--night-muted);font-weight:500;font-variant-numeric:tabular-nums}
/* Выбранное: заливка current и рамка 2px current-edge (border + outline внутрь, box-shadow остаётся кольцу фокуса).
   Ночью заливка к насту 1,5:1 — выбор сообщает рамка (10,5:1, WCAG 1.4.11); днём рамка сливается с заливкой. */
.kh-chip.is-active,.kh-chip[aria-pressed="true"],.kh-chip[aria-current="page"]{background:var(--current);color:var(--on-current);border-color:var(--current-edge);outline:1px solid var(--current-edge);outline-offset:-2px}
.kh-chip.is-active .kh-chip__count,.kh-chip[aria-pressed="true"] .kh-chip__count,.kh-chip[aria-current="page"] .kh-chip__count{color:inherit;opacity:.75}

/* ---------- SportTag ---------- */
.kh-sport{display:inline-flex;align-items:center;gap:var(--space-1);min-height:24px;padding:0 var(--space-2);border-radius:var(--radius-xs);background:var(--snow-sunken);color:var(--night-muted);font:var(--type-note);font-weight:500;white-space:nowrap}
.kh-sport svg{width:14px;height:14px;flex:none}

/* ---------- LevelBadge: табличка трассы ----------
   Как указатель на склоне: прямоугольная табличка цвета трассы, слово обычным регистром и знак формы,
   чтобы уровень читался не только цветом (WCAG 1.4.1): ● зелёная, ■ синяя, ◆ красная, ◆◆ чёрная; «Фрирайд» —
   чёрная табличка с ▲ (вершина, за трассой). «Любой уровень» — обычный текст без таблички и знака. Знак рисует clip-path,
   цветом текста. В радио-плитке формы (.kh-choice) таблички нет: знак цвета трассы рядом со словом. */
.kh-level{--plate:var(--snow-raised);--on-plate:var(--night);display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--plate-h);padding:0 var(--space-2);border-radius:var(--radius-xs);background:var(--plate);color:var(--on-plate);font:var(--type-note);font-weight:600;white-space:nowrap}
.kh-level::before{content:"";flex:none;width:10px;height:10px;background:currentColor}
.kh-level--green{--plate:var(--piste-green);--on-plate:var(--on-piste)}
.kh-level--green::before{border-radius:50%}
.kh-level--blue{--plate:var(--piste-blue);--on-plate:var(--on-piste)}
.kh-level--red{--plate:var(--piste-red);--on-plate:var(--on-piste)}
.kh-level--red::before,.kh-level--black::before{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.kh-level--black::before{width:18px;clip-path:polygon(25% 0,50% 50%,75% 0,100% 50%,75% 100%,50% 50%,25% 100%,0 50%)}   /* два ромба встык */
.kh-level--freeride::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
.kh-level--black,.kh-level--freeride{--plate:var(--piste-black);--on-plate:var(--on-piste-black);box-shadow:inset 0 0 0 1px var(--piste-black-edge)}   /* ночью табличка темнее фона: контур */
.kh-level--any{padding:0;background:none;color:var(--night-muted);font-weight:500}   /* без таблички: обычный текст, не похож на кнопку */
.kh-level--any::before{display:none}
@media (forced-colors:active){.kh-level:not(.kh-level--any){border:1px solid}.kh-level::before{background:CanvasText}}
.kh-choice .kh-level{min-height:0;padding:0;background:none;box-shadow:none;color:inherit;font-weight:500}
.kh-choice .kh-level--green::before{background:var(--piste-green)}
.kh-choice .kh-level--blue::before{background:var(--piste-blue)}
.kh-choice .kh-level--red::before{background:var(--piste-red)}
.kh-choice .kh-level--black::before{background:var(--piste-black-edge)}   /* ночью чёрный знак на плитке не виден: контурный цвет */
.kh-choice label:has(input:checked) .kh-level::before{background:currentColor}   /* на тёмной выбранной плитке знак цветом текста */

/* ---------- StatusBadge (статусы брони из базы) ---------- */
.kh-status{display:inline-flex;align-items:center;gap:var(--space-1);min-height:24px;padding:0 var(--space-2);border-radius:var(--radius-xs);background:var(--snow-sunken);color:var(--night-muted);font:var(--type-note);font-weight:600;white-space:nowrap}
.kh-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.kh-status--pending,.kh-status--awaiting{background:var(--warn-soft);color:var(--warn)}
.kh-status--confirmed{background:var(--ok-soft);color:var(--ok)}
.kh-status--completed{background:var(--snow-sunken);color:var(--night-muted)}
.kh-status--cancelled,.kh-status--rejected,.kh-status--noshow{background:var(--danger-soft);color:var(--danger)}

/* ---------- Rating ---------- */
.kh-rating{display:inline-flex;align-items:center;gap:var(--space-1);font:var(--type-num);color:var(--night);font-variant-numeric:tabular-nums;white-space:nowrap}
.kh-rating svg{width:16px;height:16px;flex:none;color:var(--dawn);fill:currentColor}
.kh-rating__count{color:var(--night-muted);font-weight:400}
.kh-rating--new{color:var(--night-muted);font-weight:500}
.kh-rating--new svg{color:var(--night-faint)}
.kh-stars{display:inline-flex;gap:2px;color:var(--dawn)}
.kh-stars svg{width:14px;height:14px;fill:currentColor}
.kh-stars svg.is-off{color:var(--line-strong)}

/* ---------- Price ---------- */
/* Части цены разделены неразрывным пробелом в разметке (_macros.html, price), а не gap: «от 3 000 ₽/ч» копируется и читается целиком */
.kh-price{display:inline-flex;align-items:baseline;font:var(--type-h4);color:var(--night);font-variant-numeric:tabular-nums;white-space:nowrap}
.kh-price__from,.kh-price__unit{font:var(--type-note);color:var(--night-muted)}
.kh-price--lg{font-size:var(--type-price-lg-size);line-height:var(--type-price-lg-lh);letter-spacing:var(--type-price-lg-ls)}
.kh-price--lg .kh-price__from,.kh-price--lg .kh-price__unit{font:var(--type-body)}
.kh-price--lg .kh-price__unit{margin-left:2px}   /* «/ч» кеглем текста не прилипает к ₽ крупной цены */
.kh-price--plain{font:var(--type-body-strong);font-family:var(--font-display)}

/* ---------- Avatar ---------- */
.kh-avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--snow-sunken);color:var(--night-muted);font:600 var(--type-note-size)/1 var(--font-display);text-transform:uppercase;overflow:hidden;flex:none}
.kh-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.kh-avatar--sm{width:32px;height:32px;font-size:12px}   /* единственный кегль 12: инициалы в круге 32px */
.kh-avatar--lg{width:64px;height:64px;font-size:var(--type-h2-size)}

/* ---------- карточки ----------
   Глубина одна на весь сайт — тон: карточка (наст, snow-raised) на ступень светлее страницы (snow), без тени и рамки
   в обеих темах. Рамка прозрачная, а не нулевая: в режиме высокой контрастности (forced-colors) она становится видимой. */
.kh-card{background:var(--snow-raised);border:1px solid transparent;border-radius:var(--radius-lg);overflow:hidden;min-width:0}
/* Край фото: 1px внутрь цветом photo-edge поверх снимка. Снежное фото не сливается с настом карточки, тёмное — с ночью.
   В карточках рисуется слоем над медиа (img в них масштабируется при наведении), у отдельных фото — outline внутрь. */
.kh-instructor__media::after,.kh-article__media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--photo-edge);pointer-events:none}
.kh-avatar img{outline:1px solid var(--photo-edge);outline-offset:-1px;border-radius:inherit}

/* InstructorCard
   Главное в карточке фото, под ним имя, строка «от … ₽/ч · склоны», факты или первая фраза «О себе» и ближайшая дата.
   Кнопки нет: ссылка одна, на имени, и её ::after растянут на всю карточку. Фокус рисуется кольцом на карточке. */
.kh-instructor{position:relative;display:flex;flex-direction:column}
.kh-instructor__media{position:relative;aspect-ratio:var(--ratio-card);border-radius:calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;background:var(--snow-sunken);color:var(--night-muted);display:flex;align-items:center;justify-content:center;font:var(--type-note);font-weight:500;overflow:hidden}
.kh-instructor__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.kh-instructor__body{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3) var(--space-4) var(--space-4);min-width:0;flex:1}
.kh-instructor__name{font:var(--type-h3);letter-spacing:var(--type-h3-ls);color:var(--night);text-wrap:pretty}
.kh-instructor__name a{color:inherit;text-decoration:none}
.kh-instructor__name a::after{content:"";position:absolute;inset:0;z-index:1}      /* вся карточка — эта ссылка */
.kh-instructor:has(.kh-instructor__name a:focus-visible){box-shadow:0 0 0 2px var(--snow),0 0 0 4px var(--focus)}
@supports selector(:has(*)){.kh-instructor__name a:focus-visible{box-shadow:none}}   /* без :has кольцо остаётся у имени */
@media (forced-colors:active){.kh-instructor:has(.kh-instructor__name a:focus-visible){outline:2px solid;outline-offset:2px}}
@media (hover:hover){
  .kh-instructor:hover .kh-instructor__name a{color:var(--aurora-strong)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .kh-instructor__media img{transition:transform .4s cubic-bezier(.2,.8,.3,1)}
  .kh-instructor:hover .kh-instructor__media img{transform:scale(1.03)}
}
.kh-instructor__line{margin:0;font:var(--type-note);color:var(--night-muted)}
/* «от 3 500 ₽/ч · Вудъявр». Склоны одним блоком: не влезли рядом с ценой — переходят на следующую строку целиком
   и делятся ровно, а не рвут перечень после первого имени. Точка-разделитель стоит в отступе перед склонами;
   строка сдвинута влево на ширину этого отступа и обрезана по левому краю текста, так что у склонов, начавших строку,
   точка уходит за край: ни «·» в конце строки, ни «·» в её начале. */
.kh-instructor__line{margin-left:calc(-1 * var(--space-3));clip-path:inset(-1em -1em -1em var(--space-3))}
.kh-instructor__price{margin-left:var(--space-3)}
.kh-instructor__places{position:relative;display:inline-block;margin-left:var(--space-3);text-wrap:balance}
.kh-instructor__places::before{content:"·" / "";position:absolute;right:100%;width:calc(var(--space-3) + .25em);text-align:center}   /* отступ и пробел после цены */
.kh-instructor__price{font:var(--type-h4);color:var(--night);font-variant-numeric:tabular-nums;white-space:nowrap}
.kh-instructor__facts{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);font:var(--type-note);color:var(--night-muted);font-variant-numeric:tabular-nums}
.kh-instructor__sport{color:var(--night);font-weight:500}   /* вид спорта словом, а не тегом: читается первым в строке фактов */
.kh-instructor__quote{margin:0;font:var(--type-note);color:var(--night-muted);text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Ближайшая дата текстом под фактами, а не плашкой на лице. В сетке прижата к низу: даты в ряду карточек на одной линии */
.kh-instructor__near{margin:auto 0 0;padding-top:var(--space-1);font:var(--type-note);font-weight:600;color:var(--ok)}
.kh-instructor__near--few{color:var(--warn)}
/* В сетке на телефоне карточка идёт строкой: фото 4:5 на 40 % ширины слева, текст справа */
@media (max-width:639px){
  .kh-grid .kh-instructor{flex-direction:row}
  .kh-grid .kh-instructor__media{flex:0 0 40%;align-self:flex-start;border-radius:calc(var(--radius-lg) - 1px) 0 0 calc(var(--radius-lg) - 1px)}
  .kh-grid .kh-instructor__body{padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4)}
  .kh-grid .kh-instructor__near{margin-top:0}
  .kh-grid .kh-instructor__places{display:block}     /* склоны всегда под ценой: в узкой колонке рядом не влезают */
}

/* LessonCard */
.kh-lesson{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4)}
.kh-lesson__head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1)}
/* Уровень и тип занятия одной строкой обычным регистром: «Начинающий · Групповое занятие» */
.kh-lesson__sub{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);margin:0}
.kh-lesson__kind{font:var(--type-note);color:var(--night-muted)}
.kh-lesson__kind::before{content:"·";content:"·" / "";margin-right:var(--space-2)}   /* пустой alt: скринридер точку не читает */
.kh-lesson__title{font:var(--type-h3);letter-spacing:var(--type-h3-ls);color:var(--night);text-wrap:pretty}
.kh-lesson__title a{color:inherit;text-decoration:none}
.kh-lesson__title a:hover{color:var(--aurora-strong)}
.kh-lesson__when{display:flex;gap:var(--space-2) var(--space-4);flex-wrap:wrap;margin:0;padding:0;list-style:none;font:var(--type-note);font-weight:500;color:var(--night)}
.kh-lesson__when li{display:inline-flex;align-items:center;gap:var(--space-1)}
.kh-lesson__when svg{width:16px;height:16px;color:var(--night-muted);flex:none}
.kh-seats{display:flex;flex-direction:column;gap:var(--space-1);font:var(--type-note);font-weight:500;color:var(--night-muted)}
/* Полоса мест нейтральная (night-muted): зелёный рядом — табличка «Начинающий», «есть места» им не красим. Цвет только у «мало мест» (dawn). */
.kh-seats__bar{appearance:none;-webkit-appearance:none;display:block;width:100%;height:6px;border:0;border-radius:var(--radius-pill);background:var(--snow-sunken);overflow:hidden;color:var(--night-muted)}
.kh-seats__bar::-webkit-progress-bar{background:var(--snow-sunken);border-radius:var(--radius-pill)}
.kh-seats__bar::-webkit-progress-value{background:var(--night-muted);border-radius:var(--radius-pill)}
.kh-seats__bar::-moz-progress-bar{background:var(--night-muted);border-radius:var(--radius-pill)}
.kh-seats--few{color:var(--warn)}
.kh-seats--few .kh-seats__bar::-webkit-progress-value{background:var(--dawn)}
.kh-seats--few .kh-seats__bar::-moz-progress-bar{background:var(--dawn)}
.kh-seats--full{color:var(--night-muted)}       /* «Мест нет» — текст: --night-faint только для неактивного, полоса ниже */
.kh-seats--full .kh-seats__bar::-webkit-progress-value{background:var(--night-faint)}
.kh-seats--full .kh-seats__bar::-moz-progress-bar{background:var(--night-faint)}
/* Подвал прижат к низу карточки: в сетке фото и цены соседних карточек на одной линии, даже если название в две строки */
.kh-lesson__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--line)}
.kh-lesson__by{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--touch-min);font:var(--type-note);font-weight:500;color:var(--night);text-decoration:none;min-width:0}
.kh-lesson__by:hover{color:var(--aurora-strong)}

/* ReviewCard */
.kh-review{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);background:var(--snow-raised);border:1px solid transparent;border-radius:var(--radius-md);min-width:0}
.kh-review__head{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.kh-review__who{display:flex;flex-direction:column;min-width:0}
.kh-review__name{font:var(--type-body-strong);color:var(--night)}
.kh-review__meta{font:var(--type-note);color:var(--night-muted)}
.kh-review__head .kh-stars{margin-left:auto}
.kh-review__text{margin:0;font:var(--type-body);color:var(--night)}
.kh-review__lesson{align-self:flex-start}
.kh-review__reply{margin:0;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--snow-sunken);color:var(--night-muted);font:var(--type-note)}
.kh-review__reply b{color:var(--night);font-weight:600}

/* ---------- DateStrip ----------
   Лента прокручивается; поле под кольцо фокуса даёт padding, компенсированный отрицательным margin.
   У всех горизонтальных лент overscroll-behavior-x:contain: свайп у края не уводит браузер «назад». */
.kh-dates{display:flex;gap:var(--space-2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:var(--space-1);margin:0 calc(-1 * var(--space-1));scrollbar-width:thin;list-style:none}
.kh-dates li{flex:none;scroll-snap-align:start}
.kh-date{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:72px;min-height:72px;padding:var(--space-2) var(--space-1);border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--snow-raised);color:var(--night);text-decoration:none;transition:border-color .15s ease-out}
.kh-date:hover{border-color:var(--line-strong);color:var(--night)}
.kh-date__dow{font:var(--type-note);font-weight:500;color:var(--night-muted)}
.kh-date__num{font:var(--type-h3);font-variant-numeric:tabular-nums}
.kh-date__state{font:var(--type-note);font-weight:500;color:var(--night-muted)}
.kh-date--free .kh-date__state{color:var(--ok)}
.kh-date--few .kh-date__state{color:var(--warn)}
.kh-date--ask{border-style:dashed}
.kh-date--full{background:var(--snow);color:var(--night-faint);cursor:default}
.kh-date--full .kh-date__num,.kh-date--full .kh-date__dow,.kh-date--full .kh-date__state{color:var(--night-faint)}
.kh-date--today .kh-date__dow{color:var(--night);font-weight:600}   /* «сегодня» — жирным night без цвета: dawn значит «мало мест», aurora — действие */
.kh-date[aria-current="date"],.kh-date.is-selected{background:var(--current);color:var(--on-current);border-color:var(--current-edge);outline:1px solid var(--current-edge);outline-offset:-2px}
.kh-date[aria-current="date"] .kh-date__dow,.kh-date[aria-current="date"] .kh-date__num,.kh-date[aria-current="date"] .kh-date__state,.kh-date.is-selected .kh-date__dow,.kh-date.is-selected .kh-date__num,.kh-date.is-selected .kh-date__state{color:inherit}

/* ---------- Field ---------- */
.kh-field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.kh-field__label{font:var(--type-body);font-weight:500;color:var(--night)}
.kh-field__label small{color:var(--night-muted);font-weight:400;font-size:var(--type-note-size)}
.kh-input,.kh-select,.kh-textarea{width:100%;min-height:var(--touch-min);padding:10px var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--snow-raised);color:var(--night);font:var(--type-body);transition:border-color .15s ease-out}
.kh-textarea{min-height:96px;resize:vertical}
.kh-input::placeholder,.kh-textarea::placeholder{color:var(--night-muted)}
.kh-input:hover,.kh-select:hover,.kh-textarea:hover{border-color:var(--night-muted)}
.kh-input[disabled],.kh-select[disabled],.kh-textarea[disabled],.kh-input[readonly]{background:var(--snow-sunken);color:var(--night-muted);cursor:not-allowed}
.kh-select-wrap{position:relative}
.kh-select{appearance:none;-webkit-appearance:none;padding-right:40px}
.kh-select-wrap::after{content:"";position:absolute;right:var(--space-4);top:50%;width:8px;height:8px;border-right:2px solid var(--night-muted);border-bottom:2px solid var(--night-muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.kh-field__hint{font:var(--type-note);color:var(--night-muted)}
.kh-field--error .kh-input,.kh-field--error .kh-select,.kh-field--error .kh-textarea,.kh-field--error .kh-check__box{border-color:var(--danger)}
.kh-field__error{font:var(--type-note);font-weight:500;color:var(--danger)}
/* Радио-плитки: сам input растянут по плитке и невидим, плитка и есть цель касания; выбранная выглядит как активный чип */
.kh-choice{display:flex;gap:var(--space-2);flex-wrap:wrap}
.kh-choice label{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);min-height:40px;padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--snow-raised);cursor:pointer;transition:border-color .15s ease-out,background-color .15s ease-out}
.kh-choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.kh-choice label:hover{border-color:var(--line-strong)}
.kh-choice label:has(input:checked){background:var(--current);color:var(--on-current);border-color:var(--current-edge);outline:1px solid var(--current-edge);outline-offset:-2px}
.kh-choice label:has(input:checked) .kh-level{color:inherit}
.kh-choice label:has(input:focus-visible){box-shadow:0 0 0 2px var(--snow),0 0 0 4px var(--focus)}
/* Чекбокс согласия: input невидим поверх всей строки, рисуется квадрат kh-check__box */
.kh-check{position:relative;display:flex;gap:var(--space-3);align-items:flex-start;font:var(--type-note);color:var(--night);cursor:pointer}
.kh-check input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.kh-check__box{flex:none;width:22px;height:22px;margin-top:-1px;border:1px solid var(--line-strong);border-radius:var(--radius-xs);background:var(--snow-raised);transition:background-color .15s ease-out,border-color .15s ease-out}
/* Галочка — маска, закрашенная --on-aurora: белая в светлой теме, тёмная в тёмной (белая на светлой ночной aurora давала 1,91:1) */
.kh-check__box::after{content:"";display:block;width:100%;height:100%;opacity:0;background:var(--on-aurora);-webkit-mask:var(--check-mask) center/16px no-repeat;mask:var(--check-mask) center/16px no-repeat;--check-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.kh-check:has(input:checked) .kh-check__box{background:var(--aurora);border-color:var(--aurora)}
.kh-check:has(input:checked) .kh-check__box::after{opacity:1}
@media (forced-colors:active){.kh-check__box::after{background:CanvasText}}
.kh-check:has(input:focus-visible) .kh-check__box{box-shadow:0 0 0 2px var(--snow),0 0 0 4px var(--focus)}
.kh-check a{position:relative;z-index:1}

/* ---------- Steps ---------- */
.kh-steps{display:grid;gap:var(--space-4);margin:0;padding:0;list-style:none;counter-reset:kh-step}
@media (min-width:640px){.kh-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kh-step{display:flex;gap:var(--space-3);counter-increment:kh-step;min-width:0}
.kh-step::before{content:counter(kh-step);flex:none;width:32px;height:32px;border-radius:50%;background:var(--current);box-shadow:inset 0 0 0 2px var(--current-edge);color:var(--on-current);font:600 var(--type-h4-size)/32px var(--font-display);font-variant-numeric:tabular-nums;text-align:center}
.kh-step h3{margin:0 0 2px;font:var(--type-h4);color:var(--night)}
.kh-step p{margin:0;font:var(--type-note);color:var(--night-muted)}

/* ---------- Notice ---------- */
.kh-notice{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);border:1px solid transparent;background:var(--snow-raised);color:var(--night);font:var(--type-note);min-width:0}
.kh-notice svg{width:20px;height:20px;flex:none;color:var(--night-muted)}
.kh-notice p{margin:0}
.kh-notice__label{display:block;font-weight:600}
.kh-notice--ok{background:var(--ok-soft);border-color:transparent}
.kh-notice--ok svg,.kh-notice--ok .kh-notice__label{color:var(--ok)}
.kh-notice--warn{background:var(--warn-soft);border-color:transparent}
.kh-notice--warn svg,.kh-notice--warn .kh-notice__label{color:var(--warn)}
.kh-notice--danger{background:var(--danger-soft);border-color:transparent}
.kh-notice--danger svg,.kh-notice--danger .kh-notice__label{color:var(--danger)}
/* Ссылки в красной плашке (список ошибок формы) цветом текста с подчёркиванием */
.kh-notice--danger a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.kh-notice--danger a:hover{color:var(--danger)}

/* ---------- Breadcrumbs ---------- */
.kh-crumbs{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0;padding:0;list-style:none;font:var(--type-note);color:var(--night-muted)}
.kh-crumbs li{display:inline-flex;align-items:center;gap:var(--space-1)}
.kh-crumbs li+li::before{content:"/";color:var(--line-strong)}
.kh-crumbs a{color:var(--night-muted);text-decoration:none}
.kh-crumbs a:hover{color:var(--night);text-decoration:underline}
.kh-crumbs [aria-current="page"]{color:var(--night);display:inline-block;max-width:min(60vw,520px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}

/* ---------- PageHeading ---------- */
.kh-heading{display:flex;flex-direction:column;gap:var(--space-2);max-width:var(--content-max);min-width:0}
.kh-heading__title{font:var(--type-h1);letter-spacing:var(--type-h1-ls);color:var(--night);text-wrap:balance}
/* Один крупный голос на странице (display): имя на анкете целиком, в h1 каталога первое слово отдельной строкой —
   остальная часть h1 («по лыжам и сноуборду в Кировске и Хибинах») нужна поиску и идёт кеглем h1 под ним */
.kh-heading__title--display,.kh-heading__lead{font:var(--type-display);letter-spacing:var(--type-display-ls)}
.kh-heading__lead{display:block;margin-bottom:var(--space-2)}
.kh-heading__tail{font-weight:600;color:var(--night-muted)}   /* второй голос тише: тот же кегль h1, вес 600, приглушённый цвет */
/* Имя вводится в боте свободным текстом: слово из 15+ букв при 40px шире телефона (358px). Шаблон помечает имя
   со словом от 14 букв (--long, с запасом на широкие Ж, Ш, Щ), и кегль ограничен шириной колонки: 8cqi — слово в 20 букв (~12,5em) целиком в строке, на телефоне ~28px,
   на десктопе display как есть. Переносов по слогам в имени нет; что длиннее, рвёт overflow-wrap — скролла нет */
.kh-heading__title--display{overflow-wrap:anywhere}
.kh-heading:has(.kh-heading__title--long){container-type:inline-size}
.kh-heading__title--long{font-size:min(var(--type-display-size),8cqi)}
.kh-heading:has(.kh-heading__title--display,.kh-heading__lead){gap:var(--space-3)}
.kh-heading__lede{margin:0;font:var(--type-lede);color:var(--night-muted)}
.kh-heading__facts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin:var(--space-1) 0 0;padding:0;list-style:none;font:var(--type-note);font-weight:500;color:var(--night)}
.kh-heading__facts li{display:inline-flex;align-items:center;gap:var(--space-1)}
.kh-heading__facts svg{width:16px;height:16px;color:var(--night-muted);flex:none}

/* ---------- Disclosure (<details>): FAQ, оглавление, источники ----------
   Один шеврон на все раскрывашки: summary с классом kh-summary или внутри .kh-faq. */
.kh-faq{display:flex;flex-direction:column;border-top:1px solid var(--line);max-width:var(--content-max)}
.kh-faq details{border-bottom:1px solid var(--line)}
.kh-faq summary,.kh-summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);min-height:var(--touch-min);cursor:pointer;list-style:none;color:var(--night)}
.kh-faq summary{padding:var(--space-4) 0;font:var(--type-h4)}
.kh-faq summary::-webkit-details-marker,.kh-summary::-webkit-details-marker{display:none}
.kh-faq summary:hover,.kh-summary:hover{color:var(--aurora-strong)}
.kh-faq summary::after,.kh-summary::after{content:"";flex:none;width:10px;height:10px;margin-right:var(--space-1);border-right:2px solid var(--night-muted);border-bottom:2px solid var(--night-muted);transform:rotate(45deg);transition:transform .15s ease-out}
.kh-faq details[open] summary::after,details[open]>.kh-summary::after{transform:rotate(-135deg)}
.kh-faq__body{margin:0;padding:0 0 var(--space-4);font:var(--type-body);color:var(--night-muted)}
.kh-faq__body a{color:var(--link)}

/* ---------- CtaBar (липкая панель) ---------- */
.kh-ctabar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--ctabar-h);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));background:var(--snow-raised);box-shadow:var(--shadow-bar)}   /* парит над страницей: тень без линии */
.kh-ctabar__info{display:flex;flex-direction:column;min-width:0}
.kh-ctabar__note{font:var(--type-note);color:var(--night-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ======================= Блог «Гид» ======================= */

/* ArticleCard */
.kh-article{display:flex;flex-direction:column}
.kh-article__media{position:relative;aspect-ratio:var(--ratio-hero);border-radius:calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;overflow:hidden;background:var(--snow-sunken);color:var(--night-muted);display:flex;align-items:center;justify-content:center;font:var(--type-note);font-weight:500}
.kh-article__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kh-article__body{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-4) var(--space-4);flex:1;min-width:0}
.kh-article__title{font:var(--type-h3);letter-spacing:var(--type-h3-ls);color:var(--night);text-wrap:pretty}
.kh-article__title a{color:inherit;text-decoration:none}
.kh-article__title a:hover{color:var(--aurora-strong)}
.kh-article__lead{margin:0;font:var(--type-note);color:var(--night-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kh-article__tags{display:flex;gap:var(--space-1);flex-wrap:wrap}
.kh-article__meta{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin-top:auto;padding-top:var(--space-1);font:var(--type-note);color:var(--night-muted)}

.kh-article--text .kh-article__body{padding-top:var(--space-4)}

/* ArticleHeader + Byline */
.kh-arthead{display:flex;flex-direction:column;gap:var(--space-3);max-width:var(--content-max);min-width:0}
.kh-arthead__title{font:var(--type-h1);letter-spacing:var(--type-h1-ls);color:var(--night);text-wrap:balance}
.kh-arthead__lede{margin:0;font:var(--type-lede);color:var(--night-muted)}
.kh-arthead__for{display:flex;gap:var(--space-1);flex-wrap:wrap;align-items:center;font:var(--type-note);color:var(--night-muted)}
.kh-byline{display:flex;align-items:center;gap:var(--space-1) var(--space-2);flex-wrap:wrap;font:var(--type-note);color:var(--night-muted)}
.kh-byline__who{display:flex;flex-direction:column;min-width:0}
.kh-byline__name{font:var(--type-note);font-weight:600;color:var(--night)}
.kh-byline__name a{color:inherit;text-decoration:none}
.kh-byline__name a:hover{text-decoration:underline}
.kh-byline__sep{color:var(--line-strong)}
.kh-byline time{font-variant-numeric:tabular-nums}

/* Toc: на странице статьи дополняется классом kh-card (радиус) */
.kh-toc{padding:var(--space-3) var(--space-4);border:1px solid transparent;border-radius:var(--radius-sm);background:var(--snow-raised);max-width:var(--content-max)}
.kh-toc__title{margin:0 0 var(--space-2);font:var(--type-note);font-weight:600;color:var(--night-muted)}
.kh-toc ol{margin:0;padding-left:22px;font:var(--type-body);color:var(--night)}
.kh-toc a{color:var(--night);text-decoration:none}
.kh-toc a:hover{color:var(--aurora-strong);text-decoration:underline}

/* FactList */
.kh-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3) var(--space-4);margin:0;padding:var(--space-4);border:1px solid transparent;border-radius:var(--radius-md);background:var(--snow-raised);max-width:var(--content-max)}
.kh-facts > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.kh-facts dt{font:var(--type-note);font-weight:500;color:var(--night-muted)}
.kh-facts dd{margin:0;font:var(--type-h4);color:var(--night);font-variant-numeric:tabular-nums}
.kh-facts dd small{display:block;font:var(--type-note);color:var(--night-muted)}
.kh-facts__updated{grid-column:1/-1;margin:0;font:var(--type-note);color:var(--night-muted)}

/* RouteCard */
.kh-route{display:flex;flex-direction:column;border:1px solid transparent;border-radius:var(--radius-md);background:var(--snow-raised);overflow:hidden;min-width:0}
.kh-route__head{display:flex;justify-content:space-between;gap:var(--space-3);align-items:baseline;flex-wrap:wrap;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line)}
.kh-route__from{font:var(--type-h4);color:var(--night)}
.kh-route__total{font:var(--type-note);color:var(--night-muted)}
.kh-route__legs{margin:0;padding:0;list-style:none}
.kh-route__leg{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:var(--space-3);align-items:start;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line)}
.kh-route__leg:last-child{border-bottom:0}
.kh-route__leg svg{width:20px;height:20px;color:var(--night-muted);margin-top:1px}
.kh-route__how{font:var(--type-body);font-weight:500;color:var(--night)}
.kh-route__note{font:var(--type-note);color:var(--night-muted)}
.kh-route__cost{font:var(--type-body-strong);font-family:var(--font-display);color:var(--night);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.kh-route__cost small{display:block;font:var(--type-note);color:var(--night-muted)}

/* InlineCta: фон через токен cta, в тёмной теме не инверсия, а зелёная подложка */
.kh-inlinecta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;padding:var(--space-4);border-radius:var(--radius-md);background:var(--cta);color:var(--on-cta);max-width:var(--content-max)}
.kh-inlinecta__text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 240px}
.kh-inlinecta__title{font:var(--type-h4);color:var(--on-cta)}
.kh-inlinecta a:not([class]),.kh-inlinecta a:not([class]):hover{color:inherit}   /* --link на тёмном --cta давал 3,28:1; ссылку видно по подчёркиванию */
.kh-inlinecta a:not([class]):hover{text-decoration-thickness:2px}
.kh-inlinecta__note{font:var(--type-note);color:var(--on-cta);opacity:.8}
.kh-inlinecta :focus-visible{box-shadow:0 0 0 2px var(--cta),0 0 0 4px var(--on-cta)}   /* --focus на --cta днём 2,99:1, --on-cta 16:1 */

/* ======================= Общение ======================= */

/* ChatThread */
.kh-chat{display:flex;flex-direction:column;gap:var(--space-3);max-width:var(--content-max);min-width:0}
.kh-chat__head{display:flex;align-items:center;gap:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--line)}
.kh-chat__who{display:flex;flex-direction:column;min-width:0;flex:1}
.kh-chat__name{font:var(--type-h4);color:var(--night)}
.kh-chat__name a{color:inherit;text-decoration:none}
.kh-chat__presence{font:var(--type-note);color:var(--night-muted)}
.kh-chat__presence--online{color:var(--ok);font-weight:500}
.kh-chat__day{align-self:center;padding:2px var(--space-2);border-radius:var(--radius-pill);background:var(--snow-sunken);font:var(--type-note);font-weight:500;color:var(--night-muted)}
.kh-msg{display:flex;flex-direction:column;gap:2px;max-width:85%;align-self:flex-start;align-items:flex-start;min-width:0}
.kh-msg--me{align-self:flex-end;align-items:flex-end}
/* Чужие сообщения на насте (тон, без рамки), свои на aurora-soft: единственная заливка aurora на экране остаётся у кнопки */
.kh-msg__bubble{margin:0;padding:10px var(--space-3);border-radius:var(--radius-md);border:1px solid transparent;background:var(--snow-raised);color:var(--night);font:var(--type-body);white-space:pre-wrap;overflow-wrap:anywhere}
.kh-msg:not(.kh-msg--system) .kh-msg__bubble{border-bottom-left-radius:var(--radius-xs)}
.kh-msg--me .kh-msg__bubble{background:var(--aurora-soft);border-color:var(--aurora-soft);border-bottom-left-radius:var(--radius-md);border-bottom-right-radius:var(--radius-xs)}
.kh-msg__meta{display:inline-flex;align-items:center;gap:var(--space-1);padding:0 var(--space-1);font:var(--type-note);color:var(--night-muted);font-variant-numeric:tabular-nums}
.kh-msg__meta svg{width:14px;height:14px;flex:none}
.kh-msg__status[data-status="failed"]{color:var(--danger)}
.kh-msg--system{align-self:stretch;max-width:none;align-items:center}
.kh-msg--system .kh-msg__bubble{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;justify-content:center;background:transparent;border:1px dashed var(--line-strong);padding:var(--space-2) var(--space-3);font:var(--type-note);color:var(--night-muted);text-align:center}
.kh-msg--system .kh-msg__bubble b{color:var(--night);font-weight:600}

/* ChatComposer */
.kh-composer{display:flex;flex-direction:column;gap:var(--space-2);max-width:var(--content-max);min-width:0}
.kh-composer__quick{display:flex;gap:var(--space-2);overflow-x:auto;overscroll-behavior-x:contain;margin:0 calc(-1 * var(--space-1));padding:var(--space-1);list-style:none;scrollbar-width:thin}
.kh-composer__quick li{flex:none}
.kh-composer__row{display:flex;gap:var(--space-2);align-items:flex-end;padding:var(--space-2);border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--snow-raised);transition:border-color .15s ease-out}
/* Кольцо фокуса у всей строки: у самого поля оно снято, а смены цвета рамки мало (1,99:1 между состояниями) */
.kh-composer__row:focus-within{border-color:var(--night-muted)}
.kh-composer__row:has(.kh-composer__input:focus-visible){box-shadow:0 0 0 2px var(--snow),0 0 0 4px var(--focus)}
.kh-composer__input{flex:1;min-width:0;min-height:40px;max-height:160px;padding:9px var(--space-2);border:0;background:transparent;color:var(--night);font:var(--type-body);resize:none}
.kh-composer__input::placeholder{color:var(--night-muted)}
.kh-composer__input:focus-visible{box-shadow:none}
.kh-composer__send{width:40px;height:40px;min-height:40px;padding:0;flex:none}
.kh-composer__hint{font:var(--type-note);color:var(--night-muted)}

/* TelegramBind */
.kh-bind{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;padding:var(--space-3) var(--space-4);border:1px solid transparent;border-radius:var(--radius-md);background:var(--snow-raised);max-width:var(--content-max)}
.kh-bind svg{width:24px;height:24px;flex:none;color:var(--night-muted)}
.kh-bind__text{flex:1;min-width:200px;display:flex;flex-direction:column}
.kh-bind__title{font:var(--type-body-strong);color:var(--night)}
.kh-bind__note{font:var(--type-note);color:var(--night-muted)}
.kh-bind--done{background:var(--ok-soft);border-color:transparent}
.kh-bind--done svg,.kh-bind--done .kh-bind__title{color:var(--ok)}

/* ---------- Ridge: гребень Хибин ----------
   Профиль хребта одной линией, стилизованно: долина, вогнутый склон с трассами и столовое плато, кар с плоским дном,
   вершина, широкая седловина-перевал (U, а не V: у Хибин троговые долины и перевалы), длинное высокое плато, обрыв
   и уступ к долине. Под шапкой главной и в пустых состояниях.
   Линию рисует маска (SVG в data:, ~0,6 КБ, кэшируется вместе с kh.css), цвет — токен ridge, толщина 1,5px при любом
   размере (non-scaling-stroke). Пропорция 15:1, не ниже 48px: от 720px профиль в натуральную величину. Уже — маска
   не уже 480px (сжатие по ширине не больше 1,5 раза), лишнее кадрируется по краям долин (позиция 55 %): кары и
   перевал остаются широкими, профиль не превращается в кардиограмму. Декоративный элемент: пустой div с aria-hidden. */
.kh-ridge{--ridge-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='96' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0 86l40 -1 44 -3 36 -5 30 -4 26 -1 24 2 22 2 28 -4 30 -8 30 -10 30 -10 28 -8 28 -5 30 -3 32 -2 32 0 26 1 14 3 8 6 6 8 7 8 9 5 12 2 14 0 12 -2 8 -5 6 -8 6 -8 8 -7 12 -5 18 -4 20 -3 18 -2 18 -2 18 1 16 4 12 6 9 8 7 9 8 8 10 6 13 3 14 0 12 -3 9 -6 7 -8 7 -9 10 -9 14 -6 22 -4 32 -2 32 -1 32 1 32 -1 28 1 20 1 14 3 8 7 8 12 8 12 10 7 14 3 18 -1 18 1 16 5 24 7 30 5 36 2 36 3 44 3 40 3 40 2' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");display:block;width:100%;aspect-ratio:15 / 1;min-height:48px;background:var(--ridge);-webkit-mask:var(--ridge-mask) 55% 100% / max(100%, 480px) 100% no-repeat;mask:var(--ridge-mask) 55% 100% / max(100%, 480px) 100% no-repeat}
/* Пустое состояние: короткая линия (360×48) стоит прямо над плашкой по её левому краю — горизонт над текстом, а не
   отдельный орнамент. На 404 плашки нет: так же прямо над заголовком. */
.kh-ridge--small{width:min(100%,360px);aspect-ratio:auto;height:48px}
.kh-ridge--small + .kh-notice{margin-top:calc(var(--space-1) - var(--space-4))}   /* в .site-section зазор 16 — линия ложится на плашку */
.kh-ridge--small + .kh-heading{margin-top:var(--space-1)}

/* ---------- Цели касания на телефоне: не ниже touch-min ---------- */
@media (max-width:639px){
  .kh-btn--sm,.kh-chip,.kh-choice label{min-height:var(--touch-min)}
  .kh-composer__input{min-height:var(--touch-min)}
  .kh-composer__send{width:var(--touch-min);height:var(--touch-min);min-height:var(--touch-min)}
}