/* Callen · новый стиль (М2, 23.09.2026).

   Только звонок по теме курса (.ctcall — модификатор существующего
   .callscreen) и разбор после него (.crv — отдельная страница, не подмешана
   в общий разбор). Остальные экраны переводятся на редизайне отдельным
   этапом (`docs/design/callen_ui_decisions.md`, «Как стиль ложится на
   приложение»); этот файл их не трогает и не переопределяет ничего чужого.

   Токены — свои, с префиксом --v2-: `tokens.css`/`ui.css` не трогаем ни
   значением, ни именем переменной, чтобы не задеть остальные экраны, когда
   до них дойдёт очередь. Числа — из `docs/design/mobile/tokens.md`
   (индиго-палитра рабочих экранов и тёмный звонок), единицы — rem (М7:
   действует системный размер текста).

   Свободный звонок, сцены и серии этот файл не видит вовсе: их разметка
   не получает классов .ctcall/.crv, а .scask/.tp-rule и другие переиспользуемые
   компоненты ui.css здесь не переопределяются — только используются как есть.
   Исключение — одно правило для .st-sheet[hidden] ниже, и оно объяснено там
   же: без него лист правил темы, открытый ПОВЕРХ звонка, ничего чужого не
   ломает, потому что курс переключает его не атрибутом hidden, а тем, кладёт
   ли разметку листа в шаблон вообще. */

:root {
  --v2-primary: #5e5cf6;
  --v2-primary-ink: #4f4ce8;
  --v2-primary-soft: #eeedff;
  --v2-green: #1fb589;
  --v2-green-ink: #167b60;
  --v2-green-soft: #e8faf4;
  --v2-amber: #ffb84d;
  --v2-ink: #161b2c;
  --v2-muted: #697087;
  --v2-muted-strong: #5d6378;
  --v2-line: #e5e8f0;
  --v2-screen: #f7f8fb;
  --v2-paper: #ffffff;
  --v2-dark-2: #1b2138;
  --v2-on-dark: #ffffff;
  --v2-on-dark-muted: #aeb5c9;
  --v2-on-dark-dim: #c9cde0;
}

/* =========================================================================
   Звонок по теме курса — .ctcall (модификатор .callscreen.scenecall)
   ========================================================================= */

/* Фон — индиго-градиент тёмного звонка (tokens.md §2), не «эталонный»
   .call-art с портретом во весь экран: тема курса рисуется тем же слоем,
   что сцена (круглый портрет), а фон под ним — просто цвет. */
.callscreen.ctcall { background: linear-gradient(160deg, #111526, #1d2440 65%, #22284a); }
.callscreen.ctcall .call-art { display: none; }

.ctcall .scface { box-shadow: 0 0 0 0.375rem rgba(94, 92, 246, .18), 0 0 0 0.875rem rgba(94, 92, 246, .08); }
.ctcall .wave i { background: #8d87ff; }
.ctcall .wave.them i { background: var(--v2-green); }
.ctcall .pill:hover { border-color: rgba(94, 92, 246, .5); color: #b9b6ff; }
.ctcall .round.end { background: #e5484d; box-shadow: 0 0.625rem 1.625rem -0.875rem rgba(229, 72, 77, .7); }
.ctcall .call-timer { color: #b9b6ff; }
.ctcall .call-timer.ending { color: #ff8a90; }

.ct-aitag {
  align-self: center; margin-top: 0.375rem; padding: 0.2rem 0.6rem;
  border-radius: 999px; background: rgba(255, 255, 255, .12);
  color: var(--v2-on-dark-muted); font-size: 0.75rem; font-weight: 700;
}

/* --- задачи звонка: чек-лист, а не одна строка (спека §6) --------------- */
.ct-tasks { flex: none; list-style: none; margin: 0.625rem 0 0; padding: 0; text-align: left; }
.ct-tasks li {
  display: flex; align-items: flex-start; gap: 0.625rem; min-height: 1.75rem;
  padding: 0.2rem 0; font-size: 0.9375rem; line-height: 1.35; color: var(--v2-on-dark-dim);
}
.ct-tasks .ck {
  flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.05rem; border-radius: 50%;
  border: 0.09rem solid rgba(255, 255, 255, .35); display: grid; place-items: center; color: #10131f;
}
.ct-tasks .ck svg { width: 0.8rem; height: 0.8rem; fill: none; stroke: currentColor; stroke-width: 2.4; }
.ct-tasks li.done { color: var(--v2-on-dark); }
.ct-tasks li.done .ck { background: var(--v2-green); border-color: transparent; }
.ct-task-text { flex: 1; }
.ct-task-note { flex: none; font-size: 0.75rem; color: var(--v2-on-dark-muted); }

/* --- карточка правила: всегда видна, кроме «Скрыть» --------------------- */
/* Лист «Правила темы» поверх звонка (#ctSheet, call.js) переключается тем же
   способом, что .scsheet/.scask (ui.css) — атрибутом hidden, не пересборкой
   шаблона. У .scsheet/.scask своя строка `[hidden]{display:none}` в ui.css
   (иначе .scsheet{display:...}/.scask{display:flex} перебивают UA-правило —
   и автор-класс, и [hidden] равны по специфичности, а класс объявлен позже).
   У .st-sheet такой строки нет: курс переключает его НЕ атрибутом, а тем,
   кладёт ли `${sheet ? rulesSheet() : ''}` разметку в шаблон вообще
   (course.js). Здесь атрибут нужен — тело листа рисуется один раз в JS
   (drawSheetBody), а не при каждом show(). Без строки ниже лист был виден
   всегда, узкой полосой понизу экрана (живой прогон, мок-звонок): нашли не
   глазами, а тем, что #ctSheet.hidden===true, а getComputedStyle — flex. */
.st-sheet[hidden] { display: none; }

.ct-rule { flex: none; margin: 0.625rem 1rem 0; }
.ct-rule-wrap { position: relative; }
.ct-rule-show, .ct-rule-hide {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem;
  padding: 0 1rem; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: var(--v2-on-dark); font-size: 0.875rem; font-weight: 700;
}
.ct-rule-show { width: 100%; }
.ct-rule-hide { position: absolute; right: 0.25rem; top: 0.25rem; min-height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; }
.ct-rule-card {
  display: block; width: 100%; text-align: left; border: 0.06rem solid rgba(255, 255, 255, .09);
  border-radius: 1.125rem; background: var(--v2-dark-2); padding: 0.75rem 3.75rem 0.75rem 0.875rem;
  cursor: pointer; color: inherit;
}
.ct-rule-lbl { display: block; font-size: 0.75rem; font-weight: 700; color: var(--v2-on-dark-muted); }
.ct-rule-title { display: block; margin: 0.125rem 0 0.25rem; font-size: 0.9375rem; font-weight: 800; color: var(--v2-on-dark); line-height: 1.3; }
.ct-rule-formula {
  display: block; font-family: ui-monospace, "SF Mono", Menlo, "Roboto Mono", monospace;
  font-size: 0.75rem; color: var(--v2-on-dark-dim); line-height: 1.4;
}
.ct-rule-card.fix { border-color: var(--v2-amber); box-shadow: 0 0 0 0.1875rem rgba(255, 184, 77, .14); }
.ct-rule-card.fix .ct-rule-lbl { color: var(--v2-amber); }

/* --- текст разговора: переключатель + тап-перевод ----------------------- */
.ct-texttog {
  align-self: center; display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: 2rem; padding: 0 0.75rem 0 0.625rem; margin-bottom: 0.5rem; border-radius: 999px;
  border: none; cursor: pointer; background: rgba(255, 255, 255, .08); color: var(--v2-on-dark-dim);
  font-size: 0.8125rem; font-weight: 700;
}
.ct-texttog[aria-pressed="true"] { background: rgba(125, 117, 255, .24); color: var(--v2-on-dark); }

/* Реплика с переводом — та же субтитровая строка call-caption, но кликабельна.
   Реальный сервер сегодня перевода не шлёт (addLine, call.js) — стиль ждёт
   поле, а не выдаёт себя раньше времени: без .ru внутри кнопка выглядит
   и ведёт себя как обычный <p>. */
button.ct-line-tr {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;
}
.ct-line-tr .ru { display: block; font-size: 0.8125rem; color: var(--v2-on-dark-muted); margin-top: 0.125rem; }

/* =========================================================================
   Разбор звонка по теме курса — .crv (страница, светлая, без .callscreen)
   ========================================================================= */

.crv {
  width: 100%; max-width: 34rem; margin: 0 auto; padding: 0 0 2rem;
  color: var(--v2-ink); font-size: 0.9375rem; line-height: 1.5;
}
.crv-head { padding: 1.25rem 0 0.5rem; text-align: center; }
.crv-check {
  width: 3.5rem; height: 3.5rem; margin: 0 auto 0.75rem; border-radius: 1.25rem;
  background: var(--v2-green-soft); color: var(--v2-green-ink); display: grid; place-items: center;
}
.crv-check svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2.2; }
.crv-head h1 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.crv-head p { margin: 0.5rem 0 0; color: var(--v2-muted); font-size: 0.9375rem; line-height: 1.45; }
.crv-chips { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.crv-chip {
  display: inline-flex; align-items: center; height: 1.625rem; padding: 0 0.625rem;
  border-radius: 999px; background: #eef0f5; color: var(--v2-muted-strong); font-size: 0.75rem; font-weight: 700;
}
.crv-chip.ok { background: var(--v2-green-soft); color: var(--v2-green-ink); }

.crv-sec { margin-top: 1.5rem; }
.crv-sec h2 { margin: 0 0 0.5rem; font-size: 0.9375rem; font-weight: 800; }

.crv-tasks { list-style: none; margin: 0; padding: 0; border-radius: 1rem; background: var(--v2-paper); border: 0.06rem solid var(--v2-line); }
.crv-tasks li { display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0.5rem 0.875rem; font-size: 0.9375rem; font-weight: 600; color: var(--v2-muted); }
.crv-tasks li + li { border-top: 0.06rem solid var(--v2-line); }
.crv-tasks li.done { color: var(--v2-ink); }
.crv-tasks .ck {
  flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; border: 0.09rem solid #d5d9e4;
  display: grid; place-items: center; color: #fff;
}
.crv-tasks .ck svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2.6; }
.crv-tasks li.done .ck { background: #15a079; border-color: transparent; }
.crv-task-text { flex: 1; }
.crv-task-note { flex: none; font-size: 0.75rem; font-weight: 600; color: var(--v2-muted); }
.crv-tasks li.done .crv-task-note { color: var(--v2-green-ink); }

.crv-fix { padding: 1rem; border-radius: 1rem; background: var(--v2-paper); border: 0.06rem solid var(--v2-line); }
.crv-pair .was, .crv-pair .good { padding: 0.625rem 0.875rem; border-radius: 0.75rem; font-size: 1.125rem; font-weight: 700; }
.crv-pair .was { background: #f5f6fa; }
.crv-pair .good { background: var(--v2-green-soft); color: var(--v2-green-ink); margin-top: 0.5rem; }
.crv-pair small { display: block; font-size: 0.75rem; font-weight: 600; color: var(--v2-muted); margin-bottom: 0.125rem; }
.crv-pair .good small { color: var(--v2-green-ink); opacity: .75; }
.crv-why { margin: 0.625rem 0 0; font-size: 0.875rem; color: var(--v2-muted); }
.crv-empty { margin: 0; padding: 1rem; border-radius: 1rem; background: var(--v2-paper); border: 0.06rem solid var(--v2-line); color: var(--v2-muted); font-size: 0.875rem; }

.crv-words { border-radius: 1rem; background: var(--v2-paper); border: 0.06rem solid var(--v2-line); }
.crv-word { display: flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; padding: 0.5rem 0.75rem; }
.crv-word + .crv-word { border-top: 0.06rem solid var(--v2-line); }
.crv-say {
  flex: none; width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; border: none; cursor: pointer;
  background: #f5f6fa; color: var(--v2-muted-strong); display: grid; place-items: center;
}
.crv-word-tx { display: flex; flex-direction: column; }
.crv-word-tx b { font-size: 1rem; font-weight: 700; }
.crv-word-tx span { font-size: 0.8125rem; color: var(--v2-muted); }

.crv-acts { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; margin-top: 1.75rem; }
.crv-acts .btn { width: auto; }

@media (max-width: 420px) {
  .ct-aitag { display: none; }
}