/* ==========================================================================
   АМКОС — приложение (каркас)
   --------------------------------------------------------------------------
   Здесь только «клей» поверх дизайн-системы: палитру, типографику и компоненты
   задаёт static/css/design-system.css (карточка webdesigner). Никаких новых
   цветов — только токены var(--fp-*).
   ========================================================================== */

/* Форма входа по центру, ограниченная ширина */
.fp-login__card { max-width: 520px; margin: var(--fp-space-6) auto 0; }
.fp-login__hint { margin-top: var(--fp-space-4); }

/* Атрибут hidden обязан прятать элемент, даже если у его класса своя раскладка
   (плитки, пустые состояния, карточки поиска): иначе JS-фильтр не работает. */
[hidden] { display: none !important; }

/* Кнопка «Выйти» в шапке — в одну строку с колокольчиком */
.fp-header__logout { display: inline-flex; align-items: center; }

/* Гость открытого режима (t_c40881a6): у него нет учётной записи и бургер-меню,
   поэтому «Выйти» остаётся в шапке и на телефоне (в отличие от .fp-header__logout,
   который на ≤600 px прячется в бургер-меню слушателя/админа). */
.fp-open-logout { display: inline-flex; align-items: center; }
.fp-header__actions--guest .fp-badge { white-space: nowrap; }

/* Гость открытого режима (t_904b2eb9): в шапке «Курсы», метка режима и «Выйти». */
.fp-nav--guest { gap: var(--fp-space-2); }
.fp-nav--guest .fp-nav__badge { margin: 0 2px; }

/* Поиск курса в открытом режиме: поле и кнопка в одну строку */
.fp-open-search { margin: 0 0 var(--fp-space-5); }
.fp-open-search__row { display: flex; align-items: center; gap: var(--fp-space-2); }
.fp-open-search__row .fp-input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) {
  .fp-open-search__row { flex-wrap: wrap; }
  .fp-open-search__row .fp-btn { width: 100%; }
}

/* Полная ссылка входа открытого режима в админке (t_904b2eb9): длинная, но
   переносится и копируется целиком. */
.fp-open-link {
  display: block;
  margin: 4px 0 var(--fp-space-2);
  padding: 8px 10px;
  border-radius: var(--fp-radius-sm);
  background: var(--fp-surface-alt);
  overflow-wrap: anywhere;
}

/* Подвал */
.fp-site-foot { padding: 0 0 var(--fp-space-6); }

/* Крупная цифра в статистике дашборда */
.fp-stat__value {
  display: block;
  font-size: var(--fp-text-2xl);
  font-weight: 700;
  line-height: var(--fp-lh-tight);
  margin: 4px 0 2px;
}

/* Уведомление занимает всю ширину и не липнет к сетке цифр */
.fp-notice { margin-top: var(--fp-space-5); }

/* ==========================================================================
   T6: каркас страницы, адаптив и состояния (только раскладка, цвета и
   типографика — из design-system.css)
   ========================================================================== */

/* Подвал: две подписи в строку, на телефоне — в столбик */
.fp-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--fp-space-2) var(--fp-space-5);
}
.fp-foot p { margin: 0; }

/* Кнопка мобильного меню: видна только на узких экранах */
.fp-menu {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--fp-space-2);
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--fp-radius-sm);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: inherit;
  font-size: var(--fp-text-sm);
  font-weight: 600;
  cursor: pointer;
}
.fp-menu:hover { background: rgba(255, 255, 255, .16); }
.fp-menu:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
.fp-menu__bars,
.fp-menu__bars::before,
.fp-menu__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
.fp-menu__bars { position: relative; }
.fp-menu__bars::before,
.fp-menu__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.fp-menu__bars::before { top: -6px; }
.fp-menu__bars::after { top: 6px; }
.fp-header--open .fp-menu__bars { background: transparent; }
.fp-header--open .fp-menu__bars::before { top: 0; transform: rotate(45deg); }
.fp-header--open .fp-menu__bars::after { top: 0; transform: rotate(-45deg); }

/* Шеврон «Открыть курс» — геометрия на границах.
   Символ «→» из design-system.css в текущем стеке шрифтов рендерится битым
   глифом (замечание ревью t_dfebb275), поэтому рисуем стрелку без символа. */
.fp-tile__cta::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--fp-dur) var(--fp-ease);
}
.fp-tile:hover .fp-tile__cta::after { transform: rotate(45deg); }

/* Статус курса — пилюля в верхней строке плитки */
.fp-tile__status { margin-left: auto; }
.fp-tile__title,
.fp-table td,
.fp-table th { overflow-wrap: anywhere; }

/* Длинные подписи в блоке плитки не расталкивают сетку */
.fp-tile__meta + .fp-tile__meta { margin-top: 2px; }

/* Пояснение над таблицей внутри карточки (был инлайн-стиль, CSP его запрещает) */
.fp-note { padding: 0 var(--fp-space-4); margin: 0 0 var(--fp-space-3); }

/* Моноширинный пароль: только семейство шрифта, размер и цвет — из системы */
.fp-mono { font-family: Consolas, "Courier New", monospace; }

/* Заголовок курса в карточке слушателя */
.fp-h3--tight { margin-top: var(--fp-space-2); }

/* Подвал формы экзамена внутри карточки: «Завершить экзамен» не висит отдельно */
.fp-exam__foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--fp-space-2);
  margin-top: var(--fp-space-2);
}

/* Полоса прогресса подготовки: ширина шагом в 10 % (инлайн-стили запрещены CSP) */
.fp-progress__bar--p0 { width: 0; }
.fp-progress__bar--p10 { width: 10%; }
.fp-progress__bar--p20 { width: 20%; }
.fp-progress__bar--p30 { width: 30%; }
.fp-progress__bar--p40 { width: 40%; }
.fp-progress__bar--p50 { width: 50%; }
.fp-progress__bar--p60 { width: 60%; }
.fp-progress__bar--p70 { width: 70%; }
.fp-progress__bar--p80 { width: 80%; }
.fp-progress__bar--p90 { width: 90%; }
.fp-progress__bar--p100 { width: 100%; }

/* Разделители разделов внутри страницы: заголовок после сетки/таблицы не липнет */
.fp-section > .fp-h2,
.fp-section > .fp-h3 { margin-top: var(--fp-space-7); }

/* Карточки-ссылки на дашборде: заголовок, пояснение и ссылка идут в столбик,
   иначе inline-элементы слипаются в одну строку (дефект скриншота T6) */
.fp-linkcard { display: flex; flex-direction: column; gap: var(--fp-space-1); }
.fp-linkcard .fp-tile__cta { margin-top: var(--fp-space-2); }

/* Мобильное меню: на ≤900 px выпадает из шапки отдельной панелью */
@media (max-width: 900px) {
  .fp-menu { display: inline-flex; order: 2; }
  .fp-header__actions { order: 3; margin-left: auto; }
  .fp-header .fp-nav {
    display: none;
    order: 4;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 6px 0 2px;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .fp-header--open .fp-nav { display: flex; }
  .fp-header .fp-nav__link { width: 100%; justify-content: flex-start; }

  /* Гость открытого режима (t_904b2eb9): у него нет бургер-меню, поэтому пункты
     шапки («Курсы», метка режима, «Выйти») видны сразу, одной прокручиваемой
     строкой под брендом. */
  .fp-header .fp-nav--guest {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--fp-space-2);
    overflow-x: auto;
  }
  .fp-header .fp-nav--guest .fp-nav__link { width: auto; }
}

/* Телефон: таймер и кнопки в шапке страницы не наезжают на заголовок */
@media (max-width: 600px) {
  .fp-page-head .fp-timer { margin-top: var(--fp-space-2); }
  .fp-exam__foot { justify-content: stretch; }
  .fp-exam__foot .fp-btn { width: 100%; }
  .fp-tile__cta { display: inline-flex; align-items: center; min-height: 44px; }
  .fp-foot { flex-direction: column; }
  .fp-menu { min-width: 44px; }
}

/* ==========================================================================
   T6 (ревизия 2): сворачиваемый список вопросов и шапка на телефоне
   Только раскладка и состояния: цвета, шрифты и отступы — из токенов.
   ========================================================================== */

/* Список номеров вопросов: по умолчанию свёрнут (details/summary), ничего
   не теряется — те же ссылки с теми же состояниями лежат внутри. */
.fp-disclosure { margin-top: var(--fp-space-7); }
.fp-disclosure > summary {
  display: flex;
  align-items: center;
  gap: var(--fp-space-2);
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  color: var(--fp-text);
  border-radius: var(--fp-radius-sm);
}
.fp-disclosure > summary::-webkit-details-marker { display: none; }
.fp-disclosure > summary::marker { content: ""; }
/* указатель раскрытия рисуем геометрией: символы стрелок в этом шрифте битые */
.fp-disclosure > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: var(--fp-space-2);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--fp-dur) var(--fp-ease);
}
.fp-disclosure[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.fp-disclosure > summary:hover { color: var(--fp-primary); }
.fp-disclosure > summary:focus-visible { outline: 2px solid var(--fp-primary); outline-offset: 2px; }

/* Сетка номеров: ровные кнопки по ширине блока, без горизонтального скролла */
.fp-questions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: var(--fp-space-2);
  margin-top: var(--fp-space-4);
  padding: 0;
}
.fp-questions .fp-btn { width: 100%; }

/* Шапка на телефоне (t_89af85aa, поправка заказчика): в один ряд остаются бренд,
   колокольчик с счётчиком и бургер; ФИО, разделы и «Выйти» — в бургер-меню.
   Колокольчик из шапки не убираем: меню уведомлений доступно одной иконкой. */
.fp-nav__drawer { display: none; }

@media (max-width: 600px) {
  .fp-header__actions { display: flex; order: 2; margin-left: auto; }
  /* в шапке из блока действий остаётся только колокольчик */
  .fp-header__actions .fp-user,
  .fp-header__actions .fp-header__logout { display: none; }
  .fp-header__actions--guest { display: flex; }
  .fp-header .fp-menu { order: 3; }

  .fp-nav__drawer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--fp-space-2);
    margin-top: var(--fp-space-2);
    padding-top: var(--fp-space-3);
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .fp-nav__who {
    margin: 0;
    padding: 0 var(--fp-space-3);
    font-size: var(--fp-text-xs);
    font-weight: 500;
    color: rgba(255, 255, 255, .72);
    overflow-wrap: anywhere;
  }
  .fp-nav__logout { margin: 0; }
  .fp-nav__logout-btn { width: 100%; min-height: 44px; }
}

/* Телефон: номера вопросов — тап-зона не меньше 44 px (WCAG 2.5.5) */
@media (max-width: 600px) {
  .fp-questions .fp-btn { min-height: 44px; padding: 0; }
}

/* ==========================================================================
   t_89af85aa, п. 3: карточки режимов на странице курса
   Три карточки в ряд — одинаковой высоты; заголовки одной высоты, поэтому
   текст под ними начинается на одном уровне; прогресс и подпись разведены,
   а кнопки всех трёх режимов прижаты к низу и стоят на одной линии.
   Только раскладка: цвета, шрифты и отступы — из токенов.
   ========================================================================== */
.fp-modes { align-items: stretch; }
.fp-modes > .fp-card { display: flex; flex-direction: column; }
/* два ряда заголовка: «Тренировочный экзамен» и «Работа над ошибками»
   не сдвигают вводный текст друг относительно друга */
.fp-modes__title { min-height: 2.44em; }
.fp-modes__foot {
  display: flex;
  flex-direction: column;
  gap: var(--fp-space-3);
  margin-top: auto;
  padding-top: var(--fp-space-3);
}
/* подпись и полоса прогресса — отдельными строками с отступом, без наезда */
.fp-modes__foot .fp-progress__meta { margin-bottom: 0; }
.fp-modes__attempt { align-items: center; }

@media (max-width: 900px) {
  /* карточки в одну колонку: высота по содержимому, заголовок без запаса */
  .fp-modes__title { min-height: 0; }
  .fp-modes__foot { margin-top: var(--fp-space-2); }
}

@media (max-width: 600px) {
  /* на телефоне кнопки режима — столбиком, каждая тап-зона ≥44 px */
  .fp-modes__foot .fp-actions { flex-direction: column; align-items: stretch; }
  .fp-modes__foot .fp-actions .fp-btn { width: 100%; min-height: 44px; }
  .fp-modes__attempt { gap: var(--fp-space-2); }
}

/* ==========================================================================
   t_57613955: полный адаптив 320–1920 px
   Только раскладка и переносы: палитра, типографика и токены — из
   design-system.css; новые цвета не вводятся.
   ========================================================================== */

/* Длинные ФИО, названия курсов из XML, коды и номера попыток переносятся,
   а не вылезают за карточку/таблицу на узких экранах. */
.fp-h1,
.fp-h2,
.fp-h3,
.fp-h4,
.fp-page-head__title,
.fp-page-head__sub,
.fp-lead,
.fp-kv__value,
.fp-empty__title,
.fp-notice__body,
.fp-mono,
.fp-table caption,
.fp-summary,
.fp-tile__meta { overflow-wrap: anywhere; }

/* Вторичные кнопки (.fp-btn--sm) на телефоне тоже тап-зона ≥44 px
   (WCAG 2.5.5). В design-system они 32 px — оставляем это для десктопа. */
@media (max-width: 600px) {
  .fp-btn--sm { min-height: 44px; padding: 0 var(--fp-space-4); }
  /* внутри плотных табличных карточек кнопки не растягиваем на всю строку */
  .fp-table__actions .fp-btn--sm { width: auto; }
}

/* Плитки курсов: от 901 px ровно три в ряд (матрица адаптива карточки).
   auto-fill с минимумом 300 px на 901 px давал две колонки. */
@media (min-width: 901px) {
  .fp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Телефон в альбомной ориентации (568×320): шапка экрана экзамена компактная,
   чтобы таймер, номер вопроса и «ошибок N из 2» были видны одновременно без
   прокрутки. Прячем только служебные строки (крошки и подзаголовок курса) —
   сам таймер и его подпись остаются. */
@media (max-height: 430px) {
  .fp-main { padding-top: var(--fp-space-3); }
  .fp-page-head { margin-bottom: var(--fp-space-3); align-items: center; }
  .fp-page-head .fp-crumbs { display: none; }
  .fp-page-head__sub { display: none; }
  .fp-page-head__title { font-size: var(--fp-text-lg); }
  .fp-page-head .fp-timer { margin-top: 0; padding: 2px 10px 2px 8px; }
  .fp-timer__value { font-size: var(--fp-text-md); }
  .fp-card--pad-lg { padding: var(--fp-space-4); }
  .fp-main .fp-spec { margin-bottom: var(--fp-space-2); padding-bottom: var(--fp-space-1); }
}

/* ==========================================================================
   Добавление слушателя (t_a79b3ef6): вкладки «вручную / CSV», поиск курсов
   с чекбоксами и чипсами, карточка результата. Токены — из design-system.css,
   новых цветов нет. Тап-зоны интерактивных элементов ≥ 44 px.
   ========================================================================== */

.sa-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fp-space-2);
  margin: 0 0 var(--fp-space-4);
  padding: 4px;
  background: var(--fp-surface-alt);
  border: 1px solid var(--fp-border-soft);
  border-radius: var(--fp-radius-sm);
}

.sa-tab {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: calc(var(--fp-radius-sm) - 2px);
  background: transparent;
  color: var(--fp-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fp-dur) var(--fp-ease), color var(--fp-dur) var(--fp-ease);
}

.sa-tab:hover { color: var(--fp-primary); }

.sa-tab--active,
.sa-tab[aria-selected="true"] {
  background: var(--fp-surface);
  color: var(--fp-primary);
  box-shadow: var(--fp-shadow-sm);
}

.sa-tab:focus-visible { outline: none; box-shadow: var(--fp-ring); }

.sa-panel { display: block; }
.sa-panel[hidden] { display: none; }
.sa-card { max-width: 720px; }

.sa-picker { display: block; }

.sa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fp-space-2);
  margin: var(--fp-space-2) 0 var(--fp-space-3);
}

.sa-chips:empty { display: none; }

.sa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--fp-accent);
  border-radius: 999px;
  background: var(--fp-accent-soft);
  color: var(--fp-primary);
  font-size: var(--fp-text-sm);
  font-weight: 600;
}

.sa-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fp-accent-hover);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.sa-chip__remove:hover { background: rgba(30, 111, 217, .14); }
.sa-chip__remove:focus-visible { outline: none; box-shadow: var(--fp-ring); }

.sa-course-list {
  display: grid;
  gap: 2px;
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-sm);
  background: var(--fp-surface);
}

.sa-course {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--fp-radius-sm);
  cursor: pointer;
}

.sa-course[hidden] { display: none; }
.sa-course:hover { background: var(--fp-surface-alt); }

.sa-course:has(input:checked) {
  background: var(--fp-accent-soft);
  outline: 1px solid var(--fp-accent);
}

.sa-course input {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 2px;
  accent-color: var(--fp-accent);
}

.sa-course__body { display: flex; flex-direction: column; gap: 2px; }

.sa-course__code {
  font-family: "Consolas", "Courier New", monospace;
  font-weight: 700;
  color: var(--fp-primary);
}

.sa-course__title { font-size: var(--fp-text-sm); color: var(--fp-text); }
.sa-course__meta { font-size: var(--fp-text-xs); color: var(--fp-muted); }

/* Элементы сетки не должны растягивать колонку своим min-content: дорожки
   .fp-grid заданы как minmax(0, 1fr), но у детей остаётся min-width: auto,
   поэтому длинный <pre> с примером CSV растягивал карточку и на 320–390 px
   появлялся горизонтальный скролл страницы (t_a79b3ef6; ловит
   scripts/responsive-check.mjs). */
.fp-grid > * { min-width: 0; }

.sa-sample {
  margin: var(--fp-space-3) 0;
  padding: var(--fp-space-3) var(--fp-space-4);
  background: var(--fp-surface-alt);
  border: 1px solid var(--fp-border-soft);
  border-radius: var(--fp-radius-sm);
  font-family: "Consolas", "Courier New", monospace;
  font-size: var(--fp-text-sm);
  line-height: 1.6;
  color: var(--fp-text);
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
}

.sa-mono { font-family: "Consolas", "Courier New", monospace; }

.sa-result {
  margin: 0 0 var(--fp-space-5);
  border-left: 4px solid var(--fp-accent);
}

.sa-result__name { margin: 4px 0 var(--fp-space-3); }
.sa-result__rows { display: grid; gap: var(--fp-space-3); }

.sa-result__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fp-space-2) var(--fp-space-3);
}

.sa-result__label {
  min-width: 150px;
  font-size: var(--fp-text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fp-muted);
}

.sa-result__actions { margin-top: var(--fp-space-4); }

.sa-code {
  padding: 4px 10px;
  border-radius: var(--fp-radius-sm);
  background: var(--fp-surface-alt);
  font-family: "Consolas", "Courier New", monospace;
  font-size: var(--fp-text-md);
  font-weight: 700;
  color: var(--fp-primary);
}

.sa-code--secret { color: var(--fp-success-strong); }

.sa-link {
  font-family: "Consolas", "Courier New", monospace;
  font-size: var(--fp-text-sm);
  color: var(--fp-accent);
  word-break: break-all;
}

.sa-copy-status { color: var(--fp-success-strong); }

@media (max-width: 600px) {
  .sa-tabs { padding: 3px; gap: 3px; }
  .sa-tab { padding: 10px 8px; font-size: var(--fp-text-sm); }
  .sa-course-list { max-height: 300px; }
  .sa-result__label { min-width: 100%; }
  .sa-result__row .fp-btn { width: 100%; }
}