/* Пилот C001 «Первое знакомство» — то, чего нет в общем слое урока B (ch.js).

   Всё остальное берётся из cube.css (.cbx-*): тот же каркас, шапка с полосой шага, выбор, плашки
   «Верно / Не совсем», кнопка звука, блок реплики. Здесь — плитки, разнос по этапам, строка
   микроурока и списки разбора. Правила те же: рабочий экран светлый, три роли текста (6.9),
   кнопки по содержимому плюс 32px и по центру (6.10), цели касания не меньше 44px, единицы — rem.
   Цвета — общие токены, в тёмной теме переключаются сами. */

/* `фраза` в обратных кавычках данных — английская строка внутри русского текста. */
.pcx-en { font-weight: 700; color: var(--ink); }

/* Служебная строка микроурока над содержимым экрана. */
.pcx-lesson { margin: 0.75rem 0 0.875rem; font-size: 0.8125rem; font-weight: 400; color: var(--muted); }

/* Что видит ученик — реплика, перевод, звук. Блок один на экран, контент 1.25rem (6.9). */
.pcx-said { margin-top: 0; margin-bottom: 0.75rem; }
.pcx-said .cbx-foot { margin: 0.5rem 0 0; }
.pcx-said.pcx-filled { background: var(--green-soft); }
.pcx-said.pcx-filled b { color: var(--green-ink); }
.pcx-prompt { margin: 0.5rem 0 0.75rem; }

/* Обратная связь из таблицы главы: одна плашка, текст как записан. */
.pcx-fb { margin-top: 0.75rem; }
.pcx-fb span { font-size: 0.9375rem; opacity: 1; }
.pcx-fb .pcx-en { color: inherit; }

/* Вход: три части главы — чипы. */
.pcx-plan { flex-direction: column; align-items: stretch; }
.pcx-plan li { border-radius: var(--rad-md); padding: 0.625rem 0.875rem; }

/* Плитки: собранная строка сверху, оставшиеся — снизу. Плитка — кнопка, не меньше 44px. */
.pcx-tileline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-height: 3.5rem; margin: 0 0 0.75rem;
                padding: 0.5rem; border-radius: var(--rad-md); border: 0.0625rem dashed var(--line); background: var(--surface); }
.pcx-tileline .cbx-snote { margin: 0 0.25rem; }
.pcx-tiles, .pcx-pool { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; min-height: 2.75rem; }
.pcx-tile { min-height: 2.75rem; min-width: 2.75rem; padding: 0.5rem 1rem; border-radius: var(--rad-md); cursor: pointer;
            border: 0.0625rem solid var(--line); background: var(--surface); color: var(--ink);
            font: inherit; font-size: 1.125rem; font-weight: 500; }
.pcx-tile:hover:not(:disabled) { border-color: var(--primary-line); background: var(--primary-soft); }
.pcx-tile.on { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary-ink); }
.pcx-tile:disabled { cursor: default; opacity: .7; }
.pcx-tile:focus-visible { outline: none; box-shadow: 0 0 0 0.1875rem var(--primary-soft); border-color: var(--primary); }
.pcx-result { margin: 0.5rem 0 0; font-size: 1.125rem; font-weight: 500; color: var(--ink); }
.pcx-result.ok { color: var(--green-ink); }

/* Разнос по этапам: три ряда-кнопки «этап — фраза». */
.pcx-stages { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.pcx-stage { width: 100%; min-height: 2.75rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
             padding: 0.625rem 0.9375rem; text-align: left; border-radius: var(--rad-md); cursor: pointer;
             border: 0.0625rem solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.pcx-stage:hover:not(:disabled) { border-color: var(--primary-line); background: var(--primary-soft); }
.pcx-stage:disabled { cursor: default; }
.pcx-stage.ok { border-color: var(--green); background: var(--green-soft); color: var(--green-ink); }
.pcx-stage:focus-visible { outline: none; box-shadow: 0 0 0 0.1875rem var(--primary-soft); border-color: var(--primary); }
.pcx-stage-name { font-size: 0.9375rem; font-weight: 500; }
.pcx-stage-val { font-size: 1.125rem; font-weight: 500; }

/* «Можно сказать по-русски: помоги / повтори» перед звонком — чипы. */
.pcx-memo { margin-bottom: 0.5rem; }

/* Разбор: списки строк «умеешь / улучшить / повторить». */
.pcx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.pcx-item { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0.9375rem; border-radius: var(--rad-md);
            background: var(--surface); border: 0.0625rem solid var(--line); font-size: 0.9375rem; line-height: 1.45; color: var(--ink); }
.pcx-item span { font-size: 0.9375rem; color: var(--ink); }
.pcx-item b { font-size: 1.125rem; font-weight: 500; }
.pcx-item.pcx-can { flex-direction: row; align-items: flex-start; gap: 0.625rem; }
.pcx-tick { flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.0625rem; color: var(--green-ink); }
.pcx-tick svg { width: 100%; height: 100%; }
.pcx-natural { color: var(--ink); }

/* Звонок главы: пять целей вместо трёх — компактнее портрет и строки, чтобы всё влезло на 667px
   и не наезжало на волну, памятку и кнопки. */
.cubecall.chcall .scface { width: 3.5rem; height: 3.5rem; margin: 0.375rem auto 0.25rem; }
.cubecall.chcall .call-city { margin-top: 0; }
.cubecall.chcall .cbx-goals { gap: 0.25rem; margin-top: 0.375rem; }
.cubecall.chcall .cbx-goals li { padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25; }

/* Разбор: галочка «умеешь» — обводкой, а не заливкой (в общем слое цвет задаёт .cbx-mark). */
.pcx-item .pcx-tick { color: var(--green-ink); }
.pcx-tick svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Плитки-реплики (layout: 'lines'): плитка — целая реплика, собранное — вертикальный список по порядку. */
.pcx-lineup { list-style: none; margin: 0 0 0.75rem; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.375rem;
              counter-reset: pcl; border-radius: var(--rad-md); border: 0.0625rem dashed var(--line); background: var(--surface); min-height: 3.5rem; }
.pcx-lineup li { counter-increment: pcl; display: flex; align-items: center; gap: 0.5rem; }
.pcx-lineup li::before { content: counter(pcl); flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
                          display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem;
                          background: var(--primary-chip); color: var(--primary-ink); }
.pcx-lineup-empty::before { opacity: .55; }
.pcx-slot { flex: 1; min-height: 2.75rem; border-radius: var(--rad-md); border: 0.0625rem dashed var(--line); }
.pcx-linehint { margin: 0 0 0.75rem; }
.pcx-lineup .pcx-tile-line { flex: 1; }
.pcx-tiles-lines { flex-direction: column; align-items: stretch; }
.pcx-tile-line { width: 100%; text-align: left; font-size: 1rem; line-height: 1.35; }

/* «Урок пройден»: отметка над заголовком. */
.pcx-donehead { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.pcx-donemark { display: inline-flex; width: 2.5rem; height: 2.5rem; margin-bottom: 0.75rem; border-radius: 50%; padding: 0.5rem;
                background: var(--green-soft); color: var(--green-ink); }
.pcx-donemark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Закреплённые реплики диалога: на своих местах, не нажимаются; та же плашка, что у реплик, но без рамки-кнопки. */
.pcx-fixedrow { min-height: 2.75rem; }
.pcx-fixed { flex: 1; display: flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1rem; border-radius: var(--rad-md);
             background: var(--surface-2); border: 0.0625rem solid transparent; color: var(--ink); font-size: 1rem; line-height: 1.35; }

/* Личный выбор (страна, город): список кнопок; длинный — сеткой в два столбца, чтобы листался коротко. */
.pcx-picklist { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.pcx-picklist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.pcx-pick { text-align: center; padding: 0.5rem 0.5rem; font-size: 0.9375rem; overflow-wrap: anywhere; }
.pcx-pick.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
.pcx-chosen { margin-bottom: 0.5rem; }

/* Объяснение (notice с многострочным текстом): строки в белой карточке, слева — что, справа — пример. */
.pcx-explain { margin: 0.75rem 0 0; padding: 0.25rem 0.9375rem; border-radius: var(--rad-md); background: var(--surface); border: 0.0625rem solid var(--line); }
.pcx-exrow { margin: 0; padding: 0.625rem 0; display: flex; flex-direction: column; gap: 0.125rem; }
.pcx-exrow + .pcx-exrow { border-top: 0.0625rem solid var(--line); }
.pcx-exrow b { font-size: 1rem; font-weight: 600; color: var(--ink); }
.pcx-exrow span { font-size: 0.9375rem; line-height: 1.4; color: var(--muted); }
.pcx-exrow span:only-child { color: var(--ink); }