/* Панель отеля: выезжает справа поверх карты, карта под ней остаётся живой.
 *
 * Широкая, а не карточка в 320 px: суждений два, у каждого абзац, и в узкой
 * полосе они превращаются в столбик обрезанных строк. Тот же путь прошёл раздел
 * проката — сперва узкая карточка, потом широкая панель.
 */

/* Устройство то же, что у панели проката: бумага карточки, а не страницы,
 * кант картона и слой поверх карты. Прокручивается тело, а шапка и лента
 * фактов стоят — иначе, читая пятое суждение, не видно, о каком отеле речь. */
.hs-panel {
  position: absolute;
  z-index: 15;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(var(--hs-panel), calc(100% - var(--hs-side) - var(--s7)));
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-left: 1px solid var(--edge-card);
  box-shadow: var(--sh-panel);
  animation: hs-slide var(--dur) var(--ease);
}

@keyframes hs-slide {
  from {
    transform: translateX(var(--s8));
    opacity: 0;
  }
}

/* Панель широкая, а колонка чтения — нет. Строка суждения на девятьсот
 * пикселей не читается: глаз теряет начало следующей. Отсюда потолок ширины
 * содержимого, а не панели: карта под ней всё равно закрыта, и растягивать
 * текст ради заполнения пустоты значит менять читаемость на симметрию. */
.hs-panel-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.hs-panel-scroll {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s6) var(--s8) var(--s8);
}

/* Колонка чтения уже панели: строка суждения на девятьсот пикселей
 * не читается — глаз теряет начало следующей. Узки блоки текста, а не сама
 * прокрутка: лента зала идёт во всю панель, как лента каталога в шапке, —
 * кадру ширина строки не указ, а обрезанная посреди панели лента читалась
 * как сломанная. */
.hs-panel-scroll > *,
.hs-verdicts > * {
  max-width: calc(var(--hs-read) - 2 * var(--s8));
}

.hs-panel-scroll > .hs-verdicts,
.hs-panel-scroll > .hs-gym,
.hs-verdicts > .hs-gym {
  max-width: none;
}

.hs-panel-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: start;
  gap: var(--s5);
  flex: none;
  padding: var(--s6) var(--s8) var(--s5);
}

/* Крестик не стоит вплотную к цене: два разных по смыслу элемента в одном
 * углу читаются как один блок, и по «закрыть» промахиваются в цену. */
.hs-panel-head .icon-btn {
  margin-left: var(--s3);
}

/* Имя отеля набирается тише общего заголовка экрана: «Floral Hotel ·
 * Shanghaidaoju Hotel (Chongming Nanmen Pier Branch)» на 27 px занимает две
 * строки и сталкивает вниз всё остальное, а такие имена у китайских сетей —
 * правило, а не исключение. */
.hs-panel-name .page-title {
  margin: 0;
  font-size: var(--t-19);
  line-height: 1.2;
}

.hs-local {
  margin-top: var(--hair);
  font: 400 var(--t-15) / 1.3 var(--sans);
  color: var(--ink-2);
}

/* Вкладки источников одного отеля — тем же чипом, что «Отели / Районы»:
 * переключатель вида, а не действие. Между шапкой и кадрами, потому что кадры
 * ниже уже принадлежат выбранной вкладке. */
.hs-sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  flex: none;
  padding: 0 var(--s8) var(--s5);
}

.hs-panel-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s2);
}

.hs-panel-price .mono {
  font-size: var(--t-19);
}

/* Даты, на которые смотрели цену. Тише самой цены: это условие, при котором
 * она верна, а не второе число. */
.hs-panel-price .hs-when-price {
  font-size: var(--t-12);
  color: var(--ink-4);
}

/* Отказ цены — словами сервера («…истёк — обнови куки»). Цветом оговорки,
 * а не ошибки: панель цела, и прежняя цена со своими датами стоит выше. */
.hs-panel-price .hs-price-beda {
  max-width: var(--hs-aside);
  font-size: var(--t-12);
  color: var(--warn-ink);
  text-align: right;
}

/* Факты — одной строкой через разделители, а не колонками: их три-четыре,
 * и сетка на таком количестве выглядит таблицей из одного ряда. */
/* Факты — своей лентой во всю ширину панели, как у соседа: это условия,
 * при которых верно всё ниже, а не первый абзац содержимого. */
.hs-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s6);
  flex: none;
  padding: var(--s4) var(--s8);
  background: var(--field);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font: 400 var(--t-14) / 1.2 var(--sans);
  color: var(--ink-2);
}

.hs-fact + .hs-fact::before {
  content: "·";
  margin-right: var(--s5);
  color: var(--ink-5);
}

.hs-fact {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
}

/* --- суждения ------------------------------------------------------------ */

.hs-verdicts {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

/* Строкой со знаком слева — решение владельца: длинный текст суждения влезает
 * целиком, а плитка два на два резала бы его на третьей строке. */
.hs-verdict {
  display: flex;
  align-items: flex-start;
  gap: var(--s5);
  min-width: 0;
  padding: var(--s4);
  background: var(--field);
  border: 1px solid var(--edge-card);
  border-radius: var(--r4);
}

.hs-verdict.is-no {
  border-color: var(--alarm-edge);
}

.hs-verdict.is-warn {
  border-color: var(--warn-edge);
}

.hs-verdict-body {
  min-width: 0;
}

.hs-verdict-head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}

.hs-verdict-head .caps {
  font: 600 var(--t-12) / 1 var(--mono);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Итог словом рядом со знаком: цвет не читается вслух и не различается
 * дальтоником, а знак без подписи требует помнить набор. */
.hs-verdict-said {
  font: 500 var(--t-13) / 1 var(--sans);
  color: var(--ink-2);
}

.hs-verdict-marks {
  font-size: var(--t-14);
}

.hs-verdict-note {
  margin: var(--s2) 0 0;
  max-width: var(--hs-prose);
  font: 400 var(--t-14) / 1.45 var(--sans);
  color: var(--ink);
}

/* На чём стоит суждение — тише самого суждения: это ответ на «насколько
 * верить», а не на «что решили». */
.hs-verdict-basis {
  margin: var(--hair) 0 0;
  font: 400 var(--t-12) / 1.3 var(--mono);
  color: var(--ink-4);
}

/* --- жалобы --------------------------------------------------------------- */

/* Флаг — эмодзи, как метки зала (`.hs-verdict-marks`), и того же кегля. */
.hs-flag {
  font-size: var(--t-14);
}

/* --- район и пометки ----------------------------------------------------- */

.hs-about {
  padding: var(--s5);
  background: var(--sunken);
  border-radius: var(--r3);
}

.hs-about .caps {
  font: 600 var(--t-12) / 1 var(--mono);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Пометки — полосой у нижнего края, а не следом за текстом: у отеля с одним
 * суждением они иначе висят посреди пустой панели, будто их забыли на месте. */
.hs-panel-foot {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
  margin-top: auto;
  padding: var(--s5) var(--s8);
  background: var(--card);
  border-top: 1px solid var(--line);
}

/* Заметка к вердикту. Полем ввода, а не текстом: она пишется здесь же, где
 * ставится решение, — вспоминать «почему выбрал» приходится в этой самой
 * панели, а не на другом экране. Появляется только с поставленным вердиктом:
 * сервер держит их одной строкой, и снятие вердикта стирает заметку. */
.hs-mark-note {
  flex: 1;
  min-width: 0;
  height: var(--hs-chip);
  padding: 0 var(--s3);
  background: var(--field);
  border: 1px solid var(--edge);
  border-radius: var(--r2);
  font: 400 var(--t-13) / 1 var(--sans);
  color: var(--ink);
}

.hs-mark-note::placeholder {
  color: var(--ink-5);
}

.hs-mark-note:focus {
  outline: none;
  border-color: var(--accent-border);
  background: var(--card);
}

/* --- хроника отеля ------------------------------------------------------- */

/* Выжимки по отзывам и мои заметки. Дата слева моноширинной, текст рядом:
 * так видно, что запись датирована, и при этом дата не спорит с текстом
 * за первую строку. */
.hs-told {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.hs-told-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4);
  align-items: baseline;
}

.hs-told-date {
  font-size: var(--t-12);
  color: var(--ink-4);
}

.hs-told-text {
  margin: 0;
  max-width: var(--hs-prose);
  font: 400 var(--t-14) / 1.45 var(--sans);
  color: var(--ink-2);
}