/* ==========================================================================
   pages.css — раскладка конкретных страниц (auth, практика/сессия,
   материалы, админка подсказок)
   ========================================================================== */
@layer pages {

/* Вертикальный отступ контента от хедера. */
.tutor-main,
.session-main,
.material-main { padding-block: var(--space-4); }
.student-layout { padding-block: var(--space-4); }

/* Трёхколоночная сетка практики ученика и работы тьютора. */
.student-layout,
.session-layout {
  display: grid;
  grid-template-columns: 300px 1fr 320px;
  gap: var(--space-4);
  align-items: start;
}
/* Дети грида должны ужиматься: без этого 1fr-трек получает min-width: auto
   и растягивается под min-content (CodeMirror/длинный код не переносятся) →
   карточка вылезает за экран на мобилке. min-width: 0 позволяет треку
   сжиматься, коду — скроллиться внутри редактора (overflow у .code-editor и
   .cm-scroller уже есть). Для fixed-треков (300px/320px) безвредно. */
.student-layout > *,
.session-layout > * { min-width: 0; }

/* Материалы — узкая читательская колонка. */
.material-main { max-width: 860px; }

/* Страница входа — карточка по центру. */
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
}
.auth-card { width: 100%; max-width: 400px; }
.auth-head { text-align: center; margin-bottom: var(--space-6); }
.auth-head .brand-mark { width: var(--icon-sq-lg); height: var(--icon-sq-lg); font-size: 20px; margin: 0 auto var(--space-4); }
.auth-head h1 { font-size: var(--fs-xl); }

/* CodeMirror-монты — .cm-editor { height: 100% } + min-height на обёртке. */
.code-mount { min-height: 200px; }
.code-mount .cm-editor { height: 100%; }
.code-mount .cm-scroller { min-height: 200px; }
.hint-mount { min-height: 140px; }
.hint-mount .cm-editor { height: 100%; }
.hint-mount .cm-scroller { min-height: 140px; }
.live-mount { min-height: 180px; }
.live-mount .cm-editor { height: 100%; }
.live-mount .cm-scroller { min-height: 180px; }
.material-cell-mount { min-height: 0; }
.material-cell-mount .cm-editor { height: 100%; }

/* Режим «нельзя копировать» подсказку. */
.hint-mount.is-protected, .hint-mount.is-protected * { user-select: none; -webkit-user-select: none; }

/* Список учеников — кликабельные строки. */
.student-row { cursor: pointer; }
.student-row:hover { background: var(--c-panel-raised); }

/* Вывод ячейки материала. */
.material-output { margin: 0; white-space: pre-wrap; }
.material-output.is-error { color: var(--c-fail); background: var(--c-fail-bg); border-color: var(--c-fail-border); }

/* Админка подсказок — редактор markdown + live-превью. */
.hint-editor-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
.hint-editor-textarea {
  width: 100%;
  min-height: 140px;
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  line-height: 1.55;
  padding: var(--space-3);
  resize: vertical;
  color: var(--c-ink);
  background: var(--c-panel);
  border: 1px solid var(--c-hairline-strong);
  border-radius: var(--radius);
}
.hint-editor-textarea:focus {
  outline: none;
  border-color: var(--c-signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-focus) 28%, transparent);
}
.hint-preview-box {
  min-height: 140px;
  padding: var(--space-3);
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius);
  background: var(--c-panel-raised);
}
.hint-level-label { font-weight: var(--fw-semibold); font-size: var(--fs-sm); margin-bottom: var(--space-2); }
.hint-level-desc  { font-size: var(--fs-xs); color: var(--c-ink-muted); margin-bottom: var(--space-2); }
.save-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.save-status { font-size: var(--fs-sm); }
.save-status.ok { color: var(--c-pass); }
.save-status.err { color: var(--c-fail); }

}