/* base.css — сброс, типографика и каркас страницы.
 *
 * Слой ниже токенов и выше компонентов: здесь живут голые элементы (html,
 * body, ссылка, заголовок), доступность (пропуск к содержимому, кольцо
 * фокуса, уважение к уменьшенному движению) и оболочка разделов — верхняя
 * полоса, боковая рельса, рабочая область, подвал.
 *
 * Вёрстка mobile-first: базовые правила описывают узкий экран, медиазапросы
 * `min-width` добавляют то, что появляется на широком. Обратный порядок
 * (`max-width`) применяется только там, где широкий экран — исходная форма
 * компонента, и на узком её надо разложить.
 */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--f-sans);
  font-size:var(--t-14);
  line-height:1.5;
  background:var(--w-ground);
  color:var(--w-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
  /* горизонтальной прокрутки быть не должно ни на одном экране */
  overflow-x:hidden;
  min-height:100vh;
}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;height:auto}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;letter-spacing:-.015em}
p{margin:0}
ul,ol{margin:0}
code,kbd,samp,pre{font-family:var(--f-mono)}

/* Кольцо фокуса видно на любом интерактивном элементе — это не украшение,
 * а единственная навигация для клавиатуры. Убирать его нельзя. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-chip)}

/* Движение — только в ответ на действие человека, и только если он его не
 * запретил настройкой системы. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Пропуск к содержимому: вне фокуса убран с экрана, при табуляции выезжает
 * первой строкой страницы. */
/* Подпись только для экранного диктора: галочка в строке списка и поле
   фильтра с общей подписью над рядом. Убирать подпись вовсе нельзя — диктор
   произнесёт «флажок» и ничего больше. */
.visually-hidden{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:var(--s3);top:-100%;z-index:100;
  display:inline-flex;align-items:center;height:var(--tap);padding:0 var(--s4);
  background:var(--w-panel);color:var(--w-ink);
  border:1px solid var(--w-hair);border-radius:var(--r-chip);
}
.skip-link:focus{top:var(--s3)}

/* ============================================================
   ОБОЛОЧКА РАЗДЕЛОВ
   ============================================================ */
.page{min-height:100vh;display:flex;flex-direction:column}

.topbar{
  flex:none;display:flex;align-items:center;gap:var(--s2);
  min-height:52px;padding:0 var(--s3);
  background:var(--w-panel);border-bottom:1px solid var(--w-hair);
  position:sticky;top:0;z-index:20;
}
.topbar__spacer{margin-left:auto}

.brand{display:flex;align-items:center;gap:var(--s3);padding:var(--s1) var(--s2);min-height:var(--tap)}
.brand__mark{font-weight:600;letter-spacing:-.01em;color:var(--w-ink)}
.brand__section{font-size:var(--t-12);color:var(--w-ink-muted)}

.shell{flex:1;display:flex;flex-direction:column;min-width:0}
.shell--public{padding:var(--s6) var(--s4) var(--s8);align-items:center}
.shell--public>*{width:100%;max-width:640px}

.workspace{flex:1;min-width:0;display:flex;flex-direction:column}

/* Боковая рельса на узком экране уезжает за левый край и открывается кнопкой
 * в шапке: вертикальная колонка на 375px съела бы половину ширины, а лента
 * поверх содержимого — его высоту. Без JS рельса показывается всегда
 * (noscript.css): навигация не может зависеть от загрузки скрипта. */
.rail{
  position:fixed;left:0;top:var(--topbar-h);bottom:0;z-index:40;
  width:min(280px,86vw);
  display:flex;flex-direction:column;align-items:stretch;gap:var(--s5);
  padding:var(--s4) var(--s3);
  background:var(--w-panel);border-right:1px solid var(--w-hair);
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(-100%);transition:transform .18s ease;
}
[data-nav-shell][data-nav-open] .rail{transform:none}

/* Затемнение под открытой рельсой: показывает, что содержимое сейчас не
 * трогают, и закрывает навигацию по нажатию мимо неё. */
.nav-scrim{position:fixed;inset:var(--topbar-h) 0 0 0;z-index:30;background:var(--scrim)}
.nav-scrim[hidden]{display:none}

.rail__foot{
  display:flex;align-items:center;gap:var(--s3);margin-top:auto;
  padding:var(--s4) var(--s3) var(--s2);border-top:1px solid var(--w-hair-soft);
}
.rail__who{display:flex;flex-direction:column;min-width:0}
.rail__email{font-size:var(--t-13);color:var(--w-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail__role{font-size:var(--t-11);color:var(--w-ink-muted)}

.nav{display:flex;flex-direction:column;gap:2px}
.nav__item{
  display:flex;align-items:center;gap:var(--s3);
  min-height:var(--tap);padding:var(--s2) var(--s3);
  border-radius:var(--r-chip);color:var(--w-ink-soft);font-size:var(--t-13);
}
.nav__item:hover{background:var(--w-raised);color:var(--w-ink)}
.nav__item[aria-current="page"]{background:var(--w-raised);color:var(--w-ink);font-weight:500}
.nav__item svg{flex:none;color:var(--w-ink-muted)}
.nav__item[aria-current="page"] svg{color:var(--accent-text)}
.nav__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav__count{margin-left:auto;font-size:var(--t-12);color:var(--w-ink-muted)}

.footer{
  flex:none;padding:var(--s5) var(--s4);
  border-top:1px solid var(--w-hair);
  color:var(--w-ink-muted);font-size:var(--t-12);
}
.footer__line{margin:0}

/* Безопасные отступы экрана: вырез и домашняя полоса на телефоне не должны
 * накрывать содержимое. */
@supports(padding:max(0px)){
  .topbar,.rail{padding-left:max(var(--s3),env(safe-area-inset-left));padding-right:max(var(--s3),env(safe-area-inset-right))}
  .footer{padding-bottom:max(var(--s5),env(safe-area-inset-bottom))}
}

/* Поля ввода не мельче 16px: iOS зумит страницу при фокусе на меньшем. */
input,select,textarea{font-size:var(--t-16)}

@media (min-width:640px){
  .topbar{min-height:56px;padding:0 var(--s6);gap:var(--s4)}
  .shell--public{padding:var(--s8) var(--s6) var(--s10)}
  .footer{padding:var(--s6)}
  input,select,textarea{font-size:var(--t-14)}
}

/* От 880px рельса перестаёт быть выдвижной и становится обычной колонкой:
 * места хватает, и прятать навигацию за кнопкой уже незачем. */
@media (min-width:880px){
  .shell--app,.shell--admin{flex-direction:row;flex:1;min-height:0}
  .rail{
    position:sticky;top:0;left:auto;bottom:auto;z-index:auto;
    flex:none;width:220px;height:100vh;gap:var(--s6);
    transform:none;
  }
  .nav-scrim,.topbar__nav{display:none}
  .nav__item{min-height:36px}
}