/* ==========================================================
   looks.css — чем стили отличаются друг от друга на всех экранах.
   Цвета и шрифты — переменные в themes.css; раскладка главной
   и теста — views.css. Подключается последним из стилей экранов.
   ========================================================== */

/* ---------- Общее: реплики Романа «почерком» ---------- */
:root .roman-say .quote {
  font-family: var(--font-hand);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--hand);
}

.roman-say .roman-img {
  background: var(--surface-2);
}

/* ================= Б. Ночная смена ================= */
:root[data-theme="night"] .roman-say .quote {
  padding: 12px 14px;
  border-radius: 18px 18px 18px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

:root[data-theme="night"] .hm-tile {
  border: 1px solid var(--border);
}

:root[data-theme="night"] .hm-task-art {
  opacity: 0.25;
}

/* Разбор ответа: Роман и облачко; ошибка — золотом, верно — мятой */
:root[data-theme="night"] .tq-fb {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

:root[data-theme="night"] .tq-fb .tq-roman {
  width: 72px;
  height: 88px;
  border-radius: 18px;
}

:root[data-theme="night"] .tq-fb .nt-bubble {
  border-radius: 6px 20px 20px 20px;
}

:root[data-theme="night"] .tq-fb.no .hand {
  color: var(--gold);
}

:root[data-theme="night"] .tq-fb .tq-expl {
  margin-top: 8px;
  color: #c9d8d1;
}

:root[data-theme="night"] .tq-bar .bar {
  height: 6px;
  background: var(--surface-2);
}

:root[data-theme="night"] .tq .option {
  color: var(--text-muted);
}

:root[data-theme="night"] .tq .option.selected,
:root[data-theme="night"] .tq .option.correct,
:root[data-theme="night"] .tq .option.wrong {
  color: var(--text);
}

:root[data-theme="night"] .tq .option.correct {
  background: var(--surface);
}

:root[data-theme="night"] .tq .option.faded {
  opacity: 1;
}

:root[data-theme="night"] .tq .option.wrong {
  background: #3a2224;
  color: #ffe3e3;
}

:root[data-theme="night"] .opt-verdict {
  color: #f5b0b0;
}

:root[data-theme="night"] .msg.roman .bubble {
  border-radius: 6px 18px 18px 18px;
}

:root[data-theme="night"] .msg.user .bubble {
  border-radius: 18px 6px 18px 18px;
}

:root[data-theme="night"] .day.today {
  background: var(--gold);
  color: var(--on-warn);
}

:root[data-theme="night"] .day.today b {
  color: var(--on-warn);
}

/* ================= В. История болезни ================= */
:root[data-theme="chart"] .card {
  box-shadow: 0 2px 0 var(--line);
}

:root[data-theme="chart"] .nav {
  border-top: 1.5px solid var(--accent);
}

:root[data-theme="chart"] .nav-item.active {
  color: var(--stamp);
}

/* Заголовки разделов — как графы бланка */
:root[data-theme="chart"] .section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

:root[data-theme="chart"] .roman-say .roman-img,
:root[data-theme="chart"] .tq-roman {
  border: 1.5px solid var(--accent);
  background: var(--surface);
}

:root[data-theme="chart"] .topbar h1 {
  font-size: 22px;
}

:root[data-theme="chart"] .icon-btn {
  border: 1.5px solid var(--accent);
}

/* Вкладки и чипы — строже, почти прямоугольные */
:root[data-theme="chart"] .tab,
:root[data-theme="chart"] .tabs {
  border-radius: 8px;
}

:root[data-theme="chart"] .chip,
:root[data-theme="chart"] .badge {
  border-radius: 6px;
}

/* Списки (тесты, конспекты, задачи) — строки журнала */
:root[data-theme="chart"] .note-row,
:root[data-theme="chart"] .task,
:root[data-theme="chart"] .rank-row {
  border-radius: 10px;
  box-shadow: 0 2px 0 var(--line);
}

/* Чат: записи Романа — как пометки на полях */
:root[data-theme="chart"] .msg.roman .bubble {
  border-radius: 4px 14px 14px 14px;
  border-color: var(--accent);
}

:root[data-theme="chart"] .msg.user .bubble {
  border-radius: 14px 4px 14px 14px;
}

/* Флеш-карточка: оборот — лист назначений */
:root[data-theme="chart"] .flash-face.back {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--accent);
  font-family: var(--font-hand);
  font-size: 24px;
  font-weight: 700;
}

:root[data-theme="chart"] .flash-face.back .badge {
  font-family: var(--font-body);
}

/* --- Тест: лист с вопросом, «галочки» в квадратах, обводка, штамп --- */
:root[data-theme="chart"] .tq-sheet {
  position: relative;
  padding: 18px 16px 8px;
}

:root[data-theme="chart"] .tq-sheet .q-text {
  margin-top: 6px;
  font-size: 20px;
}

:root[data-theme="chart"] .tq-options {
  gap: 0;
  margin-top: 12px;
}

:root[data-theme="chart"] .tq .option {
  min-height: 50px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px dashed var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
}

:root[data-theme="chart"] .tq .option:last-child {
  border-bottom: 0;
}

:root[data-theme="chart"] .tq .option .radio {
  border-radius: 4px;
  border-color: #8c96aa;
}

:root[data-theme="chart"] .tq .option.selected,
:root[data-theme="chart"] .tq .option.correct,
:root[data-theme="chart"] .tq .option.wrong {
  border: 0;
  border-bottom: 1px dashed var(--border);
  background: transparent;
  color: var(--text);
  font-weight: 700;
}

:root[data-theme="chart"] .tq .option.selected .radio {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent);
}

/* Верный ответ — зелёным (как штамп «СПАСЁН»), неверный — красным */
:root[data-theme="chart"] .tq .option.correct .radio {
  border-color: var(--good);
  background: transparent;
  color: var(--good);
}

:root[data-theme="chart"] .tq .option.correct .opt-circle {
  border-color: var(--good);
}

:root[data-theme="chart"] .tq .option.selected .opt-circle {
  border-color: var(--accent);
}

:root[data-theme="chart"] .tq .option.wrong .radio {
  border-color: var(--stamp);
  background: transparent;
  color: var(--stamp);
}

:root[data-theme="chart"] .tq .option.faded {
  opacity: 1;
}

:root[data-theme="chart"] .opt-verdict {
  color: var(--stamp);
  font-family: var(--font-hand);
  font-size: 20px;
  font-weight: 700;
}

.opt-circle {
  display: none;
}

:root[data-theme="chart"] .opt-circle {
  display: block;
  position: absolute;
  inset: -7px -10px;
  border: 2px solid var(--stamp);
  border-radius: 50% / 46%;
  transform: rotate(-1.5deg);
  opacity: 0.85;
  pointer-events: none;
}

/* Прогресс теста: клетки с номерами пациентов */
.tq-marks-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

:root[data-theme="chart"] .tq-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

:root[data-theme="chart"] .tq-marks span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface);
}

:root[data-theme="chart"] .tq-marks .ok { border-color: var(--good); background: var(--good); color: #fff; }
:root[data-theme="chart"] .tq-marks .no { border-color: var(--stamp); background: var(--stamp); color: #fff; }
:root[data-theme="chart"] .tq-marks .done { border-color: var(--text-muted); color: var(--text); }
:root[data-theme="chart"] .tq-marks .now { border-color: var(--accent); color: var(--accent); }

:root[data-theme="chart"] .tq-stamp {
  top: -14px;
  right: 14px;
  padding: 4px 10px;
  background: var(--surface);
  font-size: 14px;
  letter-spacing: 0.08em;
  transform: rotate(8deg);
  opacity: 1;
}

:root[data-theme="chart"] .tq-stamp.ok {
  border-color: var(--good);
  color: var(--good);
}

:root[data-theme="chart"] .tq-fb {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 2px;
}

:root[data-theme="chart"] .tq-fb .tq-roman {
  width: 64px;
  height: 76px;
  border-radius: 14px;
}

:root[data-theme="chart"] .tq-concl .tq-expl {
  margin-top: 6px;
  color: #2e3a5c;
}

/* Выписка (итог теста) */
:root[data-theme="chart"] .cd-discharge {
  position: relative;
  padding-top: 22px;
}

.cd-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--border);
  font-size: 14px;
}

.cd-line span {
  color: var(--text-muted);
  flex-shrink: 0;
}

.cd-line b {
  text-align: right;
}

.cd-line b.hand {
  font-size: 26px;
  color: var(--stamp, var(--hand));
}

.cd-discharge .cd-line:nth-child(2) {
  margin-right: 110px;
}

/* Обводка — только вокруг текста ответа, а не на всю строку */
:root[data-theme="chart"] .tq .opt-text {
  flex: 0 1 auto;
}