/* Экран записи. Тёмный независимо от темы: в аудитории телефон лежит
   рядом, и светлый экран мешает и соседям, и самому студенту.

   Отсюда правило: цвета здесь свои, а не из палитры приложения. Токены
   (--accent, --card, --line) переворачиваются вместе с темой, и в светлой
   var(--accent) — тёмно-зелёный #0F766E — ложился тёмным по чёрному. На
   единственном экране, где человек может всё испортить, гадать по контрасту
   нельзя.

   Второе правило: важное — крупно. Здесь всего три вещи, которые надо
   успеть прочитать одним взглядом с парты: идёт ли запись (таймер и красная
   точка), не случилось ли беды (плашка) и где «Стоп». Всё остальное тише. */

#screen-record { background: #0b0d11; color: #f4f4f5; min-height: 100dvh; }

.rec {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(22px + var(--sat)) 20px calc(28px + var(--sab));
  min-height: 100dvh;
}

.rec-subject {
  align-self: stretch;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
  color: #f4f4f5;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  margin-bottom: 8px;
  transition: background .15s ease, transform .12s ease;
}
.rec-subject:active { background: rgba(255, 255, 255, .12); transform: scale(.99); }
/* Стрелка выбора — только у выбора предмета. Раньше «▾» стояла и на
   «Презентация к лекции», и на «Писать на доске», хотя ни та, ни другая
   ничего не разворачивают. */
#rec-subject::after { content: " ▾"; color: rgba(255, 255, 255, .5); }

/* «Писать на доске» — приглашение, а не предупреждение: своя мятная краска,
   не зависящая от темы приложения. */
.rec-subject.accent {
  background: rgba(45, 212, 191, .12);
  border-color: rgba(45, 212, 191, .34);
  color: #5EEAD4;
  font-weight: 600;
}
.rec-subject.accent:active { background: rgba(45, 212, 191, .2); }

.wave {
  width: 100%;
  height: 130px;
  margin: 22px 0 4px;
  display: block;
}

/* Таймер — главный ответ на вопрос «оно вообще пишет?». Крупно и по
   табличным цифрам, чтобы двоеточие не дёргалось каждую секунду.

   Красной «точки записи» здесь намеренно нет. Пауза меняет только надпись на
   кнопке, класса на экране не появляется, и точка продолжала бы мигать на
   остановленной записи — врущий индикатор хуже, чем никакого. Что запись
   идёт, видно по живой волне: на паузе она замирает. */
.timer {
  font-size: 54px;
  font-weight: 250;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 10px;
  text-align: center;
}

/* Подсказка — спокойная плашка, а не серая строчка под таймером: её надо
   прочитать один раз и запомнить, поэтому у неё есть форма и поле. */
.rec-hint {
  font-size: 13.5px;
  color: rgba(244, 244, 245, .72);
  background: rgba(255, 255, 255, .05);
  border-radius: 12px;
  padding: 10px 14px;
  text-align: center;
  line-height: 1.5;
  max-width: 32ch;
}

/* Беда: свернул Телеграм, микрофон закрыт, кусок не ушёл. Красная, но не
   кричащая — паника на паре не помогает. Знак слева читается раньше цвета. */
.rec-warn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  background: rgba(239, 68, 68, .14);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .45);
  color: #fecaca;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  max-width: 34ch;
}
.rec-warn[hidden] { display: none; }
.rec-warn::before {
  content: "!";
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font: 700 13px/20px var(--sans);
  text-align: center;
}
/* Мягкая тревога: запись идёт, просто что-то придётся доделать. Янтарь, а не
   зелёный: «кусок записи не ушёл» — это не успех. */
.rec-warn.ok {
  background: rgba(250, 204, 21, .13);
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, .4);
  color: #fde68a;
}
.rec-warn.ok::before { background: #facc15; color: #1c1917; }

.marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 16px;
  min-height: 26px;
}
.mark-chip {
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 20px;
  background: rgba(250, 204, 21, .16);
  color: #fde68a;
  font-variant-numeric: tabular-nums;
}

/* Низ экрана: «Стоп» посередине и крупнее соседей, у всех трёх кнопок есть
   подпись. Раньше у главной был только aria-label — глазами её значение
   приходилось угадывать по красному кругу. */
.rec-controls {
  margin-top: auto;
  padding-top: 26px;
  padding-bottom: 26px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.stop-btn {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .22);
  background: #ef4444;
  box-shadow: 0 8px 26px -8px rgba(239, 68, 68, .7);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s;
}
.stop-btn:active { transform: scale(.94); }
.stop-square { width: 25px; height: 25px; border-radius: 5px; background: #fff; }
.stop-btn::after {
  content: "Стоп";
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fca5a5;
}

.mark-btn, .pause-btn {
  background: rgba(255, 255, 255, .09);
  border: 0;
  color: #f4f4f5;
  border-radius: 22px;
  padding: 13px 16px;
  font-size: 14px;
  cursor: pointer;
  min-width: 92px;
  min-height: 46px;
  transition: background .15s ease, transform .12s ease;
}
.mark-btn { color: #fde68a; }
.mark-btn:active, .pause-btn:active { background: rgba(255, 255, 255, .18); transform: scale(.96); }

.rec-status {
  font-size: 12.5px;
  color: rgba(244, 244, 245, .55);
  font-variant-numeric: tabular-nums;
}

/* На ноутбуке экран записи — та же колонка, но по центру: растянутая на
   1100 px волна и кнопки по краям выглядели бы приборной панелью. */
@media (min-width: 860px) {
  .rec { max-width: 560px; margin: 0 auto; }
}

/* Полоска записи на экране конспекта. Здесь, в отличие от экрана записи,
   цвета берутся из палитры: плашка живёт на светлой или тёмной бумаге. */
.rec-pill {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 15px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--danger) 12%, var(--card));
  color: var(--danger);
  font: 13px/1.3 var(--sans);
  cursor: pointer;
  text-align: left;
}
.rec-pill[hidden] { display: none; }
.rec-pill b { font-variant-numeric: tabular-nums; }
.rec-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger);
  animation: recblink 1.4s ease-in-out infinite;
}
@keyframes recblink { 50% { opacity: .25; } }
.rec-pill-stop {
  margin-left: auto;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
}