@charset "UTF-8";
/* =========================================================================
   speedkeys — main.css
   Сброс, токены, сетка, типографика, шапка и подвал.

   Идея оформления одна и держится на двух поверхностях:

     КОРПУС   — тёмный сине-графитовый фон страницы, как пластик корпуса
                клавиатуры. Текст на нём светлый.
     КЕЙКАП   — кремовая карточка поверх корпуса, как колпачок клавиши.
                Текст на нём тёмный. У кейкапа есть нижняя грань вместо тени,
                и при наведении он вжимается — как настоящая клавиша.

   Отсюда единственное правило, которое нельзя нарушать: цвет текста выбирается
   по поверхности, а не по вкусу. На корпусе — --on-case / --on-case-mut, на
   кейкапе — --ink / --ink-muted. Серый --ink-muted на тёмном фоне и светлый
   --on-case-mut на кремовом читаются одинаково плохо.
   ========================================================================= */

/* ── Токены ────────────────────────────────────────────────────────────── */
:root {
  /* Поверхности */
  --case:        #1B1F27;   /* корпус — фон страницы */
  --case-deep:   #12151B;   /* «внутренности»: шапка, подвал, блоки кода */
  --case-lift:   #232833;   /* приподнятый участок корпуса */
  --keycap:      #EDE7DA;   /* кремовый колпачок — фон карточек */
  --keycap-edge: #C9C1B1;   /* нижняя грань клавиши, она же 3D-эффект */
  --keycap-alt:  #DCD4C4;   /* второй ряд клавиш, зебра в списках */

  /* Акцент. Оттенок один, светлот три — под три фона:
       --teal        заливка и декор (фирменный тон из брифа)
       --teal-deep   текст на кремовом и заливка кнопок (белый текст: 6.4:1)
       --teal-lit    текст и ссылки на тёмном корпусе (7.4:1)
     Тил из брифа как текст на кремовом даёт 3.4:1 — этого мало для 14px,
     поэтому текстовые роли отданы --teal-deep. Оттенок при этом тот же. */
  --teal:        #0F8B7E;
  --teal-deep:   #0A6B60;
  --teal-lit:    #35C3B2;
  --teal-soft:   #D6ECE8;   /* подложка чипа на кейкапе */

  /* Текст */
  --ink:         #22262E;   /* на кейкапе — основной (13.5:1) */
  --ink-muted:   #5E6470;   /* на кейкапе — вторичный (4.8:1) */
  --on-case:     #E8E6E1;   /* на корпусе — основной (14.6:1) */
  --on-case-mut: #8C93A1;   /* на корпусе — вторичный (5.2:1) */

  /* Статусы. Пара «на светлом / на тёмном» по той же логике, что и тил. */
  --ok:          #1F9254;
  --ok-deep:     #16713F;   /* «рабочий» текстом на кейкапе (4.9:1) */
  --ok-lit:      #4FCB86;   /* «рабочий» текстом на корпусе (7.9:1) */
  --warn:        #B5701A;
  --warn-deep:   #8A5310;   /* «на проверке» текстом на кейкапе (5.1:1) */
  --warn-lit:    #E0A64A;   /* «на проверке» текстом на корпусе (7.5:1) */

  /* Границы */
  --border:      #2A303B;   /* на тёмном */
  --hair:        #D9D2C4;   /* на кремовом */

  /* Ритм */
  --deck-max:    1140px;
  --gap:         20px;
  --radius:      10px;
  --radius-s:    8px;

  /* Гарнитуры */
  --font-display: 'Geologica', 'Trebuchet MS', sans-serif;
  --font-body:    'Ruda', 'Segoe UI', Arial, sans-serif;
  --font-mono:    'Noto Sans Mono', 'Consolas', monospace;
}

/* ── Сброс ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

html, body { margin: 0; padding: 0; }

/* Атрибут hidden обязан скрывать — всегда и на любом элементе.
   Правило [hidden]{display:none} живёт в стилях браузера, а любое авторское
   объявление display перебивает его по origin, независимо от специфичности.
   То есть .kcard{display:flex} молча ломает card.hidden в key-filter.js, и
   ряд клавиш-фильтров перестаёт что-либо фильтровать. !important здесь не
   роскошь: components.css грузится позже main.css, и без него .kcard выиграет
   у этого правила по порядку каскада. Один сброс закрывает и все будущие
   компоненты со своим display. */
[hidden] { display: none !important; }

body {
  background: var(--case);
  color: var(--on-case);
  font: 400 16px/1.65 var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;   /* ни одна секция не должна давать горизонтальную прокрутку */
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(27px, 5.2vw, 42px); }
h2 { font-size: clamp(22px, 3.6vw, 30px); }
h3 { font-size: clamp(18px, 2.4vw, 21px); }
h4 { font-size: 17px; }

p  { margin: 0 0 14px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin: 6px 0; }

a { color: var(--teal-lit); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; }

code, pre, .typed {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.92em;
}

/* Фокус видим всегда и на обеих поверхностях: тил-контур плюс светлый ободок,
   который проявляет его на тёмном корпусе. */
:focus-visible {
  outline: 2px solid var(--teal-lit);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Клавиши не должны «прыгать» у тех, кто отключил анимацию в системе. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Сетка ─────────────────────────────────────────────────────────────── */

/* Единственный ограничитель ширины на сайте. Внутрь него кладётся всё —
   и содержимое шапки, и содержимое подвала. Сами header/footer ширину не
   ограничивают никогда, иначе их фон перестанет доходить до краёв окна. */
.deck {
  width: 100%;
  max-width: var(--deck-max);
  margin: 0 auto;
  padding: 0 var(--gap);
}

/* Полоса контента на корпусе. Отбивка между смысловыми блоками задаётся
   здесь, а не марджинами заголовков — так вертикальный ритм не зависит от
   того, с какого элемента начинается секция. */
.strip { padding: 40px 0; }
.strip:first-of-type { padding-top: 28px; }
.strip + .strip { padding-top: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--teal-deep);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-s) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ── Шапка ─────────────────────────────────────────────────────────────── */

/* Full-bleed: фон и нижняя граница идут от края до края окна. Никакого
   max-width на самом <header>, никаких внешних отступов — между верхом окна
   и шапкой ровно 0px на любой ширине. */
.shelltop {
  width: 100%;
  background: var(--case-deep);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 40;
}

.shelltop__nav {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 62px;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-wrap: wrap;
}

.shelltop__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--on-case);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-decoration: none;
  margin-right: auto;
}
.shelltop__logo:hover { text-decoration: none; }

/* Знак логотипа — объёмная клавиша с легендой «+1»: кремовый колпачок,
   тиловая легенда, нижняя грань. Тот же приём, что у карточек, только
   размером с букву. */
.shelltop__cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 30px;
  padding: 0 7px;
  background: var(--keycap);
  color: var(--teal-deep);
  border-radius: 7px;
  box-shadow: 0 3px 0 var(--keycap-edge);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  transform: translateY(-1px);
}
.shelltop__logo:hover .shelltop__cap {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--keycap-edge);
}

/* Название не должно переноситься под клавишу: на 320px в шапке ещё лежат
   бургер и логотип, и разрыв «SPEED / KEYS» ломает всю строку. */
.shelltop__word { white-space: nowrap; }
.shelltop__cap, .shellfoot__cap { transition: transform .12s ease, box-shadow .12s ease; }

.shelltop__links {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shelltop__links li { margin: 0; }
.shelltop__links a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-s);
  color: var(--on-case-mut);
  font-size: 14px;
  font-weight: 700;
}
.shelltop__links a:hover {
  color: var(--on-case);
  background: var(--case-lift);
  text-decoration: none;
}

.shelltop__lang { display: flex; gap: 6px; }
.shelltop__lang-i {
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--on-case-mut);
  border: 1px solid var(--border);
}
.shelltop__lang-i.is-on { color: var(--teal-lit); border-color: var(--teal-deep); }

.shelltop__burger {
  display: none;
  background: var(--case-lift);
  color: var(--on-case);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  width: 40px;
  height: 38px;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 860px) {
  .shelltop__nav { min-height: 56px; }
  .shelltop__burger { display: block; order: 3; }
  .shelltop__lang { order: 2; }

  /* Меню сворачивается в колонку и раскрывается кнопкой. Пока JS не отработал,
     класс is-open не проставлен — список скрыт, и разметка не «мигает». */
  .shelltop__links {
    order: 4;
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding-bottom: 8px;
  }
  .shelltop__links.is-open { display: flex; }
  .shelltop__links a {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    font-size: 15px;
  }
}

/* ── Первый экран ──────────────────────────────────────────────────────── */

/* Верхний ряд клавиатуры: заголовок, подзаголовок и три факта-клавиши.
   Фон — корпус с еле заметным подсветом сверху, будто клавиатура стоит под
   лампой. Градиент декоративный: контраст текста считается по --case. */
.frontrow {
  background:
    radial-gradient(120% 140% at 50% -30%, rgba(15, 139, 126, 0.16), transparent 62%),
    var(--case);
  border-bottom: 1px solid var(--border);
  padding: 44px 0 40px;
}

.frontrow__h { margin-bottom: 14px; max-width: 20ch; }
.frontrow__h .plus { color: var(--teal-lit); }

.frontrow__sub {
  max-width: 62ch;
  color: var(--on-case-mut);
  font-size: 17px;
  margin-bottom: 20px;
}

.frontrow__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

/* Факт — маленькая клавиша: кремовый колпачок с нижней гранью. Не кликается,
   поэтому press-эффекта у неё нет — иначе она обещала бы действие. */
.fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--keycap);
  color: var(--ink);
  border-radius: 7px;
  box-shadow: 0 3px 0 var(--keycap-edge);
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
}
.fact__tick { color: var(--teal-deep); font-weight: 700; }

.frontrow__stamp {
  color: var(--on-case-mut);
  font-size: 13px;
  margin: 0;
}
.frontrow__stamp .typed { color: var(--on-case); }

/* ── «Содержание» ──────────────────────────────────────────────────────── */

/* Раскрывающийся блок на <details>/<summary>: ни строчки JS, шеврон
   переворачивается селектором [open], якоря скроллят за счёт
   scroll-behavior выше. Открыт по умолчанию — на длинных страницах он и есть
   карта, ради которой блок ставили. */
/* Фон приглушённый, а не кейкап.
   Раньше блок был таким же кремовым колпачком, как карточки скриптов, и на
   тёмной странице тянул внимание наравне с ними — хотя это служебная навигация,
   а не содержимое. Теперь это чуть приподнятый участок корпуса: читается,
   но не спорит с каталогом за первый взгляд.
   Вместе с фоном поменялась ПОВЕРХНОСТЬ, поэтому все цвета внутри переведены
   на «тёмные» токены (--on-case вместо --ink и так далее), а нижняя грань
   клавиши убрана: блок больше не притворяется кнопкой. */
.keymap {
  background: var(--case-lift);
  color: var(--on-case);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0 0 26px;
}

.keymap__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.keymap__head::-webkit-details-marker { display: none; }
.keymap__head::marker { content: ''; }

.keymap__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-case-mut);
}

.keymap__chev {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--teal-lit);
  border-bottom: 2px solid var(--teal-lit);
  transform: rotate(45deg);
  transition: transform .18s ease;
  flex: none;
}
.keymap[open] .keymap__chev { transform: rotate(-135deg); }

.keymap__list {
  margin: 0;
  padding: 0 16px 14px 36px;
  list-style: decimal;
  color: var(--on-case-mut);
}
.keymap__item { margin: 6px 0; }
.keymap__link {
  color: var(--on-case);
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
}
.keymap__link:hover {
  color: var(--teal-lit);
  border-bottom-color: var(--teal-lit);
  text-decoration: none;
}

/* ── Длинный текст ─────────────────────────────────────────────────────── */

/* Прозаические блоки страниц-лонгридов. Живут прямо на корпусе — кейкап под
   текстом на две тысячи знаков превращается в простыню и теряет смысл
   «клавиши». */
.manual { max-width: 74ch; }
.manual h2 { margin-top: 34px; }
.manual h3 { margin-top: 24px; color: var(--on-case); }
.manual p, .manual li { color: var(--on-case-mut); }
.manual strong { color: var(--on-case); }
.manual a { border-bottom: 1px solid rgba(53, 195, 178, 0.4); }
.manual ul { list-style: none; padding-left: 0; }
.manual ul li {
  position: relative;
  padding-left: 22px;
}
/* Маркер списка — миниатюрный колпачок с гранью, а не точка. Раньше здесь
   стояло content: '+1', но текстовое содержимое ::before часть скринридеров
   зачитывает, и длинный список превращался в «плюс один, плюс один…».
   Фигура рисуется рамками — читать в ней нечего. */
.manual ul li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 0.6em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--teal);
  box-shadow: 0 2px 0 var(--teal-deep);
}
.manual ol { padding-left: 24px; }
.manual ol li::marker { color: var(--teal-lit); font-weight: 700; }

.manual__sub {
  font-size: 17px;
  color: var(--on-case);
  max-width: 66ch;
}

.datestamp {
  color: var(--on-case-mut);
  font-size: 13px;
  margin: -4px 0 20px;
}
.datestamp time { color: var(--on-case); }

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

.shellfoot {
  width: 100%;
  background: var(--case-deep);
  border-top: 1px solid var(--border);
  margin-top: 56px;
  padding: 34px 0 22px;
}

.shellfoot__grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(140px, 1fr));
  gap: 26px;
  align-items: start;
}

.shellfoot__logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--on-case);
  margin-bottom: 10px;
}

.shellfoot__cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 6px;
  background: var(--keycap);
  color: var(--teal-deep);
  border-radius: 6px;
  box-shadow: 0 3px 0 var(--keycap-edge);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
}

.shellfoot__tag {
  color: var(--on-case-mut);
  font-size: 13.5px;
  max-width: 44ch;
  margin: 0;
}

.shellfoot__h {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-case);
  margin: 0 0 10px;
}

.shellfoot__col ul { list-style: none; margin: 0; padding: 0; }
.shellfoot__col li { margin: 0 0 7px; }
.shellfoot__col a { color: var(--on-case-mut); font-size: 14px; }
.shellfoot__col a:hover { color: var(--teal-lit); }

.shellfoot__legal {
  border-top: 1px solid var(--border);
  margin-top: 26px;
  padding-top: 16px;
}
.shellfoot__legal p {
  color: var(--on-case-mut);
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0;
  max-width: 96ch;
}

@media (max-width: 860px) {
  .shellfoot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .shellfoot__brand { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .shellfoot__grid { grid-template-columns: 1fr; }
}

/* ── Мелочи ────────────────────────────────────────────────────────────── */

.typed { color: inherit; }

/* Место под рекламный блок. Пустой контейнер: сеть подставляет содержимое
   сама, и до этого момента он не должен занимать высоту и оставлять дыру. */
.adbay { margin: 24px 0; min-height: 0; }
.adbay:empty { margin: 0; }

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