/* Урок T001 «Первое знакомство» — .cbx (экраны урока) и слой вокруг звонка.

   Экран про РАБОТУ, поэтому светлый (docs/design/callen_ui_decisions.md):
   полотно, белые карточки, один акцент — индиго. Цвета берутся из общих
   токенов (tokens.css), которые сами переключаются в тёмной теме, — своих
   переопределений здесь нет. Единицы — rem (действует системный размер
   текста).

   Типографика — правило 6.9, три роли:
     контент — то, с чем человек работает (английская фраза, действие по-русски,
               «ты сказал»): 1.125–1.25rem, 500, ОДИН размер на экране;
     структура — заголовки шагов, названия действий, кнопки: 0.9375rem;
     служебное — подписи, счётчики, пояснения: 0.8125rem, 400.
   Капса с разрядкой нет. Индиго — только у активного: текущий этап подготовки,
   звучащая кнопка, идущая запись. Итоги — словом и значком, не одним цветом.
   Кнопки — правило 6.10: по содержимому плюс 32px, по центру, не растягиваются. */

.cbx {
  width: 100%; max-width: 760px; margin: 0 auto;
  padding-bottom: 1.5rem;
  color: var(--ink);
}
.cbx .btn { display: inline-flex; width: auto; min-height: 3rem; padding: 0 2rem; border-radius: var(--rad-md);
            font-size: 0.9375rem; font-weight: 500; }
.cbx .btn.line { padding: 0 1.25rem; min-height: 2.75rem; }
.cbx .btn.quiet { padding: 0 1rem; min-height: 2.75rem; }
.cbx .btn svg { width: 0.875rem; height: 0.875rem; fill: currentColor; flex: none; }
/* «Послушать» — действие звука, а не главный шаг: тональная кнопка, чтобы не спорить
   с тёмным «Дальше» (индиго — только у активного, 6.9). */
.cbx .btn.cbx-play { background: var(--primary-soft); color: var(--primary-ink); border: 0.0625rem solid var(--primary-line);
                     box-shadow: none; min-height: 2.75rem; padding: 0 1.25rem; }
.cbx .btn.cbx-play:hover { filter: none; background: var(--primary-chip); }

/* --- шапка: назад и полоса шага --------------------------------------------- */
.cbx-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.cbx-top .series-back { margin-bottom: 0; min-height: 2.75rem; }
.cbx-progress { display: flex; align-items: center; gap: 0.5rem; }
.cbx-bar { position: relative; width: 5.5rem; height: 0.25rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.cbx-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--primary); }
.cbx-step { font-size: 0.8125rem; font-weight: 400; color: var(--muted); white-space: nowrap; }

.cbx-head { margin: 0.75rem 0 1.25rem; }
.cbx-head h1 { margin-top: 0; max-width: none; font-size: clamp(1.75rem, 8vw, 2.25rem); }
.cbx-time { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--muted); }
.cbx-lead { margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }

/* --- текст и секции ----------------------------------------------------------- */
.cbx-sec { margin-bottom: 1.375rem; }
.cbx-h2 { margin: 0 0 0.5rem; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.cbx-h2-gap { margin-top: 1.125rem; }
.cbx-h2 label { font: inherit; }
.cbx-count { margin-left: 0.5rem; font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.cbx-text { margin: 0 0 0.625rem; font-size: 0.9375rem; line-height: 1.5; color: var(--ink); }
.cbx-text:last-child { margin-bottom: 0; }
.cbx-gap { margin-top: 0.875rem; }
.cbx-snote { margin: 0.5rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
.cbx-snote:empty { display: none; }
.cbx-center { text-align: center; }
.cbx-tag { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--primary-ink); }
.cbx-list { margin: 0 0 0.75rem; padding: 0 0 0 1.125rem; font-size: 0.9375rem; line-height: 1.55; color: var(--ink); }
.cbx-err { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--danger-text); }

.cbx-input { width: 100%; box-sizing: border-box; min-height: 3rem; padding: 0 1rem; border-radius: var(--rad-md);
             border: 0.0625rem solid var(--line); background: var(--surface); color: var(--ink);
             font-size: 1.125rem; font-weight: 500; font-family: inherit; }
.cbx-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 0.1875rem var(--primary-soft); }

/* --- нижние кнопки: по содержимому, по центру (6.10) -------------------------- */
.cbx-foot { display: flex; justify-content: center; margin-top: 0.75rem; }
.cbx-foot-col { flex-direction: column; align-items: center; gap: 0.25rem; }
.cbx-foot-tight { margin-top: 0.5rem; }

/* --- вход на «Курсе» и «Сегодня» ----------------------------------------------- */
.cbx-card { display: flex; align-items: center; gap: 0.75rem; width: 100%; margin: 0 0 1rem; padding: 0.875rem 1rem;
            text-align: left; border-radius: var(--rad-lg); border: 0.0625rem solid var(--primary-line);
            background: var(--primary-soft); color: var(--ink); cursor: pointer; }
.cbx-card-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.cbx-card-tx b { font-size: 0.9375rem; font-weight: 600; }
.cbx-card-tx span { font-size: 0.8125rem; line-height: 1.35; color: var(--muted); }
.cbx-card em { flex: none; font-style: normal; font-size: 0.8125rem; color: var(--primary-ink); }
.cbx-card .cbx-chev { flex: none; width: 1rem; height: 1rem; fill: none; stroke: var(--primary-ink); stroke-width: 20;
                      stroke-linecap: round; stroke-linejoin: round; }

/* --- строки с фразой и звуком ------------------------------------------------- */
.cbx-rows { list-style: none; margin: 0; padding: 0; border-radius: var(--rad-lg); background: var(--surface);
            border: 0.0625rem solid var(--line); overflow: hidden; }
.cbx-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.875rem 0.5rem 0.5rem; }
.cbx-row + .cbx-row { border-top: 0.0625rem solid var(--line); }
.cbx-row-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.0625rem; }
.cbx-row-tx b { font-size: 1.125rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.cbx-row-tx span { font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.cbx-row.seen .cbx-row-tx span { color: var(--green-ink); }
.cbx-rows-blind .cbx-row-tx b { font-size: 0.9375rem; font-weight: 600; }

/* Кнопка звука: круг 2.75rem — палец попадает с первого раза. Индиго — пока звучит. */
.cbx-snd { flex: none; position: relative; width: 2.75rem; height: 2.75rem; border-radius: 50%; padding: 0;
           border: 0.0625rem solid var(--line); background: var(--surface); color: var(--muted);
           display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
           transition: color var(--dur), border-color var(--dur), background var(--dur); }
.cbx-snd svg { width: 1.0625rem; height: 1.0625rem; fill: currentColor; }
.cbx-snd:hover { color: var(--primary-ink); border-color: var(--primary-line); }
.cbx-snd.playing { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
.cbx-snd.busy { opacity: .5; }
.cbx-snd:disabled { opacity: .4; cursor: default; }

.cbx-scheme { margin: 0 0 1.375rem; padding: 0.875rem 1rem; border-radius: var(--rad-lg); background: var(--primary-soft);
              display: flex; flex-direction: column; gap: 0.25rem; }
.cbx-scheme b { font-size: 1.25rem; font-weight: 500; color: var(--ink); }
.cbx-scheme-note { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }
.cbx-scheme-ex { display: flex; align-items: center; gap: 0.625rem; }
.cbx-scheme-ex > span { font-size: 0.8125rem; color: var(--muted); }

.cbx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cbx-chips li { padding: 0.375rem 0.75rem; border-radius: 999px; background: var(--surface-2); color: var(--ink);
                font-size: 0.9375rem; }
.cbx-chips b { font-weight: 600; }
.cbx-memo li { color: var(--muted); }

/* --- диалог Mia и Sam ------------------------------------------------------------- */
.cbx-dialog { text-align: center; }
.cbx-dialog .cbx-text { text-align: left; }
.cbx-voices { display: flex; justify-content: center; gap: 1.75rem; margin: 1rem 0 0.25rem; }
.cbx-face { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; }
.cbx-face i { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
              font-style: normal; font-size: 1.25rem; font-weight: 500; background: var(--surface-2); color: var(--muted);
              box-shadow: 0 0 0 0 var(--primary-soft); transition: box-shadow var(--dur), background var(--dur), color var(--dur); }
.cbx-face em { font-style: normal; font-size: 0.8125rem; color: var(--muted); }
.cbx-face.talk i { background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 0.375rem var(--primary-soft); }
.cbx-dlg { list-style: none; margin: 0; padding: 0; border-radius: var(--rad-lg); background: var(--surface);
           border: 0.0625rem solid var(--line); overflow: hidden; }
.cbx-dlg li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.875rem 0.5rem 0.5rem; }
.cbx-dlg li + li { border-top: 0.0625rem solid var(--line); }
.cbx-dlg li.talk { background: var(--primary-soft); }
.cbx-dlg .cbx-row-tx span { font-size: 0.8125rem; color: var(--muted); }
.cbx-dlg .cbx-row-tx b { font-size: 1.125rem; }

/* --- вопросы и выбор -------------------------------------------------------------- */
.cbx-q { margin-bottom: 1.125rem; }
.cbx-qtext { margin: 0 0 0.5rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }
.cbx-opts { display: flex; flex-direction: column; gap: 0.5rem; }
.cbx-opt { width: 100%; min-height: 2.75rem; padding: 0.625rem 0.9375rem; text-align: left; border-radius: var(--rad-md);
           border: 0.0625rem solid var(--line); background: var(--surface); color: var(--ink);
           font-size: 0.9375rem; font-weight: 500; font-family: inherit; cursor: pointer; }
.cbx-opt:hover:not(:disabled) { border-color: var(--primary-line); background: var(--primary-soft); }
.cbx-opt:disabled { cursor: default; }
.cbx-opt.ok { border-color: var(--green); background: var(--green-soft); color: var(--green-ink); }
.cbx-opt.bad { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger-text); }
.cbx-opt.key:not(.ok) { border-color: var(--green); }
.cbx-verdict { margin: 0.625rem 0 0; padding: 0.75rem 0.9375rem; border-radius: var(--rad-md); font-size: 0.9375rem;
               display: flex; flex-direction: column; gap: 0.125rem; }
.cbx-verdict b { font-weight: 700; }
.cbx-verdict span { font-size: 0.8125rem; opacity: .92; }
.cbx-verdict.ok { background: var(--green-soft); color: var(--green-ink); }
.cbx-verdict.bad { background: var(--danger-soft); color: var(--danger-text); }
.cbx-verdict.warn { background: var(--amber-soft); color: var(--amber-ink); }
.cbx-verdict.neutral { background: var(--surface-2); color: var(--ink); }

/* --- подготовка ------------------------------------------------------------------- */
.cbx-prep { list-style: none; display: flex; gap: 0.375rem; margin: 0 0 1.25rem; padding: 0; }
.cbx-prep li { flex: 1; text-align: center; padding: 0.375rem 0.25rem; border-radius: 999px; background: var(--surface-2);
               color: var(--muted); font-size: 0.8125rem; font-weight: 400; white-space: nowrap; }
.cbx-prep li.done { color: var(--muted); background: var(--surface-2); }
.cbx-prep li.done::before { content: "✓ "; }
.cbx-prep li.now { background: var(--primary); color: var(--on-primary); font-weight: 500; }

.cbx-recall { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.cbx-recall li { padding: 0.75rem 0.9375rem; border-radius: var(--rad-md); border: 0.0625rem solid var(--line);
                 background: var(--surface); display: flex; flex-direction: column; gap: 0.5rem; }
.cbx-recall li > b { font-size: 1.125rem; font-weight: 500; }
.cbx-recall li.set { background: var(--surface-2); border-color: transparent; }
.cbx-recall .cbx-state { font-size: 0.8125rem; color: var(--muted); }
.cbx-recall li.set.self .cbx-state { color: var(--green-ink); }
.cbx-recall li.set.example .cbx-state { color: var(--amber-ink); }
.cbx-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.cbx-mini { min-height: 2.75rem; }
.cbx-example { margin: 0; padding: 0.625rem 0.875rem; border-radius: var(--rad-md); background: var(--primary-soft);
               font-size: 1.125rem; font-weight: 500; color: var(--ink); }

.cbx-task { margin: 0.25rem 0 0.375rem; font-size: 1.25rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.cbx-say { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 1rem 0 0.5rem; }
.cbx-micbtn { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.cbx-micbtn:hover { filter: brightness(1.06); box-shadow: none; }
.cbx-micbtn.rec { background: var(--danger); animation: cbxpulse 1.1s ease-in-out infinite; }
.cbx-mic-ico { display: inline-flex; }
.cbx-mic-ico svg { width: 1rem; height: 1rem; fill: currentColor; }
@keyframes cbxpulse { 50% { opacity: .6; } }

/* --- экран перед звонком ------------------------------------------------------------ */
.cbx-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.cbx-events li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0.9375rem; border-radius: var(--rad-md);
                 background: var(--surface); border: 0.0625rem solid var(--line); }
.cbx-events b { display: block; font-size: 0.9375rem; font-weight: 600; }
.cbx-events li span:last-child span { display: block; margin-top: 0.125rem; font-size: 0.8125rem; color: var(--muted); }
.cbx-n { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--surface-2); color: var(--muted);
         display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 500; }

/* --- разбор ------------------------------------------------------------------------- */
.cbx-wait { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; text-align: center; padding: 2.5rem 1rem; }
.cbx-wait b { font-size: 0.9375rem; font-weight: 600; }
.cbx-wait span { font-size: 0.8125rem; color: var(--muted); }
.cbx-spin { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 0.1875rem solid var(--line); border-top-color: var(--primary);
            animation: cbxspin 0.9s linear infinite; margin-bottom: 0.5rem; }
@keyframes cbxspin { to { transform: rotate(360deg); } }

.cbx-full { display: flex; align-items: center; gap: 0.625rem; margin: 0 0 0.75rem; padding: 0.75rem 0.9375rem; border-radius: var(--rad-md);
            background: var(--green-soft); color: var(--green-ink); font-size: 0.9375rem; font-weight: 500; }
.cbx-full svg { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.cbx-acts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.cbx-act { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0.9375rem; border-radius: var(--rad-md);
           background: var(--surface); border: 0.0625rem solid var(--line); }
.cbx-act-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.cbx-act-tx b { font-size: 0.9375rem; font-weight: 600; }
.cbx-act-tx em { font-style: normal; font-size: 0.8125rem; font-weight: 500; }
.cbx-act.self em { color: var(--green-ink); }
.cbx-act.assisted em { color: var(--amber-ink); }
.cbx-act.unsuccessful em { color: var(--ink); }
.cbx-act.not_observed em, .cbx-act.wait em { color: var(--muted); }
.cbx-why { font-size: 0.9375rem; line-height: 1.45; color: var(--ink); }
.cbx-quote { align-self: flex-start; margin-top: 0.125rem; padding: 0.375rem 0.75rem; border-radius: var(--rad-sm);
             background: var(--surface-2); font-size: 1.125rem; font-weight: 500; color: var(--ink); }

/* Значок итога: самостоятельно — залитый зелёный круг; с помощью — янтарное кольцо;
   пока не получилось — серый круг с чертой; не удалось проверить — пунктир с «?».
   Разными формами, а не одним цветом (docs/design/glossary.md). */
.cbx-mark { flex: none; width: 1.75rem; height: 1.75rem; margin-top: 0.0625rem; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center; font-size: 0.9375rem; }
.cbx-mark svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cbx-mark.self { background: var(--green-strong); color: #ffffff; }
.cbx-mark.assisted { background: transparent; border: 0.125rem solid var(--amber); color: var(--amber-ink); }
.cbx-mark.unsuccessful { background: var(--surface-2); border: 0.0625rem solid var(--line); color: var(--muted); }
.cbx-mark.not_observed, .cbx-mark.wait { background: transparent; border: 0.125rem dashed var(--line); color: var(--muted); }

/* «Не было повода» — не итог ученика и не ошибка: спокойный серый кружок с чертой,
   без красного и без вопроса (MODEL_B_DECISIONS.md, 2А). */
.cbx-mark.noopp { background: var(--surface-2); border: 0.0625rem solid var(--line); color: var(--muted); }

/* Карточки после разбора: только то, что сервер вернул по наблюдавшемуся. */
.cbx-cards { margin: 0 0 1.25rem; padding: 0.875rem 1rem; border-radius: var(--rad-lg); background: var(--surface-2); }
.cbx-cards-line { margin: 0 0 0.5rem; font-size: 0.9375rem; color: var(--ink); }
.cbx-cards-line b { font-weight: 600; }
.cbx-cards .cbx-chips li { background: var(--surface); }

.cbx-ask { margin: 0 0 1.25rem; padding: 1rem; border-radius: var(--rad-lg); background: var(--primary-soft); }
.cbx-ask .cbx-say { margin-top: 0.75rem; }
.cbx-next { margin: 0 0 1.25rem; padding: 1rem; border-radius: var(--rad-lg); background: var(--surface-2); }
.cbx-example-box { display: flex; flex-direction: column; gap: 0.125rem; margin-top: 0.625rem; padding: 0.625rem 0.875rem;
                   border-radius: var(--rad-md); background: var(--surface); }
.cbx-example-box span { font-size: 0.8125rem; color: var(--muted); }
.cbx-example-box b { font-size: 1.25rem; font-weight: 500; color: var(--ink); }

.cbx-tools { margin-top: 1.75rem; padding: 1rem; border-radius: var(--rad-lg); border: 0.0625rem dashed var(--line);
             display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.cbx-tools .cbx-tag { color: var(--muted); }

/* =========================================================================
   Слой вокруг звонка — .cubecall (модификатор .callscreen.ctcall). Тёмный
   всегда, как звонок по теме: тот же фон, портрет, волна и подтверждение
   выхода; добавлено только то, что нужно этому уроку — три цели без галочек,
   памятка по-русски и шторка английских подсказок по действиям.
   ========================================================================= */
.cubecall .cbx-goals { list-style: none; margin: 0.5rem auto 0; padding: 0; width: 100%; max-width: 26rem;
                       display: flex; flex-direction: column; gap: 0.375rem; counter-reset: cbg; }
.cubecall .cbx-goals li { counter-increment: cbg; display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem;
                          border-radius: 0.75rem; background: rgba(255, 255, 255, .08); color: #eef0fa; font-size: 0.9375rem; }
.cubecall .cbx-goals li::before { content: counter(cbg); flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%;
                                  display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem;
                                  background: rgba(255, 255, 255, .14); color: #c9cde0; }
.cubecall .cbx-callmemo { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem 0.75rem; margin: 0.75rem 0 0.75rem;
                          font-size: 0.8125rem; color: #aeb5c9; }
.cubecall .cbx-callmemo span::before { content: "«"; }
.cubecall .cbx-callmemo span::after { content: "»"; }
.cubecall .call-pills { flex-direction: column; align-items: center; margin-bottom: 0.75rem; }
.cubecall .call-pills .scprops { width: auto; min-height: 2.75rem; padding: 0 2rem; }
.cubecall .cbx-sheet { max-height: 78%; overflow-y: auto; background: #161b2e; border-top: 0.0625rem solid rgba(255, 255, 255, .1); gap: 0.5rem; }
.cubecall .cbx-sheet .icon-btn { width: 2.75rem; height: 2.75rem; }
.cubecall .cbx-sheet-note { margin: 0; font-size: 0.8125rem; color: #aeb5c9; }
.cubecall .cbx-hints { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.cubecall .cbx-hint { width: 100%; min-height: 2.75rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
                      padding: 0 0.875rem; border-radius: 0.75rem; border: 0.0625rem solid rgba(255, 255, 255, .16);
                      background: transparent; color: #eef0fa; font-size: 0.9375rem; font-family: inherit; cursor: pointer; }
.cubecall .cbx-hint em { font-style: normal; font-size: 0.8125rem; color: #b9b6ff; }
.cubecall .cbx-hint[aria-expanded="true"] { border-color: rgba(141, 135, 255, .5); }
.cubecall .cbx-hint-en { margin: 0.25rem 0 0.25rem; padding: 0.5rem 0.875rem; border-radius: 0.75rem;
                         background: rgba(94, 92, 246, .18); color: #ffffff; font-size: 1.125rem; font-weight: 500; }
.cubecall .cbx-hint-en[hidden] { display: none; }