/* Авиграм — базовые стили и компоненты (подключать после tokens.css). Правила системы:
   — глубина цветом, не тенью: линия 1px или сигнальная заливка, box-shadow только кольцо 1px и подчёркивание вкладки;
   — без градиентов, без квадратных углов; радиус по роли (поле и плашка 2, кнопка 4, карточка 6, крупная карточка 8);
   — подписи, время, метки, кнопки — моноширинный ВЕРХНИЙ регистр с разрядкой; строчного моно нет;
   — крупный заголовок (.display, Oswald) — только витрина (лендинг, шапка образца), в приложении — .hero (Onest);
   — роли компонентов (какой цвет у кнопки, линии, ошибки) — токенами в tokens.css, здесь цвета не выбираем. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, [data-theme] { background: var(--canvas); color: var(--ink); }
body {
  margin: 0;
  font: 400 15px/1.45 var(--f-sans);
  letter-spacing: .15px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }

a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent-ink); text-underline-offset: 3px;
    transition: color var(--t-fast); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Типографика */
.display    { font: 700 clamp(48px, 9vw, 107px)/.95 var(--f-display); letter-spacing: 1px; text-transform: uppercase;
              text-wrap: balance; margin: 0; }
.whisper    { font: 300 19px/1.2 var(--f-sans); letter-spacing: 1.9px; text-transform: uppercase; margin: 0; }
.h1         { font: 700 34px/1 var(--f-sans); margin: 0; text-wrap: balance; }
.h2         { font: 700 24px/1.05 var(--f-sans); margin: 0; text-wrap: balance; }
.h3         { font: 700 20px/1.1 var(--f-sans); margin: 0; }
.body       { font: 500 16px/1.6 var(--f-sans); }
.small      { font: 400 13px/1.5 var(--f-sans); }
.eyebrow    { font: 600 11px/1.2 var(--f-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--eyebrow); }
.hero       { font: var(--hero); letter-spacing: var(--hero-track); text-transform: var(--hero-case); margin: 0; text-wrap: balance; }
.meta       { font: 500 11px/1.2 var(--f-mono); letter-spacing: 1.1px; text-transform: uppercase; color: var(--meta); }
.num        { font-variant-numeric: tabular-nums; }

/* Кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 10px 24px; border: 1px solid transparent; border-radius: var(--r-btn);
  font: 600 12px/2 var(--f-mono); letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: box-shadow var(--t-fast), background-color var(--t-fast), opacity var(--t-fast);
}
.btn:hover { box-shadow: 0 0 0 1px var(--hover-ring); }
.btn:active { opacity: .5; box-shadow: 0 0 0 1px var(--pressed); }
.btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.btn--primary   { background: var(--btn-bg); color: var(--btn-fg); }
.btn--secondary { background: var(--surface); color: var(--ink-2); font: 400 15px/1.6 var(--f-sans); letter-spacing: .15px; text-transform: none; }
.btn--outline   { background: transparent; color: var(--btn2-fg); border-color: var(--btn2-line); border-radius: var(--r-outline); padding-inline: 20px; }
.btn--outline:hover { background: var(--btn2-hover-bg); color: var(--btn2-hover-fg); border-color: var(--btn2-hover-bg); box-shadow: none; }
.btn--promo     { background: transparent; color: var(--ink); border-color: var(--uv); border-radius: var(--r-promo); }
.btn--block     { width: 100%; }
.btn--icon      { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; }

/* Плашки (неинтерактивные) */
.pill {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid transparent;
  font: 600 11px/1.2 var(--f-mono); letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap;
}
.pill--mint  { background: var(--mint); color: var(--on-accent); }
.pill--uv    { background: var(--uv); color: var(--on-uv); }
.pill--slate { background: var(--surface); color: var(--ink-2); }
.pill--line  { border-color: var(--line); color: var(--ink); }
.pill--spot  { background: var(--spot-bg); color: var(--spot-fg); }

/* Карточки */
.tile { border: 1px solid var(--tile-line); border-radius: var(--r-card); padding: var(--s-5); background: var(--canvas); }
.tile--unread  { border-color: var(--tile-unread-line); box-shadow: var(--tile-unread-mark); }
.tile--quiet   { border-color: var(--frame); }
.tile--surface { border-color: transparent; background: var(--surface); }
.tile--spot    { border-color: transparent; background: var(--spot-bg); color: var(--spot-fg); }
.tile--alert   { border-color: var(--alert-line); background: var(--alert-bg); color: var(--alert-fg); box-shadow: var(--alert-mark); }
.tile--feature { border-radius: var(--r-feature); padding: var(--s-8); }
.tile--spot .eyebrow, .tile--spot .meta, .tile--alert .eyebrow { color: inherit; }
a.tile, .tile[role="button"] { display: block; text-decoration: none; color: inherit; cursor: pointer; }
a.tile:hover .tile__title, .tile[role="button"]:hover .tile__title { color: var(--link-hover); }
.tile__title { transition: color var(--t-fast); }

/* Лента (StoryStream): линия слева, время на линии, карточки друг под другом */
.stream { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.stream__item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--s-3); position: relative; }
.stream__item::before { content: ''; position: absolute; left: 0; top: 0; bottom: calc(-1 * var(--s-3)); border-left: 1px solid var(--stream-rail); }
.stream__item:last-child::before { bottom: 0; }
.stream__time { padding: var(--s-4) 0 0 var(--s-2); font: 500 11px/1.2 var(--f-mono); letter-spacing: 1.1px; text-transform: uppercase; color: var(--meta); }

/* Поля */
.field { display: grid; gap: 6px; }
.field__label { font: 500 11px/1.2 var(--f-mono); letter-spacing: 1.1px; text-transform: uppercase; color: var(--meta); }
.input {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--meta); border-radius: var(--r-field);
  background: var(--canvas); color: var(--ink); font: 400 15px/1.4 var(--f-sans); transition: border-color var(--t-fast);
}
.input::placeholder { color: var(--meta); }
.input:focus { outline: none; border-color: var(--field-focus); }
.input[aria-invalid="true"] { border-color: var(--uv); box-shadow: 0 0 0 1px var(--uv); }

/* Вкладки: активная — подчёркивание изнутри (фирменный приём) */
.tabs { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--frame); }
.tab {
  flex: none; min-height: 44px; padding: 0 var(--s-3); border: 0; background: none; color: var(--meta); cursor: pointer;
  font: 600 12px/1 var(--f-mono); letter-spacing: 1.5px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover { color: var(--link-hover); }
.tab[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 0 var(--tab-mark); }

/* Переключатель темы — кнопка-кружок, иконка по текущей теме */
.theme-toggle { color: var(--ink); background: transparent; border: 1px solid var(--frame); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Сегментный переключатель (тема) */
.seg { display: inline-flex; border: 1px solid var(--frame); border-radius: var(--r-btn); padding: 3px; gap: 3px; }
.seg button { min-height: 36px; padding: 0 14px; border: 0; border-radius: max(calc(var(--r-btn) - 3px), 2px); background: none; color: var(--meta);
  font: 600 11px/1 var(--f-mono); letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
.seg button:hover { color: var(--link-hover); }
.seg button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); }