/* Страница «Вместе» практикума 7.0. Собрано из прототипа (репозиторий telozames,
   content/praktikum-7/vmeste-stranica/7-*.html): основа визуала 7.0, Golos, один синий,
   фон — «небо» сайта практикума. */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/GolosText-400.woff2) format('woff2')}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/GolosText-500.woff2) format('woff2')}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/GolosText-600.woff2) format('woff2')}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/GolosText-700.woff2) format('woff2')}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/GolosText-800.woff2) format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Caveat-500-cyr.woff2) format('woff2')}

:root{
  --blue:#1C64F0; --blue-deep:#1552C9; --ink:#141414; --ink-soft:#4E4E4C; --ink-faint:#8A8A87;
  --rule:rgba(20,20,20,.14); --paper:#FFFFFF; --slivki:#F6F3EE; --slivki-2:#FBFAF7; --goluboy:#E6EDFB;
  --f:"Golos Text","Helvetica Neue",Arial,sans-serif; --ruka:"Caveat",cursive;
}
.p7-vmeste{display:inline-block; font-family:var(--f); font-weight:600; text-transform:uppercase; letter-spacing:.12em;
  background:var(--blue); color:#fff; border-radius:999px; padding:.45em .9em .38em; line-height:1; vertical-align:middle}

/* ── общее (7-vmeste.css) ── */
/* Страница «Вместе», чистовой вариант 7 (Катя 9.11: «нормальные дизайнерские пропорции»).
   Общее для трёх экранов: страница, вход, «нет в чате». Подключать после fonts.css
   и praktikum7.css (цвета и шрифты основы визуала 7.0).

   Система, по которой собрано:
   - ширина контента 1120 px, поля 20 / 32 / 40 px (телефон / планшет / ноутбук);
   - шаг отступов 8 px: 8, 12, 16, 24, 32, 48, 56, 88;
   - шрифт Golos; кегли 12 (подписи капсом), 14 (служебное), 16 (текст), 18 (названия
     встреч), 24 / 30 (разделы), 32 / 44 (главный заголовок); строка текста 1,55;
   - формы: кнопки — таблетки, карточки и фото — скругление 16, вырезки — бумага 2;
   - один синий #1C64F0; фон — «небо» сайта практикума (7-nebo.js). */

:root{--gut:20px; --max:1120px; --r:16px; --top:56px}
@media (min-width:768px){:root{--gut:32px; --top:64px}}
@media (min-width:1100px){:root{--gut:40px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--top) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none !important}}
body{margin:0; font-family:var(--f); font-size:16px; line-height:1.55; color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block; max-width:100%}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:6px}
.wrap{width:100%; max-width:calc(var(--max) + 2 * var(--gut)); margin:0 auto; padding:0 var(--gut)}
.ruka{font-family:var(--ruka); font-weight:500; line-height:1; color:var(--blue)}

/* небо сайта практикума: неподвижный фон, по прокрутке белый уходит в голубой */
@property --sky-a{syntax:'<color>'; inherits:false; initial-value:#FFFFFF}
@property --sky-b{syntax:'<color>'; inherits:false; initial-value:#FFFFFF}
.sky{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 100%); transition:--sky-a .7s ease, --sky-b .7s ease}
.sky-marks{position:absolute; left:0; top:0; width:1px; height:100%; pointer-events:none; opacity:0}
.sky-marks i{position:absolute; left:0; width:1px; height:1%}
.sloy{position:relative; z-index:1}

/* кнопки */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 28px;
  border-radius:999px; border:0; background:var(--blue); color:#fff; cursor:pointer; text-decoration:none;
  font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; line-height:1; white-space:nowrap;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease}
.btn:hover{background:var(--blue-deep)}
.btn:active{transform:translateY(1px)}
.btn-line{background:transparent; color:var(--blue); box-shadow:inset 0 0 0 1.5px var(--blue)}
.btn-line:hover{background:var(--blue); color:#fff}
.ssylka{font-weight:600; font-size:14px; color:var(--blue); text-decoration:none; background:none; border:0; padding:0; cursor:pointer}
.ssylka:hover{text-decoration:underline; text-underline-offset:4px}

/* метки */
.eyebrow{font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue)}
.tag{display:inline-flex; align-items:center; font-weight:600; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  line-height:1; padding:5px 9px 4px; border-radius:999px; color:var(--ink-soft); box-shadow:inset 0 0 0 1px rgba(20,20,20,.22)}
.tag-blue{background:var(--blue); color:#fff; box-shadow:none}
.brand{display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap}
.brand .p7-vmeste{font-size:10px}

/* ── страница ── */
/* шапка: липкая, при прокрутке получает белую подложку */
.top{position:sticky; top:0; z-index:10; transition:background .25s ease, box-shadow .25s ease}
.top.stuck{background:rgba(255,255,255,.94); box-shadow:0 1px 0 var(--rule)}
.top .wrap{display:flex; align-items:center; gap:28px; height:var(--top)}
.nav{display:none; gap:28px}
.nav a{font-size:14px; font-weight:500; color:var(--ink-soft); text-decoration:none}
.nav a:hover{color:var(--ink)}
.user{margin-left:auto; display:flex; align-items:center; gap:16px; font-size:14px; color:var(--ink-soft)}
.user a{color:var(--ink-faint); text-decoration:none}
.user a:hover{color:var(--ink)}
.sentinel{position:absolute; top:0; height:1px; width:1px}

/* ближайшая встреча */
.hero{padding:32px 0 64px}
.hero-grid{display:grid; gap:32px}
.hero h1{font-weight:700; font-size:32px; line-height:1.1; letter-spacing:-.02em; margin:12px 0 0; text-wrap:balance}
.meta{margin-top:16px; font-size:17px; font-weight:500; line-height:1.4}
.meta .u-vas{display:block; font-size:14px; font-weight:400; color:var(--ink-faint); margin-top:4px}
.hero .ruka{display:block; font-size:24px; margin-top:12px}
.cta{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:32px}
.note{margin:20px 0 0; font-size:14px; color:var(--ink-soft)}
/* height:auto — у заставки из фото встреч (app/foto.py) есть width/height, без него рамка 16:9 растягивается */
.media img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r)}
@media (max-width:519px){ .cta .btn{flex:1 1 100%} }

/* разделы: воздуха больше, чем в прототипе (Катя 10.11: «он всё слеплял, делал узким») */
.sec{padding:56px 0 64px}
.sec-head{margin-bottom:28px}
.sec-head h2{font-weight:700; font-size:24px; line-height:1.15; letter-spacing:-.015em; margin:0}
.sec-head p{margin:10px 0 0; font-size:15px; color:var(--ink-soft); max-width:56ch}

/* встречи */
.vstrechi{display:grid; gap:16px; margin:0; padding:0; list-style:none}
.kart{display:grid; grid-template-columns:52px 1fr; gap:16px; padding:22px 20px 24px;
  background:rgba(255,255,255,.72); border-radius:var(--r); box-shadow:0 1px 2px rgba(20,40,90,.05)}
.kart.blizh{background:#fff; box-shadow:0 1px 2px rgba(20,40,90,.05), 0 10px 28px rgba(28,100,240,.10)}
.kart.proshla{background:rgba(255,255,255,.45)}
.den{width:52px; height:60px; border-radius:12px; background:var(--goluboy); display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1; text-align:center}
.den small{font-weight:600; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--blue)}
.den b{font-weight:700; font-size:22px; letter-spacing:-.02em; margin-top:6px}
.kart.proshla .den{background:rgba(20,20,20,.05)}
.kart.proshla .den small{color:var(--ink-faint)}
.kart.proshla .den b, .kart.proshla h3{color:var(--ink-soft)}
.kto{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; min-height:22px}
.kto .ruka{font-size:20px}
.kart h3{font-weight:600; font-size:18px; line-height:1.25; margin:8px 0 0}
.kogda{font-size:14px; line-height:1.5; color:var(--ink-soft); margin-top:6px}
.kogda .u-vas{color:var(--ink-faint)}
.kogda .u-vas{white-space:nowrap}
.kogda .u-vas::before{content:" · "}
details{margin-top:14px}
summary{display:inline-flex; align-items:center; gap:8px; cursor:pointer; list-style:none; font-weight:600; font-size:14px; color:var(--blue)}
summary::-webkit-details-marker{display:none}
summary::after{content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .2s ease}
details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
details p{margin:10px 0 0; font-size:15px; line-height:1.55; color:var(--ink-soft); max-width:58ch}
/* гостья встречи: фото у имени в карточке и «кто ведёт» в «Подробнее» (Катя 11.11) */
.kto-gost{display:inline-flex; align-items:center; gap:8px}
.kto-gost .ava{width:28px; height:28px; border-radius:50%; object-fit:cover; flex:none}
.gost{display:flex; gap:14px; align-items:flex-start; margin-top:16px; padding-top:16px; border-top:1px solid var(--rule); max-width:58ch}
.gost img{width:72px; height:72px; border-radius:50%; object-fit:cover; flex:none}
.gost b{display:block; font-weight:600; font-size:15px; line-height:1.3; color:var(--ink)}
.gost p{margin:4px 0 0; font-size:14px; line-height:1.5}
@media (max-width:520px){
  .gost{gap:12px}
  .gost img{width:56px; height:56px}
  /* шапка на телефоне: длинное имя обрезается, у команды (ещё «Подготовка») имя прячем — иначе «Выйти»
     уезжает за край, а на самых узких экранах у команды от названия остаётся значок «Вместе» */
  .top .wrap{gap:12px}
  .user{gap:12px; font-size:13px; min-width:0}
  .user .imya{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .user:has(.komanda) .imya{display:none}
}
@media (max-width:390px){
  .top:has(.komanda) .brand{font-size:0; gap:0}
  .top:has(.komanda) .brand .p7-vmeste{font-size:10px}
}
.kart-act{display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-top:16px}
.kart-act .tishe{font-size:14px; color:var(--ink-faint)}

/* сохранили из чата: вырезки */
.izchata{display:grid; gap:20px}
.zapiska{display:flex; flex-direction:column; min-height:136px; padding:20px 22px 18px; background:var(--slivki-2);
  border-radius:2px; text-decoration:none; color:var(--ink);
  box-shadow:0 1px 2px rgba(60,50,30,.06), 0 10px 26px rgba(60,50,30,.10); transition:transform .2s ease, box-shadow .2s ease}
.zapiska:nth-child(3n+1){transform:rotate(-.6deg)}
.zapiska:nth-child(3n+2){transform:rotate(.5deg)}
.zapiska:nth-child(3n){transform:rotate(-.3deg)}
.zapiska .tip{font-weight:600; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue)}
.zapiska b{font-weight:600; font-size:18px; line-height:1.25; margin-top:8px}
.zapiska .niz-z{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:auto; padding-top:18px;
  font-size:13px; color:var(--ink-faint)}
.zapiska p{margin:10px 0 0; font-size:15px; line-height:1.55; color:var(--ink-soft)}
.zapiska .niz-ssylki{display:flex; gap:16px; white-space:nowrap}

/* низ */
.foot{border-top:1px solid var(--rule); margin-top:24px}
.foot .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px; padding-top:36px; padding-bottom:48px}
.foot p{margin:0; font-size:14px; line-height:1.55; color:var(--ink-soft)}
/* «в канале практикума» — ссылкой, как «Поддержка» рядом (Катя 10.11) */
.foot p a{color:var(--ink); font-weight:500; text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:4px}
.foot p a:hover{text-decoration-color:currentColor}
.foot nav{display:flex; flex-wrap:wrap; gap:8px 24px; font-size:14px}
.foot nav a{color:var(--ink); text-decoration:none; font-weight:500}
.foot nav a:hover{text-decoration:underline; text-underline-offset:4px}
.foot img{height:20px}

@media (min-width:640px){
  .izchata{grid-template-columns:1fr 1fr; gap:20px}
}
@media (min-width:768px){
  .nav{display:flex}
  .hero{padding:48px 0 88px}
  .hero h1{font-size:38px}
  .sec{padding:72px 0 88px}
  .sec-head{margin-bottom:36px}
  .kart{grid-template-columns:56px 1fr; gap:20px; padding:24px 24px 26px}
  .den{width:56px; height:64px}
  .sec-head h2{font-size:28px}
}
@media (min-width:1000px){
  .hero{padding:64px 0 96px}
  .hero-grid{grid-template-columns:5fr 6fr; gap:64px; align-items:center}
  .hero h1{font-size:44px}
  .sec{padding:80px 0 96px}
  .sec-head{margin-bottom:40px}
  .sec-head h2{font-size:30px}
  .vstrechi{grid-template-columns:1fr 1fr; gap:20px; align-items:start}
  .kart{grid-template-columns:64px 1fr; gap:24px; padding:28px 32px 28px 28px}
  .den{width:64px; height:72px}
  .den b{font-size:24px}
  .izchata{grid-template-columns:repeat(3,1fr); gap:28px}
  .zapiska{min-height:164px}
}

/* ── вход и «нет в чате» ── */
body.ekran{display:flex; flex-direction:column; min-height:100vh; min-height:100svh}
.vhod{flex:1; display:flex; align-items:center; padding:20px 0 32px}
.vhod-grid{display:grid; gap:28px; align-items:center}
.vhod-foto{margin:0}
.vhod-foto img{width:100%; aspect-ratio:16/9; object-fit:cover; object-position:50% 30%; border-radius:var(--r)}
.vhod-tekst{max-width:480px}
.vhod-tekst h1{font-weight:700; font-size:30px; line-height:1.12; letter-spacing:-.02em; margin:16px 0 0; text-wrap:balance}
.lid{margin:16px 0 0; font-size:16px; color:var(--ink-soft)}
.tg{display:inline-flex; align-items:center; justify-content:center; min-height:48px; margin-top:28px; padding:0 28px;
  border-radius:24px; background:#54A9EB; color:#fff; font-weight:500; font-size:16px; text-decoration:none}
.tg:hover{background:#4A9BDA}
.mel{margin:14px 0 0; font-size:14px; color:var(--ink-faint)}
.mel a{color:var(--ink); text-underline-offset:3px}
.knopki{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:28px}
.razd{margin-top:28px; padding-top:20px; border-top:1px solid var(--rule); color:var(--ink-soft)}
.vhod-niz .wrap{padding-top:16px; padding-bottom:28px; font-size:14px; color:var(--ink-faint)}
.vhod-niz a{color:var(--ink); text-underline-offset:3px}
@media (max-width:519px){ .knopki .btn, .tg{width:100%} }
@media (min-width:900px){
  .vhod{padding:40px 0}
  .vhod-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:72px}
  .vhod-foto img{aspect-ratio:4/5; max-height:min(72vh, 640px); object-position:50% 40%}
  .vhod-tekst h1{font-size:40px}
  .lid{font-size:17px}
}

/* ── состояния, которых не было в прототипе ── */
.net-zoom{display:inline-flex; align-items:center; min-height:52px; padding:0 4px; font-size:14px; color:var(--ink-soft)}
/* пустой «Сохранили из чата»: видимая рамка, чтобы текст не висел в воздухе */
.pusto{margin:0; padding:28px; border-radius:var(--r); background:rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1.5px rgba(28,100,240,.22); color:var(--ink-soft); font-size:15px; line-height:1.55; max-width:640px}
.oshibka-tekst{max-width:520px}
.soobshchenie{margin:18px 0 0; padding:12px 16px; border-radius:12px; background:rgba(28,100,240,.08); color:var(--ink); font-size:15px}

/* ── страница записи встречи (Катя 10.11: «как запись эфира 4 числа») ── */
.zapis-str{padding:32px 0 72px}
.zapis-str h1{font-weight:700; font-size:30px; line-height:1.12; letter-spacing:-.02em; margin:12px 0 0; text-wrap:balance}
.kto-zapis .ruka{display:block; font-size:24px; margin-top:10px}
.zapis-str .meta{margin-top:10px; font-size:15px; font-weight:400; color:var(--ink-soft)}
.plejer{margin-top:28px; border-radius:var(--r); overflow:hidden; background:#000}
.plejer video{display:block; width:100%; aspect-ratio:16/9; background:#000}
/* скорость под плеером (Катя 14.11, кнопки ставит stranica.js): маленькая полоска у правого
   нижнего угла, как в привычных плеерах; подписи нет — «×» и так говорит, что это скорость */
.skorost{display:flex; justify-content:flex-end; margin-top:8px}
.skorost-knopki{display:inline-flex; gap:2px; padding:2px; border-radius:999px; background:rgba(255,255,255,.75);
  box-shadow:inset 0 0 0 1px var(--rule)}
.skorost button{min-width:36px; min-height:28px; padding:0 8px; border:0; border-radius:999px; background:none; cursor:pointer;
  font-size:12.5px; font-weight:500; line-height:1; color:var(--ink-soft); font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent}
.skorost button:hover{color:var(--blue)}
.skorost button[aria-pressed="true"]{background:var(--blue); color:#fff; font-weight:600}
.zapis-str .pusto{margin-top:28px}
.kratko{margin-top:48px; max-width:720px}
.kratko h2{font-weight:700; font-size:22px; line-height:1.2; letter-spacing:-.01em; margin:0 0 16px}
.kratko ul{margin:0; padding:0 0 0 20px}
.kratko li{margin:0 0 10px; font-size:16px; line-height:1.55}
.kratko-tekst p{margin:0 0 14px; font-size:17px; line-height:1.6}
.kratko-tekst p:last-child{margin-bottom:0}
.taimkody{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.taimkody li{border-bottom:1px solid var(--rule)}
.taimkod{display:flex; gap:16px; width:100%; padding:14px 0; background:none; border:0; text-align:left; cursor:pointer;
  font-size:16px; line-height:1.45; color:var(--ink)}
.taimkod span{flex:none; min-width:56px; font-weight:600; color:var(--blue); font-variant-numeric:tabular-nums}
.taimkod:hover{color:var(--blue)}
.kratko .poka{margin:0; font-size:16px; line-height:1.55; color:var(--ink-faint)}
/* правка «Коротко о встрече» — только команде (Катя 10.11, app/kratko.py) */
.kratko-pravka{margin-top:40px; max-width:720px; padding:22px; border-radius:var(--r); background:rgba(255,255,255,.82);
  box-shadow:inset 0 0 0 1.5px rgba(28,100,240,.22)}
.kratko-pravka .dlya-komandy{margin-bottom:12px}
.kratko-status{margin:0 0 14px; font-size:15px; line-height:1.5; color:var(--ink-soft)}
.kratko-oshibka{margin:0 0 14px; padding:10px 14px; border-radius:12px; background:rgba(214,64,40,.08); color:#8A2A1C; font-size:14px}
.kratko-pravka label{display:block; font-weight:600; font-size:15px; line-height:1.35}
.kratko-pravka textarea{display:block; width:100%; margin-top:10px; min-height:150px; padding:14px 16px; border:1px solid var(--rule);
  border-radius:12px; font:inherit; font-size:16px; line-height:1.55; color:var(--ink); background:#fff; resize:vertical}
.kratko-pravka textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(28,100,240,.15)}
.kratko-knopki{display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:14px}
.kratko-knopki .btn, .kratko-chat .btn{min-height:44px; padding:0 22px; font-size:12px}
.kratko-chat{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:20px; padding-top:18px; border-top:1px solid var(--rule)}
.kratko-chat .tiho{flex:1 1 100%; margin:0; font-size:14px; line-height:1.5; color:var(--ink-faint)}
.skopirovano{font-size:14px; font-weight:600; color:var(--blue)}
@media (min-width:768px){
  .zapis-str{padding:48px 0 96px}
  .zapis-str h1{font-size:38px}
  .plejer{margin-top:36px}
  .kratko{margin-top:64px}
  .kratko h2{font-size:26px}
}

/* ── бадди (Катя 10.11, вид — вариант 2, тоже 10.11; прототипы — хаб,
   content/praktikum-7/vmeste-stranica/8-baddi/varianty.*) ── */
.baddi-verh{display:grid; gap:24px; align-items:start}

/* карточка «ваша пара»: белая, как ближайшая встреча */
.para{padding:24px 22px 26px; background:#fff; border-radius:var(--r);
  box-shadow:0 1px 2px rgba(20,40,90,.05), 0 10px 28px rgba(28,100,240,.10)}
.para h3{font-weight:600; font-size:20px; line-height:1.25; margin:10px 0 0; text-wrap:balance}
.para p{margin:10px 0 0; font-size:15px; line-height:1.55; color:var(--ink-soft); max-width:46ch}
.para .imya-baddi{display:block; font-family:var(--ruka); font-weight:500; color:var(--blue); font-size:46px; line-height:1;
  margin-top:14px}
.para .nik{display:block; margin-top:6px; font-size:15px; color:var(--ink-soft)}
.para .cta{margin-top:22px}
.para .dver{margin-top:22px; padding-top:16px; border-top:1px solid var(--rule); font-size:14px; color:var(--ink-faint)}
.para .dver a{color:var(--ink); text-underline-offset:3px}

/* видео: как фото Zoom в шапке — 16:9, скругление 16 */
.baddi-video{margin:0}
.baddi-video video{display:block; width:100%; aspect-ratio:16/9; border-radius:var(--r); background:#000; object-fit:cover}
.baddi-video figcaption{margin-top:10px; font-size:14px; line-height:1.5; color:var(--ink-soft)}

@media (min-width:768px){ .para{padding:28px 28px 30px} }
@media (min-width:1000px){ .baddi-verh.s-video{grid-template-columns:5fr 6fr; gap:48px} }
/* без видео карточка пары не растягивается на всю ширину */
.baddi-verh:not(.s-video) .para{max-width:560px}

.bh{font-weight:700; font-size:20px; line-height:1.2; letter-spacing:-.01em; margin:0}
.bh + .bp{margin:8px 0 0; font-size:15px; line-height:1.55; color:var(--ink-soft); max-width:52ch}
.bblok{margin-top:56px}
@media (min-width:768px){ .bh{font-size:22px} .bblok{margin-top:72px} }

/* ── колода (общая) ── */
.koloda{position:relative; isolation:isolate; max-width:520px; margin-top:28px}
.koloda .stopka{position:relative}
.koloda .stopka::before, .koloda .stopka::after{content:""; position:absolute; inset:0; z-index:-1; border-radius:var(--r);
  background:#fff; box-shadow:0 1px 2px rgba(20,40,90,.06), 0 8px 22px rgba(28,100,240,.08)}
.koloda .stopka::before{transform:rotate(-3.2deg) translate(-4px,8px)}
.koloda .stopka::after{transform:rotate(2.2deg) translate(6px,5px)}
.karta{position:relative; display:flex; flex-direction:column; min-height:232px; padding:26px 24px 24px; border-radius:var(--r);
  background:var(--blue); color:#fff; box-shadow:0 1px 2px rgba(20,40,90,.08), 0 14px 32px rgba(28,100,240,.18);
  transition:opacity .16s ease, transform .16s ease}
.karta.smena{opacity:0; transform:translateY(4px)}
.karta .rubashka{display:block}
.karta .rubashka b{display:block; font-weight:600; font-size:22px; line-height:1.25; letter-spacing:-.01em; max-width:22ch; text-wrap:balance}
.karta .rubashka span{display:block; margin-top:10px; font-size:15px; line-height:1.5; color:rgba(255,255,255,.82)}
.karta .karta-vopros, .karta .karta-schet{display:none}
.karta.licom{background:#fff; color:var(--ink)}
.karta.licom .rubashka{display:none}
.karta.licom .karta-schet{display:block; font-size:13px; color:var(--ink-faint)}
.karta.licom .karta-vopros{display:block; margin:10px 0 0; font-weight:500; font-size:21px; line-height:1.4; text-wrap:pretty}
.karta .vytyanut{margin-top:auto; padding-top:24px}
.karta .vytyanut .btn{background:#fff; color:var(--blue)}
.karta .vytyanut .btn:hover{background:rgba(255,255,255,.88)}
.karta.licom .vytyanut .btn{background:transparent; color:var(--blue); box-shadow:inset 0 0 0 1.5px var(--blue)}
.karta.licom .vytyanut .btn:hover{background:var(--blue); color:#fff}
.koloda .vse-voprosy{margin-top:22px}
.koloda .vse-voprosy ol{margin:12px 0 0; padding:0 0 0 22px; font-size:15px; line-height:1.5; color:var(--ink-soft)}
.koloda .vse-voprosy li{margin:0 0 8px}
@media (min-width:768px){ .karta{padding:30px 30px 28px; min-height:248px} .karta.licom .karta-vopros{font-size:22px} }

/* «Главное» — без карточки, прямо на небе, с синей чертой слева (Катя 10.11: белый прямоугольник
   «выбивается визуально») */
.vyrezka{padding:2px 0 2px 18px; border-left:2px solid rgba(28,100,240,.45)}
.vyrezka p{margin:0; font-size:16px; line-height:1.55; font-weight:500}
.vyrezka p + p{margin-top:8px; font-weight:400; color:var(--ink-soft); font-size:15px}

/* план созвона: линия от шага к шагу, колода в шаге 3 */
.v2-grid{display:grid; gap:40px; margin-top:32px}
.v2-plan{list-style:none; margin:0; padding:0; counter-reset:s}
.v2-plan > li{counter-increment:s; position:relative; padding:0 0 30px 52px}
.v2-plan > li::before{content:counter(s); position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%;
  background:#fff; color:var(--blue); box-shadow:inset 0 0 0 1.5px rgba(28,100,240,.35); font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center}
.v2-plan > li:not(:last-child)::after{content:""; position:absolute; left:16px; top:40px; bottom:6px; width:2px;
  background:rgba(28,100,240,.16); border-radius:2px}
.v2-plan b{display:block; padding-top:6px; font-weight:600; font-size:17px; line-height:1.3}
.v2-plan > li > span{display:block; margin-top:6px; font-size:15px; line-height:1.55; color:var(--ink-soft); max-width:46ch}
.v2-plan .koloda{margin-top:22px}
.v2-plan li.s-koloda::before{background:var(--blue); color:#fff; box-shadow:none}
.v2-bok{display:grid; gap:24px; align-content:start}
.v2-bok .tiho{margin:0; font-size:14px; line-height:1.55; color:var(--ink-soft)}
@media (min-width:1000px){
  .v2-grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:72px}
  .v2-bok{position:sticky; top:calc(var(--top) + 24px)}
}

/* запись реакцией и «с кем хочется в паре» (Катя 10.11): поле — по желанию, видит только команда */
.pozh{margin-top:22px; padding-top:18px; border-top:1px solid var(--rule)}
.pozh label{display:block}
.pozh label b{display:block; font-weight:600; font-size:15px; line-height:1.35}
.pozh label span{display:block; margin-top:4px; font-size:14px; line-height:1.5; color:var(--ink-faint)}
.pozh input{display:block; width:100%; margin-top:12px; min-height:48px; padding:0 16px; border:1px solid var(--rule);
  border-radius:999px; font:inherit; font-size:15px; color:var(--ink); background:#fff}
.pozh input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(28,100,240,.15)}
.pozh-knopki{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:12px}
.pozh-knopki .btn{min-height:44px; padding:0 22px; font-size:12px}
.para .pozh-est{margin:12px 0 0; padding:10px 14px; border-radius:12px; background:rgba(28,100,240,.07); color:var(--ink); font-size:14px}
.fotki-baddi{display:flex; gap:10px; margin-top:14px}
.foto-baddi{width:72px; height:72px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px #fff, 0 0 0 4px rgba(28,100,240,.2)}
.fotki-baddi + .imya-baddi{margin-top:12px}
.dlya-komandy{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 20px}
.para form.zapis{display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px}
.para form.dver .ssylka{font-size:14px}

/* ── заставки на телефон (Катя 13.11): между «Встречами» и «Из чата». Текущий поток — открытой лентой,
   пока его заставок нет — рукописная приписка; прошлые потоки — свёрнуты под «раскрыть», без подписей
   потоков. Лента превью 9:19,5, нажать — окно с заставкой целиком и «Сохранить» (static/zastavki.js) ── */
/* стрелки — строкой над лентой справа, как у ленты фото; только с мышью */
.zastavki-strelki{display:none; justify-content:flex-end; gap:10px; margin-bottom:14px}
@media (hover:hover) and (min-width:761px){ .zastavki-strelki{display:flex} }
/* приписка от руки, тем же почерком, что «с Настей» у встреч */
.zastavki-skoro{display:inline-block; margin:-8px 0 0; font-size:28px; transform:rotate(-1.5deg); transform-origin:left center}
@media (min-width:768px){ .zastavki-skoro{font-size:32px} }
/* «Заставки прошлых потоков» — свёрнуто, как «Подробнее» у встреч; строка — по краю текста */
.zastavki-arhiv{margin-top:24px}
.zastavki-blok + .zastavki-arhiv{margin-top:40px}
.zastavki-arhiv > summary{margin-left:max(var(--gut), calc((100% - var(--max)) / 2)); font-size:15px}
.zastavki-arhiv[open] > .zastavki-blok{margin-top:18px}
.zastavki-arhiv[open] > summary{margin-bottom:4px}
/* лента во всю ширину экрана, первая заставка — ровно по краю текста, последняя не прилипает к краю */
.zastavki-lenta{--kray:max(var(--gut), calc((100% - var(--max)) / 2));
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding-inline:var(--kray);
  scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:6px 0 22px; margin:-6px 0 -22px}
.zastavki-lenta::-webkit-scrollbar{display:none}
.zastavki{display:flex; gap:12px; width:max-content; margin:0; padding:0 var(--kray); list-style:none}
.zastavki li{flex:none; scroll-snap-align:start}
.zastavka{display:block; width:124px; aspect-ratio:9/19.5; border-radius:14px; overflow:hidden; background:#2A2D33;
  box-shadow:0 1px 2px rgba(20,40,90,.08), 0 10px 24px rgba(20,40,90,.14); transition:transform .2s ease, box-shadow .2s ease}
.zastavka img{width:100%; height:100%; object-fit:cover}
.zastavka:hover{transform:translateY(-3px); box-shadow:0 1px 2px rgba(20,40,90,.08), 0 16px 32px rgba(20,40,90,.20)}
.zastavka:focus-visible{outline-offset:4px; border-radius:14px}
@media (min-width:768px){ .zastavki{gap:16px} .zastavka{width:150px; border-radius:16px} }
@media (min-width:1000px){ .zastavka{width:168px} }

/* окно: заставка целиком на тёмном, «Сохранить», листать стрелками, свайпом и клавишами */
.okno-z{position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0;
  background:rgba(12,14,20,.97); color:#fff; overflow:hidden}
.okno-z::backdrop{background:rgba(12,14,20,.6)}
/* сверху — место под «Закрыть», чтобы крестик не лёг на угол заставки; высота кадра — всё, что остаётся
   после него и строки «Сохранить» (≈ 230 px на всё вместе) */
.okno-z[open]{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  padding:calc(64px + env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom))}
.okno-z .kadr{position:relative; height:min(calc(100svh - 230px), 820px); aspect-ratio:9/19.5; max-width:calc(100vw - 32px); border-radius:18px;
  overflow:hidden; background:#22252B center/cover no-repeat; box-shadow:0 20px 60px rgba(0,0,0,.45); touch-action:pan-y}
.okno-z .kadr img{width:100%; height:100%; object-fit:contain; -webkit-touch-callout:default}
.okno-z .niz{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.okno-z .btn{background:#fff; color:var(--ink)}
.okno-z .btn:hover{background:rgba(255,255,255,.88)}
.okno-z .podskazka{margin:0; font-size:13px; line-height:1.45; color:rgba(255,255,255,.62)}
.okno-z .schet{font-size:13px; color:rgba(255,255,255,.62); font-variant-numeric:tabular-nums}
.okno-z .zakryt{position:absolute; top:calc(10px + env(safe-area-inset-top)); right:14px; width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center}
.okno-z .zakryt:hover{background:rgba(255,255,255,.22)}
.okno-z .zakryt svg, .okno-z .listat svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8}
.okno-z .listat{position:absolute; top:50%; width:52px; height:52px; margin-top:-26px; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; cursor:pointer; display:none; align-items:center; justify-content:center}
.okno-z .listat:hover{background:rgba(255,255,255,.24)}
.okno-z .listat.prev{left:24px}
.okno-z .listat.next{right:24px}
@media (hover:hover) and (min-width:761px){ .okno-z .listat{display:flex} }
body.okno-otkryto{overflow:hidden}

/* ── лента фото внизу (Катя 10.11: «внизу эти фото, это полотно» — как на странице практикума сайта;
   разметка — shablony/lenta.html из scripts/lenta_s_saita.py, движение — static/lenta.js) ── */
.lenta{position:relative; z-index:1; overflow:hidden; margin:8px 0 56px; touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none}
.lenta.drag{cursor:grabbing}
.track{display:flex; gap:10px; width:max-content; will-change:transform}
.track + .track{margin-top:10px}
.track img{display:block; max-width:none; height:clamp(170px,18vw,260px); width:auto; flex:none; background:#EEE center/cover no-repeat;
  -webkit-user-drag:none; pointer-events:none}
/* стрелки — строкой над лентой, справа, а не поверх фото (Катя 10.11: «стрелочки наверху, а не на ленте») */
.lenta-nav{position:relative; z-index:1}
.lenta-nav .wrap{display:flex; justify-content:flex-end; gap:10px; margin-bottom:16px}
.lenta-btn{width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:rgba(255,255,255,.94); color:var(--ink); box-shadow:0 2px 12px rgba(20,30,60,.16); cursor:pointer;
  transition:background .2s ease, color .2s ease}
.lenta-btn:hover{background:var(--blue); color:#fff}
.lenta-btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6}
@media (hover:none), (max-width:760px){ .lenta-nav{display:none} }
/* отступ от ленты до подвала — такой же, как от «Бадди» до фото (Катя 10.11). Сверху он складывается из
   нижнего поля раздела (64 / 88 / 96), шага плана (30, только когда «Главное» сбоку, от 1000 px), строки
   стрелок (46 + 16, только с мышью и шире 760) и 8 у самой ленты. Поменяли поля раздела — пересчитать. */
.lenta{margin-bottom:72px}
@media (min-width:761px) and (hover:hover){ .lenta{margin-bottom:126px} }
@media (min-width:768px){ .lenta{margin-bottom:96px} }
@media (min-width:768px) and (hover:hover){ .lenta{margin-bottom:150px} }
@media (min-width:1000px){ .lenta{margin-bottom:134px} }
@media (min-width:1000px) and (hover:hover){ .lenta{margin-bottom:188px} }
@media (max-width:760px){
  .track{gap:6px}
  .track + .track{margin-top:6px}
  .track img{height:150px}
}