/* Предложение поставить приложение: плашка сверху, одна на все
   телефоны. На компьютере не показывается — решает app-promo.js.

   Использует токены темы, поэтому живёт и в светлой, и в тёмной
   без отдельных правил. */

.apr {
    display: none;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* Показывает скрипт: до его решения на экране ничего не мелькает */
.apr.is-on { display: flex; }

/* Кнопка плашкой, как в App Store, но подписью словом, а не капсом:
   «СКАЧАТЬ» кричит и съедает ширину на узком экране */
.apr__get {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 6px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--of-accent, #87668a);
    color: var(--of-accent-ink, #fff);
    font: 700 13px/1.2 inherit;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.apr__get:hover,
.apr__get:focus-visible { opacity: .92; color: var(--of-accent-ink, #fff); }

/* Крестик: 44×44 — минимальная цель для пальца */
.apr__x {
    flex: none;
    width: 32px;
    height: 32px;
    margin-left: -6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--of-muted, #6a6a6a);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.apr__x:hover { color: var(--of-ink, #212529); }

/* ── Плашка сверху ───────────────────────────────────────────
   Повторяет вид системного баннера Safari: он привычен и не читается
   как реклама. Нативный настроить нельзя — Apple берёт название и
   подпись из App Store, — поэтому своя вёрстка. */
.apr-top {
    /* Прилипает к верху и остаётся на экране при прокрутке. Именно
       sticky, а не fixed: элемент первый в потоке страницы, место под
       себя держит сам, и содержимое ниже не надо сдвигать отступом.
       Шапка сайта не закреплена, так что за верх бороться не с кем. */
    position: sticky;
    top: 0;
    z-index: 1000;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    background: var(--of-surface, #fff);
    border-bottom: 1px solid var(--of-line, #ececee);
}

/* Знак тёмный и на прозрачном фоне — на тёмной теме он бы исчез.
   Белая подложка возвращает ему вид иконки приложения, какой она и
   выглядит на телефоне. */
.apr-top__ico {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 4px;
    border-radius: 9px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--of-line, #ececee);
    object-fit: contain;
}

.apr-top__txt {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}
.apr-top__ttl {
    display: block;
    color: var(--of-ink, #212529);
    font-size: 14px;
    font-weight: 600;
}
/* Подпись переносится на вторую строку, а не обрезается многоточием:
   в ней всё предложение, и «Весь спорт в одном приложени…» не читается */
.apr-top__sub {
    display: block;
    margin-top: 1px;
    color: var(--of-muted, #6a6a6a);
    font-size: 12px;
    line-height: 1.3;
}

/* Узкий экран: «Скачать» длиннее прежнего «Get», поэтому кнопке
   даём ужаться, а не выдавливать текст */
@media (max-width: 360px) {
    .apr-top { gap: 9px; padding-left: 10px; padding-right: 10px; }
    .apr-top__ttl { font-size: 13.5px; }
    .apr-top__sub { font-size: 11.5px; }
    .apr__get { min-width: 0; padding: 6px 12px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .apr { transition: none !important; }
}