/* Лендинг, вход, чат и правовые страницы.
   Цвета, шрифты и шкалы — в tokens.css, здесь только раскладка.
   Ничего в голых пикселях: размеры берём из --s-*, --t-*, --r-*. */

/* ------------------------------------------------------------- оболочка */
.shell{max-width:var(--page);margin:0 auto;padding:0 var(--s-5)}

.top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-5) 0;border-bottom:1px solid var(--line)}
.znak{display:flex;align-items:center;gap:.55rem;color:var(--ink);text-decoration:none}
.znak svg{width:1.25rem;height:1.25rem;display:block;border-radius:3px}
.znak b{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
.top a.nazad{font-size:.875rem}

.foot{border-top:1px solid var(--line);margin-top:var(--s-9);padding:var(--s-5) 0 var(--s-8);
  color:var(--muted);font-size:.875rem;display:flex;flex-direction:column;gap:var(--s-2)}
.foot nav{line-height:1.9}
.foot nav a{margin-right:.35rem}

/* ---------------------------------------------------- лендинг и вход */
/* Первый экран: слева обещание и цифры, справа форма. Раньше форма висела
   по центру своей колонки, и справа внизу оставалась дыра в пол-экрана. */
.gate{display:grid;gap:var(--s-6);align-items:start;padding:var(--s-7) 0 0;
  grid-template-areas:"golova" "forma" "ostatok"}
.pitch-head{grid-area:golova}
.gate-box{grid-area:forma}
.pitch-rest{grid-area:ostatok}
@media (min-width:60rem){
  .gate{grid-template-columns:1.15fr .85fr;gap:var(--s-6) var(--s-8);padding-top:var(--s-8);
    grid-template-areas:"golova forma" "ostatok forma"}
}

.pitch-tag{display:inline-block;margin-bottom:var(--s-3);color:var(--gold)}
.pitch-h{font-family:var(--display);font-weight:600;font-size:var(--t-5);line-height:1.06;
  letter-spacing:-.02em;margin:0 0 var(--s-3);text-wrap:balance}
.pitch-lead{font-size:var(--t-1);color:var(--ink-soft);margin:0 0 var(--s-6);
  max-width:var(--measure)}

/* Цифры базы — главное, что можно сказать на первом экране. Место под них
   держим всегда: без этого страница дёргается, когда /api/stats отвечает. */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);
  margin:0;min-height:4.5rem;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:var(--s-4) 0}
.stats div{display:flex;flex-direction:column;gap:.15rem}
.stats b{font-family:var(--display);font-weight:600;font-size:var(--t-4);line-height:1;
  color:var(--ink)}
.stats span{font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted)}

.pitch-list{margin:0}
.pitch-list dt{font-family:var(--display);font-weight:600;font-size:var(--t-1);
  margin-top:var(--s-5);color:var(--ink)}
.pitch-list dt:first-child{margin-top:0}
.pitch-list dd{margin:.2rem 0 0;color:var(--ink-soft);max-width:var(--measure)}
.pitch-note{margin-top:var(--s-6);font-size:.875rem;color:var(--muted);max-width:var(--measure)}

.gate-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-6);box-shadow:var(--shadow)}
.gate-box h1{font-family:var(--display);font-weight:600;font-size:var(--t-3);
  margin:0 0 var(--s-1);letter-spacing:-.015em}
.gate-box .sub{color:var(--muted);font-size:.875rem;margin-bottom:var(--s-5)}
.gate-box label{display:block;margin:var(--s-4) 0 var(--s-2)}
.gate-box .row{margin-top:var(--s-5)}
.gate-box .row .btn{width:100%;padding:.65rem .9rem}
.gate-box .alt{margin-top:var(--s-4);font-size:.875rem;color:var(--muted)}
.gate-box .alt a{cursor:pointer}

.msg{margin-top:var(--s-4);padding:var(--s-3);border-radius:var(--r-md);font-size:.875rem}
.msg.err{background:var(--pu-bg);color:var(--pu)}
.msg.ok{background:var(--tv-bg);color:var(--tv)}

/* Ниже сгиба: до входа это читают, но не вместо входа. */
.landing{margin-top:var(--s-9)}
.landing .pitch-src{max-width:42rem}
.landing .pitch-src dd{margin-bottom:var(--s-2)}

/* ------------------------------------------------- правовые страницы */
/* Колонка держится левого края — там же, где знак в шапке. По центру она
   отрывалась от шапки и выглядела чужой страницей. */
.legal{max-width:var(--measure);padding:var(--s-7) 0 var(--s-8)}
.legal h1{font-family:var(--display);font-weight:600;font-size:var(--t-4);line-height:1.1;
  letter-spacing:-.02em;margin:0 0 var(--s-2);text-wrap:balance}
.legal-body{margin-top:var(--s-6)}
.legal-body h3{font-family:var(--display);font-weight:600;font-size:var(--t-2);
  margin:var(--s-7) 0 var(--s-3)}
.legal-body p,.legal-body li{color:var(--ink-soft)}
.legal-body ul{padding-left:1.2rem}
.legal-body li{margin:var(--s-2) 0}

/* Одинокая страница без оболочки: истёкшая ссылка, пропавший сценарий. */
.odna{max-width:var(--measure);margin:0 auto;padding:var(--s-8) var(--s-5)}
.odna h1{font-family:var(--display);font-weight:600;font-size:var(--t-3);margin:0 0 var(--s-3)}
.odna p{color:var(--ink-soft)}

/* ------------------------------------------------------------ три панели */
.app{display:grid;grid-template-columns:17rem minmax(0,1fr);grid-template-rows:1fr;
  height:100dvh}
.app.with-art{grid-template-columns:17rem minmax(0,1fr) minmax(20rem,38%)}

.side{background:var(--sunk);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0}
.side-head{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line)}
.side-head .znak{margin-bottom:var(--s-3)}
.side-head .btn{width:100%}
.chats{flex:1;overflow-y:auto;padding:var(--s-2)}
.chat-item{display:block;width:100%;text-align:left;padding:.5rem .6rem;border:0;
  background:none;color:var(--ink);border-radius:var(--r-md);cursor:pointer;
  font-size:.9rem;line-height:1.35;font-family:inherit;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-item:hover{background:var(--surface)}
.chat-item.on{background:var(--surface);box-shadow:inset 2px 0 0 var(--sp)}
/* Адрес сидит между списком разговоров и строкой «имя — выйти»: у самого низа
   панели, но выше «Выйти», чтобы его видели те, у кого что-то не работает. */
.side-mail{border-top:1px solid var(--line);padding:var(--s-2) var(--s-4)}
.side-mail .lbl{display:block;margin-bottom:.15rem;font-size:.63rem}
.side-mail a{font-size:.8rem;display:block;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.side-foot{border-top:1px solid var(--line);padding:var(--s-3) var(--s-4);display:flex;
  align-items:center;gap:var(--s-2);justify-content:space-between}
.side-foot .who{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis}

.main{display:flex;flex-direction:column;min-height:0;min-width:0}
.thread{flex:1;overflow-y:auto;padding:var(--s-6) var(--s-5) var(--s-2)}
.thread-in{max-width:calc(var(--measure) + var(--s-8));margin:0 auto}

/* Реплика игрока — тихая. Ответ тренера — то, за чем пришли, у него корпус. */
.turn{margin-bottom:var(--s-6)}
.turn .who{margin-bottom:var(--s-2);font-size:.63rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.turn .body{white-space:pre-wrap}
.turn.me .body{background:var(--sunk);border-radius:var(--r-lg);
  padding:var(--s-3) var(--s-4);color:var(--ink-soft)}
.turn.coach .body{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-4) var(--s-5)}

/* Разметка внутри ответа тренера. Пробелы больше не значимы: текст
   разобран в абзацы, поэтому pre-wrap здесь снимаем. */
.turn .body.md{white-space:normal}
.md > :first-child{margin-top:0}
.md > :last-child{margin-bottom:0}
.md p{margin:0 0 .7em}
.md ul,.md ol{margin:0 0 .7em;padding-left:1.2rem}
.md li{margin:.25em 0}
.md li::marker{color:var(--sp)}
.md b{font-weight:600}
.md em{font-family:var(--display);font-style:italic}
.md blockquote{margin:.6em 0;padding:.5rem .75rem;background:var(--sunk);
  border-radius:var(--r-md);font-family:var(--display);font-style:italic;color:var(--ink)}
.md h4{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:1.1em 0 .4em}

/* Пока модель думает. Раньше здесь было поддельное сообщение «Смотрю в базе…» */
.dumaet{display:flex;gap:.3rem;align-items:center;padding:.35rem 0}
.dumaet i{width:.4rem;height:.4rem;border-radius:var(--r-pill);background:var(--muted);
  animation:puls 1.1s ease-in-out infinite}
.dumaet i:nth-child(2){animation-delay:.15s}
.dumaet i:nth-child(3){animation-delay:.3s}
@keyframes puls{0%,60%,100%{opacity:.25}30%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.dumaet i{animation:none;opacity:.5}}

.composer{border-top:1px solid var(--line);background:var(--ground);
  padding:var(--s-3) var(--s-5) var(--s-4)}
.composer-in{max-width:calc(var(--measure) + var(--s-8));margin:0 auto;display:flex;
  gap:var(--s-3);align-items:flex-end}
.composer textarea{flex:1;min-height:3.2rem;max-height:12rem;resize:none}
.composer .btn{padding:.65rem 1rem}

.empty{max-width:var(--measure);margin:var(--s-8) auto}
.empty h3{font-family:var(--display);font-weight:600;font-size:var(--t-3);
  margin:0 0 var(--s-3);letter-spacing:-.015em}
.empty p{color:var(--ink-soft);margin:0 0 var(--s-5)}
.empty ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.empty li{cursor:pointer;background:var(--sunk);border-radius:var(--r-md);
  padding:.55rem .75rem;font-size:.92rem;color:var(--ink-soft)}
.empty li:hover{background:var(--sp-bg);color:var(--sp)}

/* Просьба подтвердить почту вместо поля ввода — человек внутри, а не за дверью */
.confirm-note{align-items:center;justify-content:space-between;gap:var(--s-4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-3) var(--s-4)}
.confirm-note div{font-size:.875rem;color:var(--ink-soft)}
.confirm-note b{display:block;font-family:var(--display);font-weight:600;
  font-size:.95rem;color:var(--ink);margin-bottom:.15rem}

/* ---------------------------------------------------------- карточки */
.cards{display:flex;flex-direction:column;gap:var(--s-2);margin:var(--s-3) 0 var(--s-1)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  border-left:3px solid var(--line);padding:var(--s-3) var(--s-4)}
.card h4{font-family:var(--display);font-weight:600;font-size:1.01rem;line-height:1.3;
  margin:0 0 .2rem;color:var(--ink)}
.card .meta{font-size:.8rem;color:var(--muted);margin-top:.3rem}
.card .quote{font-family:var(--display);font-style:italic;color:var(--ink);
  background:var(--sunk);border-radius:var(--r-md);padding:.5rem .7rem;margin-top:var(--s-2)}
.card .muted{font-size:.8rem;color:var(--muted);margin-top:.2rem}
.card .tight{margin:var(--s-2) 0 0;padding-left:1.1rem;font-size:.9rem;color:var(--ink-soft)}
.card .tight li{margin:.15rem 0}
.card .tight li::marker{color:var(--sp)}
.card strong{font-family:var(--display);font-weight:600;font-size:1.01rem}
/* Рейка слева говорит, что за карточка. Цвет здесь — не украшение. */
.card.case,.card.tournament{border-left-color:var(--gold)}
.card.video{border-left-color:var(--sp)}
.card.verdict{border-left-color:var(--pu)}
.card.rebuttal{border-left-color:var(--tv)}
.card .tag{margin-left:.35rem;vertical-align:.05em}

.sit-body{margin-top:var(--s-2);white-space:pre-wrap;color:var(--ink-soft);font-size:.93rem}
.card .src{margin-top:var(--s-3);padding-top:var(--s-2);border-top:1px solid var(--line)}
.vars{margin-top:var(--s-3);border-top:1px solid var(--line);padding-top:var(--s-2)}
.vars summary{cursor:pointer;font-size:.8rem;font-weight:600;color:var(--sp);
  padding:.3rem 0}
.vars summary:focus-visible{outline:2px solid var(--sp);outline-offset:2px}
.var{margin:var(--s-2) 0 0;padding:.55rem .7rem;background:var(--sunk);
  border-radius:var(--r-md)}
.var b{font-family:var(--display);font-weight:600;font-size:.95rem}
.var .quote{background:var(--surface)}

/* ---------------------------------------------------------- сценарий */
.art{border-left:1px solid var(--line);background:var(--surface);display:flex;
  flex-direction:column;min-height:0}
.art-head{padding:var(--s-3);border-bottom:1px solid var(--line);display:flex;
  align-items:center;justify-content:space-between;gap:var(--s-2)}
.art-head strong{font-family:var(--display);font-weight:600;font-size:.95rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-head span{display:flex;gap:var(--s-2);flex:none}
.art-body{flex:1;overflow:hidden}
/* Сценарий показывается той же страницей, что откроется с телефона:
   двух разных сценариев быть не должно. */
#art-frame{width:100%;height:100%;border:0;display:block;background:var(--ground)}

/* ------------------------------------------------------------ телефон */
/* Раньше здесь просто прятались обе боковые панели, и на телефоне не было
   ни списка разговоров, ни «Выйти», ни сценария. Теперь список выезжает
   поверх, а сценарий открывается на весь экран. */
.bar{display:none}
.zaten{display:none}

@media (max-width:56rem){
  .app,.app.with-art{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}

  .bar{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);
    border-bottom:1px solid var(--line);background:var(--sunk)}
  .bar .nazv{flex:1;min-width:0;font-size:.875rem;color:var(--ink-soft);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
  .bar .btn{padding:.4rem .6rem}

  .side{position:fixed;top:0;bottom:0;left:0;width:min(20rem,84vw);z-index:20;
    background:var(--surface);border-right:1px solid var(--line);box-shadow:var(--shadow);
    transform:translateX(-100%);transition:transform .2s ease-out}
  .side.open{transform:none}

  .zaten{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:15}
  .zaten.on{display:block}

  .art{position:fixed;inset:0;z-index:25;border-left:0}

  .thread{padding:var(--s-4) var(--s-3) var(--s-2)}
  .composer{padding:var(--s-2) var(--s-3) var(--s-3)}
  .empty{margin:var(--s-5) auto}
  .shell{padding:0 var(--s-4)}
  .gate{padding-top:var(--s-6)}
  .confirm-note{flex-direction:column;align-items:flex-start}
}
@media (max-width:56rem) and (prefers-reduced-motion:reduce){
  .side{transition:none}
}