/* Общее для обоих гидов, короткого и подробного.
   Живёт на токенах лендинга (ces-tokens.css): холст, типографика, карточки
   и появление приходят оттуда. Здесь только то, чего на лендинге нет, но
   что нужно обеим страницам: шапка гида, корпус телефона и выноски. */

:root {
  /* Высота экрана в рамке. От неё же считаются корпус и остров, поэтому
     достаточно поменять её одну, чтобы телефон остался верным. */
  --art-h: 470px;
  /* Корпус телефона - токены дизайн-системы (design/ces/v4/tokens.css),
     на сайте их не было. */
  --device: #16161C;
  --device-edge: rgba(255, 255, 255, .14);
  --device-notch: #08080B;
}

/* ── шапка страницы: возврат и язык ─────────────────────── */
.pagehead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap; padding-top: var(--sp-7);
}
.backlink {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  text-decoration: none; color: var(--cap); font-size: 14px; font-weight: 600;
}
.backlink:hover { color: var(--text); }
.backlink svg { width: 15px; height: 15px; flex: none; }
.langs { display: flex; gap: var(--sp-2); }
.langs a {
  text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  padding: 8px 13px; border-radius: 999px; color: var(--cap);
  background: var(--card); box-shadow: var(--sh-card);
}
.langs a[aria-current] { background: var(--blue); color: #fff; }

/* ── корпус телефона ────────────────────────────────────────
   Значения - из прототипа (components.css, .lm-phone): при экране 844
   радиус 54, кант 10 и остров 124x35. Записаны долей от высоты экрана,
   поэтому рамка остаётся верной на любом размере снимка. */
.phone {
  --dev-r: calc(var(--art-h) * .064);
  --dev-ring: calc(var(--art-h) * .0118);
  position: relative; border-radius: var(--dev-r); overflow: hidden; isolation: isolate;
  box-shadow:
    0 34px 46px rgba(20, 20, 27, .26),
    0 6px 12px rgba(20, 20, 27, .10),
    0 0 0 var(--dev-ring) var(--device),
    0 0 0 calc(var(--dev-ring) + 1px) var(--device-edge);
}
.phone img { display: block; height: var(--art-h); width: auto; }
.phone__island {
  position: absolute; top: calc(var(--art-h) * .0142); left: 50%; transform: translateX(-50%);
  width: calc(var(--art-h) * .147); height: calc(var(--art-h) * .0415);
  border-radius: 999px; background: var(--device-notch); z-index: 2;
}

/* ── выноски на снимке ──────────────────────────────────── */
.pinstrip { position: relative; border-radius: var(--r-inner); overflow: hidden; }
.pinstrip img { width: 100%; height: auto; display: block; }
.pin {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px;
  background: var(--blue); color: #fff; border: 2px solid #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  display: grid; place-items: center; box-shadow: 0 3px 10px rgba(11, 94, 227, .4);
}

/* Список выносок под снимком. Оба гида пишут его одинаково, только
   классы у них разные по историческим причинам. */
.pinlist, .legend { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.pinlist li, .legend li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--sp-3);
  align-items: baseline; font-size: 16px; line-height: 1.5; color: var(--text);
}
.pinlist b, .legend b {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  background: var(--tint-blue); color: var(--blue);
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
}
.pinlist em, .legend em { font-style: normal; color: var(--ink); font-weight: 700; }

@media (max-width: 1080px) { :root { --art-h: 400px; } }
@media (max-width: 700px)  { :root { --art-h: 340px; } }