/*
 * Основа страниц студии: сброс, разметка страницы, шапка и подвал.
 * Задача 07, часть Д1.
 *
 * Ни одного значения цвета или размера: всё из `tokens.css`.
 *
 * Сначала телефон (от 360 пикселей), потом большой экран: правила
 * без `@media` описывают телефон, а `@media (min-width: …)` только
 * добавляет простор. Так на узком экране не приходится ничего
 * отменять.
 */

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

/*
 * СКРЫТОЕ НЕ ВИДНО НИГДЕ.
 *
 * Браузер прячет `hidden` своим правилом `[hidden] { display: none }`,
 * но любое наше правило с `display` его перебивает: стили страницы
 * сильнее стилей браузера. А `display` у нас почти у каждой общей
 * детали — `.message` это `flex`, `.card` это `block`, `.stack`
 * и `.row` тоже `flex`. Поэтому `hidden` на них не работал вовсе:
 * на экране «Студия» после загрузки оставалась надпись «Загружаю…»
 * и пустая красная плашка с одним восклицательным знаком.
 *
 * Правило одно на всю студию и с `!important` — именно тот случай,
 * для которого он и нужен: `hidden` это не оформление, а состояние,
 * и спорить с ним оформлению нечем. Экраны прячут узлы атрибутом
 * (`dom.js`, `show`), и теперь это работает у любой детали.
 */
[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--size-text);
  line-height: var(--leading-text);
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

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

a {
  color: var(--color-ink);
  text-decoration-color: var(--color-line-strong);
  text-underline-offset: var(--space-1);
}

a:hover {
  text-decoration-color: var(--color-accent);
}

/*
 * Видимый фокус — на всём, что получает фокус (часть Д1). Задача 11в,
 * Д1: **одна наша рамка** — тонкая тёмно-серая (`--color-focus`,
 * `--focus-ring-width`), синей рамки браузера нет нигде. Поле в фокусе
 * — та же рамка (у поля браузер показывает фокус и после щелчка
 * мышью); с клавиатуры фокус виден той же рамкой — доступность прежняя.
 */
:focus {
  outline: none;
}

:focus-visible,
input:focus,
textarea:focus,
select:focus {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

:focus-visible {
  border-radius: var(--radius-small);
}

/*
 * Задача 11д, Е: курсор — одно правило. Всё, что нажимается, —
 * рука: кнопки, ссылки, выпадающие списки («Вес», «Подача»), квадрат
 * галочки **и** её подпись, таблетки рубрик, строки, открывающие
 * что-либо (`role="button"`, строка реестра), свёрнутые строки
 * (`summary`). Недоступное — без руки. Особые курсоры отдельных
 * деталей (перетаскивание плитки, точка фокуса) задают их правила.
 */
button:not(:disabled),
a[href],
summary,
select:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
label:has(> input[type="checkbox"]:not(:disabled)),
label:has(> input[type="radio"]:not(:disabled)),
[role="button"],
.table__row--link {
  cursor: pointer;
}

/* Для программ чтения экрана: не показано, но прочитано. */
.visually-hidden {
  position: absolute;
  width: var(--line-width);
  height: var(--line-width);
  margin: calc(-1 * var(--line-width));
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Ссылка «перейти к содержимому» для клавиатуры. */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-8));
  z-index: 2;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-lifted);
}

.skip-link:focus {
  top: var(--space-4);
}

/* --- Страница ---------------------------------------------- */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page__inner {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

.page__main {
  flex: 1 1 auto;
  padding-top: var(--space-6);
  padding-bottom: var(--space-7);
}

.page__main--narrow {
  max-width: var(--measure);
}

/* --- Шапка -------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.logo {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  text-decoration: none;
}

.logo__name {
  font-family: var(--font-display);
  font-size: var(--size-subtitle);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/*
 * Кто вошёл — справа в шапке: имя и «Выйти» рядом (дополнение
 * к задаче 09, решение от 02.10, пункт 5). Длинное имя на узком
 * экране переносится, а не выталкивает кнопку за край.
 */
.masthead__user {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
}

.masthead__name {
  font-size: var(--size-small);
  color: var(--color-ink-soft);
  overflow-wrap: anywhere;
}

/* Оранжевая точка логотипа — с макета. */
.logo__dot {
  color: var(--color-accent);
}

.logo__kind {
  font-size: var(--size-tiny);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* --- Подвал ------------------------------------------------- */

.colophon {
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
  font-size: var(--size-small);
  color: var(--color-ink-faint);
}

/* --- Текстовые блоки ---------------------------------------- */

.title {
  font-family: var(--font-display);
  font-size: var(--size-title);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

.subtitle {
  font-size: var(--size-subtitle);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.lead {
  color: var(--color-ink-soft);
}

.note {
  font-size: var(--size-small);
  color: var(--color-ink-soft);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stack--tight {
  gap: var(--space-2);
}

.stack--loose {
  gap: var(--space-6);
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.prose p + p {
  margin-top: var(--space-3);
}

.prose ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.prose li {
  padding-left: var(--space-4);
  position: relative;
}

.prose li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

@media (min-width: 48rem) {
  .page__main {
    padding-top: var(--space-7);
  }
}