/* ============================================================
   Сцена: доска, бумага, скотч, кнопка, прибор.

   Экран расследования и экран настроек профиля были устроены
   одинаково — заголовок, панель, кнопка. Дело от этого читалось как
   анкета: данные лежали в таблицах, а не в уликах.

   Здесь собран общий слой материалов. Он не про то, какого цвета
   кнопка, а про то, из чего сделан предмет: доска — пробка, документ
   — бумага с машинописью, пометка — записка, запрос — прибор с
   экраном. Пользуются им расследования и тренажёры, дальше — курсы,
   где это уместно.

   Три правила, чтобы слой не превратился в украшательство:

     * своих цветов здесь нет. Все материалы — токены --scene-* из
       shared/theme.css, объявленные в обеих темах;
     * ни одной внешней картинки. Пробка, зерно и тень рисуются
       градиентами: файл пришлось бы хранить, растр мылится, а вес
       страницы дороже фактуры;
     * предмет живёт по своим правилам, но внутри него текст, поля и
       кнопки — обычные, платформенные. Иначе пришлось бы заводить
       вторую дизайн-систему.

   Подключается после shared/theme.css и assets/pages.css.
   ============================================================ */

/* ---------- Доска ----------
   Пробка: два слоя мелких крошек разного шага плюс наклонная
   заливка. Тень внутрь по краям делает из прямоугольника предмет,
   висящий на стене, а не блок в потоке. */

.scene-board {
  position: relative;
  border-radius: var(--radius);
  padding: 22px 20px 26px;
  background:
    radial-gradient(circle at 22% 16%, var(--scene-ink-1), transparent 46%),
    repeating-radial-gradient(circle at 12% 22%, var(--scene-cork-2) 0 1.1px, transparent 1.2px 7px),
    repeating-radial-gradient(circle at 68% 61%, var(--scene-ink-2) 0 1.4px, transparent 1.5px 9px),
    linear-gradient(150deg, var(--scene-cork-2), var(--scene-cork) 60%, var(--scene-cork-deep));
  box-shadow:
    inset 0 0 0 9px var(--scene-shade-1),
    inset 0 0 60px var(--scene-shade-2);
}

/* Строка над доской: где мы в деле. Машинопись, разрядка — это
   подпись на самой доске, а не заголовок страницы. */
.scene-board-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--scene-paper);
  opacity: .85;
}

/* ---------- Бумага ----------
   Документ дела: плотная бумага, машинопись, лёгкое зерно поверх.
   Наклон в полградуса — чтобы лист лежал, а не был вставлен. */

.paper {
  position: relative;
  border-radius: var(--radius-sm);
  padding: 16px 18px 15px;
  color: var(--scene-paper-ink);
  background: linear-gradient(var(--scene-paper), var(--scene-paper) 55%, var(--scene-paper-2));
  box-shadow:
    0 10px 22px var(--scene-shade-2),
    inset 0 1px 0 var(--scene-light);
}

/* Зерно бумаги. Отдельным слоем поверх, чтобы не мешать тексту:
   pointer-events и множительный режим — обязательны. */
.paper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--radius-sm);
  background-image: radial-gradient(rgba(90, 70, 40, .09) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
}

.paper > * { position: relative; z-index: 1; }

.paper-head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--scene-paper-dim);
}

.paper h1, .paper h2, .paper h3, .paper b { color: var(--scene-paper-ink); }
.paper p { color: var(--scene-paper-ink); }
.paper .paper-dim { color: var(--scene-paper-dim); }

/* Штамп: ставится в конце и бьёт по бумаге. Поворот и прозрачность
   делают из рамки с текстом оттиск. */
.paper-stamp {
  position: absolute;
  right: 14px;
  bottom: 12px;
  transform: rotate(-9deg);
  border: 2.5px solid var(--scene-pin);
  color: var(--scene-pin);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  opacity: .82;
  z-index: 2;
}

/* ---------- Крепёж ----------
   Кнопка и скотч — единственный способ показать, что лист
   прикреплён к доске, а не нарисован на ней. */

.scene-pin-head {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    color-mix(in srgb, var(--scene-pin) 55%, #fff),
    var(--scene-pin) 62%,
    color-mix(in srgb, var(--scene-pin) 55%, #000));
  box-shadow: 0 3px 6px var(--scene-shade-3);
  z-index: 3;
}

.scene-tape {
  position: absolute;
  top: -11px;
  left: 22px;
  width: 74px;
  height: 22px;
  transform: rotate(-4deg);
  background: linear-gradient(var(--scene-tape), color-mix(in srgb, var(--scene-tape) 80%, #000));
  opacity: .85;
  box-shadow: 0 2px 5px var(--scene-shade-1);
  z-index: 3;
}

.scene-tape.right { left: auto; right: 20px; transform: rotate(5deg); }

/* Нитка между уликами. Рисуется скриптом по настоящим координатам
   карточек и провисает: натянутая по линейке нитка выглядит
   чертежом, а не ниткой. */
/* Нитка идёт под бумагами, а не поверх: поверх она перечёркивает
   текст улики, и первое, что хочется сделать, — стереть её. Видно
   её ровно там, где и в жизни, — в промежутках между листами. */
.scene-threads {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.scene-threads path {
  fill: none;
  stroke: var(--scene-pin);
  stroke-width: 2.2;
  stroke-linecap: round;
  filter: drop-shadow(0 2px 2px var(--scene-shade-3));
}

/* ---------- Записка ----------
   То, что человек пометил сам: улики в блокноте, свои выводы. */

.scene-note {
  position: relative;
  border-radius: var(--radius-sm);
  padding: 13px 14px 15px;
  color: var(--scene-note-ink);
  background: linear-gradient(var(--scene-note), var(--scene-note-2));
  box-shadow: 0 9px 18px var(--scene-shade-2);
}

.scene-note b, .scene-note code { color: var(--scene-note-ink); }
.scene-note code { background: var(--scene-ink-1); }

/* Текст записки — от руки: это пометка человека, а не строка
   интерфейса. Кегль крупнее обычного: почерк мельче 17 px читается
   плохо. */
.scene-note p,
.scene-note .scene-hand {
  font-family: var(--hand);
  font-size: 19px;
  line-height: 1.25;
}

.scene-note-head {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
}

/* ---------- Прибор ----------
   Терминал, пульт, поле запроса: корпус с экраном. Тёмный в обеих
   темах нарочно — у прибора свой экран, он светится одинаково при
   любом свете в комнате. */

.scene-device {
  border-radius: var(--radius-sm);
  overflow: hidden;
  color: var(--scene-steel-ink);
  background: linear-gradient(var(--scene-steel), var(--scene-steel-2));
  box-shadow: 0 12px 26px var(--scene-shade-2);
}

.scene-device-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  background: var(--scene-ink-1);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--scene-steel-ink) 65%, transparent);
}

.scene-device-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--scene-steel-ink) 30%, transparent);
  display: inline-block;
}

.scene-device-body { padding: 13px 14px 15px; }

.scene-device textarea,
.scene-device input[type="text"] {
  background: var(--scene-ink-3);
  color: var(--scene-steel-ink);
  border-color: color-mix(in srgb, var(--scene-steel-ink) 22%, transparent);
}

.scene-device textarea::placeholder { color: color-mix(in srgb, var(--scene-steel-ink) 45%, transparent); }

.scene-device-out {
  border-top: 1px solid color-mix(in srgb, var(--scene-steel-ink) 12%, transparent);
  padding: 10px 14px 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: color-mix(in srgb, var(--scene-steel-ink) 80%, transparent);
}

/* ---------- Наклон ----------
   Предметы на доске не выровнены по линейке. Наклон маленький: на
   градус глаз читает «положили», на пять — «съехало». */

.tilt-l { transform: rotate(-1.1deg); }
.tilt-r { transform: rotate(1.2deg); }
.tilt-s { transform: rotate(.5deg); }

@media (prefers-reduced-motion: reduce) {
  .tilt-l, .tilt-r, .tilt-s { transform: none; }
}

/* ---------- Телефон ----------
   На узком экране доска складывается в столбец: улика шириной в
   палец перестаёт быть уликой. Наклоны снимаются — в один столбец
   они читаются как брак вёрстки. */

@media (max-width: 1023px) {
  .scene-board { padding: 18px 14px 22px; }
  .tilt-l, .tilt-r, .tilt-s { transform: none; }
}

/* ---------- Платформенные части на бумаге ----------

   Внутри предмета живут обычные элементы платформы: кнопки, поля,
   варианты ответа, метки. Своей вёрстки у них здесь нет — меняются
   только чернила: на кремовой бумаге светло-серый --text-dim не
   виден вовсе. Это не вторая тема, а один слой правок цвета. */

.paper .muted,
.paper .small.muted,
.paper .case-file-lead { color: var(--scene-paper-dim); }

.paper a { color: color-mix(in srgb, var(--scene-paper-ink) 70%, var(--accent)); }

.paper code,
.paper kbd {
  background: var(--scene-ink-1);
  color: var(--scene-paper-ink);
  border-color: var(--scene-ink-2);
}

/* Обычная кнопка на бумаге: контур чернилами, а не светлой рамкой
   интерфейса. Заливная кнопка остаётся как есть — она везде одна и
   та же, это главное действие. */
.paper .btn:not(.btn-primary) {
  color: var(--scene-paper-ink);
  border-color: var(--scene-ink-3);
  background: var(--scene-light);
}

.paper .btn:not(.btn-primary):hover {
  border-color: var(--scene-paper-ink);
  background: var(--scene-sheet);
}

/* Поля ответа: белый лист поверх бумаги, чернила те же. */
.paper input[type="text"],
.paper textarea,
.paper select {
  background: var(--scene-sheet);
  color: var(--scene-paper-ink);
  border-color: var(--scene-ink-3);
}

.paper textarea::placeholder { color: color-mix(in srgb, var(--scene-paper-ink) 45%, transparent); }

.paper input[type="radio"],
.paper input[type="checkbox"] { accent-color: var(--scene-pin); }

/* Вариант ответа — строка на бланке, а не плитка интерфейса. */
.paper .option {
  background: var(--scene-light);
  border-color: var(--scene-ink-2);
  color: var(--scene-paper-ink);
}

.paper .option:hover { border-color: rgba(0, 0, 0, .38); }

/* Таблица в документе: линии тонкие и чернилами. */
.paper table { color: var(--scene-paper-ink); }
.paper th, .paper td { border-color: var(--scene-ink-2); }
.paper thead th { color: var(--scene-paper-dim); }

/* Ответ проверки на бумаге. Статусные цвета платформы рассчитаны на
   тёмную панель: светло-красный на кремовой бумаге даёт 2.6:1 и
   читается плохо. Цвет остаётся тот же по смыслу, но с чернилами —
   получается штамп проверяющего, а не подсветка интерфейса. */

.paper .case-step-res.fail,
.paper .case-error { color: color-mix(in srgb, var(--red) 45%, var(--scene-paper-ink)); }
.paper .case-step-res.pass { color: color-mix(in srgb, var(--green) 45%, var(--scene-paper-ink)); }
.paper .case-step-res.info { color: var(--scene-paper-dim); }
.paper .case-note { color: var(--scene-paper-dim); }
.paper .case-null { color: var(--scene-paper-dim); }
.paper .case-table thead th { background: var(--scene-ink-1); color: var(--scene-paper-dim); }
.paper .case-table th,
.paper .case-table td { border-color: var(--scene-ink-2); }
.paper .case-table-wrap { border-color: var(--scene-ink-2); }

/* Подозреваемые: карточки на бланке. */
.paper .case-suspect { border-color: var(--scene-ink-2); background: var(--scene-light); }
.paper .case-suspect:hover { border-color: var(--scene-ink-3); }
.paper .case-cleared-mark { color: color-mix(in srgb, var(--red) 45%, var(--scene-paper-ink)); }