/* =============================================================================
   Слой 3 из 7: каркас страницы. Контейнер, шапка-билет (навигация в теле,
   главное действие роли в корешке), подвал, ритм разделов, сетки на
   390 / 768 / 1024 / 1440. Компоненты (билет, кнопки, чипы) живут в components.css.
   ============================================================================= */

/* ---------- Страница ---------- */
.page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.site-main {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Обычная страница: содержимое в контейнере. Страница с фото на всю ширину — `site-main--bleed`:
   контейнеры расставляет сам шаблон. */
.site-main:not(.site-main--bleed) {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s-6) var(--gutter) var(--s-9);
}

.site-main--bleed > .flash-list {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--s-4) var(--gutter) 0;
}

@media (min-width: 1024px) {
  .site-main:not(.site-main--bleed) {
    padding-top: var(--s-7);
  }
}

/* ---------- Шапка: тоже билет ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  background: var(--yellow);
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
}

.site-header__body {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-width: 0;
  min-height: 60px;
  padding-inline: var(--edge) var(--gutter);
}

.site-header__org {
  display: none;
  flex-direction: column;
  padding-left: var(--s-4);
  border-left: 1px dashed var(--ink);
  line-height: 1.15;
}

.site-header__org .meta {
  margin: 0;
}

.site-nav {
  display: none;
  align-self: stretch;
}

.site-nav__link,
.site-nav__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 var(--s-4);
  border: 0;
  border-left: 1px dashed var(--ink);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--d-hover) var(--ease-out);
}

.site-nav > :last-child {
  border-right: 1px dashed var(--ink);
}

.site-nav__link:hover,
.site-nav__button:hover {
  background: var(--paper);
}

.site-nav__link:active,
.site-nav__button:active {
  background: var(--yellow-soft);
  transition-duration: var(--d-press);
}

.site-nav__link:focus-visible,
.site-nav__button:focus-visible {
  outline-offset: -4px;
}

.site-nav__link[aria-current],
.site-nav__button[aria-current] {
  background: transparent;
}

.site-nav__link[aria-current]::after {
  content: "";
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: 12px;
  height: 3px;
  background: var(--ink);
}

.site-nav form {
  display: flex;
  margin: 0;
}

/* Корешок шапки: главное действие роли */
.site-header__stub {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--edge) 0 var(--s-5);
  border-left: 2px dashed var(--ink);
  background: var(--coral);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transform-origin: 0 0;
  transition: transform var(--d-hover) var(--ease-tear), box-shadow var(--d-hover) var(--ease-out), background-color var(--d-hover) var(--ease-out);
}

.site-header__stub svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.site-header__stub:active {
  background: var(--coral-press);
  transition-duration: var(--d-press);
}

.site-header__stub:focus-visible {
  outline-offset: -6px;
}

.site-header__stub--quiet {
  background: var(--paper);
}

/* Наведение — только мышь: на сенсорном экране корешок шапки не надрывается от касания */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .site-header__stub:hover {
    transform: rotate(2deg) translateY(4px);
    box-shadow: 0 10px 16px rgba(0, 0, 0, .18);
  }
}

/* Консоль оператора: ночная шапка */
.site-header--ops {
  background: var(--night);
  color: var(--on-night);
  border-bottom-color: var(--night);
}

.site-header--ops :focus-visible {
  outline-color: var(--yellow);
}

.site-header--ops .site-header__org,
.site-header--ops .site-nav__link,
.site-header--ops .site-nav__button {
  border-color: rgba(244, 243, 238, .35);
}

.site-header--ops .site-nav > :last-child {
  border-right-color: rgba(244, 243, 238, .35);
}

.site-header--ops .site-nav__link:hover,
.site-header--ops .site-nav__button:hover {
  background: var(--night-2);
}

.site-header--ops .site-nav__link[aria-current]::after {
  background: var(--yellow);
}

.site-header--ops .meta {
  color: var(--yellow);
}

.site-header--ops .site-header__stub {
  border-left-color: rgba(244, 243, 238, .5);
  background: var(--night-2);
  color: var(--on-night);
}

/* Кнопка меню: только на узком экране (флажок + подпись, без скриптов) */
.site-menu__toggle,
.site-menu__btn {
  display: none;
}

/* До 1024 px: в шапке только знак, «Меню» и главное действие; навигация раскрывается панелью по «Меню»
   (в одну строку на 768 она не помещается, особенно в кабинете приюта). Те же ссылки есть в подвале роли. */
.site-header {
  grid-template-columns: minmax(min-content, 1fr) auto auto;
}

.site-header__body {
  display: contents;
}

.site-menu__toggle {
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.site-menu__btn {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 0 var(--s-4);
  border-left: 1px dashed var(--ink);
  font-size: var(--t-small);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.site-menu__btn::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: -3px 0 0 var(--s-2);
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform var(--d-hover) var(--ease-out);
}

.site-menu__toggle:checked + .site-menu__btn::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.site-menu__toggle:focus-visible + .site-menu__btn {
  outline: 3px solid var(--focus);
  outline-offset: -5px;
}

.site-header--ops .site-menu__btn {
  border-left-color: rgba(244, 243, 238, .35);
}

.site-header--ops .site-menu__toggle:focus-visible + .site-menu__btn {
  outline-color: var(--yellow);
}

.site-header .wordmark {
  display: inline-flex;
  align-items: center;
  align-self: center;
  min-height: 56px;
  padding-inline: var(--gutter) var(--s-2);
}

.site-nav {
  display: none;
  grid-column: 1 / -1;
  order: 3;
  flex-direction: column;
  border-top: 1px dashed var(--ink);
}

.site-menu__toggle:checked ~ .site-nav {
  display: flex;
}

.site-header--ops .site-nav {
  border-top-color: rgba(244, 243, 238, .35);
}

.site-nav__link,
.site-nav__button {
  width: 100%;
  min-height: 48px;
  padding-inline: var(--gutter);
  border-left: 0;
  border-bottom: 1px dashed var(--ink);
  font-size: var(--t-body);
}

.site-header--ops .site-nav__link,
.site-header--ops .site-nav__button {
  border-bottom-color: rgba(244, 243, 238, .35);
}

.site-nav > :last-child {
  border-right: 0;
  border-bottom: 0;
}

.site-nav__link[aria-current]::after {
  left: var(--gutter);
  right: auto;
  width: 24px;
  bottom: 10px;
}

.site-nav form {
  width: 100%;
}

/* От 1024 px навигация снова в теле шапки: возвращаем настольную раскладку */
@media (min-width: 1024px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-header__body {
    display: flex;
  }

  .site-menu__toggle,
  .site-menu__btn {
    display: none;
  }

  .site-header .wordmark {
    align-self: auto;
    min-height: 0;
    padding-inline: 0;
  }

  .site-nav {
    grid-column: auto;
    order: 0;
    flex-direction: row;
    border-top: 0;
  }

  .site-nav__link,
  .site-nav__button {
    width: auto;
    min-height: var(--touch);
    padding-inline: var(--s-4);
    border-left: 1px dashed var(--ink);
    border-bottom: 0;
    font-size: inherit;
  }

  .site-header--ops .site-nav__link,
  .site-header--ops .site-nav__button {
    border-left-color: rgba(244, 243, 238, .35);
  }

  .site-nav > :last-child {
    border-right: 1px dashed var(--ink);
  }

  .site-header--ops .site-nav > :last-child {
    border-right-color: rgba(244, 243, 238, .35);
  }

  .site-nav__link[aria-current]::after {
    left: var(--s-4);
    right: var(--s-4);
    width: auto;
    bottom: 12px;
  }

  .site-nav form {
    width: auto;
  }
}

/* Телефон: главное действие компактнее, стрелку не рисуем */
@media (max-width: 767px) {
  .site-header__stub {
    padding: 0 var(--s-4);
    font-size: var(--t-small);
  }

  .site-header__stub svg {
    display: none;
  }
}

@media (min-width: 1024px) {
  .site-nav,
  .site-header__org {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .site-header__body {
    min-height: 68px;
    gap: var(--s-6);
  }
}

/* ---------- Подвал ----------
   Одна сетка на весь подвал: колонка бренда, колонки ссылок, строки «поддержка» и «лицензии» на всю ширину.
   Роли (донор, приют, оператор) различаются только числом колонок ссылок, левый край и ритм общие. */
.site-footer {
  --footer-gap: var(--s-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--footer-gap);
  row-gap: var(--s-5);
  padding: var(--s-8) var(--edge) var(--s-6);
  background: var(--night);
  color: var(--on-night);
  font-size: var(--t-small);
}

.site-footer a {
  color: var(--on-night);
}

.site-footer :focus-visible {
  outline-color: var(--yellow);
}

/* Блоки внутри обёртки становятся ячейками общей сетки подвала */
.site-footer__grid {
  display: contents;
}

.site-footer .wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
}

.site-footer__note {
  max-width: 44ch;
  margin: var(--s-2) 0 0;
  color: var(--on-night-muted);
  line-height: 1.5;
}

.site-footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--footer-gap);
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  line-height: 1.3;
}

.site-footer__support {
  margin: 0;
  padding-top: var(--s-5);
  border-top: 1px dashed var(--on-night-muted);
  color: var(--on-night);
  line-height: 1.5;
}

.site-footer__credits {
  margin: 0;
  color: var(--on-night-muted);
  font-size: var(--t-meta);
  line-height: 1.5;
}

/* Без строки поддержки (кабинет, консоль) черта переходит к строке лицензий */
.site-footer__grid + .site-footer__credits {
  padding-top: var(--s-5);
  border-top: 1px dashed var(--on-night-muted);
}

@media (min-width: 768px) {
  .site-footer {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    row-gap: var(--s-6);
  }

  .site-footer__links {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer__support,
  .site-footer__credits {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .site-footer {
    --footer-gap: var(--s-7);
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ---------- Ритм разделов и сетки ---------- */
.section {
  padding: var(--s-8) 0;
  background: var(--ground);
}

.section--paper {
  background: var(--paper);
}

.section--night {
  background: var(--night);
  color: var(--on-night);
}

.section--night :focus-visible {
  outline-color: var(--yellow);
}

.section__head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

.section__head > * {
  margin: 0;
}

.page-head {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
}

.page-head h1 {
  margin: 0;
}

/* Блок рабочего экрана: заголовок со вторичным действием и содержимое */
.block {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  min-width: 0;
  margin-bottom: var(--s-8);
}

.block__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
}

.block__head > * {
  margin: 0;
}

.stack {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

/* Сетка колонок: 1 → 2 (768) → 3 (1024) */
.grid {
  display: grid;
  gap: var(--s-5);
  min-width: 0;
}

@media (min-width: 768px) {
  .grid--2,
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid {
    gap: var(--s-6);
  }

  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Боковая колонка + основная: 3 / 9 */
  .grid--aside {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  }

  .grid--main-aside {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }

  .section__head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 44ch);
    align-items: end;
    gap: var(--s-7);
  }

  .section {
    padding: var(--s-9) 0;
  }

  .page-head--row {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

/* ---------- Сообщения (flash) ---------- */
.flash-list {
  margin: 0 0 var(--s-4);
  padding: 0;
  list-style: none;
}