/* Афиша города — вход-листок, экран, карточка события (afisha.md, этап 2).
   Вид — канвас «Афиша города», итог 22.09.2026: плитка B (афиша целиком в
   рамке 4:5, две колонки), вход — листок календаря указателем, карточка —
   страница, как у места. Цвета — только роли из tokens.css (eze-ui);
   нижний ряд карточки — тот же `.card-foot .foot-row`, что у места (map.css):
   два ряда «как у места» обязаны выглядеть одинаково. */

/* ---- ВХОД: листок календаря в столбе указателей (market.md 3) ----
   Форма ценника — остриё слева (clip-path), дырка (::before), петля
   (.mf-string, общая со столбом); сверху полоса цвета слоя событий с
   надписью и двумя «кольцами», как у настенного календаря; крупно — число
   событий сегодня. Покачивание — то же `tag-sway`, что у ценника, но со
   сдвигом фазы: два указателя не качаются в такт. */
.market-fab .mf-leaf{animation-delay:-1.4s}
.market-fab .mf-leaf .mf-tag{position:relative;min-width:92px;width:max-content;height:60px;
  padding:16px 10px 3px 22px;background:var(--surface);color:var(--ink);overflow:hidden;
  clip-path:polygon(22% 0,100% 0,100% 100%,22% 100%,0 50%);
  display:flex;flex-direction:column;align-items:center}
.market-fab .mf-leaf .mf-tag::before{content:"";position:absolute;left:13px;top:50%;z-index:1;
  width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--paper);
  box-shadow:inset 0 0 0 1.5px var(--line-2)}
/* Полоса «АФИША»: белый на --l-event — 5,3:1 (tokens.css). Кольца стоят по
   краям полосы, текст — между ними: «SỰ KIỆN» шире «АФИША», и кольцо не
   должно ложиться на букву. */
.market-fab .mf-leaf .lt-top{position:absolute;left:0;right:0;top:0;height:14px;
  padding:0 12px 0 32px;background:var(--l-event);color:var(--on-layer);
  font-size:8px;font-weight:800;letter-spacing:.08em;line-height:14px;text-align:center;
  text-transform:uppercase;white-space:nowrap}
.market-fab .mf-leaf .lt-top::before,
.market-fab .mf-leaf .lt-top::after{content:"";position:absolute;top:4px;width:5px;height:5px;
  border-radius:50%;background:var(--surface)}
.market-fab .mf-leaf .lt-top::before{left:24px}
.market-fab .mf-leaf .lt-top::after{right:6px}
/* Число перелистывается раз в 4,2 с — как листок календаря. */
.market-fab .mf-leaf .lt-n{display:block;font-size:22px;font-weight:800;font-style:normal;
  line-height:26px;color:var(--ink);transform-origin:50% 0;
  animation:leaf-flip 4.2s ease-in-out infinite}
.market-fab .mf-leaf .lt-s{font-size:8.5px;font-weight:800;letter-spacing:.03em;line-height:11px;
  text-transform:uppercase;white-space:nowrap;color:var(--accent-ink)}
@keyframes leaf-flip{
  0%,84%{transform:perspective(120px) rotateX(0)}
  90%{transform:perspective(120px) rotateX(-88deg)}
  96%,100%{transform:perspective(120px) rotateX(0)}}
@media (prefers-reduced-motion: reduce){
  .market-fab .mf-leaf .lt-n{animation:none}}

/* ---- экран «Афиша» — полноэкранный режим, как барахолка ---- */
.afisha{position:fixed;inset:0;z-index:var(--z-mode);background:var(--paper);
  display:flex;flex-direction:column;overflow:hidden}
.afisha[hidden]{display:none}
/* Полосы фиксированной высоты во флекс-колонке не сжимаются (frontend.md 20б). */
.afisha > *{flex:0 0 auto}
.af-top{display:flex;align-items:center;gap:8px;min-height:54px;padding:10px var(--gut) 4px}
.af-h{flex:1 1 auto;min-width:0;margin:0;font-size:21px;font-weight:800;letter-spacing:-.01em;
  line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Город — контур, а не заливка: это состояние, а не главное действие (eze-ui).
   Сжимается и режется многоточием: длинное имя не выпихивает кнопки за край. */
.af-city{position:relative;flex:0 1 auto;min-width:0;max-width:56%;height:36px;
  display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  font-size:14px;font-weight:600}
.af-city span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-city i{flex:0 0 auto;font-style:normal;font-size:11px;color:var(--ink-3)}
.af-city::after{content:"";position:absolute;inset:-4px 0}   /* касание 44 px */
.af-icon{position:relative;flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);
  color:var(--ink);font-size:15px;line-height:1}
.af-icon::after{content:"";position:absolute;inset:-4px}
.af-icon.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
/* ✕ — только там, где нет «‹ Назад» Telegram (map.md 8: три «закрыть» на
   экране — перегруз); у жеста остаётся кнопочная замена (frontend.md 18). */
body.tg-back .af-close{display:none}
.af-search{padding:4px var(--gut) 2px}
.af-search[hidden]{display:none}
.af-search .m-inp{height:42px}

/* Полосы чипов: дат и рубрик. Прокручиваются вбок, как категории барахолки
   (market.md 8); полосу прокрутки не показываем (base.css). */
.af-row{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;padding:6px var(--gut);
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.af-row::-webkit-scrollbar{display:none}
.af-chip{position:relative;flex:0 0 auto;height:32px;display:inline-flex;align-items:center;gap:5px;
  padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:600;line-height:1;
  white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.af-chip::after{content:"";position:absolute;inset:-6px -2px}   /* касание 44 px */
/* Выбранный — заливка --ink, текст --surface: выбор держит тон, а не акцент
   (акцент — действие, а чип — состояние). */
.af-chip.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
/* «📅 Дата»: нативный выбор дня лежит поверх чипа прозрачным — палец попадает
   прямо в поле, и выбор открывает сама система, без `showPicker`, которого
   нет у старых вебвью. 16 px — чтобы iOS не увеличивал страницу на фокусе. */
/* Размер — явно: у поля ввода своя ширина, и `left`+`right` его не растянут.
   На пиксель шире с каждой стороны — чтобы накрыть и рамку чипа. */
.af-datechip input{position:absolute;left:-1px;top:-1px;z-index:1;width:calc(100% + 2px);
  height:calc(100% + 2px);margin:0;padding:0;border:0;opacity:0;font-size:16px;cursor:pointer;
  color-scheme:light}
:root[data-theme="dark"] .af-datechip input{color-scheme:dark}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .af-datechip input{color-scheme:dark}
}

/* ---- лента: плитки B в две колонки ---- */
.af-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
/* `minmax(0,1fr)`: элемент сетки не уже своего содержимого, и длинное
   название без пробелов распирало бы колонку. */
.af-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px;row-gap:14px;
  padding:4px var(--gut) 0}
.af-tile{display:block;width:100%;min-width:0;padding:0;border:0;background:none;text-align:left;
  color:var(--ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Рамка 4:5 — отступом, а не `aspect-ratio`: его нет у вебвью старше
   Chrome 88, а отступ в процентах от ширины понимают все. Афиша вписана
   ЦЕЛИКОМ (market.md 28а), поле вокруг — своя роль `--poster-mat`, на тон
   темнее фона экрана (доработка 2): с `--photo-mat` оно совпадало с `--paper`
   светлой темы, рамка пропадала, и квадратная афиша казалась сдвинутой вниз
   против соседней вертикальной. Роль одна на сетку и строку «Идёт сейчас». */
.af-fr{position:relative;display:block;height:0;padding-bottom:125%;border-radius:10px;
  overflow:hidden;background:var(--poster-mat)}
.af-fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
/* Нет афиши — эмодзи рубрики на мягком тоне слоя: ноль байт сети. Пока
   афиша едет, рамка стоит пустым полем — эмодзи вернётся, только если
   снимок не отдался. */
.af-fr .em{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;line-height:1;
  background:var(--l-event-soft)}
.af-fr.poster .em{display:none}
.af-tile:active .af-fr{opacity:.86}
/* Межстрочие плитки — ДОЛЕЙ кегля, а не пикселями (28.09.2026, замер
   `scripts/qa/cut_lines.py`). В пикселях оно не росло вместе с крупным
   системным шрифтом: при кегле 1,3 дата вставала в 15 px строки при 15 px
   букв, площадка — в 16 при 15,6, и `overflow:hidden` срезал хвосты букв
   (3 и 2 px) у каждой плитки на всех пяти размерах экрана. Доли подобраны так,
   что при обычном кегле строки ровно прежние — 15, 18, 16 и 17 px, — и
   плитка не сдвинулась ни на пиксель. Высота названия — те же две строки,
   тоже долей. */
/* Дата — первой строкой, прописными и акцентом: с ней в афишу и приходят.
   Роль «на тоне»: #0079A3 на --paper даёт 4,33 — ниже порога (tokens.css). */
.af-date{display:block;margin-top:6px;font-size:11.5px;line-height:1.3044;font-weight:800;
  letter-spacing:.02em;text-transform:uppercase;color:var(--accent-ink-tone);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Название — две строки ровно: соседние плитки стоят на одной линии. */
.af-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  height:calc(2em * 1.2858);margin-top:2px;font-size:14px;line-height:1.2858;font-weight:700;color:var(--ink);
  overflow-wrap:anywhere}
.af-venue{display:block;margin-top:2px;font-size:12px;line-height:1.3334;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-price{display:block;margin-top:2px;font-size:12.5px;line-height:1.36;font-weight:700;color:var(--ink)}

/* «Идёт сейчас» — строка над сеткой (afisha.md 3в): те же плитки, прокрутка
   вбок. Плитка уже колонки сетки (38 % строки) — третья выглядывает из-за
   края и говорит «листается», как у топов; вертикаль экрана она не ест
   (≈240 px против ≈290 у плитки сетки). Жест «назад» здесь не начинается
   (gestures.md 8, skip в afisha.js). */
.af-sec{margin:10px var(--gut) 8px;font-size:15px;line-height:20px;font-weight:800;color:var(--ink)}
.af-now-row{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;padding:0 var(--gut) 6px;scrollbar-width:none}
.af-now-row::-webkit-scrollbar{display:none}
.af-now-row .af-tile{flex:0 0 38%;width:auto}
.af-now + .af-sec{margin-top:14px}

/* Состояния под сеткой: ожидание, пусто, отказ — словами (frontend.md 6). */
.af-state[hidden]{display:none}
.af-note{padding:18px var(--gut);text-align:center;font-size:12.5px;color:var(--ink-3)}
.af-empty{padding:40px calc(var(--gut) + 12px) 24px;text-align:center;color:var(--ink-2);font-size:14px}
.af-empty p{margin:0 0 14px}
.af-add{width:100%;max-width:320px}

/* Выбор точки для формы, открытой из афиши, — карту ничто не накрывает. */
body.pick-mode .afisha,
body.pick-mode .ev-page,
body.pick-mode .evl{display:none}

/* ---- список площадки: лист снизу поверх карты (доработка 5, G3) ----
   Канвас «Платная метка на карте», «Список по нажатию»: заголовок «{площадка}
   · N событий», подсказка, строки — день / время, название и рубрика, цена.
   Ступень — режима (--z-mode): карточка события, которую открывает строка,
   ложится выше (--z-page), выбор города и тост — ещё выше (frontend.md 11).
   Цвета — роли: колонка дня цветом слоя событий (--l-event на --surface —
   5,3:1 в светлой и 6,4:1 в тёмной, как строка «когда» метки). */
.evl{position:fixed;inset:0;z-index:var(--z-mode)}
.evl[hidden]{display:none}
.evl-scrim{position:absolute;inset:0;background:var(--scrim)}
.evl-sheet{position:absolute;left:0;right:0;bottom:0;max-height:72%;display:flex;flex-direction:column;
  padding:10px var(--gut) calc(8px + env(safe-area-inset-bottom));background:var(--surface);
  border-radius:16px 16px 0 0;box-shadow:var(--shadow-lift)}
.evl-sheet > *{flex:0 0 auto}                 /* frontend.md 20б */
.evl-grab{width:36px;height:4px;margin:0 auto 10px;border-radius:2px;background:var(--line-2)}
/* Заголовок — площадка и число; длинный адрес — в две строки, а не за край. */
.evl-h{margin:0;font-size:16px;font-weight:800;line-height:1.25;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere}
.evl-sub{margin:2px 0 6px;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink-3)}
/* Не влезло — прокручивается сам список, а не лист целиком. */
.evl-sheet > .evl-rows{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch}
/* Строка — кнопка во всю ширину: касание не меньше 56 px (frontend.md 9). */
.evl-row{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:8px 0;
  border:0;border-top:1px solid var(--sunk);background:none;color:var(--ink);font:inherit;
  text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.evl-row:active{background:var(--surface-2)}
.evl-d{flex:0 0 64px;min-width:0;text-align:center}
.evl-d span{display:block;font-size:9.5px;font-weight:800;line-height:1.35;letter-spacing:.05em;
  text-transform:uppercase;color:var(--l-event);overflow-wrap:anywhere}
.evl-d b{display:block;font-size:16px;font-weight:800;line-height:1.2;color:var(--ink);white-space:nowrap}
/* «до 12 окт» у идущей выставки вместо времени — мельче, чтобы влезть в колонку. */
.evl-d b.until{font-size:12px;white-space:normal}
.evl-t{flex:1 1 auto;min-width:0}
.evl-t b{display:block;font-size:14px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.evl-t span{display:block;margin-top:1px;font-size:12px;font-weight:600;line-height:1.3;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Цена не сжимается: уступает название (оно режется многоточием), иначе
   «300 тыс ₫» у длинного названия становилось «300 ты…» (смоук 22.09.2026). */
.evl-p{flex:0 0 auto;max-width:34%;font-size:12.5px;font-weight:700;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- карточка события: страница поверх афиши ---- */
.ev-page{position:fixed;inset:0;z-index:var(--z-page);background:var(--surface);
  display:flex;flex-direction:column;overflow:hidden}
.ev-page[hidden]{display:none}
.ev-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;display:flex;flex-direction:column}
.ev-body > *{flex-shrink:0}                   /* frontend.md 20б */
/* Рамка афиши: высота по снимку (16:9…4:5, не выше 43 % экрана) ставится
   из JS строкой `height` — пропорции едут с сервера, и рамка правильная ещё
   до того, как снимок приехал. */
.ev-frame{position:relative;overflow:hidden;background:var(--photo-mat)}
.ev-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.ev-frame .em{position:absolute;inset:0;display:grid;place-items:center;font-size:64px;line-height:1;
  background:var(--l-event-soft)}
.ev-frame.poster .em{display:none}
/* Снимков несколько — сегменты и края для тапа, как у карточки места
   (map.md 8): свайп вправо занят «назад». */
.ev-bars{position:absolute;left:10px;right:10px;top:8px;z-index:2;display:flex;gap:4px;pointer-events:none}
.ev-bars i{flex:1 1 0;height:3px;border-radius:2px;background:rgba(255,255,255,.72);
  box-shadow:0 0 0 .5px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.45)}
.ev-bars i.on{background:#fff}
.ev-tap{position:absolute;top:0;bottom:0;z-index:1;width:34%;padding:0;border:0;background:none;
  -webkit-tap-highlight-color:transparent}
.ev-tap.prev{left:0}
.ev-tap.next{right:0}
/* ✕ лежит на поле снимка — его роли (`--mat-btn`), как флаг и ✕ барахолки. */
.ev-close{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--mat-btn);color:var(--mat-btn-ink);
  font-size:14px;font-weight:700;line-height:1;box-shadow:var(--shadow)}
.ev-close::after{content:"";position:absolute;inset:-5px}
body.tg-back .ev-close{display:none}

.ev-sheet{padding:14px var(--gut) 14px}
/* Громкое в карточке — КОГДА (afisha.md 3б), как цена у жилья. */
.ev-when{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ev-when b{font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.ev-rep{padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink-tone);
  font-size:12px;font-weight:700;line-height:1.3}
.ev-title{margin:4px 0 0;font-size:17px;font-weight:700;line-height:1.25;color:var(--ink);
  overflow-wrap:anywhere}
.ev-venue{display:flex;align-items:baseline;gap:6px;min-width:0;margin-top:10px;font-size:14px}
.ev-venue b{flex:0 1 auto;min-width:0;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-venue span{flex:1 1 auto;min-width:0;color:var(--ink-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.ev-map{position:relative;flex:0 0 auto;padding:0;border:0;background:none;font:inherit;
  font-size:13px;font-weight:700;color:var(--accent-ink);white-space:nowrap;cursor:pointer}
.ev-map::after{content:"";position:absolute;inset:-13px -8px}   /* касание 44 px */
.ev-price{margin-top:6px;font-size:14px;font-weight:700;color:var(--ink)}
.ev-about{margin:8px 0 0;font-size:13.5px;line-height:19px;color:var(--ink-2);white-space:pre-line;
  overflow-wrap:anywhere}
.ev-about.clamped{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.ev-more{position:relative;align-self:flex-start;margin-top:2px;padding:0;border:0;background:none;
  font:inherit;font-size:13px;font-weight:700;color:var(--accent-ink);cursor:pointer}
.ev-more::after{content:"";position:absolute;inset:-12px -10px}
.ev-more[hidden]{display:none}
.ev-src{margin-top:10px;font-size:12px;line-height:16px;color:var(--ink-3)}
.ev-src + .ev-src{margin-top:2px}
.ev-contact{margin-top:6px;font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.ev-contact a{color:var(--accent-ink);font-weight:700;text-decoration:none}
.ev-contact b{color:var(--ink);font-weight:700}
/* Статус своего неживого события — тоном, а не тревогой: это не отказ. */
.ev-status{margin:12px 0 0;padding:9px 11px;border-radius:var(--radius-sm);background:var(--surface-2);
  color:var(--ink-2);font-size:13px;line-height:1.4}

/* Нижний ряд — `.card-foot .foot-row` карточки места (map.css), здесь только
   своё: низ экрана всегда (карточка — страница, чата под ней нет) и строка
   модератора. */
.ev-page .card-foot{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
/* Пока не пришли полные данные, ряд держит место: иначе он появился бы
   рывком, сдвинув карточку. */
.ev-page .foot-row.ev-wait{min-height:48px}
/* 44 px — порог касания (frontend.md 9); было 40. */
.ev-staff{min-height:44px;padding:0 12px;border-radius:var(--radius-sm);border:1.5px solid var(--accent);
  background:none;color:var(--accent-ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}