/* Комната занятия. Тон тот же, что у витрины преподавателей: тёплый вечер,
   лицом к лицу. Фон это сцена из готового набора платформы.

   Портрет рисует tutors.css вместе с tutors.js: класс .tu-face, размер через
   --tu-face, кросс-фейд через --tu-d и --tu-e. Здесь эти токены задаются на
   странице, потому что оболочка .tu тут не поднимается. Второго способа
   показывать лицо в комнате нет.

   Всё движение это opacity и transform. */

.rm{
  --tu-d:200ms;
  --tu-e:cubic-bezier(.16,1,.3,1);
  --tu-face:clamp(120px,34vw,168px);
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--bg-1);color:var(--ink);font-family:var(--font-t);
}
html[data-motion="1"] .rm{--tu-d:120ms}

/* ── шапка ── */
.rm-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:clamp(10px,2vw,16px) clamp(12px,4vw,28px)}
.rm-back{display:inline-flex;gap:8px;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-sm);
  color:var(--ink-dim);font-weight:700;font-size:.875rem;background:var(--glass);
  box-shadow:inset 0 0 0 1px var(--line);transition:color .3s var(--ease)}
.rm-back:hover{color:var(--ink)}
.rm-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-back svg{width:16px;height:16px}
.rm-quota{color:var(--ink-faint);font-size:.75rem;text-align:right;max-width:52vw}

/* ── портрет: обойма вокруг чужого .tu-face ──
   Кольцо загорается, пока звучит голос: это состояние комнаты, а не жизнь
   лица. Дыхание и моргание живут в tutors.css и включаются setAlive. */
.rm-avatar{position:relative;flex:none;display:inline-grid;isolation:isolate;
  transform:perspective(640px) rotateX(var(--tl-rx,0deg)) rotateY(var(--tl-ry,0deg))}
.rm-avatar::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid color-mix(in oklab,var(--gold) 50%,transparent);
  opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.rm-avatar.talk::after{opacity:.85}
@media (prefers-reduced-motion:no-preference){
  .rm-avatar.talk::after{animation:rm-pulse 1.2s var(--ease) infinite}
}
@keyframes rm-pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.04);opacity:.35}}
html[data-motion="0"] .rm-avatar.talk::after{animation:none}
/* свечение говорения: tutor-live.js дышит переменной --amp 0..1 в ритме
   голоса (честный анализатор, при его недоступности синус). Без скрипта и
   на сокращённом движении работает запасное значение var(--amp,.3): ровный
   тёплый свет, никакой пульсации. Слой позади лица (z-index:-1 внутри
   isolation), рисует только opacity и transform. */
.rm-avatar::before{content:"";position:absolute;inset:-16px;border-radius:50%;z-index:-1;
  pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--gold) 36%,transparent) 0%,transparent 72%);
  transition:opacity .18s linear,transform .18s linear}
.rm-avatar.talk::before{opacity:calc(.22 + var(--amp,.3)*.55);
  transform:scale(calc(.97 + var(--amp,.3)*.08))}
/* параллакс и свечение — украшение: сокращённое движение живёт без них */
html[data-motion="1"] .rm-avatar,html[data-motion="0"] .rm-avatar{transform:none}
html[data-motion="0"] .rm-avatar.talk::before{opacity:.3;transform:none}
@media (prefers-reduced-motion:reduce){
  .rm-avatar{transform:none}
  .rm-avatar.talk::before{opacity:.3;transform:none}
}
/* буква вместо лица, пока портрет не приехал */
.rm-mono{place-self:center;font-family:var(--font-d);font-weight:600;font-size:1.75rem;color:var(--gold)}

/* ── взгляд клетки состояния (A04) ──
   Мгновенная реакция хода это звук и движение портрета, пока едет фраза.
   Кадров под взгляд не нарисовано ни одного (в манифесте портретов их нет),
   поэтому пока это короткое движение самой головы на несколько пикселей: в
   сторону, на доску, вниз. Смысл несёт направление, а не размах, поэтому
   размах маленький, а переход медленный: дёрганая голова это не взгляд.
   Направление ставит room.js атрибутом data-gaze, значения из axes.json. */
.rm-avatar .tu-face{transform:translate3d(var(--gz-x,0px),var(--gz-y,0px),0);
  transition:transform .5s var(--ease)}
.rm-avatar[data-gaze="v-storonu"]{--gz-x:-5px}
.rm-avatar[data-gaze="na-dosku"]{--gz-x:5px;--gz-y:-2px}
.rm-avatar[data-gaze="vniz"]{--gz-y:4px}
/* движение это украшение: без него взгляд просто не двигается */
html[data-motion="1"] .rm-avatar .tu-face,
html[data-motion="0"] .rm-avatar .tu-face{transform:none;transition:none}
@media (prefers-reduced-motion:reduce){
  .rm-avatar .tu-face{transform:none;transition:none}
}

/* ── экран до занятия ── */
.rm-setup{width:100%;max-width:620px;margin:0 auto;padding:8px clamp(14px,4vw,24px) 64px}
.rm-hero{display:flex;gap:16px;align-items:center}
.rm-hero-text{min-width:0}
.rm-setup h1{font-family:var(--font-d);font-weight:600;font-size:clamp(1.25rem,4vw,1.75rem)}
.rm-role{margin-top:2px;font-size:.8125rem;color:var(--gold)}
.rm-line{margin-top:8px;font-size:.9375rem;line-height:1.5}
.rm-who{margin-top:6px;font-size:.8125rem;color:var(--ink-dim)}
.rm-voice{margin-top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:.75rem;color:var(--ink-faint)}
/* видимая методика (A9.3): как он ведёт час, до того как занятие началось.
   Те же три строки, что на карточке витрины, источник у них один. */
.rm-method{margin-top:18px;padding:12px 14px;border-radius:var(--r-sm);
  background:color-mix(in oklab,var(--ink) 4%,transparent);
  box-shadow:inset 0 0 0 1px var(--line)}
.rm-method-h{margin:0;font-size:.6875rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-faint)}
.rm-method-list{margin:8px 0 0;padding:0;list-style:none}
.rm-method-list li{position:relative;margin-top:7px;padding-inline-start:14px;
  font-size:.875rem;line-height:1.5;color:var(--ink-dim)}
.rm-method-list li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:color-mix(in oklab,var(--gold) 70%,transparent)}

.rm-goal{margin-top:18px;padding:12px 14px;border-radius:var(--r-sm);font-size:.875rem;line-height:1.5;
  background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 26%,transparent)}
.rm-h2{margin:26px 0 12px;font-family:var(--font-d);font-weight:600;font-size:1rem}
.rm-durations{display:grid;gap:10px}
.rm-dur{display:block;width:100%;text-align:left;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .25s var(--ease),transform .2s var(--ease)}
.rm-dur:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--line-strong)}
.rm-dur:active:not(:disabled){transform:scale(.99)}
.rm-dur:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-dur[aria-checked="true"]{background:var(--gold-soft);box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--gold) 55%,transparent)}
.rm-dur:disabled{opacity:.5;cursor:not-allowed}
.rm-dur b{display:block;font-family:var(--font-d);font-weight:600;font-size:1rem}
.rm-dur i{display:block;margin-top:4px;font-style:normal;font-size:.8125rem;color:var(--ink-dim);line-height:1.45}
.rm-note{margin-top:12px;font-size:.8125rem;line-height:1.5;color:var(--ink-dim)}
/* тёмная краска на золоте держит контраст во всех восьми темах: --bg-0 на
   светлых это почти белый (#EDEBE6 и светлее), и надпись на золоте тонет.
   Та же константа, что у .tu-cta на витрине. */
.rm-cta{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;margin-top:22px;
  width:100%;border-radius:var(--r-sm);font-weight:800;font-size:1rem;color:#12100B;background:var(--gold);
  transition:transform .25s var(--ease),filter .25s var(--ease)}
.rm-cta:hover{transform:translateY(-1px);filter:brightness(1.06)}
.rm-cta:active{transform:scale(.98)}
.rm-cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rm-cta:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none}
.rm-cta-ghost{color:var(--ink);background:var(--glass);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.rm-hint{margin-top:10px;min-height:1.2em;font-size:.75rem;color:var(--ink-dim);text-align:center}

/* ── комната ── */
.rm-room{position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden}
.rm-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;pointer-events:none}
.rm-veil{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,color-mix(in oklab,var(--bg-1) 62%,transparent) 0%,
  color-mix(in oklab,var(--bg-1) 88%,transparent) 55%,var(--bg-1) 100%)}
/* Сцена это сетка из трёх частей и полосы управления. На узком экране части
   не удаляются и не пересобираются: показывается ровно одна, остальные ждут
   с целым состоянием. Поэтому переключение вкладки не стоит занятию ничего. */
.rm-stage{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;min-height:0;
  width:100%;max-width:760px;margin:0 auto;padding:0 clamp(12px,4vw,24px) clamp(12px,3vw,20px)}
.rm-pane{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0;flex:1}

/* ── доска ──
   Коробка под доску занята с первой секунды занятия: пока писать нечего, в
   ней стоит честная строка того же размера. Поэтому первое письмо ничего не
   двигает, оно просто появляется на своём месте. */
.rm-pane-board{position:relative}
.rm-boardbox{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.rm-board{min-height:0}
.rm-boardnote{padding:22px 18px;border-radius:var(--r-sm);text-align:center;font-size:.875rem;line-height:1.55;
  color:var(--ink-dim);background:color-mix(in oklab,var(--bg-1) 70%,transparent);
  box-shadow:inset 0 0 0 1px var(--line)}

/* окно ученика: кружок в углу доски, перетаскивается пальцем и мышью.
   Камеры в нём пока нет, и он об этом не врёт: кольцо дышит в такт голосу. */
.rm-me{position:absolute;right:14px;bottom:14px;width:76px;height:76px;border-radius:50%;
  display:grid;place-items:center;touch-action:none;cursor:grab;z-index:3;
  background:color-mix(in oklab,var(--bg-1) 82%,transparent);
  box-shadow:inset 0 0 0 1px var(--line-strong)}
.rm-me:active{cursor:grabbing}
.rm-me:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.rm-me-ring{position:absolute;inset:-4px;border-radius:50%;pointer-events:none;
  border:2px solid color-mix(in oklab,var(--gold) 45%,transparent);
  opacity:calc(.18 + var(--me,0)*.7);transform:scale(calc(1 + var(--me,0)*.06));
  transition:opacity .12s linear,transform .12s linear}
.rm-me-tag{font-family:var(--font-d);font-weight:600;font-size:.8125rem;color:var(--ink-dim)}
html[data-motion="0"] .rm-me-ring{transform:none;transition:none}
/* На телефоне окно ученика не перетаскивается (room.js dragMe выходит на
   узком экране), и в правом нижнем углу коробки оно садилось прямо на панель
   доски: кнопки «во весь экран» и «убрать доску» переставали нажиматься.
   Там же оно и не нужно: снизу коробки стоит панель, а не холст. Поднимаем
   его к верхнему правому углу холста, где на 390 колонки слов уже нет. */
@media (max-width:899px){
  .rm-me{top:12px;bottom:auto;right:12px;width:60px;height:60px}
}

.rm-who-row{display:flex;gap:12px;align-items:center}
.rm-whotext{min-width:0;flex:1}
.rm-name{font-family:var(--font-d);font-weight:600;font-size:1.0625rem}
.rm-meta{margin-top:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:.75rem;color:var(--ink-faint)}
.rm-voice-line{min-width:0;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-time{margin-top:6px;font-size:.8125rem;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.rm-time.wrap{color:var(--gold)}
.rm-end{min-height:44px;padding:0 16px;border-radius:var(--r-sm);font-weight:700;font-size:.8125rem;
  color:var(--ink-dim);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);
  transition:color .25s var(--ease)}
.rm-end:hover{color:var(--ink)}
.rm-end:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* план занятия: одна строка над чатом, тем же стеклом, что и лента */
.rm-plan{padding:10px 14px;border-radius:var(--r-sm);font-size:.8438rem;line-height:1.5;color:var(--ink-dim);
  background:color-mix(in oklab,var(--bg-1) 76%,transparent);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px var(--line)}
/* План занятия: цель на виду всегда, блоки под кнопкой. Кнопка стоит в той же
   строке, что и цель, и не тянет на себя внимание: она мелкая и без заливки. */
.rm-plan-goal{display:inline;margin:0}
.rm-plan-btn{margin-left:8px;padding:2px 8px;min-height:24px;border-radius:999px;font:inherit;font-size:.75rem;
  color:var(--ink-dim);background:none;border:0;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
.rm-plan-btn:hover{color:var(--ink)}
.rm-plan-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-plan-box{margin-top:8px}
.rm-plan-box ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.rm-plan-spare{margin:6px 0 0;opacity:.8}

.rm-log{flex:1;min-height:160px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;
  padding:12px;border-radius:var(--r-md);background:color-mix(in oklab,var(--bg-1) 76%,transparent);
  backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--line)}
.rm-b{max-width:86%;padding:11px 14px;border-radius:var(--r-sm);font-size:.9375rem;line-height:1.55;white-space:pre-wrap}
.rm-b-tutor{align-self:flex-start;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);border-bottom-left-radius:6px}
.rm-b-me{align-self:flex-end;background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 28%,transparent);border-bottom-right-radius:6px}
.rm-b-sys{align-self:center;max-width:94%;font-size:.8125rem;color:var(--ink-dim);text-align:center}
@media (prefers-reduced-motion:no-preference){
  .rm-b{animation:rm-in .3s var(--ease) backwards}
  @keyframes rm-in{from{opacity:0;transform:translateY(8px)}}
}
/* русская подсказка: она печатается под репликой и вслух не звучит */
.rm-ru{align-self:flex-start;max-width:86%;padding:0 4px;font-size:.8125rem;line-height:1.5;color:var(--ink-dim)}
.rm-fix{align-self:flex-start;max-width:90%;padding:10px 14px;border-radius:var(--r-sm);font-size:.8438rem;line-height:1.5;
  background:color-mix(in oklab,var(--mint) 10%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--mint) 32%,transparent)}
.rm-fix b{color:var(--mint)}
.rm-words{align-self:flex-start;display:flex;gap:8px;flex-wrap:wrap}
.rm-word{display:inline-flex;gap:6px;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;
  font-size:.8125rem;font-weight:700;color:var(--gold);background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 30%,transparent);transition:transform .2s var(--ease)}
.rm-word:hover{transform:translateY(-1px)}
.rm-word:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-word.in{color:var(--mint);background:color-mix(in oklab,var(--mint) 12%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--mint) 34%,transparent);cursor:default}
.rm-word i{font-style:normal;font-weight:400;opacity:.75}
/* метка уровня уличного слова: та же, что уедет в словарь вместе со словом.
   Цвета берутся у карточки словаря улицы, чтобы вес читался одинаково в
   обоих местах. */
.rm-word-heat{font-style:normal;font-weight:800;font-size:.625rem;letter-spacing:.03em;
  padding:2px 8px;border-radius:999px;color:#12100B;background:#7FB5A2}
.rm-word-heat[data-s="none"]{background:#8FA8C0}
.rm-word-heat[data-s="medium"]{background:var(--gold)}
.rm-word-heat[data-s="strong"]{background:#D9784E}
.rm-word-heat[data-s="strongest"]{background:#C8503C;color:#FFF}
/* домашка: плашка в ленте тем же золотом, что и реплика ученика */
.rm-hw{align-self:flex-start;max-width:90%;padding:10px 14px;border-radius:var(--r-sm);font-size:.8438rem;line-height:1.5;
  background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 30%,transparent)}
.rm-hw b{color:var(--gold)}
/* просьба сказать вслух: мягкая подпись, микрофон подсвечивается классом aloud */
.rm-aloud{align-self:flex-start;padding:0 4px;font-size:.75rem;color:var(--gold)}
/* фото ученика в ленте: превью рядом с его словами */
.rm-shot-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.rm-shot{display:block;max-width:120px;max-height:120px;border-radius:8px}

/* ── низ комнаты: чат и микрофон рядом ── */
.rm-foot{display:flex;flex-direction:column;gap:6px}
.rm-wave{display:block;width:100%;height:36px;opacity:.85}
/* превью вложений над полем: нажатие по снимку убирает его из хода */
.rm-attach{display:flex;gap:8px;flex-wrap:wrap}
.rm-att{position:relative;width:56px;height:56px;padding:0;border-radius:var(--r-sm);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s var(--ease)}
.rm-att img{display:block;width:100%;height:100%;object-fit:cover}
.rm-att:hover{transform:translateY(-1px)}
.rm-att:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* градус речи: плашка ступени. Стоит первой строкой полосы управления, потому
   что полоса одна на все три части комнаты. Ростом она с руку ученика, чтобы
   палец на 390 попадал по ней так же уверенно. */
.rm-heatrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rm-heat{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  border-radius:999px;font-weight:800;font-size:.8125rem;letter-spacing:.01em;color:var(--ink);
  background:var(--glass);box-shadow:inset 0 0 0 1.5px var(--line-strong);
  transition:transform .2s var(--ease),background-color .25s var(--ease)}
.rm-heat::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.75}
.rm-heat[data-heat="clean"]{color:#7FB5A2}
.rm-heat[data-heat="asis"]{color:var(--gold)}
.rm-heat[data-heat="full"]{color:#D9784E}
.rm-heat:active{transform:scale(.98)}
.rm-heat:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-heat:disabled{opacity:.55;cursor:not-allowed}
.rm-heat-why{margin:0;flex:1;min-width:0;font-size:.75rem;line-height:1.35;color:var(--ink-dim)}
@media (max-width:400px){.rm-heat{min-height:48px}}

/* ── ПОЛОСА ДЖЕЯ (A02) ──
   Живёт под плашкой градуса и создаётся из кода: у персоны без поля degree
   её нет ни на экране, ни в DOM. Три кнопки в одну строку, под ними строка,
   которая говорит правду о том, что сейчас включено. */
.rm-street{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.rm-st-btns{display:flex;gap:8px;flex-wrap:wrap}
.rm-st-btn{flex:1 1 auto;min-height:44px;padding:0 14px;border-radius:999px;
  font-weight:700;font-size:.8125rem;color:var(--ink);background:var(--glass);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .2s var(--ease),background-color .25s var(--ease)}
.rm-st-btn:active{transform:scale(.98)}
.rm-st-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-st-btn[aria-pressed="true"]{color:#12100B;background:var(--gold);box-shadow:none}
.rm-st-why{margin:0;font-size:.75rem;line-height:1.35;color:var(--ink-dim)}
@media (max-width:400px){.rm-st-btn{min-height:48px;font-size:.78125rem;padding:0 10px}}

/* ── ЛИСТ ПОВЕРХ КОМНАТЫ ──
   Словарь улицы и разбор реплики. Слой одноразовый: после закрытия узел
   УДАЛЯЕТСЯ из DOM, а не прячется (закон интерактива). */
.rm-sheet{position:fixed;inset:0;z-index:75;display:grid;place-items:end center;
  padding:16px;background:rgba(5,6,8,.62);backdrop-filter:blur(6px)}
.rm-sheet-card{width:min(560px,100%);max-height:min(78vh,760px);display:flex;flex-direction:column;
  border-radius:var(--r-md);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.rm-sheet-head{display:flex;align-items:center;gap:12px;padding:16px 18px 10px}
.rm-sheet-h{flex:1;margin:0;font-family:var(--font-d);font-weight:600;font-size:1.0625rem;color:var(--ink)}
.rm-sheet-x{width:40px;height:40px;border-radius:50%;font-size:1.25rem;line-height:1;color:var(--ink-dim);
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line)}
.rm-sheet-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-sheet-body{flex:1;min-height:0;overflow-y:auto;padding:0 18px 18px;
  display:flex;flex-direction:column;gap:12px}
.rm-sheet-p{margin:0;font-size:.8125rem;line-height:1.5;color:var(--ink-dim)}
.rm-sheet-empty{margin:0;padding:12px 14px;border-radius:var(--r-sm);font-size:.8125rem;line-height:1.5;
  color:var(--ink-dim);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line)}
.rm-sheet-form{display:grid;grid-template-columns:1fr auto;gap:8px}
.rm-sheet-form input{min-height:48px;padding:0 14px;border:0;border-radius:var(--r-sm);
  font-family:var(--font-t);font-size:.9375rem;color:var(--ink);background:var(--glass);
  box-shadow:inset 0 0 0 1px var(--line)}
.rm-sheet-form input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
@media (min-width:900px){.rm-sheet{place-items:center}}

/* карточки словаря улицы: цитата источника отделена от суждения Джея */
.rm-sw-chips{display:flex;gap:6px;flex-wrap:wrap}
.rm-sw-chip{min-height:36px;padding:0 12px;border-radius:999px;font-size:.75rem;font-weight:700;
  color:var(--ink-dim);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line)}
.rm-sw-chip[aria-pressed="true"]{color:#12100B;background:var(--gold);box-shadow:none}
.rm-sw-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-sw-list{display:flex;flex-direction:column;gap:10px}
.rm-sw{padding:14px 15px;border-radius:var(--r-sm);background:var(--glass);
  box-shadow:inset 0 0 0 1px var(--line)}
.rm-sw>p{margin:0}
.rm-sw-top{display:flex;align-items:center;gap:10px}
.rm-sw-en{font-family:var(--font-d);font-weight:600;font-size:1rem;color:var(--ink)}
.rm-sw-heat{margin-left:auto;padding:3px 10px;border-radius:999px;font-size:.6875rem;font-weight:800;
  letter-spacing:.02em;color:#12100B;background:#7FB5A2}
.rm-sw-heat[data-s="none"]{background:#8FA8C0}
.rm-sw-heat[data-s="medium"]{background:var(--gold)}
.rm-sw-heat[data-s="strong"]{background:#D9784E}
.rm-sw-heat[data-s="strongest"]{background:#C8503C;color:#FFF}
.rm-sw-means{margin-top:6px;font-size:.875rem;line-height:1.45;color:var(--ink)}
.rm-sw-quote{margin-top:10px;padding-left:10px;border-left:2px solid var(--line-strong);
  font-size:.8125rem;line-height:1.45;color:var(--ink-dim)}
.rm-sw-srcline{margin-top:4px;font-size:.6875rem;color:var(--ink-dim);opacity:.75}
.rm-sw-lad{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.rm-sw-lad li{font-size:.8125rem;line-height:1.4;color:var(--ink)}
.rm-sw-lad i{display:block;font-style:normal;font-size:.6875rem;font-weight:700;
  letter-spacing:.03em;color:var(--ink-dim)}
.rm-sw-ok,.rm-sw-stop,.rm-sw-note,.rm-sw-bio{margin-top:8px;font-size:.78125rem;line-height:1.45;color:var(--ink-dim)}
.rm-sw-ok i,.rm-sw-stop i{display:block;font-style:normal;font-weight:700;color:var(--ink);opacity:.8}
.rm-sw-stop i{color:#D9784E;opacity:1}
.rm-sw-note{padding:8px 10px;border-radius:var(--r-sm);color:var(--ink);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,#D9784E 40%,transparent)}
.rm-sw-ex{margin-top:10px;font-size:.8125rem;line-height:1.45;color:var(--ink)}
.rm-sw-ex span{display:block;color:var(--ink-dim)}
.rm-sw-bio{opacity:.9}
.rm-sw-btns{margin-top:12px;display:flex;gap:8px}
.rm-sw-b{min-height:40px;padding:0 14px;border-radius:999px;font-size:.78125rem;font-weight:700;
  color:var(--ink);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.rm-sw-b:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-sw-b:disabled{opacity:.55;cursor:not-allowed}
.rm-sw-b-go{color:#12100B;background:var(--gold);box-shadow:none}

/* ── СЦЕНЫ ДЖЕЯ (J4.2) ──
   Карточка сцены это ситуация: место, второй участник, чего он хочет и чем
   это может кончиться. Четыре строки идут парами «подпись, текст», поэтому
   подпись стоит своей колонкой и глаз находит нужную строку без чтения. */
.rm-sc-list{display:flex;flex-direction:column;gap:10px}
.rm-sc{padding:14px 15px;border-radius:var(--r-sm);background:var(--glass);
  box-shadow:inset 0 0 0 1px var(--line)}
.rm-sc-h{margin:0 0 8px;font-family:var(--font-d);font-weight:600;font-size:1rem;color:var(--ink)}
.rm-sc-row{margin:0 0 6px;font-size:.8125rem;line-height:1.45;color:var(--ink)}
.rm-sc-row i{display:block;font-style:normal;font-size:.6875rem;font-weight:700;
  letter-spacing:.03em;color:var(--ink-dim)}
.rm-sc-go{margin-top:10px}
/* выход из сцены: кнопка стоит в полосе Джея и появляется только пока сцена
   идёт. Цвет у неё свой, потому что это единственная кнопка полосы, которая
   что-то заканчивает. */
.rm-st-out{color:#12100B;background:#D9784E;box-shadow:none}
/* ряд выбора строки: «уличная версия» и «объясни по-уличному» кладут сюда то,
   что уже было сказано в занятии или приехало из Кинозала */
.rm-pick-list{display:flex;flex-direction:column;gap:8px}
.rm-pick{display:block;width:100%;min-height:48px;padding:10px 14px;text-align:left;
  border-radius:var(--r-sm);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .2s var(--ease),background-color .25s var(--ease)}
.rm-pick:hover{background:var(--bg-2)}
.rm-pick:active{transform:scale(.99)}
.rm-pick:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-pick i{display:block;font-style:normal;font-size:.6875rem;font-weight:700;
  letter-spacing:.03em;color:var(--ink-dim)}
.rm-pick span{display:block;margin-top:2px;font-size:.875rem;line-height:1.4;color:var(--ink)}

/* пауза и повтор: рука ученика на голосе репетитора. Рост 48 базово и 52 на
   узком экране, закон файла 02 требует 44 везде и 48 на 390 */
.rm-hands{display:flex;gap:8px}
.rm-hand{flex:1;display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:48px;
  padding:0 14px;border-radius:var(--r-sm);font-weight:700;font-size:.875rem;color:var(--ink);
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .2s var(--ease),background-color .25s var(--ease)}
.rm-hand svg{width:18px;height:18px}
.rm-hand:active{transform:scale(.98)}
.rm-hand:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-hand:disabled{opacity:.45;cursor:not-allowed}
.rm-hand[aria-pressed="true"]{color:#12100B;background:var(--gold);box-shadow:none}
@media (max-width:400px){.rm-hand{min-height:52px}}
.rm-say{display:grid;grid-template-columns:auto 1fr auto;gap:8px}
.rm-say input{min-height:52px;padding:0 16px;border:0;border-radius:var(--r-sm);font-family:var(--font-t);font-size:1rem;
  color:var(--ink);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.rm-say input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-say input:disabled{opacity:.5}
.rm-send{display:grid;place-items:center;width:52px;min-height:52px;border-radius:var(--r-sm);
  color:#12100B;background:var(--gold);transition:transform .2s var(--ease)}
.rm-send:active{transform:scale(.95)}
.rm-send:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rm-send svg{width:20px;height:20px}
.rm-mic{grid-column:1 / -1;display:flex;gap:10px;align-items:center;justify-content:center;min-height:52px;
  border-radius:var(--r-sm);font-weight:800;font-size:.9375rem;color:var(--ink);
  background:var(--glass);box-shadow:inset 0 0 0 1.5px var(--line-strong);
  transition:transform .2s var(--ease),background-color .25s var(--ease)}
.rm-mic svg{width:20px;height:20px}
.rm-mic:active{transform:scale(.98)}
.rm-mic:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-mic:disabled{opacity:.5;cursor:not-allowed}
.rm-mic[aria-pressed="true"]{color:#FFFFFF;background:#C4453B;box-shadow:none}
/* ask_aloud подсвечивает микрофон золотом, пока ученик не заговорил */
.rm-mic.aloud{box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--gold) 60%,transparent)}
/* скрепка: фото и короткое видео уходят вместе с ходом */
.rm-clip{display:grid;place-items:center;width:52px;min-height:52px;border-radius:var(--r-sm);color:var(--ink-dim);
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);transition:color .25s var(--ease)}
.rm-clip:hover{color:var(--ink)}
.rm-clip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-clip:disabled{opacity:.5;cursor:not-allowed}
.rm-clip svg{width:20px;height:20px}
@media (min-width:560px){
  .rm-say{grid-template-columns:auto 1fr auto auto}
  .rm-mic{grid-column:auto;padding:0 18px}
}

/* ── широкий экран: преподаватель слева, доска справа ──
   Сорок процентов ширины у преподавателя, остальное доске. Полоса управления
   идёт под обоими во всю ширину, вкладок нет. */
@media (min-width:900px){
  .rm{--tu-face:168px}
  .rm-stage{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);
    grid-template-rows:minmax(0,1fr) auto;gap:14px 22px;max-width:1440px;
    padding:0 clamp(16px,3vw,32px) clamp(12px,2vw,18px)}
  .rm-pane-tutor{grid-column:1;grid-row:1}
  .rm-pane-board{grid-column:2;grid-row:1}
  .rm-foot{grid-column:1 / -1;grid-row:2}
  .rm-who-row{align-items:flex-start}
  .rm-log{max-height:none}
  /* доску убрали ради чистого разговора: место отдаётся преподавателю */
  .rm-room.rm-noboard .rm-stage{grid-template-columns:minmax(0,1fr);max-width:900px}
  .rm-room.rm-noboard .rm-pane-tutor{grid-column:1}
  /* доску убрали: колонка одна, панель садится в неё же */
  .rm-room.rm-noboard .rm-pane-me{grid-column:1 / 2}
  /* «Я» на широком экране выезжает поверх доски, а не отбирает колонку.
     Место ей задаёт КЛЕТКА сетки, а не вся сцена: абсолютный ребёнок с
     grid-column и grid-row получает своей коробкой именно эту клетку. Без
     этого bottom:12px отсчитывался от низа всей сцены, и панель ложилась на
     полосу управления: микрофон, скрепка и кнопка доски переставали
     нажиматься, пока она открыта (найдено роботом 21.08).
     Линии обязаны быть названы С ОБЕИХ сторон: у абсолютного ребёнка сетки
     auto на второй линии значит не соседний трек, а край сцены, и grid-row:1
     оставлял бы коробку прежней высоты. */
  .rm-pane-me{position:absolute;grid-column:2 / 3;grid-row:1 / 2;right:0;bottom:12px;z-index:6;
    width:min(360px,44vw);max-height:min(70vh,520px);overflow-y:auto;
    padding:16px;border-radius:var(--r-md);background:var(--bg-2);
    box-shadow:inset 0 0 0 1px var(--line-strong),0 18px 44px rgba(0,0,0,.34)}
}

/* ── итог ── */
.rm-done{width:100%;max-width:620px;margin:0 auto;padding:8px clamp(14px,4vw,24px) 64px}
.rm-done-h{font-family:var(--font-d);font-weight:600;font-size:1.375rem;text-align:center}
.rm-done-min{margin-top:8px;text-align:center;color:var(--gold);font-weight:700;font-size:.9375rem}
.rm-card{margin-top:14px;padding:16px;border-radius:var(--r-md);background:var(--bg-2);
  box-shadow:inset 0 0 0 1px var(--line)}
.rm-card h3{font-family:var(--font-d);font-weight:600;font-size:.9375rem;color:var(--ink-dim);margin-bottom:8px}
.rm-card p{font-size:.9375rem;line-height:1.55;margin-bottom:6px}
.rm-card p:last-child{margin-bottom:0}
.rm-card .rm-words{margin-top:10px}
/* Слова конспекта: слово, перевод и две кнопки акцента в одну строку. На узком
   экране строка переносится, кнопки остаются рядом со своим словом. */
.rm-kwords{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.rm-kword{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.875rem}
.rm-kword b{font-weight:600}
.rm-kword i{font-style:normal;color:var(--ink-dim)}
.rm-worked b{color:var(--gold)}
.rm-said{color:var(--ink-dim);font-size:.8125rem}
.rm-done-btns{display:flex;flex-direction:column;gap:10px}

@media (max-width:640px){
  .rm-b{max-width:92%}
}

/* ══════════════════════════════════════════════════════════════
   ПОЛОСКА РЕЧИ, СОСТОЯНИЯ, ВКЛАДКИ, МОЯ СТОРОНА
   ══════════════════════════════════════════════════════════════ */

/* ── A6.4: полоска речи под портретом ──
   Один холст на двоих. У ученика линия дышит в такт громкости, у
   преподавателя идёт волной. Надписи «говорите» рядом нет: линия читается
   раньше, чем глаз доходит до слова. */
.rm-strip-row{display:flex;align-items:center;gap:10px;min-height:30px}
.rm-strip{display:block;flex:1;min-width:0;width:100%;height:28px;opacity:.9}
.rm-state{flex:none;font-size:.75rem;color:var(--ink-faint);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px}
/* точка состояния: она живёт даже там, где линия стоит ровно, поэтому ни одно
   состояние не выглядит зависшим */
.rm-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-faint);
  transition:background-color .25s var(--ease)}
.rm-room[data-state="think"] .rm-state::before{background:var(--gold)}
.rm-room[data-state="talk"] .rm-state::before{background:var(--gold)}
.rm-room[data-state="me"] .rm-state::before{background:var(--mint)}
.rm-room[data-state="listen"] .rm-state::before{background:color-mix(in oklab,var(--mint) 60%,transparent)}
.rm-room[data-state="pause"] .rm-state::before{background:var(--ink-dim)}
.rm-room[data-state="lost"] .rm-state::before{background:#C4453B}
.rm-room[data-state="check"] .rm-state::before{background:var(--gold)}
@media (prefers-reduced-motion:no-preference){
  .rm-room[data-state="think"] .rm-state::before{animation:rm-blip 1.1s var(--ease) infinite}
  .rm-room[data-state="listen"] .rm-state::before{animation:rm-blip 2.6s var(--ease) infinite}
  .rm-room[data-state="pause"] .rm-state::before{animation:rm-blip 3.2s var(--ease) infinite}
  .rm-room[data-state="lost"] .rm-state::before{animation:rm-blip 1.6s var(--ease) infinite}
  .rm-room[data-state="check"] .rm-state::before{animation:rm-blip 1.4s var(--ease) infinite}
}
@keyframes rm-blip{0%,100%{opacity:1}50%{opacity:.28}}
html[data-motion="0"] .rm-state::before{animation:none}

/* пауза гасит сцену на треть: комната ждёт, и это видно без надписи */
.rm-room[data-state="pause"] .rm-scene{opacity:.2}
.rm-room[data-state="pause"] .rm-log{opacity:.72}
.rm-room[data-state="lost"] .rm-strip{opacity:.4}

/* ── полоса управления ──
   Восемь кнопок в сетке. На узком экране это два ряда по четыре, зона
   нажатия 48 и выше, ничего не уезжает под край. */
.rm-hands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.rm-hand{flex:none;min-width:0;position:relative;padding:0 8px;font-size:.75rem;gap:6px}
.rm-hand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-hand svg{flex:none}
.rm-dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;
  background:var(--gold);font-style:normal}
@media (min-width:560px){
  .rm-hands{grid-template-columns:repeat(8,minmax(0,1fr))}
}
/* микрофон на узком экране это круглая кнопка рядом с полем, а не отдельный
   ряд: два ряда управления и так забирают низ экрана */
@media (max-width:559px){
  .rm-say{grid-template-columns:auto 1fr auto auto}
  .rm-mic{grid-column:auto;width:52px;padding:0}
  .rm-mic span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ── вкладки узкого экрана ── */
.rm-tabs{display:none;position:sticky;bottom:0;z-index:5;
  gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
  background:color-mix(in oklab,var(--bg-1) 92%,transparent);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 var(--line)}
.rm-tab{position:relative;flex:1;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;min-height:52px;border-radius:var(--r-sm);font-weight:700;font-size:.6875rem;color:var(--ink-faint);
  transition:color .2s var(--ease),background-color .2s var(--ease)}
.rm-tab svg{width:20px;height:20px}
.rm-tab[aria-selected="true"]{color:var(--ink);background:var(--glass)}
.rm-tab:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
@media (max-width:899px){
  .rm-tabs{display:flex}
  .rm-stage{padding-bottom:8px}
  /* смена вкладки: сдвиг на 12 пикселей и проявление, без полной перерисовки */
  .rm-pane{animation:rm-tab-in .22s var(--ease) backwards}
}
@keyframes rm-tab-in{from{opacity:0;transform:translateX(12px)}}
html[data-motion="0"] .rm-pane,html[data-motion="1"] .rm-pane{animation:none}
@media (prefers-reduced-motion:reduce){.rm-pane{animation:none}}

/* ── моя сторона занятия ── */
.rm-me-head{font-family:var(--font-d);font-weight:600;font-size:.9375rem}
.rm-me-line{margin-top:8px;font-size:.8125rem;line-height:1.55;color:var(--ink-dim)}
.rm-link{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.rm-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-set{margin-top:14px;display:grid;gap:12px}
.rm-set-row{display:grid;gap:6px}
.rm-set-row>b{font-weight:700;font-size:.8125rem;color:var(--ink)}
.rm-set-row>i{font-style:normal;font-size:.75rem;line-height:1.5;color:var(--ink-faint)}
.rm-opts{display:flex;gap:6px;flex-wrap:wrap}
.rm-opt{min-height:44px;padding:0 14px;border-radius:var(--r-sm);font-weight:700;font-size:.8125rem;
  color:var(--ink-dim);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);
  transition:color .2s var(--ease),background-color .2s var(--ease)}
.rm-opt[aria-pressed="true"]{color:#12100B;background:var(--gold);box-shadow:none}
.rm-opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-keys{color:var(--ink-faint)}

/* ── продолжить с места ── */
.rm-resume{margin-top:18px;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 26%,transparent)}
.rm-resume-line{font-size:.875rem;line-height:1.55}
.rm-resume-btns{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.rm-cta-slim{width:auto;min-height:44px;margin-top:0;padding:0 16px;font-size:.875rem}

/* ── подсказка первого занятия ──
   Три шага и больше никогда. Слой одноразовый: после закрытия он удаляется
   из DOM, а не прячется. */
.rm-tip{position:fixed;inset:0;z-index:70;display:grid;place-items:center;
  padding:20px;background:rgba(5,6,8,.62);backdrop-filter:blur(6px)}
.rm-tip-card{max-width:min(420px,88vw);padding:22px;border-radius:var(--r-md);background:var(--bg-2);
  box-shadow:inset 0 0 0 1px var(--line-strong)}
.rm-tip-step{font-size:.75rem;color:var(--gold);font-weight:700}
.rm-tip-h{margin-top:6px;font-family:var(--font-d);font-weight:600;font-size:1.0625rem}
.rm-tip-p{margin-top:8px;font-size:.9375rem;line-height:1.55;color:var(--ink-dim)}
.rm-tip-btns{margin-top:16px;display:flex;gap:8px;justify-content:flex-end}

/* ── A6.5: анимации комнаты ──
   1 вход, 2 смена состояния, 3 верный ответ, 4 ошибка, 5 слово, 6 вкладка.
   Ничего, кроме прозрачности и трансформации. */
@media (prefers-reduced-motion:no-preference){
  .rm-room.rm-in .rm-avatar{animation:rm-face-in .32s cubic-bezier(.16,1,.3,1) backwards}
  .rm-room.rm-in .rm-pane-board{animation:rm-board-in .32s cubic-bezier(.16,1,.3,1) backwards}
  .rm-word{animation:rm-word-in .2s var(--ease) backwards}
  .rm-boardbox.rm-ok::after{content:"";position:absolute;inset:-4px;border-radius:var(--r-sm);pointer-events:none;
    box-shadow:0 0 0 2px color-mix(in oklab,var(--gold) 45%,transparent),0 0 30px color-mix(in oklab,var(--gold) 26%,transparent);
    animation:rm-warm .4s var(--ease) forwards}
  .rm-board.rm-sway{animation:rm-sway .4s var(--ease)}
}
@keyframes rm-face-in{from{opacity:0;transform:scale(.94)}}
@keyframes rm-board-in{from{opacity:0;transform:translateX(24px)}}
@keyframes rm-word-in{from{opacity:0;transform:translateY(4px)}}
@keyframes rm-warm{from{opacity:0}40%{opacity:1}to{opacity:0}}
@keyframes rm-sway{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}65%{transform:translateX(3px)}}

/* Сокращённое движение: смена состояния становится мгновенной, письмо на
   доске остаётся, дрожание пера гасит board.js. */
html[data-motion="0"] .rm-room.rm-in .rm-avatar,
html[data-motion="0"] .rm-room.rm-in .rm-pane-board,
html[data-motion="0"] .rm-word,
html[data-motion="0"] .rm-board.rm-sway{animation:none}
@media (prefers-reduced-motion:reduce){
  .rm-room.rm-in .rm-avatar,.rm-room.rm-in .rm-pane-board,.rm-word,.rm-board.rm-sway{animation:none}
  .rm-boardbox.rm-ok::after{content:none}
}

/* ── таймер: последние пять минут подсвечиваются мягко, последние две ярче ── */
.rm-time.soon{color:color-mix(in oklab,var(--gold) 70%,var(--ink-dim))}

/* сцена занимает всё, что осталось над полосой вкладок */
.rm-stage{flex:1}
/* субтитры выключены: реплика звучит голосом, а в ленте её текста нет.
   Поправки, слова и русская подсказка остаются: это не субтитры, это разбор. */
.rm-log.rm-nosubs .rm-b-tutor{display:none}
/* доску убрали ради чистого разговора: колонка отдаётся преподавателю */
@media (min-width:900px){
  .rm-room.rm-noboard .rm-pane-board{display:none}
}
.rm-pane-me{overflow-y:auto}
/* картинка доски в итоге занятия */
.rm-board-shot{display:block;width:100%;height:auto;margin-top:8px;border-radius:var(--r-sm);
  background:#111C1A}

/* Пустая доска занимает ту же коробку, что и исписанная: строка про то, что
   здесь появится, стоит по центру того же места. Поэтому первое письмо
   ничего на экране не двигает. */
.rm-boardnote{flex:1;display:grid;place-items:center;align-content:center;max-width:34ch;margin:0 auto}
.rm-boardbox>.rm-board{flex:1;min-height:0;max-height:100%}
.rm-boardbox .bd-surface{max-height:100%}

/* ── A11 · КОГДА ЧТО-ТО ЛОМАЕТСЯ ─────────────────────────────────────────
   Дорогое ощущение продукта рождается в момент поломки. Поэтому у поломки
   свой вид, а не красный текст ошибки: строка стоит там же, где стоят
   подсказки занятия, тем же ростом и тем же шрифтом. Мигания нет, тревожного
   красного нет, движения нет: занятие не прервалось, просто одна его часть
   сейчас чинится. */

/* Полоска связи. Живёт над полоской речи и появляется, только когда связь
   правда пропала: место под неё заранее не занимается, потому что при живой
   сети это была бы пустая строка на каждом занятии. */
.rm-net{margin:0 0 6px;padding:7px 12px;border-radius:var(--r-sm);
  font-size:.75rem;line-height:1.4;color:var(--ink-dim);
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line)}
.rm-net::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;
  border-radius:50%;background:var(--ink-faint);vertical-align:middle}
.rm-net[data-net="off"]::before{background:#D9784E}
.rm-net[data-net="back"]::before{background:#7FB5A2}

/* Честная строка поломки с кнопкой. Кнопка это третья часть правила A11.2
   («что может сделать он»), поэтому она стоит рядом со строкой, а не где-то
   в настройках. Кнопок бывает две: сделать сейчас и отложить. */
.rm-broke{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:10px 12px;border-radius:var(--r-sm);
  background:var(--glass);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.rm-broke-line{margin:0;flex:1 1 14ch;min-width:0;font-size:.8125rem;line-height:1.45;color:var(--ink)}
.rm-broke-btns{display:flex;gap:8px;flex-wrap:wrap}
.rm-broke-btn{min-height:44px;padding:0 14px;border-radius:999px;
  font-weight:800;font-size:.8125rem;color:#12100B;background:var(--gold);
  transition:transform .2s var(--ease),filter .2s var(--ease)}
.rm-broke-btn:hover{filter:brightness(1.08)}
.rm-broke-btn:active{transform:scale(.98)}
.rm-broke-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-broke-btn-ghost{color:var(--ink);background:var(--glass);box-shadow:inset 0 0 0 1.5px var(--line-strong)}

/* Камера ученика. Закрыта, пока он сам не позвал: поток живёт ровно столько,
   сколько открыта эта коробка, и гаснет вместе с ней. */
.rm-cam{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  padding:10px;border-radius:var(--r-sm);
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line)}
.rm-cam-view{flex:1 1 200px;width:100%;max-width:280px;aspect-ratio:4/3;
  border-radius:var(--r-sm);object-fit:cover;background:#111C1A}
.rm-cam-btns{display:flex;gap:8px;flex-wrap:wrap}
.rm-cam-btns .rm-cta{margin-top:0;min-height:44px;padding:0 16px;font-size:.8125rem}
.rm-clip[aria-pressed="true"]{color:var(--gold)}