/* Thai Car Culture: the Mini App and the website, one stylesheet.
   The world of variant M (plate stock: white film, black rim, red film for this weekend; concrete by
   day, asphalt at night). Interface text uses the system face so it feels native inside Telegram;
   Geologica is kept for display lines and plates. 8-pt spacing, 44-pt targets. */

:root {
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", system-ui, "Noto Sans Thai", sans-serif;
  --display: "Geologica", "Anuphan", system-ui, sans-serif;
  --font-th: "Anuphan", system-ui, sans-serif;
  --red: #EE3B3F; --plate: #FBFBF9; --plate-ink: #12161A;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --top: 0px; --bot: 0px; --tabh: 0px; --strip: 96px; --colw: 0px; --fbar-h: 100px;
}
:root, [data-theme="day"] {
  --ground: #E6E8E5; --surface: #FAFAF8; --surface-2: #EFF0ED; --surface-3: #E3E5E2;
  --ink: #121519; --ink-2: #4D565E; --ink-3: #5D666E; --rule: #DADDDF; --rule-2: #C4C9CC;
  --pill: rgba(250, 250, 248, .94);
  --shadow: 0 1px 2px rgba(18, 21, 25, .06), 0 -12px 32px -18px rgba(18, 21, 25, .22);
  --shadow-s: 0 1px 2px rgba(18, 21, 25, .1), 0 6px 14px -8px rgba(18, 21, 25, .3);
  color-scheme: light;
}
[data-theme="night"] {
  --ground: #18191B; --surface: #212326; --surface-2: #2A2D30; --surface-3: #33363A;
  --ink: #EDEEF0; --ink-2: #AEB3B8; --ink-3: #91979C; --rule: #313438; --rule-2: #42464B;
  --pill: rgba(33, 35, 38, .94);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 -14px 34px -16px rgba(0, 0, 0, .7);
  --shadow-s: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 18px -8px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--ground); overscroll-behavior: none; }
body {
  font-family: var(--ui); font-size: 16px; line-height: 1.45; color: var(--ink);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; caret-color: var(--red);
  user-select: none; -webkit-user-select: none;
}
::selection { background: var(--red); color: var(--plate-ink); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; touch-action: manipulation; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:lang(th) { line-height: 1.6; }
* { scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 6px; }

/* ---------- frame: the 3D stage fills the screen; the list slides over it ---------- */
.app { position: fixed; left: 0; right: 0; top: 0; height: var(--tg-viewport-stable-height, 100%); overflow: hidden; }
.stage { position: absolute; inset: 0; }
.gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s var(--ease-out); touch-action: none; }
.stage.is-3d .gl { opacity: 1; }
.fallback { position: absolute; left: 16px; right: 16px; top: calc(var(--top) + 10px); bottom: 55%; transition: opacity .4s; }
.stage.is-3d .fallback { opacity: 0; visibility: hidden; }
.fallback svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .16)); }
.fb__land { fill: var(--surface); stroke: var(--ink); stroke-width: .5; stroke-linejoin: round; }
.fb__dot { fill: var(--rule-2); }
.fb__dot.is-on { fill: var(--ink); stroke: var(--surface); stroke-width: .3; }
.fb__dot.is-hot { fill: var(--red); stroke: var(--plate-ink); }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.plabel {
  position: absolute; left: 0; top: 0; height: 22px; padding: 0 9px; border-radius: 11px;
  display: inline-flex; align-items: center; white-space: nowrap;
  background: var(--pill); color: var(--ink); box-shadow: var(--shadow-s);
  font-size: 12px; font-weight: 600; letter-spacing: .01em; transition: opacity .2s;
}
.tip { position: absolute; left: 0; top: 0; z-index: 3; max-width: 240px; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: var(--surface); font-size: 13px; line-height: 1.35; pointer-events: none; box-shadow: var(--shadow-s); }
.tip b { display: block; font-weight: 600; }
.tip span { opacity: .78; }
/* «Вся страна»: back to the whole country after a zoom or a place filter */
.mapfit {
  position: absolute; z-index: 21; top: calc(var(--top) + 10px); right: 12px; height: 36px; padding: 0 12px 0 10px;
  display: inline-flex; align-items: center; gap: 6px; border-radius: 18px;
  background: var(--pill); color: var(--ink); box-shadow: var(--shadow-s); font-size: 13px; font-weight: 600;
}
.mapfit::after { content: ""; position: absolute; inset: -4px; }
.mapfit .ic { width: 16px; height: 16px; }
.is-wide .mapfit { top: calc(var(--top) + 16px); right: 20px; }
/* the folded map: a 96 px strip; a tap anywhere on it unfolds it */
.stripbtn { position: absolute; z-index: 15; left: 0; right: 0; top: var(--top); height: calc(var(--strip) - var(--top)); cursor: pointer; }

/* ---------- Афиша: a scrolling panel; the transparent spacer lets the map show through ---------- */
.home {
  position: absolute; z-index: 20; left: 0; right: 0; top: var(--strip); bottom: var(--tabh);
  overflow-y: auto; overscroll-behavior: contain; pointer-events: none; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.home::-webkit-scrollbar { display: none; }
.home__spacer { pointer-events: none; }
.fbar { position: sticky; top: 0; z-index: 3; pointer-events: auto; padding-bottom: 8px; background: var(--surface); border-radius: 16px 16px 0 0; box-shadow: var(--shadow); }
.fbar__grip { height: 16px; display: grid; place-items: center; }
.fbar__grip span { width: 36px; height: 5px; border-radius: 3px; background: var(--rule-2); }
.fbar__dates { display: flex; gap: 6px; overflow-x: auto; padding: 2px 16px; scrollbar-width: none; scroll-padding: 0 16px; }
.fbar__dates::-webkit-scrollbar { display: none; }
.dchip {
  position: relative; flex: none; height: 36px; padding: 0 14px; border-radius: 18px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); color: var(--ink); font-size: 15px; font-weight: 600; white-space: nowrap; transition: background-color .15s, color .15s;
}
.dchip::after { content: ""; position: absolute; inset: -4px -1px; }
.dchip .ic { width: 18px; height: 18px; }
.dchip--cal { padding: 0 11px; }
.dchip[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.fbar__dates.is-muted .dchip { opacity: .45; }
.fbar__tools { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px 0 16px; }
.fbar__sp { flex: 1; }
.fbar__search { margin-right: -4px; }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--red); color: var(--plate-ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fbar__tools > * { flex: none; }
.fbar__tools > .pillbtn--place, .fbar__tools > .search--bar { flex: 0 1 auto; min-width: 0; }
.fbar__tools > .search--bar { flex-grow: 1; }
.pillbtn--place { background: var(--ink); color: var(--surface); }
.pillbtn--place span { overflow: hidden; text-overflow: ellipsis; }
.pillbtn--place .ic { width: 16px; height: 16px; }
.textbtn { min-height: 44px; padding: 0 4px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.home__list { position: relative; z-index: 1; pointer-events: auto; padding: 0 16px 24px; background: var(--surface); }
.lhead { padding: 12px 0 0; }
.lhead__title { margin: 0; font-family: var(--display); font-size: 28px; line-height: 1.1; font-weight: 300; letter-spacing: -.03em; font-variation-settings: "SHRP" 100; }
.lhead__meta { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
/* «Главное на выходных»: one card, the plate first */
.top { margin: 16px 0 4px; }
.top__title-h { margin: 0 0 8px; font-size: 15px; line-height: 1.3; font-weight: 700; letter-spacing: -.005em; }
.top__card { width: 100%; display: grid; gap: 8px; justify-items: start; padding: 16px; border-radius: 16px; background: var(--surface-2); text-align: left; }
.top__plate { margin-bottom: 4px; }
.top__plate .plate { --pw: 168px; }
.top__plate .plate--moto { --pw: 116px; }
.top__title { font-family: var(--display); font-size: 22px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; font-variation-settings: "SHRP" 60; text-wrap: balance; }
.top__hook { font-size: 15px; line-height: 1.45; }
.top__meta { display: flex; flex-wrap: wrap; column-gap: 12px; font-size: 13px; color: var(--ink-2); }
.top__when { color: var(--ink); font-weight: 600; }
.dgroup { margin-top: 8px; }
.dgroup__title { position: sticky; top: var(--fbar-h); z-index: 2; margin: 0; padding: 12px 0 4px; background: var(--surface); font-size: 15px; font-weight: 700; letter-spacing: -.005em; }
.emptybox { margin: 16px 0 8px; padding: 24px 16px; border-radius: 16px; background: var(--surface-2); text-align: center; }
.emptybox__title { margin: 0; font-family: var(--display); font-size: 20px; line-height: 1.25; font-weight: 400; letter-spacing: -.01em; }
.emptybox .pillbtn { margin-top: 12px; background: var(--surface); }
.lfoot { margin: 24px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); display: grid; justify-items: start; gap: 0; font-size: 14px; color: var(--ink-2); }
.lfoot__q { margin: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; }
.lfoot__a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule-2); }
.lfoot__a .ic { width: 18px; height: 18px; }

.pillbtn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
  border-radius: 18px; background: var(--surface-2); color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.pillbtn::after { content: ""; position: absolute; inset: -4px -2px; }
.pillbtn .ic { width: 18px; height: 18px; }
.pillbtn.is-on { background: var(--ink); color: var(--surface); }
.iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ink); }
.iconbtn:disabled { opacity: .3; }

/* rows */
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  width: 100%; min-height: 60px; display: grid; grid-template-columns: 78px minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 8px 0; text-align: left; border-bottom: 1px solid var(--rule); border-radius: 0;
}
.rows > li:last-child > .row, .rows > li:last-child { border-bottom: 0; }
.row:active { background: var(--surface-2); }
.row__txt { min-width: 0; }
.row__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.row__meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }
.row__when { margin-right: 8px; color: var(--ink); font-weight: 600; }
.row__rec { display: block; margin-top: 1px; font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.row__dist { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row__fav { width: 18px; height: 18px; color: var(--ink); }
.row--past { opacity: .6; }
.row .plate { justify-self: center; }
.schip { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; font-size: 11.5px; line-height: 18px; font-weight: 700; vertical-align: 1px; color: var(--ink-2); box-shadow: inset 0 0 0 1.2px var(--ink-3); }
.sub { margin: 16px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.empty { margin: 16px 0; color: var(--ink-2); font-size: 15px; }

/* ---------- plates (variant M's component) ---------- */
.plate { --pw: 78px; --ratio: 2.27; display: block; container-type: inline-size; width: var(--pw); aspect-ratio: var(--ratio); flex: none; }
.plate--moto { --pw: 54px; --ratio: 1.41; }
.plate--lg { --pw: 220px; }
.plate--lg.plate--moto { --pw: 150px; }
.plate__face {
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--plate); color: var(--plate-ink); border-radius: 6.5cqw;
  box-shadow: inset 0 0 0 2.4cqw var(--plate), inset 0 0 0 3.3cqw var(--plate-ink), 0 0 0 1px var(--rule-2), 0 4px 10px -6px rgba(18, 22, 26, .45);
  font-family: var(--display); font-weight: 760; font-variation-settings: "SHRP" 100; font-variant-numeric: tabular-nums; line-height: 1;
  overflow: hidden; white-space: nowrap; padding: 2.6cqw 4cqw;
}
[data-theme="night"] .plate__face { box-shadow: inset 0 0 0 2.4cqw var(--plate), inset 0 0 0 3.3cqw var(--plate-ink), 0 4px 12px -6px rgba(0, 0, 0, .8); }
.plate--red .plate__face { background: var(--red); box-shadow: inset 0 0 0 2.4cqw var(--red), inset 0 0 0 3.3cqw var(--plate-ink), 0 4px 10px -6px rgba(160, 20, 24, .6); }
.plate__top { font-size: calc(var(--k, 22) * 1cqw); line-height: 1.05; letter-spacing: -.015em; }
.plate__top i { font-style: normal; font-weight: 640; }
html:lang(th) .plate__top i, html:lang(th) .plate__m { font-family: var(--font-th); font-weight: 650; }
.plate__prov { font-family: var(--font-th); font-weight: 600; font-size: 11.5cqw; line-height: 1.3; margin-top: .6cqw; font-variation-settings: normal; }
.plate--moto .plate__face { border-radius: 9cqw; box-shadow: inset 0 0 0 3.4cqw var(--plate), inset 0 0 0 4.6cqw var(--plate-ink), 0 0 0 1px var(--rule-2), 0 4px 10px -6px rgba(18, 22, 26, .45); }
.plate--moto.plate--red .plate__face { box-shadow: inset 0 0 0 3.4cqw var(--red), inset 0 0 0 4.6cqw var(--plate-ink), 0 4px 10px -6px rgba(160, 20, 24, .6); }
.plate__m { font-size: 14cqw; line-height: 1.15; font-weight: 640; }
.plate--moto .plate__prov { font-size: 11cqw; margin: 0; }
.plate__d { font-size: calc(var(--k, 44) * 1cqw); line-height: 1; letter-spacing: -.02em; margin-top: .5cqw; }
.plate--moto:not(.plate--lg) .plate__prov { display: none; }
.plate--moto:not(.plate--lg) .plate__m { font-size: 21cqw; }
.plate--tbd .plate__face { color: color-mix(in srgb, var(--plate-ink) 78%, transparent); }
/* compact face: date only, big (list rows, small plates) */
.plate--c .plate__face { padding: 4cqw 7cqw; gap: 1cqw; }
.plate--c .plate__big { font-size: calc(var(--k, 24) * 1cqw); line-height: 1; letter-spacing: -.02em; max-width: 100%; }
.plate--c .plate__big i { font-style: normal; font-weight: 640; }
.plate--c .plate__small { font-size: 12.5cqw; line-height: 1.05; font-weight: 640; }
.plate--c.plate--moto .plate__face { padding: 6cqw 8cqw; }
.plate--c.plate--moto .plate__small { font-size: 17cqw; }
html:lang(th) .plate--c .plate__small, html:lang(th) .plate--c .plate__big i { font-family: var(--font-th); font-weight: 650; }
.cell[aria-disabled="true"] { opacity: .6; cursor: default; }
.fbplates { position: absolute; inset: 0; pointer-events: none; }
.fbplate { position: absolute; transform: translate(-50%, calc(-100% - 6px)); pointer-events: auto; }
.fbplate .plate { --pw: 58px; }
.fbplate .plate--moto { --pw: 40px; }
.fbplate__n { position: absolute; left: calc(100% - 6px); bottom: calc(100% - 8px); min-width: 24px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--surface); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1.5px var(--surface); }

/* ---------- event sheet ---------- */
.evsheet {
  position: absolute; z-index: 40; left: 0; right: 0; bottom: 0; top: 60%;
  display: flex; flex-direction: column; background: var(--surface);
  border-radius: 16px 16px 0 0; box-shadow: var(--shadow);
}
.grab { flex: none; height: 24px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.grab span { width: 36px; height: 5px; border-radius: 3px; background: var(--rule-2); }
.evsheet.is-in { animation: up .34s var(--ease-out) both; }
.evsheet__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px calc(24px + var(--bot)); user-select: text; -webkit-user-select: text; }
.ev__plate { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.ev__plate .plate { animation: stamp .45s var(--ease-out) both; }
.ev__status { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 14px; font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1.4px var(--ink-3); color: var(--ink-2); }
.ev__title { margin: 0; font-family: var(--display); font-size: 26px; line-height: 1.12; font-weight: 600; letter-spacing: -.02em; font-variation-settings: "SHRP" 60; text-wrap: balance; }
.ev__title:focus { outline: none; }
.ev__th { margin: 4px 0 0; font-family: var(--font-th); font-size: 16px; color: var(--ink-2); }
.ev__actions { display: flex; gap: 8px; margin: 16px 0 0; }
.act { flex: 1; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; background: var(--surface-2); font-size: 15px; font-weight: 600; }
.act.is-on { background: var(--ink); color: var(--surface); }
.ev__actions { flex-wrap: wrap; }
/* the organizer's own post: a full-width row under Сохранить / Поделиться */
.act--ann { flex-basis: 100%; color: var(--ink); text-decoration: none; }
.act--ann .ic { width: 18px; height: 18px; color: var(--ink-2); }
.ev__note--facts { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.ev__brief { margin-top: 16px; }
.ev__hook { margin: 0; font-size: 17px; line-height: 1.5; }
.ev__points { margin: 8px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.ev__points li { position: relative; padding-left: 16px; margin-top: 4px; }
.ev__points li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1.5px; background: var(--ink-3); }
.ev__note { margin: 8px 0 0; font-size: 13px; color: var(--ink-3); }
.facts { margin: 16px 0 0; display: grid; grid-template-columns: minmax(88px, auto) minmax(0, 1fr); border-top: 1px solid var(--rule); }
.facts dt, .facts dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-size: 13px; color: var(--ink-2); padding-right: 12px; }
.facts dd { font-size: 15px; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.facts dd small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.facts dd a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; min-height: 24px; }
.facts dd a .ic { width: 15px; height: 15px; color: var(--ink-3); }
.ev__more { margin-top: 16px; }

/* ---------- tab bar: Афиша, Мои, Ещё (hidden while an event is open) ---------- */
.tabs {
  position: absolute; z-index: 35; left: 0; right: 0; bottom: 0; height: calc(50px + var(--bot)); padding-bottom: var(--bot);
  display: flex; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 -1px 0 var(--rule);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-3); font-size: 11px; line-height: 1.2; font-weight: 600; text-decoration: none; }
.tab .ic { width: 24px; height: 24px; }
.tab[aria-current="page"] { color: var(--ink); }
.tab[aria-current="page"] .ic { stroke-width: 2.1; }
.is-event .tabs, .is-event .home, .is-event .stripbtn { visibility: hidden; }

/* ---------- Мои / Ещё ---------- */
.view {
  position: absolute; z-index: 25; left: 0; right: 0; top: var(--top); bottom: var(--tabh);
  overflow-y: auto; overscroll-behavior: contain; background: var(--ground); -webkit-overflow-scrolling: touch;
  animation: fade .2s ease-out both;
}
[data-view="my"] .home, [data-view="more"] .home, [data-view="my"] .stripbtn, [data-view="more"] .stripbtn { visibility: hidden; }
.view__in { max-width: 640px; margin: 0 auto; padding: 16px 16px calc(32px + var(--bot)); }
.view__title { margin: 8px 0 16px; font-family: var(--display); font-size: 30px; line-height: 1.05; font-weight: 300; letter-spacing: -.035em; font-variation-settings: "SHRP" 100; }
.view__title:focus { outline: none; }
.view .rows { background: var(--surface); border-radius: 12px; padding: 0 12px; }
.search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.search:focus-within { box-shadow: inset 0 0 0 1.6px var(--ink); }
.search .ic { color: var(--ink-2); }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; font-size: 16px; user-select: text; -webkit-user-select: text; }
.search input::placeholder { color: var(--ink-3); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search--bar { flex: 1; height: 40px; background: var(--surface-2); box-shadow: none; }
.seg { display: flex; gap: 2px; padding: 2px; margin-top: 8px; border-radius: 10px; background: var(--surface-3); }
.seg button { flex: 1; height: 36px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); position: relative; }
.seg button::after { content: ""; position: absolute; inset: -4px 0; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.seg__n { font-weight: 500; color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.pastgroup { margin-top: 16px; }
.pastgroup summary { padding: 12px 0; min-height: 44px; color: var(--ink-2); cursor: pointer; }
.my__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.my__count { margin: 0; font-size: 14px; color: var(--ink-2); }
.my__bar .pillbtn { background: var(--surface); }
.mrow { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--rule); }
.mrow .row { flex: 1; min-width: 0; border-bottom: 0; }
.mrow .iconbtn { color: var(--ink-2); }
.emptybox--my { display: grid; justify-items: center; gap: 8px; padding: 32px 20px; background: var(--surface); }
.emptybox__ic { width: 32px; height: 32px; color: var(--ink-3); }
.emptybox__text { margin: 0 0 8px; max-width: 30em; font-size: 15px; color: var(--ink-2); }

.group { margin-top: 28px; }
.group__title { margin: 0 0 8px; font-family: var(--display); font-size: 20px; font-weight: 400; letter-spacing: -.02em; font-variation-settings: "SHRP" 80; }
.group__lead { margin: -4px 0 8px; font-size: 14px; color: var(--ink-2); }
.seg--lang { margin-top: 0; }
.cells { list-style: none; margin: 0; padding: 0 12px; border-radius: 12px; background: var(--surface); }
.cell { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 8px 0; text-align: left; border-bottom: 1px solid var(--rule); text-decoration: none; }
.cells li:last-child .cell { border-bottom: 0; }
.cell[aria-disabled="true"] { cursor: default; }
.cell[aria-disabled="true"] .ic, .cell[aria-disabled="true"] b { opacity: .6; }
.cell__txt { flex: 1; min-width: 0; }
.cell__txt b { display: block; font-weight: 600; }
.cell__txt small { display: block; font-size: 13px; color: var(--ink-2); }
.cell__go { color: var(--ink-3); }
.cell--meet .plate { --pw: 64px; }
.cell__noplate { flex: none; width: 64px; height: 28px; border-radius: 5px; box-shadow: inset 0 0 0 1.4px var(--rule-2); }
.accs { padding: 0 12px; border-radius: 12px; background: var(--surface); }
.acc { border-bottom: 1px solid var(--rule); }
.acc:last-child { border-bottom: 0; }
.acc summary { display: flex; align-items: center; gap: 8px; min-height: 52px; font-weight: 600; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary span { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.acc__chev { color: var(--ink-3); transition: transform .2s var(--ease-out); }
.acc[open] .acc__chev { transform: rotate(180deg); }
.acc__lead { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); }
.defs, .gloss { margin: 0 0 8px; padding: 0; }
.def, .gloss__item { padding: 12px 0; border-top: 1px solid var(--rule); }
.def dt { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.def dt span { font-weight: 400; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.def dd, .gloss__item dd { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.gloss__item dt span { font-family: var(--font-th); font-size: 20px; font-weight: 600; }
.gloss__item dt small { margin-left: 8px; font-size: 13px; color: var(--ink-3); }
.rules { list-style: none; margin: 0 0 8px; padding: 0; }
.rules li { padding: 12px 0; border-top: 1px solid var(--rule); }
.rules b { font-weight: 600; }
.rules p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.venues { list-style: none; margin: 0; padding: 0 12px; border-radius: 12px; background: var(--surface); }
.venue { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--rule); }
.venue:last-child { border-bottom: 0; }
.venue__main { flex: 1; min-width: 0; min-height: 60px; display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 0; }
.venue__txt { min-width: 0; }
.venue__txt b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; line-height: 1.3; }
.venue__txt small { display: block; font-size: 13px; color: var(--ink-2); }
.venue__next { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.about { margin: 0 0 8px; font-size: 15px; line-height: 1.55; max-width: 36em; }
.privacy { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }

/* ---------- sheets over the list: filters, dates ---------- */
.modal { position: absolute; inset: 0; z-index: 70; }
.modal__scrim { position: absolute; inset: 0; background: rgba(10, 12, 14, .4); animation: fade .2s ease-out both; }
.modal__panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100% - var(--top) - 16px); display: flex; flex-direction: column;
  background: var(--surface); border-radius: 16px 16px 0 0; box-shadow: var(--shadow); padding-bottom: var(--bot); animation: up .3s var(--ease-out) both;
}
.modal__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 8px 4px 20px; }
.modal__title { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.modal__title:focus { outline: none; }
.modal__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 16px; overscroll-behavior: contain; }
.modal__sub { margin: 16px 0 8px; font-size: 15px; font-weight: 700; }
.modal__hint { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
.modal__foot { flex: none; display: flex; gap: 8px; padding: 12px 16px; box-shadow: 0 -1px 0 var(--rule); }
.modal__foot .cta:first-child { flex: 0 0 auto; padding: 0 18px; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 20px; background: var(--surface-2); font-size: 15px; font-weight: 600; }
.fchip span { font-size: 13px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fchip[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.fchip[aria-pressed="true"] span { color: inherit; opacity: .75; }
.fchip:disabled { opacity: .4; cursor: default; }
.pick__head { display: flex; align-items: center; justify-content: space-between; margin: 4px -10px 0; }
.pick__title { margin: 0; font-size: 16px; font-weight: 700; }
.pick__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.pick__wd { padding: 4px 0; text-align: center; font-size: 12px; color: var(--ink-3); }
.pick__d { position: relative; height: 44px; display: grid; place-items: center; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pick__d.past { color: var(--ink-3); opacity: .5; }
.pick__d.has { font-weight: 700; }
.pick__d i { position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ink-3); }
.pick__d.today { box-shadow: inset 0 -2px 0 var(--red); }
.pick__d.in { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.pick__d.start { border-radius: 12px 0 0 12px; }
.pick__d.end { border-radius: 0 12px 12px 0; }
.pick__d.start.end { border-radius: 12px; }
.pick__d.start, .pick__d.end { background: var(--ink); color: var(--surface); }
.pick__d.start i, .pick__d.end i { background: var(--surface); }
.pick__month { display: block; margin-top: 4px; text-decoration: underline; text-decoration-color: var(--rule-2); }
.pick__month[aria-pressed="true"] { color: var(--ink); }

.toast {
  position: absolute; z-index: 80; left: 50%; bottom: calc(var(--tabh) + 16px); transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 12px; background: var(--ink); color: var(--surface); font-size: 14px; box-shadow: var(--shadow-s);
  transition: opacity .2s, transform .3s var(--ease-out);
}
.is-event .toast { bottom: calc(24px + var(--bot)); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@keyframes up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes stamp { from { transform: translateY(6px) scale(1.03); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- wide (Telegram on a desktop, ≥ 720 px; the website ≥ 900 px): a left column, the map on the right ---------- */
.is-wide .home { top: var(--top); right: auto; width: var(--colw); pointer-events: auto; background: var(--surface); box-shadow: 1px 0 0 var(--rule); scrollbar-width: thin; }
.is-wide .home::-webkit-scrollbar { display: block; }
.is-wide .home__spacer, .is-wide .fbar__grip, .is-wide .stripbtn { display: none; }
.is-wide .fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; padding: 14px 16px 12px 20px; border-radius: 0; box-shadow: 0 1px 0 var(--rule); }
/* in the column the chips and the tools flow as one wrapping row: no sideways scrolling with a mouse */
.is-wide .fbar__dates, .is-wide .fbar__tools { display: contents; }
.is-wide .dchip { height: 34px; padding: 0 12px; font-size: 14px; }
.is-wide .dchip--cal { padding: 0 10px; }
.is-wide .fbar .pillbtn { height: 34px; padding: 0 11px; }
.is-wide .fbar__sp { flex: 1 0 0; min-width: 0; }
.is-wide .fbar .search--bar { flex: 1 1 220px; }
.is-wide .home__list { min-height: 0 !important; }
.is-wide .fallback { left: calc(var(--colw) + 32px); right: 32px; top: calc(var(--top) + 40px); bottom: calc(var(--tabh) + 40px); }
.is-wide .evsheet { right: auto; width: var(--colw); border-radius: 0 16px 0 0; }
.is-wide .modal__panel { left: 50%; right: auto; top: 50%; bottom: auto; width: min(480px, calc(100% - 48px)); max-height: calc(100% - 96px); transform: translate(-50%, -50%); border-radius: 18px; padding-bottom: 0; animation: fade .2s ease-out both; }

/* ---------- mock chrome (only with ?tg=mock or outside Telegram) ---------- */
.mock { position: fixed; inset: 0; z-index: 100; pointer-events: none; font-family: var(--ui); }
.mock__status { position: absolute; left: 0; right: 0; top: 0; height: 47px; display: flex; align-items: center; justify-content: space-between; padding: 8px 28px 0 36px; font-size: 15px; color: var(--ink); }
.mock__status span { font-size: 11px; letter-spacing: 1px; }
.mock__controls { position: absolute; left: 0; right: 0; top: 54px; height: 32px; display: flex; gap: 8px; padding: 0 16px; }
.mock__pill { pointer-events: auto; height: 32px; padding: 0 12px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mock__theme { margin-left: auto; }
.mock__menu { pointer-events: none; }
.mock__bar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--mock-bar-h, 0px); display: flex; gap: 8px; padding: 8px 12px calc(8px + 34px); background: var(--mock-chrome, var(--ground)); pointer-events: auto; border-top: 1px solid var(--rule); }
.mock__btn { flex: 1; height: 48px; border-radius: 12px; font-size: 16px; font-weight: 600; }
.mock__btn--main { background: var(--ink); color: var(--surface); }
.mock__btn--sec { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2); }
.mock__btn:disabled { opacity: .5; }
.mock__popup { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .35); pointer-events: auto; }
.mock__sheet { width: min(300px, calc(100% - 48px)); border-radius: 14px; background: var(--surface); padding: 16px 16px 8px; box-shadow: var(--shadow-s); }
.mock__title { margin: 0; font-weight: 700; text-align: center; }
.mock__msg { margin: 4px 0 12px; font-size: 14px; color: var(--ink-2); text-align: center; }
.mock__pbtn { display: block; width: 100%; min-height: 44px; border-top: 1px solid var(--rule); color: #2B7FD9; font-size: 16px; font-weight: 500; }
.mock__pbtn.is-cancel { font-weight: 700; }

/* ======================================================================
   Website (a normal browser: no Telegram, no ?tg=mock). Our own slim top bar stands in for
   Telegram's header; Back, the two bottom buttons and links become ordinary page controls.
   ====================================================================== */
.webbar, .webback-bar, .og { display: none; }
.tg-web .app { height: 100%; height: 100dvh; }
.tg-web .webbar {
  position: absolute; z-index: 50; left: 0; right: 0; top: 0; height: calc(52px + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  background: var(--surface); box-shadow: 0 1px 0 var(--rule);
}
.webbar__brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; border-radius: 8px; text-decoration: none; }
.webbar__name { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; font-variation-settings: "SHRP" 60; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the brand mark: a red plate with a black rim and two embossed bars */
.brand__plate {
  flex: none; display: grid; place-items: center; width: 34px; height: 20px; border-radius: 4px;
  background: var(--red); box-shadow: inset 0 0 0 1.6px var(--red), inset 0 0 0 2.8px var(--plate-ink);
}
.brand__plate span {
  width: 20px; height: 9px;
  background: linear-gradient(var(--plate-ink), var(--plate-ink)) top center / 20px 3.4px no-repeat,
              linear-gradient(var(--plate-ink), var(--plate-ink)) bottom center / 12px 2.2px no-repeat;
}
.webbar__tools { display: flex; align-items: center; gap: 2px; flex: none; }
.seg--mini { margin: 0 6px 0 0; }
.seg--mini button { flex: none; min-width: 40px; height: 32px; padding: 0 8px; font-size: 13px; }
.webbar__tg {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; margin-left: 4px; padding: 0 14px 0 12px; border-radius: 10px;
  background: var(--ink); color: var(--surface); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.webbar__tg .ic { width: 18px; height: 18px; }
.webbar__tg-short { display: none; }
@media (max-width: 1199px) { .webbar__tg-long { display: none; } .webbar__tg-short { display: inline; } }
@media (max-width: 599px) { .webbar__lang { display: none; } }
@media (max-width: 359px) { .webbar__name { font-size: 15px; } .webbar__tg { padding: 0 10px; } }

/* Back inside the event sheet */
.tg-web .webback-bar { display: flex; flex: none; }
.webback {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; max-width: 100%; padding: 0 12px 0 6px; border-radius: 10px;
  color: var(--ink-2); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden;
}
.webback span { overflow: hidden; text-overflow: ellipsis; }
.webback .ic { width: 18px; height: 18px; }
/* phone: the back control shares the row with the drag handle */
.tg-web:not(.is-wide) .evsheet .grab { height: 44px; }
.tg-web:not(.is-wide) .evsheet .webback-bar { position: absolute; z-index: 1; left: 8px; top: 4px; max-width: calc(50% - 32px); }
.tg-web.is-wide .evsheet .grab { display: none; }
.tg-web.is-wide .evsheet .webback-bar { padding: 12px 14px 4px; }

/* the two Telegram bottom buttons, drawn by the page */
.evsheet__cta { flex: none; display: flex; gap: 8px; padding: 12px 16px calc(12px + var(--bot)); background: var(--surface); box-shadow: 0 -1px 0 var(--rule); }
.cta {
  flex: 1; min-width: 0; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; background: var(--surface-2); color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.cta--primary { background: var(--ink); color: var(--surface); }
.cta--inline { flex: none; padding: 0 22px; }
.cta:disabled { opacity: .45; cursor: default; }
.tg-web .evsheet__body { padding-bottom: 24px; }

/* the in-page chooser (calendar) */
.webpop { position: fixed; inset: 0; z-index: 100; pointer-events: none; font-family: var(--ui); }
.webpop .mock__popup { background: rgba(10, 12, 14, .42); }
.webpop .mock__sheet { width: min(340px, calc(100% - 32px)); padding: 20px 16px 8px; border-radius: 16px; }
.webpop .mock__title { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.webpop .mock__pbtn { display: flex; align-items: center; justify-content: center; min-height: 48px; color: var(--ink); font-weight: 600; text-decoration: none; }
.webpop .mock__pbtn.is-cancel { color: var(--ink-2); font-weight: 500; }

/* ---------- website, desktop (≥ 900 px): top bar with the sections, a left column, the stage on the right ---------- */
.is-desk .webbar { height: 60px; padding: 0 16px 0 24px; gap: 24px; }
.is-desk .webbar .tabs { position: static; flex: 1; justify-content: center; align-self: stretch; height: auto; padding: 0; gap: 4px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.is-desk .webbar .tab { position: relative; flex: none; flex-direction: row; gap: 8px; padding: 0 16px; font-size: 15px; color: var(--ink-2); }
.is-desk .webbar .tab .ic { display: none; }
.is-desk .webbar .tab[aria-current="page"] { color: var(--ink); }
.is-desk .webbar .tab[aria-current="page"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--red); }
.is-desk.is-event .tabs { visibility: visible; }
.is-desk .lhead__title { font-size: 32px; }
.is-desk .home__list { padding: 0 20px 32px; }
.is-desk .evsheet__body { padding: 4px 28px 32px; }
.is-desk .evsheet__cta { padding: 16px 24px; }
.is-desk .view { bottom: 0; }
.is-desk .view__in { max-width: 1160px; padding: 40px 40px 64px; }
.is-desk .view__in--my { max-width: 760px; }
.is-desk .view__title { font-size: 40px; margin: 0 0 24px; }
.is-desk .view__in--more { columns: 2; column-gap: 48px; }
.is-desk .view__in--more > .view__title { column-span: all; }
.is-desk .view__in--more > .group { break-inside: avoid; margin: 0 0 36px; }

@media (hover: hover) and (pointer: fine) {
  .row:hover, .cell:hover, .venue__main:hover, .top__card:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
  .top__card:hover { background: color-mix(in srgb, var(--surface-3) 70%, var(--surface-2)); }
  .view .row:hover, .cells .cell:hover { border-radius: 8px; }
  .dchip:not([aria-pressed="true"]):hover, .fchip:not([aria-pressed="true"]):not(:disabled):hover { background: var(--surface-3); }
  .pillbtn:not(.is-on):hover, .seg button:not([aria-pressed="true"]):hover, .tab:not([aria-current="page"]):hover { color: var(--ink); }
  .webback:hover, .iconbtn:not(:disabled):hover, .act:hover, .cta:not(.cta--primary):not(:disabled):hover { background: var(--surface-2); color: var(--ink); }
  .webbar__tg:hover, .cta--primary:not(:disabled):hover { background: color-mix(in srgb, var(--ink) 86%, var(--surface)); }
  .webpop .mock__pbtn:hover, .pick__d:not(.start):not(.end):not(.past):hover { background: var(--surface-2); }
  .lfoot__a:hover, .pick__month:hover { text-decoration-color: currentColor; }
}

/* ---------- ?og=1: the 1200×630 share preview ---------- */
.og-shot .webbar, .og-shot .tabs, .og-shot .home, .og-shot .stripbtn, .og-shot .toast, .og-shot .webpop { display: none !important; }
.og-shot .og {
  position: absolute; z-index: 45; left: 72px; top: 0; bottom: 0; width: 40%;
  display: flex; flex-direction: column; justify-content: center; gap: 24px;
}
.og__brand { display: flex; align-items: center; gap: 14px; margin: 0; font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variation-settings: "SHRP" 60; }
.og__brand .brand__plate { transform: scale(1.5); transform-origin: left center; margin-right: 18px; }
.og__title { margin: 0; font-family: var(--display); font-size: 66px; line-height: .98; font-weight: 300; letter-spacing: -.045em; font-variation-settings: "SHRP" 100; text-wrap: balance; }
.og__lead { margin: 0; font-size: 24px; line-height: 1.35; color: var(--ink-2); text-wrap: pretty; }

/* search field and «Отмена» always share one row (desktop column included) */
.searchrow { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0; }
.searchrow .search--bar, .is-wide .fbar .searchrow .search--bar { flex: 1 1 auto; min-width: 0; }