/* Минимальная разметка публичных страниц. Фреймворк не подключается:
   до Ш10 (кабинет клиента) страниц немного, а лишняя зависимость в вёрстке
   пережила бы любой дизайн, который придёт позже. */

:root {
  --ink: #1f2328;
  --muted: #616a75;
  --line: #d7dce2;
  --accent: #2f5fd0;
  --error: #b3261e;
  --bg: #f6f7f9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.5 system-ui, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.brand { font-weight: 600; text-decoration: none; color: var(--ink); }

.topbar-nav { display: flex; align-items: center; gap: 1rem; }
.topbar-nav a { color: var(--accent); text-decoration: none; }
.topbar-nav a:hover { text-decoration: underline; }

.inline-form { display: inline; margin: 0; }

.linklike {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
}
.linklike:hover { text-decoration: underline; }

.page { max-width: 40rem; margin: 2rem auto; padding: 0 1.5rem; }

h1 { font-size: 1.5rem; margin: 0 0 1rem; }

.hint { color: var(--muted); font-size: 0.9rem; }

.card {
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.card div { margin-bottom: 1rem; }

label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}

/* Чекбоксы перечислений (цвет волос, цвет глаз): подпись каждого варианта
   стоит рядом с квадратиком, а не над ним, — иначе список из пяти цветов глаз
   занимает десять строк. Общая подпись поля остаётся жирной: она снаружи. */
#id_hair_color label, #id_eye_color label { display: inline; font-weight: 400; }
#id_hair_color div, #id_eye_color div { margin-bottom: 0; }
input[type="checkbox"] { width: auto; }

.helptext { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 0.25rem; }

ul.errorlist {
  margin: 0 0 0.5rem;
  padding-left: 1.1rem;
  color: var(--error);
  font-size: 0.9rem;
}

.button {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.button.secondary { background: #fff; color: var(--accent); }

.cabinet-nav {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.cabinet-nav a { color: var(--accent); text-decoration: none; }

h2 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }

.notice {
  margin: 0 0 1rem;
  padding: 0.6rem 0.85rem;
  border-left: 3px solid var(--accent);
  background: #eef2fb;
  font-size: 0.95rem;
}
.notice.warning { border-left-color: var(--error); background: #fdeeed; }

dl.fields { display: grid; grid-template-columns: minmax(9rem, 1fr) 2fr; gap: 0.5rem 1rem; margin: 0; }
dl.fields dt { color: var(--muted); font-weight: 400; }
dl.fields dd { margin: 0; }

ul.plain { list-style: none; margin: 0 0 0.75rem; padding: 0; }
ul.plain li { margin-bottom: 0.25rem; }

.messages { list-style: none; margin: 0 0 1rem; padding: 0; }
.messages li {
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  margin-bottom: 0.5rem;
}
.messages li.error { border-color: var(--error); color: var(--error); }
.messages li.warning { border-color: var(--accent); background: #eef2fb; }
.messages li.success { border-color: #2e7d32; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.photo-card {
  margin: 0;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.photo-card img { display: block; width: 100%; height: auto; border-radius: 4px; }
.photo-card figcaption { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.5rem; }

.photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.photo-actions form { margin: 0; }
.photo-actions label { display: inline; font-weight: 400; color: var(--muted); }
.photo-actions select { max-width: 100%; font: inherit; }
.photo-actions .hint { margin: 0 0 0.25rem; }

/* Параметры подбора: две колонки на широком экране, одна на узком.
   Границы диапазона стоят рядом, поэтому колонки узкие. */
.param-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 1rem; }

.project-list li { margin-bottom: 0.75rem; }
.project-list p { margin: 0.35rem 0 0; }

.tag {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
}
.tag.muted { background: var(--muted); }

/* Чат проекта. Свои сообщения сдвинуты вправо и подкрашены: в переписке
   двоих подпись именем не нужна, а сторона должна быть видна с одного
   взгляда. */
.chat { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.chat-message {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  background: #fff;
  max-width: 85%;
}
.chat-message.mine { align-self: flex-end; background: #eef2fb; }
.chat-message p { margin: 0; }
.chat-meta { color: var(--muted); font-size: 0.8rem; margin-bottom: 0.25rem; }
.chat-message form { margin-top: 0.35rem; }

/* Заметки клиента об анкете (Ш31). Отделены от карточки чертой сверху:
   всё, что выше, — данные анкеты, всё, что ниже, — то, что клиент написал
   сам. Без черты его собственный текст читался бы как ещё одно поле модели. */
.comments { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 0.8rem; }
.comment { margin: 0 0 0.6rem; }
.comments textarea { width: 100%; box-sizing: border-box; margin-bottom: 0.5rem; }

/* Уведомления. Непрочитанное отмечено полосой слева, а не цветом фона:
   счётчик в шапке уже сказал, сколько их, — списку остаётся показать, какие
   именно, и не мешать читать остальные. */
.badge {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
}
.card.unread { border-left: 3px solid var(--accent); }
.card.unread h2 { margin-top: 0; }

/* Ссылка на уведомления в шапке админки: свои цвета там задаёт сама админка,
   поэтому здесь только отступ. */
.admin-notifications { margin-left: auto; padding: 0 2rem; }

/* Заголовок уведомления — кнопка отправки формы: в списке жмут по самому
   уведомлению. `font: inherit` у `.linklike` уже отдаёт ей размер заголовка,
   осталось убрать выравнивание по базовой линии кнопки. */
.card h2 { margin: 0 0 0.5rem; }
.card h2 .linklike { text-align: left; display: block; }

/* Оформление публичных страниц кастинга уехало в `static/css/casting.css`
   (Ш36): аудитория у них другая — незнакомый человек по пересланной ссылке,
   а не свои в кабинете. Три правила, стоявшие здесь с Ш34, удалены, а не
   скопированы: одно из них (`.mark-actions`) больше не на чем применить. */