/* ============================================================================
   Главная страница. Дизайн-система — tokens.css, каркас — layout.css.
   ========================================================================= */

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section { padding: 82px 0; }
.section-sand   { background: var(--sand); }
.section-meadow { background: var(--meadow); }
.section-milk   { background: var(--milk); }

/* ── Первый экран ── */
.hero { padding: 62px 0 74px; }
.hero-grid {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 54px; align-items: center;
}
.hero h1 { margin: 18px 0 10px; }
.hero .h1-sub { color: var(--ink); display: block; margin-bottom: 22px; }
.hero-lead { font-size: 18px; line-height: 1.62; color: var(--ink-soft); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 26px; }
.hero-stats {
  font-family: var(--mono); font-size: 13.5px; color: var(--ink-soft);
  line-height: 1.7; letter-spacing: .01em;
}
.hero-stats b { color: var(--ink); font-weight: 500; }

/* Иллюстрация первого экрана: рисованный пейзаж, подписи-вопросы стоят
   у тех мест, о которых спрашивают. */
.hero-art { position: relative; }
/* Круг, как было у прежней иллюстрации: кадр 16:10 обрезается по квадрату
   и скругляется до окружности. object-position чуть ниже центра — иначе круг
   срезает закатное небо, которое и есть предмет одной из подписей. */
.hero-art img {
  width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; object-position: 50% 58%;
  display: block; border-radius: 50%;
  box-shadow: var(--sh-md);
  border: 1.5px solid var(--line);
  /* На узком экране .hero-art — грид, и картинка растягивалась по строке:
     растяжение перебивало aspect-ratio, круг превращался в овал. */
  align-self: start; justify-self: center; max-width: 460px;
}
.bubble {
  position: absolute; background: var(--card); border-radius: 14px;
  box-shadow: var(--sh-md); padding: 10px 14px; display: flex; align-items: flex-start; gap: 9px;
  font-family: var(--mono); font-size: 12px; line-height: 1.4; color: var(--ink);
  max-width: 250px;
}
.bubble i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
/* правый берег — снизу справа, закат — у солнца, тень дерева — слева */
.bubble-1 { bottom: 6%;  right: -6%; }
.bubble-2 { top: 26%;    right: -8%; }
.bubble-3 { top: 18%;    left: -8%; }
/* Между 900 и 1200 запаса по сторонам нет — подписи заходят внутрь кадра,
   иначе они вылезают за окно (поймано прогоном tools/check_layout.py). */
@media (max-width: 1200px) {
  .bubble-1 { right: 2%; }
  .bubble-2 { right: 2%; }
  .bubble-3 { left: 2%; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-art { order: -1; max-width: 460px; margin: 0 auto; }
  /* На узком экране подписи выносим под картинку в столбик: поверх неё
     они перекрывали бы и её, и друг друга. */
  .hero-art { display: grid; gap: 10px; }
  .hero-art img { grid-column: 1; }
  .bubble { position: static; max-width: none; }
  .section { padding: 62px 0; }
}
@media (max-width: 560px) {
  .bubble { font-size: 11.5px; max-width: 170px; padding: 7px 10px; }
  .hero-actions .btn { width: 100%; }
}

/* ============================================================================
   Секции ниже первого экрана.
   Якорь: скролл — это шаг по тропе. Поэтому появление у блоков разное,
   каждое работает на смысл своего блока, а не одно на всё.
   ========================================================================= */

.sec-head { max-width: 62ch; margin-bottom: 38px; }
.sec-head .h2 { margin: 12px 0 12px; }

/* ── Три входа: кому это нужно ── */
.tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.track {
  display: block; text-decoration: none; color: inherit; position: relative;
  padding: 26px 24px 24px; border-radius: 22px; background: var(--card);
  border: 1px solid var(--line); overflow: hidden;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
/* Карточка-кнопка: сбрасываем умолчания <button>, вид остаётся карточкой */
.track { font: inherit; text-align: left; width: 100%; cursor: pointer; }
.track:focus-visible { outline: 2px solid var(--tc); outline-offset: 3px; }

.track:hover { text-decoration: none; box-shadow: var(--sh-md); transform: translateY(-3px); }
/* Цветная полоса сверху — свой акцент у каждой аудитории */
.track::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tc);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.track:hover::before, .track.in::before { transform: scaleX(1); }
.track-ico {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--tc-soft); color: var(--tc); margin-bottom: 16px;
}
.track-ico svg { width: 24px; height: 24px; }
.track h3 { font: 500 20px/1.25 var(--disp); margin-bottom: 8px; }
.track p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.track-go {
  margin-top: 16px; font-family: var(--mono); font-size: 13px; color: var(--tc);
  display: inline-flex; align-items: center; gap: 7px;
}
.track-go span { transition: transform .3s var(--ease); }
.track:hover .track-go span { transform: translateX(4px); }

/* ── Проблема и решение (по эталону ТЗ) ── */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:880px){.why-grid{grid-template-columns:1fr}}
.why-card{background:var(--card);border-radius:22px;box-shadow:var(--sh-sm);padding:34px;display:grid;gap:16px;align-content:start}
.why-card.dark{background:var(--ink);color:#fff}
.why-card .k{font:500 12px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
.why-card.dark .k{color:rgba(255,255,255,.55)}
.why-card p{font-size:16.5px;line-height:1.6}
.why-card.dark p{color:rgba(255,255,255,.82)}
.why-list{display:grid;gap:12px;margin-top:4px}
.why-list li{list-style:none;display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:15.5px;line-height:1.5}
.why-list .mk{width:22px;height:22px;border-radius:50%;background:rgba(246,187,46,.25);color:var(--sun);display:grid;place-items:center;margin-top:2px;font:500 12px/1 var(--mono)}
.why-card.dark .why-list .mk{background:rgba(246,187,46,.2)}
.single-claim{margin-top:8px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);font:500 15px/1.55 var(--body)}

/* ── Четыре шага: линия тропы прочерчивается по мере появления ── */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.steps::before {
  content: ''; position: absolute; top: 27px; left: 8%; right: 8%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 15px);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.5s var(--ease);
}
.steps.in::before { transform: scaleX(1); }
.step { text-align: center; }
.step-n {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; background: var(--card);
  border: 2px solid var(--line); font: 500 18px/1 var(--mono); color: var(--ink);
  position: relative; z-index: 1;
  transition: border-color .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
}
.step.in .step-n { border-color: var(--sc); background: var(--sc); color: #fff; }
.step h4 { font: 500 17px/1.3 var(--disp); margin-bottom: 7px; }
.step p { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

/* ── Карточки маршрутов и сюжетов ── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.pcard {
  display: block; text-decoration: none; color: inherit; border-radius: 20px;
  background: var(--card); border: 1px solid var(--line); overflow: hidden;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.pcard:hover { text-decoration: none; box-shadow: var(--sh-md); transform: translateY(-3px); }
/* Проектируемый маршрут: карточка не ссылка, поэтому и не должна вести себя
   как ссылка — ни курсора-руки, ни подъёма при наведении. */
.pcard-soon { cursor: default; }
.pcard-soon:hover { box-shadow: none; transform: none; }

/* Карточка маршрута: обложка, статус, описание и дисциплины — по эталону ТЗ */
.pcard-fig { position: relative; }
.pcard-status {
  position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex;
  align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  background: var(--card); box-shadow: var(--sh-sm);
  font: 500 12.5px/1 var(--mono); color: var(--ink-soft);
}
.pcard-fig img.photo { width: 100%; height: 100%; object-fit: cover; padding: 0; }
.pcard:hover .pcard-fig img.photo { transform: scale(1.03); }
.pcard-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); }
.pcard-place { font: 400 13px/1.4 var(--mono); color: var(--ink-soft); margin-top: 4px; }
.pcard-sum { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin-top: 10px; }
.pcard-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pcard-chips .chip { height: 30px; padding: 0 13px; font-size: 13.5px; }
.pcard-body .pcard-meta {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft);
}
.pcard-fig {
  aspect-ratio: 16 / 10; background: var(--mist); display: grid; place-items: center;
  overflow: hidden; border-bottom: 1px solid var(--line);
}
.pcard-fig img {
  width: 100%; height: 100%; object-fit: contain; padding: 14px;
  transition: transform .5s var(--ease);
}
.pcard:hover .pcard-fig img { transform: scale(1.045); }
.pcard-body { padding: 18px 20px 20px; }
.pcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pcard-tag {
  font-family: var(--mono); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-soft); background: var(--milk);
  border-radius: 999px; padding: 4px 9px;
}
.pcard h4 { font: 500 17px/1.32 var(--disp); }
.pcard-meta { margin-top: 7px; font-size: 13.5px; color: var(--ink-soft); }

.sec-more { margin-top: 28px; display: flex; justify-content: center; }

/* ── Варианты появления ──
   Один и тот же эффект на всех блоках читается как шаблон, поэтому
   вариантов несколько, и каждый выбран под смысл блока. */
.js-reveal .rise  { opacity: 0; transform: translateY(26px); }
.js-reveal .slide-l { opacity: 0; transform: translateX(-24px); }
.js-reveal .slide-r { opacity: 0; transform: translateX(24px); }
.js-reveal .zoom  { opacity: 0; transform: scale(.965); }
.js-reveal .rise, .js-reveal .slide-l, .js-reveal .slide-r, .js-reveal .zoom {
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js-reveal .rise.in, .js-reveal .slide-l.in,
.js-reveal .slide-r.in, .js-reveal .zoom.in { opacity: 1; transform: none; }

/* Каскад: дети выходят по очереди, шаг 70 мс */
.js-reveal .stagger > * { opacity: 0; transform: translateY(22px);
  transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js-reveal .stagger.in > * { opacity: 1; transform: none; }
.js-reveal .stagger.in > *:nth-child(2) { transition-delay: .07s; }
.js-reveal .stagger.in > *:nth-child(3) { transition-delay: .14s; }
.js-reveal .stagger.in > *:nth-child(4) { transition-delay: .21s; }
.js-reveal .stagger.in > *:nth-child(5) { transition-delay: .28s; }
.js-reveal .stagger.in > *:nth-child(6) { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .rise, .js-reveal .slide-l, .js-reveal .slide-r,
  .js-reveal .zoom, .js-reveal .stagger > * { opacity: 1; transform: none; }
  .steps::before { transform: scaleX(1); }
}

@media (max-width: 900px) {
  .tracks { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 30px 18px; }
  .steps::before { display: none; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
}

/* ── Этапы работы на площадке ── */
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stage {
  padding: 24px 22px; border-radius: 18px; background: var(--card);
  border: 1px solid var(--line);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.stage:hover { box-shadow: var(--sh-sm); transform: translateY(-2px); }
.stage-n {
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px; display: block;
}
.stage h4 { font: 500 17px/1.3 var(--disp); margin-bottom: 8px; }
.stage p { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

/* ── Финальный призыв ── */
.cta {
  background: var(--ink); color: var(--paper); border-radius: 28px;
  padding: 52px 48px; display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 40px; align-items: center;
}
.cta h2 { color: var(--paper); margin-bottom: 14px; }
.cta p { color: rgba(251, 248, 241, .8); font-size: 16.5px; line-height: 1.6; max-width: 48ch; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; }
.cta .btn-primary { background: var(--terra); }
.cta .btn-primary:hover { background: var(--terra-600); }
.cta .btn-ghost { color: var(--paper); border-color: rgba(251, 248, 241, .5); }
.cta .btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cta-note {
  margin-top: 14px; font-family: var(--mono); font-size: 12.5px;
  color: rgba(251, 248, 241, .6);
}

@media (max-width: 900px) {
  .stages { grid-template-columns: repeat(2, 1fr); }
  .cta { grid-template-columns: 1fr; padding: 38px 26px; gap: 26px; }
}
@media (max-width: 560px) {
  .stages { grid-template-columns: 1fr; }
  .cta-actions .btn { width: 100%; }
}

/* ── Форма заявки в финальной секции ── */
.cta-form { display: grid; gap: 11px; }
.cta-form .field {
  background: rgba(251, 248, 241, .07); border-color: rgba(251, 248, 241, .28);
  color: var(--paper);
}
.cta-form .field::placeholder { color: rgba(251, 248, 241, .45); }
.cta-form .field:focus { border-color: var(--terra); background: rgba(251, 248, 241, .12); }
.cta-form select.field option { color: var(--ink); }
.cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.cta-consent {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 2px;
  font-size: 13px; line-height: 1.45; color: rgba(251, 248, 241, .72);
}
.cta-consent input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--terra); flex-shrink: 0; }
.cta-consent a { color: rgba(251, 248, 241, .95); text-decoration: underline; }
.cta-msg { margin-top: 10px; font-size: 14px; display: none; }
.cta-msg.show { display: block; }
.cta-msg.ok { color: #9BE0A8; }
.cta-msg.err { color: #FFB4A2; }
/* honeypot: поле видно только ботам */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 560px) { .cta-row { grid-template-columns: 1fr; } }

/* ── Научный гид: блок с живым чатом (по эталону ТЗ) ── */
.asst{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:46px;align-items:center}
@media(max-width:900px){.asst{grid-template-columns:1fr;gap:32px}}
.asst-copy{display:grid;gap:22px;justify-items:start}
.asst-list{display:grid;gap:12px}
.asst-list li{list-style:none;display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:15.5px;line-height:1.5}
.asst-list .mk{width:24px;height:24px;border-radius:50%;background:rgba(46,155,214,.14);color:var(--sky-600);display:grid;place-items:center;font:500 12px/1 var(--mono)}
.chat{background:var(--card);border-radius:24px;box-shadow:var(--sh-md);padding:20px;display:grid;gap:12px;align-content:start}
.chat-head{display:flex;align-items:center;gap:11px;padding-bottom:13px;border-bottom:1px solid var(--milk)}
.bot-ava{width:40px;height:40px;border-radius:12px;background:var(--ink);display:grid;place-items:center;flex:none;color:#fff}
.chat-head .nm{font:600 15px/1.2 var(--body)}
.chat-head .st{font:400 12px/1.3 var(--mono);color:var(--grass-600);display:flex;align-items:center;gap:6px}
.chat-head .st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grass)}
.chat-log{display:grid;gap:12px;min-height:230px;max-height:340px;overflow-y:auto;align-content:start}
.chat-bubble{padding:12px 15px;border-radius:16px;font-size:14.5px;line-height:1.5;max-width:92%;animation:pop .35s var(--ease) both}
.chat-bubble.q{background:var(--ink);color:#fff;justify-self:end;border-bottom-right-radius:5px}
.chat-bubble.a{background:var(--milk);border-bottom-left-radius:5px}
.chat-bubble.err{background:rgba(242,107,87,.12);color:var(--coral-600)}
.chat-bubble a{color:var(--sky-600)}
.typing{display:flex;gap:5px;padding:14px 16px;background:var(--milk);border-radius:16px;border-bottom-left-radius:5px;width:max-content}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-soft);opacity:.4;animation:blink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:.9;transform:translateY(-3px)}}
.chat-suggest{display:flex;gap:8px;flex-wrap:wrap}
.mini{height:31px;padding:0 13px;border-radius:999px;background:rgba(46,155,214,.12);color:var(--sky-600);font:500 13px/31px var(--body);border:none;cursor:pointer;transition:background .2s}
.mini:hover{background:rgba(46,155,214,.22)}
.chat-input{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 16px;border-radius:999px;background:var(--milk)}
.chat-input input{flex:1;border:none;background:none;font:400 14.5px/1 var(--body);color:var(--ink);min-width:0}
.chat-input input:focus{outline:none}
.chat-input .send{width:36px;height:36px;border-radius:50%;background:var(--coral-600);color:#fff;display:grid;place-items:center;flex:none;border:none;cursor:pointer}
.chat-bubble p + p{margin-top:9px}
.chat-src{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font:400 12.5px/1.5 var(--mono);color:var(--ink-soft)}
.chat-src a{color:var(--sky-600)}
.chat-bubble h4{font:600 14.5px/1.35 var(--body);margin:12px 0 6px}
.chat-bubble h4:first-child{margin-top:0}
.chat-bubble ol,.chat-bubble ul{margin:6px 0 6px 18px;display:grid;gap:5px}
.chat-bubble li{line-height:1.5}
.chat-bubble strong{font-weight:600}



/* ── Витрина стенда (по эталону ТЗ) ── */
.stand-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:start}
@media(max-width:900px){.stand-grid{grid-template-columns:1fr;gap:32px}}
.stand{background:var(--card);border-radius:20px;box-shadow:var(--sh-md);padding:26px 28px 24px;display:grid;gap:14px}
.stand .cap{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sky-600)}
.stand h4{font:500 clamp(21px,2.6vw,27px)/1.2 var(--disp)}
.stand p{font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.stand-task{background:var(--milk);border-radius:12px;padding:11px 14px;font-size:14.5px;line-height:1.5}
.stand-task b{display:block;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.stand-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px;font:500 12.5px/1 var(--mono);color:var(--ink-soft)}
.anno{display:grid;gap:16px}
.anno li{list-style:none;display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start}
.anno .n{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:500 13px/1 var(--mono)}
.anno b{font-weight:600;display:block;margin-bottom:2px}
.anno p{font-size:15px;line-height:1.55;color:var(--ink-soft)}
.stand h4 a{color:inherit;text-decoration:none;border-bottom:1.5px solid var(--line);transition:border-color .2s}
.stand h4 a:hover{border-color:var(--ink);text-decoration:none}
.stand img{width:100%;height:auto;display:block;background:var(--mist);border-radius:12px;padding:10px}
.audience-tag{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(233,134,59,.14);
  color:var(--terra-600);font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}


/* ── Поля и выпадающий список конструктора (по эталону ТЗ) ── */
.builder .field{display:grid;gap:8px;min-width:0}
.builder .field .lbl{font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.sel{position:relative}
.sel-btn{appearance:none;width:100%;height:52px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper);padding:0 44px 0 15px;font:500 16px/1 var(--body);color:var(--ink);cursor:pointer;text-align:left;display:flex;align-items:center;transition:border-color .2s,background-color .2s}
.sel-btn:hover{border-color:var(--ink-soft);background-color:var(--card)}
.sel-btn::after{content:"";position:absolute;right:16px;top:50%;width:14px;height:9px;margin-top:-4px;transition:transform .2s var(--ease);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%235B6C75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 7 7.5l6-6'/%3E%3C/svg%3E") no-repeat center}
.sel[data-open="true"] .sel-btn{border-color:var(--accent-600)}
.sel[data-open="true"] .sel-btn::after{transform:rotate(180deg)}
.sel-btn .val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%}
/* Раскрытый список шире поля, но всегда отделён от соседей просветом,
   тенью и рамкой: слипаться с соседней кнопкой он не должен */
/* Панель строго по ширине своего поля: left и right прибиты к краям,
   max-content запрещён. Иначе на ноутбуке список шире колонки
   наезжает на соседнюю кнопку и выглядит с ней слитно.
   Длинные подписи переносятся на вторую строку, а не вылезают. */
.sel-list{position:absolute;z-index:25;top:calc(100% + 10px);left:0;right:0;background:var(--card);border-radius:14px;box-shadow:var(--sh-lg);border:1.5px solid var(--line);padding:6px;max-height:290px;overflow-y:auto;display:none}
.sel[data-open="true"]{z-index:26}
.sel[data-open="true"] .sel-list{display:block}
.sel-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:none;background:none;text-align:left;font:500 15px/1.35 var(--body);color:var(--ink);padding:11px 12px;border-radius:10px;cursor:pointer}
.sel-opt > span:first-child{white-space:normal;overflow-wrap:anywhere}
.sel-opt .hint{flex:none;white-space:nowrap}
.sel-opt:hover,.sel-opt.cursor{background:var(--milk)}
.sel-opt[aria-selected="true"]{color:var(--accent-600)}
.sel-opt[aria-selected="true"]::after{content:"✓";font:500 14px/1 var(--mono)}
.sel-opt[disabled]{color:var(--ink-soft);opacity:.45;cursor:default}
.sel-opt[disabled]:hover{background:none}
.sel-opt .hint{font:400 11.5px/1 var(--mono);color:var(--ink-soft)}
/* Чипы дисциплин и штамп результата */
.chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 15px;border-radius:999px;background:var(--milk);font:500 14.5px/1 var(--body);color:var(--ink);border:none}
.chip .dot{width:9px;height:9px;border-radius:50%;flex:none}
.chip-sky{background:rgba(46,155,214,.12);color:var(--sky-600)}
.chip-grass{background:rgba(78,167,93,.12);color:var(--grass-600)}
.chip-terra{background:rgba(233,134,59,.14);color:var(--terra-600)}
.chip-violet{background:rgba(122,111,224,.12);color:var(--violet-600)}
.chip-teal{background:rgba(35,167,154,.12);color:var(--teal-600)}
.chip-coral{background:rgba(242,107,87,.14);color:var(--coral-600)}
.stamp{font:500 13px/1.4 var(--mono);letter-spacing:.05em;color:var(--ink-soft)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn.sm{height:42px;padding:0 20px;font-size:14.5px}


/* ── Конструктор маршрута ── */
/* Разметка и оформление по эталону ТЗ (nauchnye-tropy-v4): вкладки-пилюли
   в шапке, счётчик банка, поля в четыре колонки, результат — лентой точек
   на пунктирной линии. Цвет акцента задаёт активная вкладка. */
/* ---------- конструктор ---------- */
.builder{background:var(--card);border-radius:26px;box-shadow:var(--sh-md);border-top:5px solid var(--accent)}
.builder-top{padding:26px 30px 0;display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:space-between}
/* Когда полоска вкладок скрыта, счётчик банка остаётся один — он не должен
   висеть у правого края в одиночестве. */
.tabs[hidden]{display:none}
.builder-top:has(.tabs[hidden]){justify-content:flex-start}
.tabs{display:flex;gap:5px;background:var(--milk);padding:5px;border-radius:999px;flex-wrap:wrap}
.tab{border:none;background:none;height:42px;padding:0 20px;border-radius:999px;font:600 15px/1 var(--body);color:var(--ink-soft);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.tab:hover{color:var(--ink)}
.tab.active{background:var(--card);color:var(--accent-600);box-shadow:var(--sh-sm)}
.builder-body{padding:24px 30px 30px;display:grid;gap:22px}
.builder-intro{font-size:16.5px;line-height:1.6;color:var(--ink-soft);max-width:66ch}
/* Колонок ровно столько, сколько влезает: auto-fit вместо фиксированных
   четырёх. При жёстких четырёх колонках длинное название региона распирало
   сетку, и поля вылезали за карточку — медиазапрос на 900px спасал не всегда,
   потому что дело не в ширине окна, а в ширине содержимого. */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px 22px}
@media(max-width:900px){.builder-top,.builder-body{padding-left:20px;padding-right:20px}}
@media(max-width:420px){.fields{grid-template-columns:1fr}}
/* min-width:0 обязателен: без него grid-элемент не даёт себя сжать ниже
   ширины содержимого, и обрезка многоточием не срабатывает. */
.builder .field{min-width:0}
.builder .field .sel,.builder .field .sel-btn{min-width:0;max-width:100%}
.builder-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.builder-note{font:400 13px/1.5 var(--mono);color:var(--ink-soft);max-width:52ch}
.result{border-top:1.5px solid var(--line);background:var(--milk);padding:28px 30px 32px;display:grid;gap:22px;border-radius:0 0 26px 26px}
@media(max-width:900px){.result{padding:24px 20px 28px}}
.res-head{display:flex;gap:20px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.res-title{display:grid;gap:9px}
.res-title h3{font:500 clamp(21px,2.6vw,29px)/1.15 var(--disp)}
.res-meta{display:flex;gap:14px;flex-wrap:wrap;font:500 13px/1 var(--mono);color:var(--ink-soft)}
.res-actions{display:flex;gap:10px;flex-wrap:wrap}
.res-goal{background:rgba(246,187,46,.18);border-radius:14px;padding:14px 16px;font-size:15.5px;line-height:1.55}
.res-goal b{font:500 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:6px}
.points{position:relative;padding-left:44px;display:grid;gap:24px}
.points::before{content:"";position:absolute;left:13px;top:10px;bottom:10px;border-left:2px dashed var(--line)}
.pt{position:relative;display:grid;gap:8px;animation:pop .45s var(--ease) both}
.pt .num{position:absolute;left:-44px;top:1px;width:28px;height:28px;border-radius:50%;color:#fff;font:500 13px/28px var(--mono);text-align:center;box-shadow:0 0 0 3px var(--milk)}
.pt .top{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.pt h5{font:600 18px/1.35 var(--body)}
.pt h5 a{text-decoration:none;border-bottom:1.5px solid var(--line);transition:border-color .2s}
.pt h5 a:hover{border-color:var(--ink)}
.pt .lbl-inline{font:500 11.5px/1 var(--mono);letter-spacing:.05em;color:var(--ink-soft);text-transform:uppercase}
.pt p{font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.pt .task{background:var(--card);border-radius:12px;padding:11px 14px;font-size:14.5px;line-height:1.5}
.res-quiz{background:var(--card);border-radius:16px;padding:20px 22px}
.res-quiz h4{font:600 16px/1.3 var(--body);margin-bottom:12px}
.res-quiz ol{padding-left:20px;display:grid;gap:8px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.res-foot{display:flex;gap:14px;justify-content:space-between;align-items:center;flex-wrap:wrap;font-size:14.5px;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:18px}
.loading{display:flex;align-items:center;gap:12px;font:500 15px/1 var(--body);color:var(--ink-soft);padding:20px 0}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent-600);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.empty{padding:26px 0;font-size:16px;color:var(--ink-soft)}

}

/* Полоса с анимацией: передышка между смысловыми блоками.
   Видео вместо гифки — 3,8 МБ против 30 и мягче по батарее. */
.section-band{padding:8px 0 44px}
.band-fig{margin:0}
.band-video{width:100%;height:auto;display:block;border-radius:20px;
  background:var(--gl);box-shadow:0 18px 44px -28px rgba(34,51,60,.55)}
.band-fig figcaption{max-width:620px;margin:16px auto 0;text-align:center;
  font-size:.95rem;line-height:1.5;color:var(--tm)}
@media (max-width:640px){
  .section-band{padding:4px 0 32px}
  .band-video{border-radius:14px}
  .band-fig figcaption{font-size:.88rem;margin-top:12px}
}