/* ═══════════════════════════════════════════════════════════════════════════
   RESULTS v3 «ПРЯМИЙ» · кадр B «Табло вибору»
   Натягнуто з мока redesign-2026/12-results-v3-direct.html на живу розмітку
   component/purchase/desktop/list.phtml.

   ЧОМУ ОКРЕМИЙ ФАЙЛ, а не правка premium.css:
   premium.css:676-731 — це попереднє покоління видачі (світла картка, макет
   «Результати (2a)»). Міна №1 репозиторію каже: «заміняй правило, не дописуй
   нижче» — але тут заміна означала б переписати 55 рядків чужого файла, який
   і так має зійти до нуля (layout.phtml:63-64). Натомість новий файл
   підключається ПІСЛЯ premium.css і перебиває його порядком, без !important.
   Коли premium.css помре — цей файл лишиться цілим.

   ЧОГО ТУТ НЕМА І ЧОМУ:
   • Бланка справа немає. Ціна на цьому екрані не існує як факт: вона
     прив'язана до фізичного вагона (WagonFull::$cost:92), а не до типу.
     У списку живе лише MIN по типу з історичного кешу ticket_prices
     (Uz.php:2063-2072). Бланк без суми — порожня рамка.
   • Кнопки «Вибрати» немає. Рішення Віктора 16.07: жодного підтвердження.
     Подивився очима → тицьнув. Кнопка сховна, а не вирізана з list.phtml:
     на ній висить ctl-search-choice-btn — контракт із controller/purchase.js:19.
   • Стрічки дат із цінами немає: place_available тримає лише {'total': N}.

   КОНТРАКТ ІЗ JS (не чіпати):
   • search.js:282 перезаписує клас рядка на 'search-item ctl-search-item-train'
     — будь-який клас, доданий у шаблон рядка, стирається. Стилі чіпляємо
     лише за ті класи, які ставить JS, або за дітей рядка.
   • search.js:207-215 ставить плиткам display:flex інлайном — ми задаємо
     лише напрямок, не сам display.
   • html.at-searching — контракт resultsUx.js.
   ═══════════════════════════════════════════════════════════════════════════ */

#results{
  --r-scene:#0A1024; --r-panel:#16234E;
  --r-amber:#FFB800; --r-on-amber:#231700;
  --r-line:#FFFFFF17;
  --r-live:#3ECF8E; --r-warn:#FFC9C4;
  --r-fh:'Manrope',system-ui,-apple-system,sans-serif;
  --r-e:cubic-bezier(.16,1,.3,1);
}

/* ── ТАБЛО. Панель — navy, не ink: #0A1024 vs #16234E, різницю видно.
      Раніше верх екрана злипався в одну темну масу. Конституція §3 (C2)
      дає готову пару — беремо саме її. ──────────────────────────────── */
#results .ctl-search-results{
  background:var(--r-panel);
  border-radius:24px;
  box-shadow:0 14px 34px -12px rgba(10,16,36,.22), inset 0 1px 0 #FFFFFF1F;
  padding:16px;
  overflow:hidden;
}

/* ── КАРТКА: клікається ЦІЛКОМ ─────────────────────────────────────────
      Ранг: сцена → табло → картка (CH1). Панель світліша за сцену, тому
      картки мусили піднятись разом із нею, інакше вони тонуть у ній. */
#results .search-item{
  position:relative;
  padding:20px;
  border-radius:16px;
  background:#FFFFFF0F;
  border:1px solid #FFFFFF24;
  box-shadow:none;
  margin-bottom:10px;
  height:auto;
  cursor:pointer;
  transition:background .18s, border-color .18s;
}
/* Уся картка — одна ціль. Hover каже це без слів (D5).
   transform:translateY(-2px) з premium.css:673 прибрано свідомо: картка не
   «підстрибує», вона світлішає. Стрибок на 6 картках поспіль — це шум. */
#results .search-item:hover{
  background:#FFFFFF1C;
  border-color:#FFFFFF40;
  box-shadow:none;
  transform:none;
}

/* ── ВЕРХНІЙ РЯД ───────────────────────────────────────────────────────
      Без бланка список отримав усю ширину — і рядок ледь не розповз:
      лінія маршруту тягнулась, око бігало між часами через пів екрана.
      Тому grid із розпіркою: час | маршрут ≤380 | час | ПОВІТРЯ | номер.
      Порожнє праворуч — це пауза перону (D4/П.25), а не «тут щось
      загубилось». */
#results .ti-main{
  display:grid;
  grid-template-columns:auto minmax(90px,380px) auto 1fr auto;
  align-items:center;
  gap:16px;
  flex-wrap:nowrap;
}
#results .ti-side{width:auto;text-align:left;flex:none}
#results .info-schedule-departure,
#results .info-schedule-arrival{
  font-family:var(--r-fh);font-weight:800;font-size:32px;letter-spacing:-.03em;
  line-height:1;color:#fff;
}
#results .info-route-departure,
#results .info-route-arrival{
  font-weight:400;font-size:13px;color:#FFFFFFC7;margin-top:6px;letter-spacing:0;
}

#results .ti-mid{flex:none;min-width:0}
#results .info-schedule-duration{font-size:12.5px;color:#FFFFFFC7;margin-bottom:6px}
#results .ti-line{height:auto}
#results .search-item-info-line{
  height:2px;border-top:0;border-radius:2px;
  background:linear-gradient(90deg,#FFFFFF33,#FFFFFF66,#FFFFFF33);
}
#results .ti-dot{width:8px;height:8px;background:#FFFFFF99;box-shadow:none;border:0}
#results .ti-dot--from{background:#FFFFFF99;box-shadow:none}
#results .ti-dot--to{background:#FFFFFF99;border:0}
/* Пігулка типу поїзда на темному: біла рамка замість синьої заливки —
   амберу в спокої в кадрі немає взагалі (див. нижче про .ti-go) */
#results .ti-pill{
  background:#FFFFFF14;border:1px solid #FFFFFF29;box-shadow:none;
}
#results .ti-pill__ico{background:#FFFFFF29}
#results .ti-pill .item-train-type{color:#fff}
#results .ti-sub{font-size:12px;color:#FFFFFFA8;margin-top:6px}

/* ── НОМЕР + СТРІЛКА ──────────────────────────────────────────────────── */
#results .ti-right{
  grid-column:5;width:auto;
  flex-direction:row;align-items:center;gap:16px;
  text-align:right;
}
/* .ti-nt — номер і маршрут колонкою, стрілка поруч. Без цієї обгортки
   premium.css:695 (.ti-right{flex-direction:column}) ставив би стрілку
   під номер. */
#results .ti-nt{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
#results .ti-right .train-number{font-size:14px;color:#FFFFFFC7;font-weight:700}
#results .ti-route{font-size:12px;color:#FFFFFFA8;font-weight:400;text-decoration:none}
#results .ti-route:hover{color:#fff;text-decoration:none}

/* Стрілка «увійти» — читається як «уся картка веде далі».
   У спокої табло темне: амберу в кадрі немає взагалі, і це навмисно —
   тут людина не «діє», а обирає. Світло займається під рукою (L2, M1):
   рівно один амбер, там, де курсор. */
#results .ti-go{
  width:36px;height:36px;border-radius:50%;background:#FFFFFF14;color:#fff;
  display:grid;place-items:center;flex:0 0 auto;
  transition:background .18s,color .18s,transform .18s var(--r-e);
}
#results .search-item:hover .ti-go{
  background:var(--r-amber);color:var(--r-on-amber);transform:translateX(2px);
}
/* …але коли рука вже на плитці типу — світиться плитка, а стрілка гасне.
   Інакше в кадрі два амбери (П.1/§30.5). */
#results .search-item:has(.search-item-price-item:hover) .ti-go{
  background:#FFFFFF14;color:#fff;transform:none;
}
/* На тачі hover не існує — сигнал дає натиск */
@media (hover:none){
  #results .search-item:active .ti-go{background:var(--r-amber);color:var(--r-on-amber)}
}

/* ── ПЛИТКИ ТИПІВ: кожна — свій вхід у той самий екран, але одразу в тип ─
      justify-content:flex-start ОБОВ'ЯЗКОВО: легасі style-desktop.css:407
      дає .search-item-price{justify-content:space-around} — плитки
      розлітаються по рядку. */
#results .search-item-price{
  display:flex;gap:8px;flex-wrap:wrap;flex-direction:row;
  justify-content:flex-start;align-items:stretch;
  margin-top:16px;padding-top:0;border-top:0;
  position:relative;z-index:1;
}
/* Плитка — ціль, а не підпис. Ціна крупніше назви (IH1): це те, за чим
   людина сюди прийшла.
   Легасі style-desktop.css:413-450, яке ОБОВ'ЯЗКОВО глушити:
     .search-item-price-item{justify-content:space-between}
     .type/.search-item-place/.price{flex-basis:33%} + свої justify-content
   Без цього діти плитки розповзаються, а не стоять колонкою. */
#results .search-item-price-item{
  flex:0 1 168px;
  flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;
  min-width:0;min-height:44px;padding:11px 13px;
  background:#FFFFFF14;border:1px solid #FFFFFF24;border-radius:12px;
  cursor:pointer;
  transition:background .18s,border-color .18s,transform .18s var(--r-e);
}
#results .search-item-price-item:hover{
  background:#FFB8001F;border-color:var(--r-amber);transform:translateY(-1px);
}
#results .search-item-price-item .type,
#results .search-item-price-item .search-item-place,
#results .search-item-price-item .price{
  justify-content:flex-start;white-space:nowrap;width:auto;flex:0 0 auto;
}
/* Порядок у плитці: ціна вгорі, назва під нею, місця останні.
   У розмітці порядок інший (type → place → price) і міняти її не можна —
   list.phtml клонується JS-ом. Тому order. */
#results .search-item-price-item .price{
  order:1;margin-top:0;
  font-family:var(--r-fh);font-weight:800;font-size:17px;color:#fff;line-height:1.15;
}
#results .search-item-price-item:hover .price{color:#FFD36B}
#results .search-item-price-item .type{
  order:2;font-family:var(--r-fh);font-weight:400;font-size:12.5px;color:#FFFFFFC7;line-height:1.3;
}
/* gap, а не пробіл у розмітці: .search-item-place — flex-контейнер
   (легасі style-desktop.css:435), а flex схлопує пробіли між дітьми,
   тож «147 місць» рендерилось як «147місць». */
#results .search-item-price-item .search-item-place{
  order:3;gap:4px;font-size:11.5px;font-weight:400;color:#FFFFFFA8;
}

/* Плитка «Всього» — не ціль: у Scheme.filter() немає коду типу вагона для
   неї, клік не мав би куди вести. Лишається підписом. */
#results .search-item-price-item.ctl-placeTotal{
  background:transparent;border-style:dashed;border-color:var(--r-line);
  cursor:default;
}
#results .search-item-price-item.ctl-placeTotal:hover{
  background:transparent;border-color:var(--r-line);transform:none;
}
#results .search-item-price-item.ctl-placeTotal .price{color:#FFFFFFC7;font-size:13px;font-weight:700}
#results .search-item-price-item.ctl-placeTotal:hover .price{color:#FFFFFFC7}

/* ── КНОПКА «ВИБРАТИ» — СХОВАНА, НЕ ВИРІЗАНА ──────────────────────────
      Рішення Віктора: підтвердження зайве, клік по картці веде одразу.
      Але на кнопці висить ctl-search-choice-btn — контракт із
      controller/purchase.js:19. Вирізати її з list.phtml = чіпати грошовий
      шлях заради косметики. display:none дешевше і оборотніше.
      Клік по картці ловить новий resultsChoice.js. */
#results .search-item-choice{display:none}

/* ── ВУЗЬКО ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  /* Розпірка не потрібна — номер і стрілка переїжджають під маршрут */
  #results .ti-main{grid-template-columns:auto 1fr auto;row-gap:16px}
  #results .ti-right{grid-column:1/-1;justify-content:space-between;width:100%}
  #results .info-schedule-departure,
  #results .info-schedule-arrival{font-size:26px}
}
@media (max-width:620px){
  #results .ti-main{gap:12px}
  #results .search-item-price-item{flex:1 1 calc(50% - 4px)}
  #results .ctl-search-results{border-radius:16px;padding:10px}
  #results .search-item{padding:16px}
}

@media (prefers-reduced-motion:reduce){
  #results .search-item,
  #results .search-item-price-item,
  #results .ti-go{transition:none}
}