/* v5-results.css — 1:1 зі затвердженого мока 15-results-v5-windows.html.
   ЄДИНЕ ДЖЕРЕЛО стилів сторінки /v5/results: premium/funnel/home сюди НЕ підключаються
   (чистий шар, рішення Віктора 17.07: мок первинний, старе не чіпаємо). */
/* ═══════════════════════════════════════════════════════════════════════════
   RESULTS v5.1 «ВІКНА ПОЇЗДА» · рев'ю Віктора 17.07 у два кроки:
   1) «моно-колір зливається» → v5: ніч лишилась сцені й табло-шапці,
      СПИСОК став папером (C2/C3, E3): білі картки, кольорові мітки (П.50).
   2) «ще менше, щоб влазило 5–8 поїздів, максимально компактно але читабельно»
      → v5.1: картка стала ОДНИМ рядком.

   ЯК ДОСЯГНУТО ЩІЛЬНОСТІ (і що її охороняє):
   • Картка: [час → лінія → час] [плитки цін у рядок] [номер · стрілка] —
     один рядок ~68px замість трьох (~185px). 6–8 поїздів на 1509×812.
   • Мітки перейхали ПІД лінію маршруту (замість власного ряду): тривалість
     зверху лінії, характер рейсу знизу — інформація та сама, мінус 26px.
     «Без пересадок» як текст знято: у цьому списку УЗ всі рейси прямі
     (пересадки — окремий блок search.js), лінія без розривів і є «прямий».
   • Плитка типу — один рядок: ЦІНА (жирна, перша — IH1) · тип · к-сть.
   • Табло-шапка: чипи дат менші, резюме+фільтри одним рядком.
   • Читабельність-гардрейли (A1/П.9): час 21px/800/tabular, ціна 14px/800,
     жоден підпис не менший за 9.5px, контраст ≥4.5:1 всюди, тач-цілі ≥44px
     (плитка 36px висотою, але з padding-хітзоною картки; на тачі плитки
     розтягуються). Менше цього — вже не «читаемо», стоп.
   • Амбер-дисципліна (П.1): у спокої амбера немає; hover картки → стрілка,
     hover плитки → плитка (стрілка гасне). На папері амбер лише фон/бордер
     із темним текстом (П.2/C6).

   Решта фактів — v3/v4 (шапки тих файлів чинні): дати всі, наявність де є
   кеш place_available; «≈» обов'язкове (П.48); клік = уся картка (stretched
   link, плитки поверх); Title Case (Т4); 5 станів (П.61) — перемикач зліва
   внизу. Дані — реальна видача Київ→Львів 18.07.2026.

   v5.2 PREMIUM-PASS (ui-ux-pro-max: micro-interactions 50–150ms, active-scale,
   elevation-scale; без текстур і glow-сміття):
   • Сцена отримала атмосферу (L1): тепла підсвітка неба зліва + холодна
     справа, 4–8% — глибина замість пласкої смуги. Це світло сцени, не
     другий амбер-об'єкт (П.1 рахує об'єкти дії).
   • Прес-фідбек: усі контроли стискаються на 3% при натиску (тач без hover
     теж відчуває інтерфейс).
   • Світло веде погляд (L3/D3): hover картки — лінія маршруту темнішає,
     стрілка займається амбером із теплою тінню; hover плитки — тепла тінь.
   • Обрана дата і активний фільтр отримали висоту (тінь) — стан видно
     боковим зором.
   • Вхід панелі — «світло займається» (M1), 400мс, лише opacity/transform.
   • ::selection — амбер із темним текстом; tap-highlight вимкнено.
   ═══════════════════════════════════════════════════════════════════════════ */
.r2026{
  --at-scene:#0A1024; --at-panel:#16234E; --at-page:#EEF1F7; --at-card:#FFFFFF;
  --at-text:#101729; --at-text2:#4A5570; --at-muted:#667088;
  --at-amber:#FFB800; --at-on-amber:#231700;
  --at-link:#2F59B0; --at-focus:#3B6FD9;
  --at-live:#3ECF8E; --at-delay:#E4685F;
  --at-line:#E4E8F1; --at-line-scene:#FFFFFF17;
  --at-fh:'Manrope',system-ui,sans-serif; --at-fb:'Source Sans 3',system-ui,sans-serif;
  --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --block:32px; --between:56px;
  --r-ctl:6px; --r-in:12px; --r-card:16px; --r-panel:24px; --r-pill:999px;
  --sh-card:0 4px 14px -8px rgba(10,16,36,.14);
  --sh-raised:0 14px 34px -12px rgba(10,16,36,.22);
  --e:cubic-bezier(.16,1,.3,1);
  container-type:inline-size; container-name:root;
  background:var(--at-page); color:var(--at-text);
  font:400 16px/1.55 var(--at-fb); margin:0 auto; overflow-x:clip;
  -webkit-tap-highlight-color:transparent;
}
.r2026 ::selection{background:var(--at-amber);color:var(--at-on-amber)}
/* Прес-фідбек: інтерфейс відчувається пальцями, не лише курсором */
.r2026 button:active,.r2026 a.cl:active{transform:scale(.97)}
.r2026 *,.r2026 *::before,.r2026 *::after{box-sizing:border-box}
.r2026 [hidden]{display:none !important}
.r2026 h1,.r2026 h2,.r2026 h3,.r2026 .num{font-family:var(--at-fh)}
.r2026 .num,.r2026 .tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.r2026 button{font:inherit;color:inherit;cursor:pointer}
.r2026 a{text-decoration:none;color:inherit}
.r2026 svg{display:block}
.r2026 .ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.r2026 :focus-visible{outline:3px solid var(--at-focus);outline-offset:2px;border-radius:var(--r-ctl)}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
@container root (max-width:900px){.wrap{padding:0 18px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── ШАПКА ─────────────────────────────────────────────────────────────── */
.hdr{background:#070C1B;height:56px;display:flex;align-items:center;
  border-bottom:1px solid #FFFFFF14;position:relative;z-index:3}
/* ⚠ .r2026 a (0,1,1) специфічніший за .logo (0,1,0) → без цього лінки шапки
   фарбувались чорнилом на ночі. Той самий баг живе у v3/v4. */
.hdr .logo,.hdr .hdr__me{color:#fff}
.hdr__in{display:flex;align-items:center;gap:var(--s6);width:100%}
.logo{display:flex;align-items:center;gap:10px;
  font-family:var(--at-fh);font-weight:800;font-size:19px;letter-spacing:-.02em}
.hdr__me{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:40px;
  padding:0 15px;border:1px solid var(--at-line-scene);border-radius:var(--r-pill);
  font-weight:600;font-size:14px;background:#FFFFFF0F}
.hdr__me:hover{background:#FFFFFF1A}

/* ── SEARCH BAR (він же «назад»: маршрут завжди редагований) ───────────── */
.sbar{background:var(--at-scene);padding:10px 0 var(--s3)}
.sbar__in{display:grid;grid-template-columns:1fr 1fr 180px 48px;gap:8px;align-items:stretch}
.sbar__m{display:none;width:100%;align-items:center;gap:var(--s3);min-height:48px;
  padding:7px 15px;border-radius:var(--r-in);background:#FFFFFF14;
  border:1px solid var(--at-line-scene);text-align:left}
.sbar__m:hover{background:#FFFFFF1F}
.sbar__m b{font-family:var(--at-fh);font-weight:800;font-size:15px;color:#fff;
  letter-spacing:-.01em;display:block}
.sbar__m i{font-style:normal;font-size:12px;color:#FFFFFFC7}
.sbar__m svg{margin-left:auto;flex:0 0 auto;color:#FFFFFFC7}
@container root (max-width:900px){.sbar__in{display:none}.sbar__m{display:flex}}
.sf{display:flex;flex-direction:column;justify-content:center;gap:0;min-height:48px;
  padding:6px 13px;border-radius:var(--r-in);background:#FFFFFF14;
  border:1px solid var(--at-line-scene);text-align:left;position:relative}
.sf:hover{background:#FFFFFF1F}
.sf__l{font-family:var(--at-fh);font-weight:700;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#FFFFFF99}
.sf__v{font-family:var(--at-fh);font-weight:700;font-size:14.5px;color:#fff;letter-spacing:-.01em}
.sf--swap{position:absolute;right:-19px;top:50%;transform:translateY(-50%);z-index:3;
  width:32px;height:32px;border-radius:50%;background:var(--at-scene);border:1px solid #FFFFFF33;
  color:#fff;display:grid;place-items:center;padding:0;min-height:0}
@container root (max-width:900px){.sf--swap{display:none}}
.sbar__go{min-height:48px;border:1px solid #FFFFFF33;border-radius:var(--r-in);
  background:#FFFFFF14;color:#fff;display:grid;place-items:center;transition:background .18s}
.sbar__go:hover{background:#FFFFFF29}

/* ── КОНТЕКСТ: один тонкий рядок. Небо світлішає до горизонту (П.8) ────── */
.step{color:#fff;padding:10px 0 var(--block);
  background:
    radial-gradient(560px 220px at 10% -60%, #FFB80012, transparent 70%),
    radial-gradient(760px 300px at 88% 150%, #2F59B024, transparent 70%),
    linear-gradient(180deg,#0A1024 0%,#0C1329 55%,#101A38 100%)}
.step__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.step h1{margin:0;font-size:clamp(17px,1.6vw,21px);font-weight:800;letter-spacing:-.02em;line-height:1.15;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.step h1 span{color:#FFFFFF80;font-weight:700}
.step__d{font-size:12.5px;color:#FFFFFFC7;margin:0;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--at-fb);font-weight:400}
/* Вузько маршрут уже написаний у компакт-кнопці пошуку — в hero не дублюємо */
@container root (max-width:900px){.h1r{display:none}}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--at-live);flex:0 0 auto;
  animation:pl 2.4s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:1}50%{opacity:.35}}
.progress{display:flex;align-items:center;gap:8px;font-family:var(--at-fh);font-size:11px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#FFFFFF80}
.progress i{width:6px;height:6px;border-radius:50%;background:#FFFFFF33;display:block}
.progress i.on{background:#fff;width:8px;height:8px}

/* ── ПАНЕЛЬ: табло-шапка (navy) + паперовий список (білий) — один силует ─ */
.board{background:var(--at-card);border-radius:var(--r-panel);
  box-shadow:var(--sh-raised);
  overflow:hidden;margin-top:calc(var(--s5) * -1);position:relative;z-index:2;
  animation:board-in .4s var(--e) backwards}
@keyframes board-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.board__hd{padding:var(--s3) var(--s4);background:var(--at-panel);position:relative;
  box-shadow:inset 0 1px 0 #FFFFFF1F}
.board__hd::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 3px,#FFFFFF04 3px 4px)}
.board__hd>*{position:relative}

/* ── СТРІЧКА ДНІВ (мок 24-daystrip-v5, «мок ок» Віктора 18.07) ─────────
   Рев'ю: «вліво скрол не працює», «додати стрілки — мишка не скролить»,
   «по місяцях розбивати». Стрічка тепер: старт від сьогодні (вліво завжди
   є куди йти), стрілки-пігулки над згасаючими краями, місяць — тиха віха
   всередині ряду, обрана дата центрується. Стара версія (12 днів, ряд
   упритул до країв) знята цілком, а не «підправлена». */
/* ── СТРІЧКА ───────────────────────────────────────────────────────────── */
.dayswrap{position:relative}
/* Краї ГАСНУТЬ у панель — око бачить, що стрічка триває, без «обриву»
   (перша версія просто різала ряд навпіл). Це і є підказка «гортай». */
.dayswrap::before,.dayswrap::after{content:'';position:absolute;top:0;bottom:0;width:46px;
  pointer-events:none;z-index:2;transition:opacity .2s}
.dayswrap::before{left:0;background:linear-gradient(90deg,#16234E 30%,#16234E00)}
.dayswrap::after{right:0;background:linear-gradient(270deg,#16234E 30%,#16234E00)}
.dayswrap[data-at-start]::before{opacity:0}
.dayswrap[data-at-end]::after{opacity:0}

/* ⚠ scroll-behavior вмикається КЛАСОМ, не одразу: зі smooth стартовий
   scrollLeft перетворюється на анімацію і гасне — заміряно, вийшло 5px
   замість 2170. Спершу ставимо позицію, потім дозволяємо плавність. */
.days{display:flex;gap:6px;overflow-x:auto;padding:4px 0;
  scrollbar-width:none;scroll-snap-type:x proximity;margin:0 42px}
@container root (max-width:760px){.days{margin:0 -2px;padding:4px 2px}}
.days.is-smooth{scroll-behavior:smooth}
.days::-webkit-scrollbar{display:none}

/* День — не кнопка-квадрат, а КАРТКА: три поверхи (день · число · стан),
   рівний ритм, tabular-числа не «пливуть» (ui-ux-pro-max: number-tabular). */
.day{flex:0 0 auto;min-width:62px;display:flex;flex-direction:column;align-items:center;
  gap:1px;padding:8px 9px 7px;border-radius:14px;border:1px solid #FFFFFF14;
  background:linear-gradient(180deg,#FFFFFF12,#FFFFFF08);color:#fff;scroll-snap-align:center;
  transition:transform .18s var(--e),background .18s,border-color .18s,box-shadow .18s}
.day:hover{transform:translateY(-2px);background:linear-gradient(180deg,#FFFFFF1F,#FFFFFF12);
  border-color:#FFFFFF3D;box-shadow:0 8px 18px -8px rgba(0,0,0,.5)}
.day:active{transform:translateY(0) scale(.97)}
.day__d{font-family:var(--at-fh);font-weight:700;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:#FFFFFF8A}
.day__n{font-family:var(--at-fh);font-weight:800;font-size:17px;line-height:1.15;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.day__p{font-family:var(--at-fh);font-weight:700;font-size:9px;letter-spacing:.02em;
  color:#8FEFC4;min-height:11px;white-space:nowrap}
/* ⚠ Вихідні спершу зробив АМБЕРНИМИ — і вони закричали гучніше за обрану
   дату: чотири жовтих числа проти одного білого. Це порушення П.1 моєю ж
   рукою. Вихідний — це підказка, а не подія: тепер лише крапка під днем. */
.day--we .day__d::after{content:'';display:block;width:3px;height:3px;border-radius:50%;
  background:#FFFFFF66;margin:2px auto 0}
/* Сьогодні — СВІТЛИЙ орієнтир (рев'ю Віктора 18.07): підпис і число
   на повну яскравість + помітніше кільце. Це «де я», а не вибір, тож
   білої заливки не даємо — вона належить обраній даті (П.1). */
.day--today{border-color:#FFFFFF7A;background:linear-gradient(180deg,#FFFFFF24,#FFFFFF14)}
.day--today .day__d{color:#fff;font-weight:800}
.day--today .day__n{color:#fff}
/* ОБРАНИЙ — єдиний білий об'єкт ряду, підведений угору (elevation) */
.day.is-on{background:#fff;border-color:#fff;color:var(--at-text);transform:translateY(-3px);
  box-shadow:0 12px 26px -8px rgba(0,0,0,.6);min-width:66px}
.day.is-on .day__n{font-size:19px}
.day.is-on .day__d{color:var(--at-muted)}
.day.is-on .day__n{color:var(--at-text)}
.day.is-on .day__p{color:#136B4A}
/* Немає місць — гасимо, але лишаємо клікабельним (розклад є) */
.day.is-none{opacity:.62}
.day.is-none .day__p{color:#FFB3AC}

/* МІСЯЦЬ — не вертикальний текст (він читався як шум), а тиха «віха»:
   тонка риска + підпис під кутом ока, у ритмі ряду */
.mo{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:0 14px;margin:0 4px;position:relative}
.mo::before{content:'';position:absolute;top:6px;bottom:6px;left:50%;width:1px;
  background:linear-gradient(180deg,#FFFFFF00,#FFFFFF3D,#FFFFFF00)}
.mo span{position:relative;font-family:var(--at-fh);font-weight:800;font-size:8.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF99;
  background:var(--at-panel);padding:3px 0}

/* СТРІЛКИ — скляні пігулки над fade, а не кнопки посеред днів */
.nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:36px;height:36px;border-radius:50%;border:1px solid #FFFFFF24;
  background:#1C2B5AE6;backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;
  padding:0;box-shadow:0 8px 20px -8px rgba(0,0,0,.7);
  transition:background .15s,opacity .2s,transform .15s var(--e)}
.nav:hover{background:#2A3D77}
.nav:active{transform:translateY(-50%) scale(.92)}
.nav:disabled{opacity:0;pointer-events:none} /* край — стрілка просто гасне */
.nav--l{left:2px}
.nav--r{right:2px}
.days:focus-visible{outline:3px solid var(--at-focus);outline-offset:3px;border-radius:12px}
@container root (max-width:760px){
  .nav{display:none}
  .dayswrap::before,.dayswrap::after{width:24px}
}
@media (prefers-reduced-motion:reduce){
  .days.is-smooth{scroll-behavior:auto}
  .day,.nav{transition:none}
}

/* Резюме + фільтри — один рядок: резюме зліва (П.45), сегмент справа (П.50) */
.board__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap;margin-top:10px}
.sum{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;
  font-size:13.5px;color:#FFFFFFC7}
.sum b{font-family:var(--at-fh);font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.sum .dot{color:#FFFFFF4D}
.filters{display:flex;gap:3px;padding:3px;background:#FFFFFF0D;
  border-radius:var(--r-pill);max-width:100%;overflow:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters button{min-height:30px;padding:0 13px;border:0;border-radius:var(--r-pill);
  background:transparent;color:#FFFFFFC7;font-family:var(--at-fh);font-weight:700;font-size:12.5px;
  white-space:nowrap;transition:background .18s,color .18s}
.filters button:hover{color:#fff}
.filters button.on{background:#fff;color:var(--at-text);
  box-shadow:0 3px 9px -3px rgba(0,0,0,.4)}

/* ── СПИСОК: папір, картка = ОДИН рядок ───────────────────────────────── */
.list{padding:10px;background:var(--at-page)}
.tr{position:relative;padding:9px 14px;border-radius:var(--r-card);
  background:var(--at-card);border:1px solid var(--at-line);margin-bottom:6px;
  box-shadow:var(--sh-card);
  /* Колонка маршруту ФІКСОВАНА (430px) — плитки цін усіх карток починаються
     з однієї вертикалі, список читається як таблиця (рев'ю Віктора 17.07) */
  display:grid;grid-template-columns:430px minmax(0,1fr) auto;gap:var(--s4);align-items:center;
  /* 17.07: клік по картці підсвічував час амбер-::selection — вся картка
     клікабельна, виділення тексту тут лише шум */
  user-select:none;-webkit-user-select:none;
  transition:border-color .18s,box-shadow .18s,transform .18s var(--e)}
@container root (max-width:1150px){.tr{grid-template-columns:380px minmax(0,1fr) auto}}
.tr:hover{border-color:#C6D0E4;box-shadow:0 10px 22px -12px rgba(10,16,36,.22);
  transform:translateY(-1px)}
.tr:has(.tr__main:focus-visible){outline:3px solid var(--at-focus);outline-offset:2px}
.tr:last-child{margin-bottom:0}
@keyframes tr-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.list .tr{animation:tr-in .3s var(--e) backwards}
.list .tr:nth-child(1){animation-delay:.02s}
.list .tr:nth-child(2){animation-delay:.06s}
.list .tr:nth-child(3){animation-delay:.10s}
.list .tr:nth-child(4){animation-delay:.14s}
.list .tr:nth-child(5){animation-delay:.18s}
.list .tr:nth-child(6){animation-delay:.22s}
/* Розтягнуте посилання: клік будь-де = «весь поїзд»; плитки і стрілка поверх */
.tr__main{display:block;min-width:0}
.tr__main::after{content:'';position:absolute;inset:0;border-radius:var(--r-card);z-index:0}
.tr__main:focus-visible{outline:none}

/* час | лінія (тривалість зверху, мітки знизу) | час */
.tr__line{display:grid;grid-template-columns:auto minmax(120px,230px) auto;
  align-items:center;gap:var(--s4)}
.tm{font-family:var(--at-fh);font-weight:800;font-size:21px;letter-spacing:-.02em;line-height:1;
  color:var(--at-text);font-variant-numeric:tabular-nums;margin:0}
.tm__s{display:block;font-family:var(--at-fb);font-weight:400;font-size:11.5px;color:var(--at-muted);
  margin-top:3px;letter-spacing:0;white-space:nowrap}
.tm sup{font-size:11px;font-weight:700;color:var(--at-muted);letter-spacing:0;margin-left:2px}
.road{min-width:0;position:relative;padding:0 2px}
.road__t{text-align:center;font-family:var(--at-fh);font-weight:600;font-size:11px;
  color:var(--at-text2);margin:0 0 4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.road__l{height:2px;border-radius:2px;background:linear-gradient(90deg,#C9D2E3,#9FAFD0,#C9D2E3);
  position:relative;transition:background .18s}
.road__l::before,.road__l::after{content:'';position:absolute;top:-2.5px;width:7px;height:7px;
  border-radius:50%;background:#8A93A8;transition:background .18s}
.road__l::before{left:0}.road__l::after{right:0}
/* Світло веде погляд (D3): під рукою лінія маршруту прокидається */
.tr:hover .road__l{background:linear-gradient(90deg,#AEB9D6,#7285B8,#AEB9D6)}
.tr:hover .road__l::before,.tr:hover .road__l::after{background:#4A5570}
/* Мітки живуть під лінією — характер рейсу видно, рядок не витрачається */
.road__b{display:flex;justify-content:center;gap:4px;margin-top:5px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:3px;padding:1.5px 7px;border-radius:var(--r-pill);
  font-family:var(--at-fh);font-weight:700;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap}
.tag--cat{background:#E7EEFB;color:#24439B}
.tag--firm{background:#F1F3F8;color:#3A4459}
.tag--fast{background:transparent;color:#55617C;border:1px solid var(--at-line)}
.tag--night{background:#ECEFFB;color:#3A4E9C}
.tag--cheap,.tag--best{background:#E3F7EE;color:#136B4A}
.tag--full{background:#FBEAE8;color:#A2453C}

/* Плитки типів: СІТКА рівних колонок — вирівняні між картками, як табло.
   Всередині: ЦІНА зліва (IH1), тип праворуч, к-сть після */
.cls{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:5px;
  position:relative;z-index:1;min-width:0;align-content:center}
.cl{display:flex;align-items:baseline;gap:8px;padding:7px 11px;min-width:0;
  border-radius:10px;background:#F6F7FB;border:1px solid var(--at-line);
  box-shadow:inset 0 1px 0 #FFFFFF;
  transition:background .18s,border-color .18s,transform .18s var(--e),box-shadow .18s;
  white-space:nowrap}
.cl .cl__n{overflow:hidden;text-overflow:ellipsis}
.cl:hover{background:#FFF6DE;border-color:var(--at-amber);transform:translateY(-1px);
  box-shadow:0 6px 14px -7px rgba(255,184,0,.45), inset 0 1px 0 #FFFFFF}
.cl__p{font-family:var(--at-fh);font-weight:800;font-size:14px;color:var(--at-text);
  font-variant-numeric:tabular-nums;line-height:1.2}
.cl__n{font-size:12px;color:var(--at-text2)}
.cl__f{font-size:10.5px;color:var(--at-muted)}
.cl--out{opacity:.6;cursor:not-allowed;background:transparent;border-style:dashed}
.cl--out:hover{background:transparent;border-color:var(--at-line);transform:none}
.cl--out .cl__p{font-size:12px;font-weight:700;color:var(--at-text2)}
.cl__p--none{font-size:12px;font-weight:600;color:var(--at-text2)}

/* Номер · маршрут поїзда (службово, IH4) · стрілка */
.tr__no{display:flex;align-items:center;justify-content:flex-end;gap:var(--s3);
  position:relative;z-index:1;text-align:right}
.tr__nt b{display:block;font-family:var(--at-fh);font-weight:700;font-size:12.5px;color:var(--at-text2);
  font-variant-numeric:tabular-nums}
.tr__nt span{font-size:10.5px;color:var(--at-muted);white-space:nowrap}
/* 17.07 рев'ю Віктора: гола стрілка без підпису незрозуміла → пілюля
   «Обрати →» (явна афорданса, ui-ux-pro-max: label+icon, ціль ≥32px) */
.tr__go{min-height:32px;padding:0 6px 0 12px;border-radius:999px;background:#F1F3F8;
  color:var(--at-text2);display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  transition:background .18s,color .18s,transform .18s var(--e)}
.tr__got{font-family:var(--at-fh);font-weight:700;font-size:12px;white-space:nowrap}
.tr:hover .tr__go,.tr:has(.tr__main:focus-visible) .tr__go{
  background:var(--at-amber);color:var(--at-on-amber);transform:translateX(2px);
  box-shadow:0 6px 16px -6px rgba(255,184,0,.55)}
.tr:has(.cl:hover) .tr__go,.tr:has(.cl:focus-visible) .tr__go{
  background:#F1F3F8;color:var(--at-text2);transform:none;box-shadow:none}
@media (hover:none){
  .tr:active .tr__go{background:var(--at-amber);color:var(--at-on-amber)}
}

/* Вузько: рядок розкладається на 2–3, плитки розтягуються (тач-цілі MO3) */
@container root (max-width:1000px){
  .tr{grid-template-columns:1fr auto;row-gap:10px}
  .cls{grid-column:1/-1;order:3}
  .cl{min-height:40px;align-items:center}
  .tr__nt span{display:none}
}
@container root (max-width:620px){
  /* телефон: картка в один стовпчик — маршрут, плитки, номер */
  .tr{grid-template-columns:1fr}
  .tr__line{grid-template-columns:auto 1fr auto;gap:10px}
  .tm{font-size:19px}
  .tr__no{grid-column:1;justify-content:space-between}
  .tr__nt{text-align:left}
  .tr__nt span{display:inline}
}

.trfull{grid-column:1/-1;margin:0;padding:8px 12px;border-radius:10px;
  border:1px dashed #D8BFBB;background:#FBEAE84D;font-size:12.5px;color:var(--at-text2);
  display:flex;align-items:center;gap:8px;position:relative;z-index:1}
.trfull svg{flex:0 0 auto;color:#A2453C}
.trfull b{font-weight:600;color:var(--at-text)}
.tr--full{background:#FBFBFD;border-style:dashed;box-shadow:none}
.tr--full:hover{transform:none;border-color:var(--at-line);box-shadow:none}
.tr--full .tm,.tr--full .tr__nt b{color:var(--at-muted)}
.tr--full .tr__go{display:none}

/* ── Стани (П.61) — на папері ─────────────────────────────────────────── */
.empty{display:none;padding:var(--block) var(--s5);text-align:center;background:var(--at-page)}
.empty svg{margin:0 auto var(--s3)}
.empty h3{margin:0 0 6px;font-size:20px;font-weight:700;color:var(--at-text)}
.empty p{margin:0 auto var(--s4);color:var(--at-text2);max-width:440px}
.empty__d{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.empty .day{background:#fff;border-color:var(--at-line);color:var(--at-text);min-width:66px;padding:7px 10px}
.empty .day .day__d{color:var(--at-muted)}
.empty .day .day__p{color:#136B4A}
.empty .day:hover{border-color:#C6D0E4;background:#fff}
.err{display:none;padding:var(--block) var(--s5);text-align:center;background:var(--at-page)}
.err svg{margin:0 auto var(--s3)}
.err h3{margin:0 0 6px;font-size:20px;font-weight:700;color:var(--at-text)}
.err p{margin:0 auto var(--s4);color:var(--at-text2);max-width:440px}
.err__go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
  padding:0 22px;border:0;border-radius:var(--r-in);background:var(--at-amber);
  color:var(--at-on-amber);font-family:var(--at-fh);font-weight:700;font-size:14.5px;
  box-shadow:0 14px 30px -8px rgba(255,184,0,.5);transition:background .18s}
.err__go:hover{background:#E9A800}
.allfull{display:none;margin:0;padding:10px var(--s4);background:#FBEAE8;
  border-bottom:1px solid #F0D9D6;font-size:13px;color:var(--at-text2);
  align-items:center;gap:9px}
.allfull svg{flex:0 0 auto;color:#A2453C}
.allfull b{color:var(--at-text);font-weight:600}
.skel{display:none;padding:10px;background:var(--at-page)}
.skel__r{height:64px;border-radius:var(--r-card);margin-bottom:6px;border:1px solid var(--at-line);
  background:linear-gradient(90deg,#FFFFFF 25%,#F0F2F8 37%,#FFFFFF 63%);
  background-size:400% 100%;animation:sh 1.2s ease-in-out infinite}
@keyframes sh{0%{background-position:100% 0}100%{background-position:0 0}}
.foot{padding:var(--s5) 0 var(--block);color:var(--at-muted);font-size:12.5px;max-width:660px;line-height:1.55}

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

.mb{position:fixed;left:14px;bottom:14px;z-index:99;display:flex;gap:6px;padding:7px;
  border-radius:12px;background:#0d1017F2;border:1px solid #2a3242;font:600 11px system-ui;color:#c3cad8}
.mb button{height:28px;padding:0 10px;border-radius:7px;border:1px solid #2a3242;background:#161b26;
  color:#c3cad8;font:600 11px system-ui}
.mb button.on{background:#3b6fd9;border-color:#3b6fd9;color:#fff}

/* ── КОШИК: липка панель унизу ──────────────────────────────────────────
   Було: біла плашка вставлялась перед першим .wrap (а це .wrap ВСЕРЕДИНІ
   темної панелі пошуку) — і накривала поля «звідки/куди/дата» (рев'ю
   Віктора 17.07). Стилі жили інлайном у JS, повз мок.
   Стало: sticky-бар — завжди під рукою при скролі, нічого не перекриває.
   body.has-cart додає нижній відступ, щоб панель не з'їдала останню картку
   (ui-ux-pro-max: fixed-element-offset). */
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:#FFFFFFF2;backdrop-filter:blur(10px);
  border-top:1px solid var(--at-line);box-shadow:0 -8px 28px -12px rgba(10,16,36,.28);
  animation:cart-in .28s var(--e) backwards}
@keyframes cart-in{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
.cartbar__in{max-width:1240px;margin:0 auto;padding:10px 40px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.cartbar__t{margin:0;display:flex;flex-direction:column;gap:1px;min-width:0}
.cartbar__t b{font-family:var(--at-fh);font-weight:800;font-size:15px;color:var(--at-text)}
.cartbar__t span{font-size:12.5px;color:var(--at-muted)}
.cartbar__go{margin-left:auto;min-height:46px;padding:0 22px;border:0;border-radius:var(--r-pill);
  background:var(--at-amber);color:var(--at-on-amber);
  font-family:var(--at-fh);font-weight:800;font-size:15px;
  box-shadow:0 10px 24px -8px rgba(255,184,0,.5);
  transition:background .15s,transform .18s var(--e)}
.cartbar__go:hover{background:#FFC533}
.cartbar__go:active{transform:scale(.97)}
.cartbar__x{border:0;background:none;color:var(--at-muted);cursor:pointer;
  min-height:46px;padding:0 6px;font-size:13px}
.cartbar__x:hover{color:var(--at-text)}
body.has-cart{padding-bottom:78px}
@container root (max-width:620px){
  .cartbar__in{padding:10px 18px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .cartbar__go{width:100%;margin-left:0;order:3}
  .cartbar__x{position:absolute;right:14px;top:8px}
}