/* Оформление страницы для телефона.

   Тёмное, как виджет: одна программа — один вид, и человек не должен
   решать, то ли он открыл. Цвета взяты из scribewidget/ui/стиль.py.

   Ни одного шрифта извне: на странице лежит пропуск, и правило
   «никакого чужого кода» распространяется и на шрифты — они грузятся
   с чужого сервера, который видит, кто и когда открыл страницу. */

:root {
  --фон: #1B1B1B;
  --поле: #242424;
  --граница: #3A3A3A;
  --текст: #EDEDED;
  --приглушённый: #9AA0A6;
  --синий: #274BDB;
  --красный: #DB2323;
}

* { box-sizing: border-box; }

html {
  margin: 0;
  padding: 0;
  background: var(--фон);
  /* Ниже полей безопасности фон должен быть тот же: иначе под чёлкой
     в отдельном окне светится белая полоса. */
  color: var(--текст);
}

body {
  margin: 0;
  padding: 0;
  background: var(--фон);
  color: var(--текст);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  /* Страница живёт в отдельном окне без адресной строки: поля системы
     нам никто не нарисует. Задаём их ровно один раз — заданные и здесь,
     и у html, они складываются, и шапка уезжает на треть экрана вниз. */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-text-size-adjust: 100%;
}

.шапка {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--граница);
}

.знак { border-radius: 7px; display: block; }
.имя { font-weight: 600; letter-spacing: 0.01em; }

.нутро { padding: 20px 18px 32px; }

h1 { font-size: 21px; margin: 0 0 12px; font-weight: 600; }
p { margin: 0 0 14px; }

.тихо { color: var(--приглушённый); font-size: 15px; }

.важное {
  border: 1px solid var(--граница);
  border-left: 3px solid var(--красный);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--поле);
}

button {
  font: inherit;
  color: var(--текст);
  background: var(--поле);
  border: 1px solid var(--граница);
  border-radius: 10px;
  /* 48 пикселей — то, во что уверенно попадают пальцем. Меньше делать
     нельзя: по такой кнопке промахиваются, и человек решает, что
     программа не отзывается. */
  min-height: 48px;
  padding: 12px 20px;
  width: 100%;
  cursor: pointer;
}

button.главная {
  background: var(--синий);
  border-color: var(--синий);
  color: #FFFFFF;
  font-weight: 600;
}

button[disabled] { opacity: 0.45; }

/* --- форма отправки --- */

input, select {
  font: inherit;
  color: var(--текст);
  background: var(--поле);
  border: 1px solid var(--граница);
  border-radius: 10px;
  /* 16 пикселей — не вкус, а необходимость: при меньшем размере Safari
     на iPhone приближает страницу, как только палец попадает в поле,
     и обратно её уже не отдаляет. */
  font-size: 16px;
  min-height: 48px;
  padding: 12px 14px;
  width: 100%;
  margin-bottom: 10px;
  /* Свой вид полей: системный на тёмном фоне светлый, и поле выглядит
     чужим окном посреди страницы. */
  -webkit-appearance: none;
  appearance: none;
}

/* Своя стрелка взамен системной, которую убрал `appearance: none`.
   Без неё выпадающий список неотличим от текстового поля: человек
   пытается в него печатать. Рисунок встроен прямо сюда — отдельный файл
   ради двенадцати байт не нужен, а ссылок наружу у нас не бывает. */
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239AA0A6' d='M0 1h12L6 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  padding-right: 40px;
}

button { margin-bottom: 10px; }

progress {
  width: 100%;
  height: 10px;
  margin: 6px 0 12px;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: 5px;
  background: var(--поле);
  overflow: hidden;
}

progress::-webkit-progress-bar { background: var(--поле); }
progress::-webkit-progress-value { background: var(--синий); }
progress::-moz-progress-bar { background: var(--синий); }

/* --- участники --- */

.чипы { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

.чип {
  width: auto;
  min-height: 40px;
  padding: 8px 12px;
  margin: 0;
  border-radius: 20px;
  font-size: 15px;
}

.подсказки { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }

.подсказка {
  text-align: left;
  min-height: 44px;
  margin: 0;
  font-size: 15px;
}

/* --- список встреч --- */

.встречи { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }

.встреча {
  border: 1px solid var(--граница);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--поле);
}

.встреча-имя { font-weight: 600; margin-bottom: 2px; }
.встреча .тихо { margin: 0; }