/* ============================================================================
   site/courier.css — «Коробка курьера» (раздел #box главной, движок courier.js).

   Слева — заголовок и шесть категорий, справа — афиша: курьер с коробкой,
   над головой слово категории, внизу две ленты-наклейки, как в рекламе
   Купера, с которой всё началось. Содержимое коробки меняется само, пока
   раздел на экране, и по нажатию на категорию, на афишу или по свайпу.

   Порядок слоёв афиши снизу вверх (все в долях кадра 1122×1542, геометрия
   коробки — из courier/manifest.js):
     фото → заплатка неба под головой → слово категории → голова →
     пустая коробка → продукты (обрезаны кромкой коробки) → бирка → ленты.

   Без JS — кадр с овощами, слово, бирка и ленты стоят как есть, категории
   — простым списком. Цвета — только токены палитры (site-two-sessions:
   направление палитры меняется целиком, зашитый цвет остался бы пятном).
   ========================================================================== */

.bx-in{ display:grid; gap:clamp(36px,5vw,96px); align-items:center }
.bx .head{ gap:18px }
.bx .head h2{ max-width:13ch }
.bx .head .lead{ max-width:42ch }

@media (min-width:1000px){
  .bx-in{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) }
}

/* ── список категорий ───────────────────────────────────────────────────
   Строка — кнопка-вкладка. Активная светлеет, её номер — лаймом, а под ней
   идёт полоса: сколько ещё простоит эта коробка. */
.bx-list{ margin-top:clamp(28px,3.2vw,48px); display:grid; border-top:1px solid var(--edge) }
.bx-i{ appearance:none; position:relative; display:grid; grid-template-columns:44px 1fr; align-items:baseline;
  width:100%; margin:0; padding:15px 0 14px; border:0; border-bottom:1px solid var(--edge);
  background:none; color:var(--dim); font:inherit; text-align:left; cursor:pointer;
  transition:color .25s var(--e-micro) }
.bx-n{ font:600 13px/1 "Space Grotesk", Manrope, sans-serif; letter-spacing:.08em; color:var(--dim);
  transition:color .25s var(--e-micro) }
.bx-t{ font-family:var(--disp); font-weight:600; font-size:clamp(17px,1.5vw,25px); line-height:1.15;
  letter-spacing:-.012em; transition:transform .45s var(--e-reveal) }
.bx-i:hover{ color:var(--muted) }
.bx-i[aria-selected="true"]{ color:var(--ink) }
.bx-i[aria-selected="true"] .bx-n{ color:var(--cta) }
.bx-i[aria-selected="true"] .bx-t{ transform:translateX(6px) }
.bx-bar{ position:absolute; left:0; right:0; bottom:-1px; height:2px; overflow:hidden; pointer-events:none }
.bx-bar i{ display:block; height:100%; background:var(--cta); transform:scaleX(0); transform-origin:0 50% }
.bx-i:focus-visible{ outline-offset:-2px; border-radius:6px }

.bx-foot{ margin-top:clamp(22px,2.4vw,34px); display:flex; align-items:center; gap:22px }
.bx-play{ appearance:none; width:44px; height:44px; flex:none; display:grid; place-items:center;
  border:1px solid var(--edge); border-radius:50%; background:var(--surf); color:var(--ink); cursor:pointer;
  transition:background-color .2s var(--e-micro), border-color .2s var(--e-micro) }
.bx-play:hover{ background:var(--surf-hi); border-color:rgba(234,243,239,.2);
  border-color:color-mix(in srgb, var(--ink) 20%, transparent) }
.bx-play svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round }
.bx-play .bx-pl{ display:none; fill:currentColor; stroke:currentColor; stroke-width:1.2; stroke-linejoin:round }
.bx-play.is-paused .bx-p1, .bx-play.is-paused .bx-p2{ display:none }
.bx-play.is-paused .bx-pl{ display:block }
.bx-play[hidden]{ display:none }

/* ── афиша ───────────────────────────────────────────────────────────────
   Высота — не больше 84 замороженных экранов (--vh, см. inapp-browser-vh):
   ширина считается от неё через пропорции кадра 1122×1542. */
.bx-stage{ display:flex; justify-content:center }
.bx-poster{ position:relative; isolation:isolate; overflow:hidden; container-type:inline-size;
  width:min(100%, calc(var(--vh, 1vh) * 84 * 1122 / 1542)); aspect-ratio:1122 / 1542;
  border-radius:clamp(22px,2.4vw,40px);
  background:#2F74C6;                                   /* небо кадра, пока едет фото */
  box-shadow:0 50px 90px -50px rgba(0,0,0,.7);
  -webkit-tap-highlight-color:transparent; touch-action:pan-y }
.bx-poster picture{ display:contents }
.bx-photo{ position:absolute; inset:0; width:100%; height:100%; display:block }
/* Голова и заплатка неба под ней — те же доли, что head в courier/manifest.js
   (HEAD_BOX и SKY в make.py). Стоят здесь, а не в скрипте: слово за головой
   есть и без JS. Поменяли HEAD_BOX или SKY — пересчитать эти четыре числа. */
.bx-behind, .bx-head{ position:absolute; z-index:1; left:26.738%; top:11.673%; width:42.781%; height:20.752%;
  display:block; pointer-events:none; user-select:none }
.bx-head{ z-index:3 }

/* Слово категории: лайм по небу, голова стоит поверх. Кегль подгоняет
   courier.js (самое длинное слово языка — в 88 % ширины), здесь — запас. */
.bx-word{ position:absolute; z-index:2; left:0; right:0; top:var(--bx-word-top, 10.2%); margin:0;
  display:grid; justify-items:center; overflow:hidden; padding:.06em 0 .02em; pointer-events:none;
  font:800 var(--bx-fs, 13.5cqw)/.9 var(--disp); letter-spacing:-.025em; text-transform:uppercase;
  color:var(--punch, #D9F65C); user-select:none }
.bx-w{ grid-area:1 / 1; white-space:nowrap }
.bx-c{ display:inline-block }

/* Бирка состава — как зелёная наклейка «-30 %» у Купера: лайм, чернила,
   наклон. Кегль не меньше 10,5 px (на телефоне 9,5 — там бирка шире и
   встаёт в две строки, иначе наезжала на ленты). */
.bx-tag{ position:absolute; z-index:6; left:48%; top:71.5%; max-width:46%; margin:0;
  padding:.62em .85em .56em; border-radius:.55em;
  background:var(--punch, #D9F65C); color:var(--punch-ink, #15200B);
  font:800 max(10.5px, 2.25cqw)/1.18 var(--disp); letter-spacing:.005em; text-transform:uppercase;
  transform:rotate(-6deg); transform-origin:50% 60%;
  box-shadow:0 .9em 1.6em -.9em rgba(8,24,12,.7), inset 0 -.12em 0 rgba(21,32,11,.12) }

/* Ленты поверх ног — две полосы с наклоном, лайм и белая. */
.bx-tape{ position:absolute; z-index:7; left:0; right:0; margin:0; display:flex; justify-content:center;
  font:800 6.9cqw/1 var(--disp); letter-spacing:-.015em; text-transform:uppercase; pointer-events:none }
.bx-tape span{ display:block; padding:.2em .55em .16em; white-space:nowrap;
  box-shadow:0 .14em 0 rgba(6,20,12,.28) }
.bx-tape-a{ top:82.6%; transform:rotate(-4.2deg) }
.bx-tape-a span{ background:var(--punch, #D9F65C); color:var(--punch-ink, #15200B) }
.bx-tape-b{ top:89.6%; transform:rotate(-1.4deg) translateX(3%) }
.bx-tape-b span{ background:#fff; color:var(--paper-ink, #0D1A15) }

/* ── слои движка (их ставит courier.js) ─────────────────────────────── */
.bx-plate, .bx-frame{ position:absolute; display:block; pointer-events:none; user-select:none }
.bx-plate{ z-index:4 }
.bx-frame{ z-index:5 }
.bx-js .bx-w:not(.is-on){ visibility:hidden }
/* Глубина от прокрутки (courier.js) двигает эти узлы каждый кадр — свой слой,
   чтобы сдвиг шёл без перерисовки букв. */
.bx-depth .bx-word, .bx-depth .bx-tag, .bx-depth .bx-tape{ will-change:translate }
.bx-slab{ position:absolute; visibility:hidden }
.bx-slab.is-on{ visibility:visible }
.bx-slab img{ display:block; width:100%; height:100% }
/* Блик по свежим продуктам: полоса света идёт по маске самих продуктов. */
.bx-gl{ position:absolute; inset:0; overflow:hidden; opacity:0;
  -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat }
.bx-gl b{ position:absolute; top:-12%; bottom:-12%; left:0; width:24%;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 32%,
    rgba(255,255,255,.5) 50%, rgba(255,255,255,.06) 68%, rgba(255,255,255,0) 100%);
  transform:translateX(-140%) skewX(-14deg); mix-blend-mode:soft-light }

/* Афиша откликается на касание и свайп: выделение текста лент при этом
   только мешало бы (подписи на ней декоративные, aria-hidden). */
.bx-js .bx-poster{ cursor:pointer; -webkit-user-select:none; user-select:none }
.bx-js .bx-flash{ position:absolute; inset:0; z-index:9; pointer-events:none; background:var(--cta, #D9F65C) }
.bx-src{ display:none }

/* ── телефон и планшет в портрете ─────────────────────────────────────
   Порядок: заголовок → афиша → категории лентой → пауза и ссылка. Колонка
   текста раскрывается (display:contents), чтобы афиша встала между. */
@media (max-width:999px){
  .bx-in{ gap:26px }
  .bx-copy{ display:contents }
  .bx .head{ order:1 }
  .bx-stage{ order:2 }
  .bx-list{ order:3 }
  .bx-foot{ order:4 }
  .bx-poster{ width:min(100%, calc(var(--vh, 1vh) * 78 * 1122 / 1542)) }
  .bx-list{ display:flex; gap:8px; margin:0 calc(var(--pad) * -1); padding:2px var(--pad) 6px;
    overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-inline:var(--pad);
    scrollbar-width:none; border:0; overscroll-behavior-x:contain }
  .bx-list::-webkit-scrollbar{ display:none }
  .bx-i{ flex:none; width:auto; display:flex; align-items:center; gap:8px; padding:11px 16px 10px;
    border:1px solid var(--edge); border-radius:999px; overflow:hidden; scroll-snap-align:start;
    background:var(--surf) }
  .bx-n{ font-size:11px }
  .bx-t{ font-size:14px; white-space:nowrap }
  .bx-i[aria-selected="true"]{ border-color:var(--cta-edge, rgba(217,246,92,.55)) }
  .bx-i[aria-selected="true"] .bx-t{ transform:none }
  .bx-bar{ left:14px; right:14px; bottom:0 }
  .bx-foot{ margin-top:0 }
  .bx-tag{ left:31%; top:70.6%; max-width:66%; font-size:max(9.5px, 2.25cqw); line-height:1.12 }
  .bx-tape-a{ top:84.2% }
  .bx-tape-b{ top:90.8% }
}