/* app/map/static/style.css
   Стили телефонных страниц цифровой карты — стартовой /` и карточек /e/<код>/.

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

   1) Один множитель размера. В соседних экспонатах стенда (msp-game и другие)
      корневой кегль привязан к меньшей стороне фиксированной панели
      (`min(100vw/120, 100vh/67.5)`) — там известны точные пропорции экрана.
      Здесь экран другой у каждого гостя и страница вертикально скроллится,
      поэтому вместо vh берём только vw и ограничиваем clamp()'ом сверху и
      снизу: узкий телефон не мельчит текст ниже читаемого, широкий не
      раздувает его до нелепого. Дальше — только rem, поэтому вся вёрстка
      тянется одним числом.
   2) Тач-цели: `--touch` через max(2.75rem, 44px). rem обязан участвовать в
      расчёте (тянется вместе с макетом), но на самом мелком телефоне не
      имеет права уйти ниже физических 44px — гость стоит и держит телефон
      одной рукой.
   3) Партнёрский цвет (--partner, из атрибута style разметки) используется
      только как акцент — обводка кружка с номером, полоска бренда, левая
      граница строки легенды, — никогда как заливка под текстом. В реестре
      есть жёлтый #f9a825: белый текст поверх него не проходит AA. Обводка
      снимает вопрос контраста разом для любого будущего цвета партнёра.

   Ни внешних шрифтов, ни CDN: только системный стек и то, что лежит рядом.
*/

:root {
  color-scheme: light;

  --ink: #14171c;
  --paper: #ffffff;
  --muted: #5b6472;
  --line: #e2e5ea;
  --surface: #f4f6f8;
  --focus: #1f6feb;
  --warn-bg: #fff4cc;
  --warn-line: #e6c866;
  --warn-ink: #5c4300;

  /* Резервное значение — на случай, если элемент окажется без style="--partner: …"
     из разметки. В шаблонах задачи 2 это не должно случаться, но без запасного
     значения var(--partner) без второго аргумента развалила бы бордюры. */
  --partner: #14171c;

  --radius: 0.75rem;
  --touch: max(2.75rem, 44px);

  font-size: clamp(16px, 4.2vw, 19px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Страховка сверх max-width: 100% на .scheme и flex-wrap на .download —
     горизонтальной прокрутки не должно быть ни при каком сочетании контента. */
  overflow-x: hidden;
}

body.index,
body.exhibit {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

button { font: inherit; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* [data-lang] по умолчанию видимы: если app.js не выполнился (нет сети на
   первом запросе скрипта, ошибка в консоли — не важно), гость увидит оба
   языка сразу, а не пустую страницу. Прятать умеет только JS через свойство
   hidden; правило ниже — явная страховка на случай, если где-то выше по
   каскаду обычный [hidden] окажется перекрыт более специфичным display. */
[data-lang][hidden] { display: none !important; }

/* Тот же no-JS фолбэк (оба языка разом) ловил горизонтальную прокрутку:
   flex-элемент по умолчанию не сжимается уже своего контента (min-width:
   auto), а строка легенды кладёт рядом сразу два языковых span'а. На узком
   телефоне сумма их «естественных» ширин была шире экрана. min-width: 0
   снимает это ограничение у всех [data-lang], где оно может сработать. */
[data-lang] { min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------- header --- */

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding-block: 0.5rem 1rem;
}

header h1 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.25;
}

.lang {
  flex: none;
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.lang:active { background: var(--line); }

.back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--touch);
  padding-inline: 0.25rem;
  text-decoration: none;
  font-weight: 600;
}

/* ----------------------------------------------------------- index --- */

body.index main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.scheme {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.download {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.download a {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--touch);
  padding-inline: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  font-weight: 600;
  text-align: center;
}
.download a:active { background: var(--line); }

.legend {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.legend li { border-bottom: 1px solid var(--line); }
/* Один длинный заголовок (реальные тексты партнёров ещё не пришли и почти
   наверняка будут длиннее рабочих — придут после 01.09) не должен ломать
   строку целиком: кружок с номером обязан остаться на месте слева, перенос
   допустим только внутри текста. flex-wrap здесь вреден — он выносил на
   вторую строку сам .num, и пункт переставал читаться как пункт списка.
   Вместо переноса всей строки — .num фиксированного размера (flex: none,
   ниже) и текст, которому разрешено сжиматься и переноситься внутри себя
   (min-width: 0 + overflow-wrap: anywhere, общее правило для [data-lang]
   чуть выше). align-items: flex-start — кружок держится на уровне первой
   строки текста, а не «плывёт» к центру всего блока, когда текст занимает
   две строки. */
.legend a {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: var(--touch);
  padding: 0.5rem 0.5rem 0.5rem 0.6rem;
  border-left: 0.25rem solid var(--partner);
  text-decoration: none;
  color: var(--ink);
}
.legend a:active { background: var(--surface); }
.legend [data-lang] { flex: 1 1 auto; padding-top: 0.15rem; }

/* Заголовок группы партнёра — номер экспоната начинается заново у каждого
   партнёра (p1, s1, ...), плоский список иначе выглядит как сломанная
   нумерация. Партнёрский цвет и здесь только обводкой/акцентом слева, не
   заливкой — та же причина про AA-контраст, что у .num. flex-wrap на случай
   no-JS фолбэка (оба языка сразу) — тот же класс бага, что уже правился
   в .legend a и header. */
.legend .group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  margin-top: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-left: 0.25rem solid var(--partner);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.legend .group:first-child { margin-top: 0; }

/* --------------------------------------------------------- num-бейдж --- */
/* Общий для легенды и карточки экспоната: цвет партнёра только в обводке,
   не в заливке — см. пункт 3 в шапке файла про контраст. */
.num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--partner);
  border-radius: 50%;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.8rem;
}

/* --------------------------------------------------------- exhibit --- */

body.exhibit {
  position: relative;
}
/* Полоска бренда партнёра во всю ширину карточки — единственное декоративное
   применение --partner, без влияния на контраст текста. */
body.exhibit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.25rem;
  background: var(--partner);
}
body.exhibit header { padding-top: calc(0.5rem + 0.25rem); }

body.exhibit main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
}

.partner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
}

h1 {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.25;
}

.short {
  margin: 0;
  font-size: 1.05rem;
  color: var(--muted);
  white-space: pre-wrap;
}

.full {
  font-size: 1rem;
  white-space: pre-wrap;
}

.audio {
  margin: 0;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.audio audio {
  width: 100%;
  display: block;
  /* Высота нативного <audio controls> у Safari/Chrome и так укладывается в
     44px по короткой стороне; трогать её ломает системные тач-цели плеера. */
}
.audio figcaption {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem;
}
.images img {
  width: 100%;
  height: 9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  object-fit: cover;
}

.more a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--touch);
  padding-inline: 1.1rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
}
.more a:active { opacity: 0.85; }

/* ---------------------------------------------------------- offline --- */

.offline {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  margin: 0;
  padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: 0.9rem;
  text-align: center;
}
.offline[hidden] { display: none; }