/* Сайт «Ритма»: блоки наполнения поверх site.css — «как это работает» с чатом бота, окно вопросов, строка мелких умений
   под карточками, «посты не теряются». Цвета и шрифты — переменные из site.css. Разметка — site/build.py. */

/* в шапке теперь пять ссылок: на узком экране они не помещаются в капсулу раньше, чем четыре */
@media (max-width: 1060px) { .links { display: none; } }

/* как это работает: слева три шага лесенкой, справа чат с ботом */
.how { padding: var(--gap) 0 0; }
.how .lead { max-width: 30em; margin-top: 18px; font-size: 17.5px; color: var(--mute); }
.how .w { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 60px; align-items: center; }
.steps { margin: 40px 0 0; padding: 0; }
.steps li { display: flex; gap: 20px; max-width: 470px; margin-bottom: 30px; }
.steps li:nth-child(2) { margin-left: 44px; } .steps li:nth-child(3) { margin-left: 88px; }
.steps i { flex: none; width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; font: 600 21px/1 var(--disp); font-style: normal; color: var(--hl); background: rgba(255, 85, 70, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 85, 70, .45); }
.steps li:nth-child(3) i { color: #fff; background: var(--red); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); }
.steps h3 { margin: 3px 0 8px; font: 600 23px/1.1 var(--disp); letter-spacing: -.03em; }
.steps p { font-size: 16.5px; line-height: 1.5; color: var(--mute); }

/* чат с ботом: окно Telegram с сообщением бота (Rich Message) и кнопками под ним */
.chat { position: relative; border-radius: 30px; overflow: hidden; background: #0c0c0e; transform: rotate(1.5deg);
        box-shadow: inset 0 0 0 1px var(--line2), inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 70px -40px #000; }
.chat-top { display: flex; align-items: center; gap: 12px; height: 66px; padding: 0 18px; background: #151417; box-shadow: inset 0 -1px 0 var(--line); }
.chat-top img { width: 40px; height: 40px; border-radius: 50%; }
.chat-top b { display: block; font: 600 16px/1.2 var(--sans); } .chat-top span { display: block; font: 500 13px/1.2 var(--sans); color: var(--dim); }
.chat-top i { position: relative; width: 4px; height: 4px; margin-left: auto; margin-right: 8px; border-radius: 50%; background: var(--mute); box-shadow: 0 -7px var(--mute), 0 7px var(--mute); }
.chat-body { padding: 18px 14px 14px; display: grid; gap: 10px; }
.fwd { justify-self: end; display: grid; justify-items: end; gap: 4px; max-width: 86%; }
.fwd small { margin: 0 6px 2px 0; font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.mine { max-width: 100%; padding: 9px 13px; border-radius: 16px 16px 5px 16px; background: #7a1c20; font: 500 14px/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mine .tm { margin-left: 10px; font-size: 10.5px; color: rgba(255, 255, 255, .6); display: inline-flex; align-items: center; gap: 3px; vertical-align: -1px; } .mine .tm svg { width: 15px; height: 9px; }
.rich { justify-self: start; width: 92%; padding: 13px 14px 12px; border-radius: 16px 16px 16px 5px; background: #1c1b20; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.rich .at { display: inline-block; margin-bottom: 9px; padding: 4px 8px; border-radius: 7px; font-size: 12px; color: #ff7b6c; background: rgba(255, 85, 70, .14); }
.rich b { display: block; font: 600 16px/1.25 var(--sans); }
.tb { margin: 10px 0 9px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line2); }
.tb div { display: grid; grid-template-columns: 124px minmax(0, 1fr); font: 500 13px/1.3 var(--sans); } .tb div + div { box-shadow: inset 0 1px 0 var(--line2); }
.tb span { padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb .mono { font-size: 12px; color: var(--mute); box-shadow: inset -1px 0 0 var(--line2); }
.rich p { font: 500 13px/1.3 var(--sans); color: var(--mute); }
.rkb { width: 92%; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: -5px; }
.rkb span { display: grid; place-items: center; height: 40px; border-radius: 8px; font: 600 13.5px var(--sans); background: #2a2930; } .rkb .r { background: var(--red); } .rkb .wide { grid-column: span 2; border-radius: 8px 8px 14px 14px; }
.chat-in { display: flex; align-items: center; gap: 8px; padding: 10px 12px 14px; background: #151417; box-shadow: inset 0 1px 0 var(--line); }
.chat-in .menu { height: 36px; padding: 0 14px; border-radius: 18px; display: inline-flex; align-items: center; font: 600 13.5px var(--sans); background: var(--red); }
.chat-in .inp { flex: 1; height: 36px; padding: 0 14px; border-radius: 18px; display: flex; align-items: center; font: 500 14px var(--sans); color: var(--dim); background: #0c0c0e; box-shadow: inset 0 0 0 1px var(--line); }

/* вопросы: окно чата с ботом. Вопросы — кнопками внизу (как клавиатура бота), ответ — карточкой бота: плашка с именем,
   жирный заголовок, строки таблицей. Со скриптом (.js) видна выбранная пара, остальные открываются по нажатию;
   без скрипта все пары идут подряд, кнопки — якоря к ним. */
.qa { position: relative; border-radius: 30px; overflow: hidden; background: #0c0c0e; box-shadow: inset 0 0 0 1px var(--line2), inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 70px -40px #000; }
.qa-log { position: relative; display: grid; align-content: start; gap: 12px; padding: 18px 14px; scroll-behavior: smooth; scrollbar-width: none; } .qa-log::-webkit-scrollbar { display: none; }
.js .qa-log { height: 400px; overflow-y: auto; }
.pair { display: grid; gap: 10px; scroll-margin-top: 100px; } .js .pair { display: none; } .js .pair.on { display: grid; }
.pair .mine { justify-self: end; max-width: 88%; white-space: normal; }
.pair .rich, .pair .wait { grid-area: 2 / 1; } .qa .rich { width: 94%; } .qa .rich.hello { width: auto; justify-self: start; max-width: 94%; }
.qa .rich p { font-size: 13.5px; line-height: 1.4; } .qa .rich p a { color: var(--hl); text-decoration: underline; text-underline-offset: 3px; } .qa .rich b + p { margin-top: 6px; } .qa .tb + p { margin-top: 0; } .qa .tb:last-child { margin-bottom: 2px; }
.tb.kv div { grid-template-columns: 128px minmax(0, 1fr); } .tb.kv span { white-space: normal; } .tb.kv span:first-child { font-weight: 600; color: #fff; box-shadow: inset -1px 0 0 var(--line2); } .tb.kv span + span { color: var(--mute); }
.wait { display: none; align-self: start; justify-self: start; align-items: center; gap: 5px; height: 38px; padding: 0 15px; border-radius: 16px 16px 16px 5px; background: #1c1b20; pointer-events: none; }
.wait u { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .7); }
.qa-kb { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 10px 12px; background: #151417; box-shadow: inset 0 1px 0 var(--line); }
.qa-kb a { display: grid; place-items: center; height: 44px; padding: 0 8px; border-radius: 10px; font: 600 14px var(--sans); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255, 255, 255, .9); background: #2a2930; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); transition: background .18s, transform .12s, color .18s; cursor: pointer; }
.qa-kb a:hover { background: #35333c; } .qa-kb a:active { transform: scale(.97); }
.js .qa-kb a.on { color: #fff; background: var(--red); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
/* ответ на нажатие: вопрос улетает справа, бот «печатает», потом карточка (класс .say ставит site.js) */
@keyframes qa-ask { from { opacity: 0; transform: translate3d(30px, 8px, 0) scale(.92); } }
@keyframes qa-wait { 0% { opacity: 0; transform: translate3d(0, 6px, 0) scale(.9); } 22%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes qa-dot { 0%, 100% { transform: none; opacity: .5; } 40% { transform: translate3d(0, -4px, 0); opacity: 1; } }
@keyframes qa-say { from { opacity: 0; transform: translate3d(-8px, 12px, 0) scale(.95); } }
@keyframes qa-row { from { opacity: 0; transform: translate3d(-10px, 0, 0); } }
.mo .pair.say .mine { animation: qa-ask .42s cubic-bezier(.3, 1.4, .5, 1) backwards; transform-origin: 100% 100%; }
.mo .pair.say .wait { display: flex; animation: qa-wait .78s ease .28s both; } .mo .pair.say .wait u { animation: qa-dot .6s ease infinite; } .mo .pair.say .wait u:nth-child(2) { animation-delay: .1s; } .mo .pair.say .wait u:nth-child(3) { animation-delay: .2s; }
.mo .pair.say .rich { animation: qa-say .5s cubic-bezier(.3, 1.4, .5, 1) 1s backwards; transform-origin: 0 100%; }
.mo .pair.say .tb div { animation: qa-row .4s cubic-bezier(.2, .7, .2, 1) backwards; } .mo .pair.say .tb div:nth-child(1) { animation-delay: 1.2s; } .mo .pair.say .tb div:nth-child(2) { animation-delay: 1.3s; } .mo .pair.say .tb div:nth-child(3) { animation-delay: 1.4s; }

/* «что умеет» без карточки «календарь» (ей отведён свой разворот): «поток» во всю ширину — слова слева, картинка справа;
   под ним три карточки в ряд, внизу «команда» во всю ширину. Ниже 1080 работают общие правила site.css */
@media (min-width: 1081px) {
  .fc.a { grid-column: span 12; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.5fr); column-gap: 56px; align-items: center; padding: 36px 36px 36px 30px; }
  .fc.a h3 { align-self: end; } .fc.a > p { align-self: start; } .fc.a .art { grid-column: 2; grid-row: 1 / 3; margin: 0; padding: 0; }
}

/* мелкие умения под карточками — одной строкой через точку, без плашек */
.also { max-width: 900px; margin-top: 40px; font: 500 16.5px/1.7 var(--sans); color: var(--mute); }
.also small { margin-right: 14px; font: 600 12.5px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--hl); }
.also span { display: inline-block; white-space: nowrap; } .also span:not(:last-child)::after { content: '·'; margin: 0 9px; color: var(--dim); }

/* посты не теряются: четыре строки с линиями — знак, утверждение, пояснение (тот же строй, что у таблицы сравнения и указателя в подвале) */
.safe { padding: var(--gap) 0 0; }
.quad { border-top: 1px solid var(--line2); }
.quad article { display: grid; grid-template-columns: 34px minmax(0, 380px) minmax(0, 1fr); align-items: center; column-gap: 26px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.sg { color: var(--hl); } .sg svg { width: 34px; height: 34px; }
.quad b { font: 600 23px/1.15 var(--disp); letter-spacing: -.03em; }
.quad p { max-width: 33em; font-size: 16.5px; line-height: 1.5; color: var(--mute); }

@media (max-width: 1080px) {
  .how .w { grid-template-columns: minmax(0, 1fr) 380px; gap: 34px; }
  .steps li:nth-child(2) { margin-left: 22px; } .steps li:nth-child(3) { margin-left: 44px; }
  .quad article { grid-template-columns: 34px minmax(0, 300px) minmax(0, 1fr); column-gap: 22px; }
}
@media (max-width: 900px) {
  .how .w { grid-template-columns: 1fr; gap: 44px; }
  .chat { max-width: 440px; justify-self: center; width: 100%; } .qa { max-width: 500px; width: 100%; }
  /* окно вопросов на телефоне не прокручивается внутри себя (палец не застревает в нём посреди страницы): виден один ответ — выбранный;
     все ответы лежат в одной ячейке сетки, поэтому высота окна равна самому длинному и кнопки под пальцем не прыгают */
  .js .qa-log { height: auto; overflow: visible; }
  .js .pair, .js .pair.on { display: grid; grid-area: 2 / 1; align-content: start; visibility: hidden; } .js .pair.on:not(.old) { visibility: visible; }
  .quad article { grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-items: start; padding: 22px 0; } .quad p { grid-column: 2; } .sg svg { width: 28px; height: 28px; } .quad b { font-size: 20px; }
}
@media (max-width: 620px) {
  .steps { margin-top: 30px; } .steps li, .steps li:nth-child(n) { margin-left: 0; gap: 15px; margin-bottom: 24px; }
  .steps i { width: 44px; height: 44px; border-radius: 14px; font-size: 18px; } .steps h3 { font-size: 20px; } .steps p { font-size: 16px; }
  .chat { transform: none; border-radius: 26px; } .qa { border-radius: 26px; } .qa-kb a { height: 42px; font-size: 13.5px; } .tb.kv div { grid-template-columns: 112px minmax(0, 1fr); } .mine .tm { display: none; } .tb div { grid-template-columns: 116px minmax(0, 1fr); } .tb .mono { font-size: 11px; }
  .also { margin-top: 30px; font-size: 15.5px; } .also small { display: block; margin-bottom: 6px; }
}