/* baikal.tetavr.ru — визуальные токены и база.
   ЭТО ОБЩИЙ ФАЙЛ. Правится только по согласованию: от него зависят и
   планировщик, и энциклопедия. Свои стили пишите в app.css / pages.css.

   Палитра взята с зимнего Байкала: чёрный лёд, белые торосы, бирюза трещины. */

:root {
  /* поверхности */
  --ink:        #070b10;   /* фон страницы, почти чёрный */
  --deep:       #0e1a24;   /* панель */
  --deep-2:     #16242f;   /* панель поверх панели, границы */
  --glass:      rgba(14, 26, 36, .72);

  /* текст */
  --frost:      #d7eef5;   /* основной текст на тёмном */
  --frost-dim:  #8ba7b4;   /* второстепенный */
  --frost-mute: #5d7683;   /* подписи, источники, даты */

  /* акценты */
  --ice:        #7fd4e8;   /* основной: бирюза байкальской трещины */
  --ice-deep:   #3b9fb8;
  --sun:        #f0b24a;   /* тёплый: активность, «сейчас», аудио */
  --sig:        #e8604c;   /* безопасность. Инвариант №7: не приглушать */
  --ok:         #6fcf97;

  /* сезоны — используются в чипах и на карте */
  --winter:     #7fd4e8;
  --summer:     #6fcf97;

  /* геометрия */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --pad:  clamp(16px, 3vw, 28px);

  /* тени: на тёмном работает свечение, а не чёрная тень */
  --lift:  0 1px 0 rgba(255,255,255,.05) inset, 0 10px 30px rgba(0,0,0,.45);
  --glow:  0 0 0 1px rgba(127,212,232,.28), 0 8px 34px rgba(127,212,232,.14);

  /* типографика */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Tight", var(--font);
  --step--1: clamp(.82rem, .78rem + .2vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-2:  clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.6rem + 3vw, 4.2rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--frost);
  font: var(--step-0)/1.6 var(--font);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  font-weight: 600;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

a { color: var(--ice); text-decoration-color: rgba(127,212,232,.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ice); }

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

:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 4px; }

/* ── панели ───────────────────────────────────────────────────────────── */

.panel {
  background: var(--deep);
  border: 1px solid var(--deep-2);
  border-radius: var(--r);
  box-shadow: var(--lift);
}

/* Стекло — только поверх карты и только на панелях, никогда под текстом
   длиннее абзаца: backdrop-filter дорогой и портит читаемость мелкого шрифта. */
.glass {
  background: var(--glass);
  border: 1px solid rgba(127,212,232,.16);
  border-radius: var(--r);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--lift);
}

/* ── кнопки ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .7em 1.2em;
  font: 600 var(--step-0)/1 var(--font);
  color: var(--ink);
  background: var(--ice);
  border: 0; border-radius: 999px;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
.btn:hover { background: #9ae0f1; transform: translateY(-1px); box-shadow: var(--glow); }
.btn:active { transform: translateY(0); }
.btn--ghost {
  background: transparent; color: var(--frost);
  border: 1px solid var(--deep-2);
}
.btn--ghost:hover { background: var(--deep-2); box-shadow: none; }
.btn--warm { background: var(--sun); }
.btn--warm:hover { background: #f5c877; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ── чипы: сезон, вайб, сложность ─────────────────────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .35em .8em;
  font-size: var(--step--1); font-weight: 500;
  color: var(--frost-dim);
  background: var(--deep-2);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.chip:hover { color: var(--frost); }
.chip[aria-pressed="true"], .chip--on {
  color: var(--ice); border-color: rgba(127,212,232,.45);
  background: rgba(127,212,232,.1);
}
.chip--winter { color: var(--winter); }
.chip--summer { color: var(--summer); }

/* ── безопасность. Инвариант домена №7: этот блок не сокращается ──────── */

.warn {
  border-left: 3px solid var(--sig);
  background: rgba(232,96,76,.08);
  padding: .9em 1.1em;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin: 1.5em 0;
}
.warn__title {
  font-weight: 600; color: var(--sig);
  display: flex; align-items: center; gap: .5em; margin-bottom: .3em;
}

/* ── источник и дата актуальности. Инвариант №2 ───────────────────────── */

.src {
  font-size: var(--step--1);
  color: var(--frost-mute);
  display: flex; flex-wrap: wrap; gap: .4em 1em;
  margin-top: .6em;
}
.src a { color: var(--frost-dim); }
.src time { font-variant-numeric: tabular-nums; }

/* «нет данных» честнее выдуманного числа */
.nodata { color: var(--frost-mute); font-style: italic; }

/* ── служебное ────────────────────────────────────────────────────────── */

.wrap { width: min(100% - 2rem, 1180px); margin-inline: auto; }
.prose { width: min(100% - 2rem, 720px); margin-inline: auto; }
.stack > * + * { margin-top: var(--flow, 1rem); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Риск №5 из DESIGN.md: слабый телефон и «меньше движения» — без пролётов. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}