/* ===========================================================================
   pages.css — раскладка страниц, которых нет в дизайн-системе:
   лендинг, вход/регистрация, дашборд, а также несколько мелких хуков
   (якорь поповера, галочка в меню), нужных только разметке.

   Файл подчиняется тем же правилам, что и components.css:
     * ни одного литерального цвета — только var() из tokens.css;
     * z-index только из --z-*;
     * от 360px горизонтальной прокрутки страницы нет;
     * состояние подписано не только цветом.

   Стекло на этих страницах (тема одна — тёмная, светлой нет):
     .hero                — крупная декоративная оболочка → --glass-thin
     .feature             — карточка возможности, мелкий длинный текст →
                            --glass-thick, размытие слабое: их шесть
     .auth__panel         — панель формы входа → --glass
     .new-board__preview  — предпросмотр внутри модалки → --glass-thin

   У каждого стеклянного слоя стоят и -webkit-backdrop-filter, и
   backdrop-filter. Там, где размытия нет (Firefox до 103, экономия ресурсов),
   @supports в tokens.css подменяет токены на --glass-*-solid, и слой просто
   становится непрозрачным. То же делает base.css §4a при
   prefers-reduced-transparency (§8).

   Подключается ПОСЛЕ components.css.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. Общие хуки разметки
   --------------------------------------------------------------------------- */

/* Отступ страницы под верхней панелью. */
.u-page { padding-block: var(--space-6) var(--space-12); }

/* Атрибут hidden проигрывает по специфичности любому display, заданному
   классом (.empty — это display:flex), и элемент остаётся на экране. Одно
   правило чинит это для всей страницы. */
[hidden] { display: none !important; }

/* Якорь для .popover: сам поповер position:absolute, ему нужен ближайший
   позиционированный предок. Нативный [popover] здесь не подходит — без CSS
   anchor positioning он уезжает в угол экрана. */
.anchor { position: relative; display: inline-flex; }

/* Поповер, выровненный по правому краю кнопки. */
.popover--end {
  top: calc(100% + var(--space-1));
  right: 0;
  left: auto;
}

/* Галочка текущего пункта меню. Visibility, а не display: элемент остаётся в
   потоке, поэтому подписи пунктов не разъезжаются при переключении. */
.menu__item .u-check { visibility: hidden; }
.menu__item[aria-checked="true"] .u-check { visibility: visible; }
.menu__item[aria-checked="true"] { color: var(--accent-text); } /* на плотном стекле поповера 8.71 */

/* Подпись группы внутри меню. */
.u-menu-caption { padding: var(--space-2) var(--space-3) var(--space-1); }

/* Форма выхода в меню не должна ломать колонку пунктов. */
.menu > form { display: contents; }

/* Кнопка внутри поля (показать пароль). */
.input-group__action {
  position: absolute;
  right: var(--space-1);
  color: var(--text-muted);            /* на sunken 7.94 */
}
.input--with-action { padding-right: var(--space-10); }

/* ---------------------------------------------------------------------------
   1. Лендинг: первый экран
   --------------------------------------------------------------------------- */
/* Первый экран — самая крупная плоскость в интерфейсе, и текста на ней мало
   (заголовок и одна фраза), поэтому здесь самое лёгкое стекло: сквозь него
   видно цветные пятна фона, а именно они и делают слой стеклом, а не серой
   заливкой. Блик по верхней кромке и тёмная линия снизу — то, на чём читается
   толщина пластины. */
.hero {
  padding-block: var(--space-12) var(--space-16);
  background-color: var(--glass-thin);
  -webkit-backdrop-filter: var(--glass-blur-weak);
          backdrop-filter: var(--glass-blur-weak);
  border-bottom: var(--hairline) solid var(--glass-border);
  box-shadow: inset 0 var(--hairline) 0 var(--glass-highlight),
              0 var(--hairline) 0 var(--glass-shade);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-10);
  align-items: center;
}
@media (max-width: 900px) {
  .hero { padding-block: var(--space-8) var(--space-10); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}

.hero__title {
  margin-top: var(--space-2);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}
.hero__lede {
  margin-top: var(--space-4);
  max-width: 46ch;
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--text-secondary);        /* на стекле .hero 8.19 */
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.hero__note { margin-top: var(--space-3); }

/* ---------------------------------------------------------------------------
   2. Лендинг: макет доски на CSS
   Не скриншот: картинка устареет через неделю и будет весить больше всей
   страницы. Здесь те же .list и .card, что и в продукте, — макет не может
   разойтись с интерфейсом.
   --------------------------------------------------------------------------- */
.mock {
  border-radius: var(--radius-xl);
  background-color: var(--surface-board);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  /* Лёгкий поворот даёт понять, что это иллюстрация, а не рабочая доска. */
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transform-origin: left center;
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .mock { transform: none; }
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface-scrim);
  color: var(--text-on-board);         /* ≥6.19 на любом фоне */
}
.mock__dots { display: inline-flex; gap: var(--space-1); }
.mock__dots i {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round);
  background-color: var(--overlay-active);
}
.mock__name { flex: 1 1 auto; font-weight: var(--weight-bold); }
.mock__bar .avatar-stack { --avatar-ring: var(--overlay-active); }

.mock__canvas {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
/* Колонки макета уже рабочих: их задача — показать форму, а не вместить текст. */
.mock__list { width: 200px; }
.mock__list .card__title { font-size: var(--text-sm); }
.mock__list .list__cards { gap: var(--space-2); }

/* ---------------------------------------------------------------------------
   3. Лендинг: возможности и призыв к действию
   --------------------------------------------------------------------------- */
.features { padding-block: var(--space-12); }
.section__title {
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
}
.section__lede { margin-top: var(--space-2); max-width: 60ch; }

/* Три колонки, а не auto-fit: блоков ровно шесть, и при auto-fit на 1440px
   получается 4 + 2 — последний ряд повисает недоделанным. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding: 0;
  list-style: none;
}
/* Карточка возможности. Текста на ней больше всего из стеклянных слоёв
   страницы — абзац 13px, — поэтому стекло самое плотное (--glass-thick,
   контраст --text-muted на нём 6.21:1). Размытие при этом слабое: карточек
   шесть, и держать на них по 32px blur — платить за эффект перерисовкой
   всего экрана при каждом скролле. */
.feature {
  padding: var(--space-5);
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius-xl);
  background-color: var(--glass-thick);
  -webkit-backdrop-filter: var(--glass-blur-weak);
          backdrop-filter: var(--glass-blur-weak);
  box-shadow: inset 0 var(--hairline) 0 var(--glass-highlight),
              var(--shadow-sm);
}
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background-color: var(--accent-subtle);
  color: var(--accent-text);           /* на подложке акцента поверх стекла 6.76 */
}
@media (max-width: 1000px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .feature-grid { grid-template-columns: minmax(0, 1fr); } }

.feature__title { margin-top: var(--space-3); font-size: var(--text-lg); }
.feature__text { margin-top: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-loose); }

.cta { padding-bottom: var(--space-12); }
.cta__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background-color: var(--accent-subtle);
}
.cta__title { font-size: var(--text-xl); }

.site-footer {
  padding-block: var(--space-6);
  border-top: var(--hairline) solid var(--border);
  background-color: var(--surface-card);
}
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); }

/* ---------------------------------------------------------------------------
   4. Вход и регистрация
   --------------------------------------------------------------------------- */
.auth { padding-block: var(--space-10) var(--space-12); }

/* Единственная пластина на пустой странице: разметка оставляет ей класс
   .panel (components.css), а здесь он перекрывается стеклом средней
   плотности. Размытие сильное — слой на экране один, а под ним не текст, а
   фон, и чем сильнее он размыт, тем спокойнее читается форма
   (--text на --glass-solid 13.30:1, --text-secondary 8.68:1). */
.auth__panel {
  max-width: 440px;
  margin-inline: auto;
  border: var(--hairline) solid var(--glass-border-strong);
  border-radius: var(--radius-2xl);
  background-color: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur-strong);
          backdrop-filter: var(--glass-blur-strong);
  box-shadow: inset 0 var(--hairline) 0 var(--glass-highlight),
              var(--shadow-lg);
}
.auth__title { font-size: var(--text-xl); }
.auth__lede { margin-top: var(--space-2); font-size: var(--text-sm); }
.auth__form { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); }
.auth__switch { margin-top: var(--space-4); text-align: center; font-size: var(--text-sm); }

/* ---------------------------------------------------------------------------
   5. Дашборд
   --------------------------------------------------------------------------- */
.dash__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.dash__title { font-size: var(--text-2xl); letter-spacing: -0.01em; }
.dash__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dash__actions [aria-pressed="true"] {
  background-color: var(--accent-subtle);
  color: var(--accent-text);           /* на подложке акцента поверх фона 8.88 */
}
.dash__actions [aria-pressed="true"] .icon { fill: currentColor; stroke: none; }

/* Вкладки «Доски» / «Архив». Своего компонента для них в системе не было:
   .chip — это метка, а не элемент навигации, .menu живёт в поповере, и ни у
   того ни у другого нет состояния «текущий раздел». Блок нарочно маленький и
   держится на уже существующих токенах — новых цветов здесь нет.

   Активная вкладка помечена и цветом, и подложкой, и aria-current в разметке:
   цвет не может быть единственным признаком. Подложка та же, что у нажатой
   кнопки в .dash__actions, чтобы «включённое» состояние на странице выглядело
   одинаково. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
  border-bottom: var(--hairline) solid var(--border-subtle);
}
.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-md);
  padding: 0 var(--space-3);
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);        /* 8.68 */
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.tabs__tab:hover {
  color: var(--text);
  background-color: var(--overlay-hover);
  text-decoration: none;
}
.tabs__tab.is-active {
  color: var(--accent-text);           /* на подложке акцента 8.88 */
  background-color: var(--accent-subtle);
  border-bottom-color: var(--accent);
}
/* Скругление только сверху: нижняя кромка вкладки лежит на линии раздела. */
.tabs__tab { border-radius: var(--radius-md) var(--radius-md) 0 0; }

/* Карточка архива: плитка доски, дата закрытия и два действия под ней.
   Плитка внутри — обычная ссылка на доску: закрытая доска читается. */
.archive-card { display: flex; flex-direction: column; gap: var(--space-2); }
.archive-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Необратимое действие названо цветом текста, а не заливкой: залитая красным
   кнопка в сетке из десятка плиток кричит громче, чем стоит. Слово
   «навсегда» на кнопке несёт то же самое без цвета. */
.archive-card__delete { --btn-fg: var(--danger-text); }  /* 7.23 */

.group + .group { margin-top: var(--space-8); }
.group__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.group__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
}
.group__title .icon { color: var(--text-muted); }
.group__empty { padding: var(--space-3) 0; }

/* Обёртка плитки: .board-tile__star позиционируется абсолютно, а кнопку нельзя
   вкладывать в ссылку — оба лежат рядом внутри обёртки. */
.tile-wrap { position: relative; display: block; }
.tile-wrap .board-tile { height: 100%; }
/* Бейдж «Закрыта» стоит в потоке под счётчиками. Абсолютным он ложился
   поверх строки со списками и карточками и перекрывал её текст. */
.tile-wrap__closed { align-self: flex-start; }

/* .board-tile--flat остаётся ради разметки, но своих правил больше не имеет:
   плитка без фотографии и есть базовый вид (см. .board-tile в components.css).
   Прежнее правило гасило скрим и оставляло белый текст прямо на цвете доски, а
   у доски цвет любой — на светлой заливке это давало контраст около 1.5:1. */

/* Звезда видна всегда, если отмечена; иначе — при наведении и с клавиатуры.
   Постоянная звезда на каждой плитке — визуальный шум, исчезнувшая насовсем —
   недостижимая функция. */
/* Звезда и «в архив» стоят в углу плитки одна над другой и появляются
   вместе: постоянные кнопки на каждой плитке — визуальный шум, а
   исчезнувшие насовсем — недостижимая функция. */
.board-tile__archive {
  position: absolute;
  top: calc(var(--space-2) + var(--control-sm));
  right: var(--space-2);
}
.board-tile__star,
.board-tile__archive { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.tile-wrap:hover .board-tile__archive,
.board-tile__archive:focus-within,
.tile-wrap:hover .board-tile__star,
.board-tile__star:focus-visible,
.board-tile__star[aria-pressed="true"] { opacity: 1; }
@media (hover: none) { .board-tile__star, .board-tile__archive { opacity: 1; } }

/* ---------------------------------------------------------------------------
   6. Форма создания доски
   --------------------------------------------------------------------------- */
/* Предпросмотр лежит внутри модалки — а модалка уже плотное стекло. Поэтому
   здесь самая лёгкая плотность: слой должен читаться как накладка на пластине,
   а не как вторая пластина. Текста на нём одна строка полужирным
   (--text на --glass-thin-solid 12.10:1). */
.new-board__preview {
  display: flex;
  align-items: flex-end;
  min-height: 96px;
  padding: var(--space-3);
  padding-left: calc(var(--space-3) + 6px);
  border-radius: var(--radius-lg);
  border: var(--hairline) solid var(--glass-border);
  background-color: var(--glass-thin);
  -webkit-backdrop-filter: var(--glass-blur-weak);
          backdrop-filter: var(--glass-blur-weak);
  box-shadow: inset 0 var(--hairline) 0 var(--glass-highlight);
  background-image:
    linear-gradient(135deg,
      color-mix(in srgb, var(--board-color, var(--accent)) 10%, transparent),
      transparent 62%);
  color: var(--text);
  position: relative;
  overflow: hidden;
}
.new-board__preview::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background-color: var(--board-color, var(--accent));
}
/* Предпросмотр показывает ровно то, что получится: та же нейтральная
   поверхность, та же цветная полоса слева (см. ::after выше). */
.new-board__preview-title {
  position: relative;
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.swatch { position: relative; display: inline-flex; cursor: pointer; }
.swatch__chip {
  display: block;
  width: 40px;
  height: 32px;
  border-radius: var(--radius-md);
  background-color: var(--swatch, var(--surface-board));
  box-shadow: inset 0 0 0 var(--hairline) var(--overlay-active);
}
.swatch .swatch__check {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  color: var(--text-on-board);
  opacity: 0;
}
.swatch:has(input:checked) .swatch__check { opacity: 1; }
.swatch:has(input:checked) .swatch__chip { box-shadow: 0 0 0 2px var(--border-focus); }
/* Кольцо фокуса переносится с невидимого input на сам образец. */
.swatch:has(input:focus-visible) .swatch__chip {
  outline: var(--focus-width) solid var(--border-focus);
  outline-offset: var(--focus-offset);
}

/* При грубом указателе образец дорастает до тач-цели. */
@media (pointer: coarse) {
  .swatch__chip { width: var(--tap-target); height: var(--tap-target); }
}

/* ---------------------------------------------------------------------------
   7. Печать: лендинг и дашборд печатают только содержимое.
   --------------------------------------------------------------------------- */
@media print {
  /* Вкладки и кнопки архива — навигация и действия: на бумаге они не
     работают, а место занимают. */
  .hero__art, .site-footer, .dash__actions, .board-tile__star,
  .tabs, .archive-card__actions { display: none !important; }
  .board-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------------
   8. Меньше прозрачности — по просьбе системы.

   Отдельного блока здесь нет: при prefers-reduced-transparency base.css §4a
   подменяет --glass-* на непрозрачные эквиваленты, а --glass-blur-* — на none,
   и все четыре слоя этого файла становятся плотными сами. Дублировать правило
   по селекторам значит завести второе место, где его забудут поправить.
   --------------------------------------------------------------------------- */

/* Легенда ролей в поповере участников: термин и пояснение читаются одной
   строкой, поэтому dt и dd остаются в потоке текста. Колонки во всплывающем
   окне шириной 260px разваливаются. */
.role-legend dt,
.role-legend dd {
  display: inline;
  margin: 0;
}
.role-legend dt {
  color: var(--text-secondary);
  /* Соседние inline-элементы в разметке стоят вплотную, без переноса между
     тегами, иначе templ склеивал бы «Администратор— настройки». */
  margin-right: 0.3em;
}