/* v5-board.css — табло затримок 1:1 із мока redesign-2026/21-board-v5.html
   (преміум-пас після рев'ю Віктора «6 з 10»: моношрифт табло, світіння
   лампи на затримці, stagger рядків, reduced-motion).
   Хром сюди не входить — його дає v5-chrome.css. */

/* ═══════════════════════════════════════════════════════════════════════════
   ТАБЛО ЗАТРИМОК v5 · 17.07.2026 («тут дизайн старий», Віктор)

   ЧОМУ ЦЯ СТОРІНКА ВАЖЛИВА: це ЄДИНЕ, чого нема в booking.uz — живі
   затримки всієї мережі з прогнозом і причиною. Це наш ексклюзив і
   найсильніший SEO-магніт. Тому кадр — «Табло вокзалу»: ніч, скан-лінії,
   моноширинні числа. Не таблиця в адмінці, а справжнє табло.

   ЩО ЗМІНИЛОСЬ ПРОТИ СТАРОЇ (перевірено наживо 17.07):
   • Стара: білий фон, сіра таблиця, «надійність прогнозу: середня» під
     кожним рядком дрібним сірим — шум, який ніхто не читає.
   • v5: табло на ночі. Затримка — головне число рядка (амбер/червоний за
     важкістю), прогноз прибуття поруч. Причина — окремою колонкою, але
     тихо: вона однакова у 90% рядків («вплив бойових дій») і не має
     кричати.
   • Надійність прогнозу переїхала в ІКОНКУ-крапку біля часу (tooltip),
     а не текст під маршрутом: інформація та сама, рядок коротший удвічі.
   • Пошук по номеру/станції лишається — але як фільтр табло, миттєвий.

   ДАНІ (реальні, DelayService::getAll): train, from, to, delayMin, delay,
   status, forecastDeparture, forecastArrival, reliability, cause,
   uzUpdatedAt. Нічого не вигадано: чого нема — того не малюємо (П.71).

   ДИСЦИПЛІНА: один амбер на кадр — це «оновлено щойно» пульс. Затримки
   несуть СВІЙ семантичний колір (не амбер): це стан світу, не наша дія.
   Колір завжди дубльований знаком (▲/△) — П.5.
   ═══════════════════════════════════════════════════════════════════════════ */
.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;
  /* Табло = моноширинні числа. Це не стилізація: колонки часу й затримок
     не «пливуть» при зміні цифр (ui-ux-pro-max: number-tabular). */
  --at-fm:'JetBrains Mono',ui-monospace,monospace;
  --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 *,.r2026 *::before,.r2026 *::after{box-sizing:border-box}
.r2026 h1,.r2026 h2,.r2026 h3{font-family:var(--at-fh)}
.r2026 .tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.r2026 button{font:inherit;color:inherit;cursor:pointer}
.r2026 button:active{transform:scale(.97)}
.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}

/* ── ХРОМ (на проді дає v5-chrome.css) ─────────────────────────────────── */

/* ── СЦЕНА ─────────────────────────────────────────────────────────────── */
.hero{color:#fff;padding:var(--block) 0 76px;
  background:
    radial-gradient(560px 220px at 8% -40%, #FFB80012, transparent 70%),
    radial-gradient(760px 300px at 92% 130%, #2F59B026, transparent 70%),
    linear-gradient(180deg,#0A1024 0%,#0C1329 55%,#101A38 100%)}
.hero h1{margin:0 0 6px;font-size:clamp(24px,3vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.06}
.hero p{margin:0;font-size:14.5px;color:#FFFFFFC7;max-width:620px}

/* ── ПАНЕЛЬ-ТАБЛО ──────────────────────────────────────────────────────── */
.board{background:var(--at-panel);border-radius:var(--r-panel);box-shadow:var(--sh-raised);
  overflow:hidden;color:#fff;position:relative;margin-top:-52px;
  animation:in .4s var(--e) backwards}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.board::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(180deg,transparent 0 3px,#FFFFFF05 3px 4px)}

.bhd{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s4) var(--s5);
  border-bottom:1px solid #FFFFFF14;position:relative;z-index:3}
.kpi{display:inline-flex;align-items:baseline;gap:7px;font-size:13px;color:#FFFFFFC7}
.kpi b{font-family:var(--at-fm);font-weight:700;font-size:18px;color:#fff;letter-spacing:-.03em;
  text-shadow:0 0 14px #FFFFFF26}
.kpi--sep{padding-left:var(--s3);border-left:1px solid #FFFFFF1F}
.live{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 11px;border-radius:999px;
  background:#3ECF8E1F;color:#8FEFC4;font-family:var(--at-fh);font-weight:700;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;margin-left:auto}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--at-live);animation:pl 2.4s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:1}50%{opacity:.35}}

/* фільтр — миттєвий, по номеру або станції */
.bfil{display:flex;gap:8px;padding:var(--s3) var(--s5);align-items:center;flex-wrap:wrap;
  border-bottom:1px solid #FFFFFF14;position:relative;z-index:3}
.bfil input{flex:1;min-width:220px;min-height:44px;padding:0 14px;border-radius:var(--r-in);
  background:#FFFFFF14;border:1px solid var(--at-line-scene);color:#fff;
  font-family:var(--at-fh);font-weight:600;font-size:14px;outline:none}
.bfil input::placeholder{color:#FFFFFF80;font-weight:400}
.bfil input:focus{border-color:#FFFFFF4D;background:#FFFFFF1F}
.seg{display:flex;gap:3px;padding:3px;background:#FFFFFF0D;border-radius:999px}
.seg button{min-height:34px;padding:0 13px;border:0;border-radius:999px;background:transparent;
  color:#FFFFFFC7;font-family:var(--at-fh);font-weight:700;font-size:12.5px;white-space:nowrap}
.seg button.on{background:#fff;color:var(--at-text)}

/* рядок табло. Колонки — рівно ті, що ВЖЕ є в DelayService (звірено з
   джерелом uz-vezemo/delayform 17.07): № · сполучення · затримка · статус ·
   прогноз відпр. · прогноз приб. · причина. Вигаданого нема.

   ПРЕМІУМ-ПАС (ui-ux-pro-max, рев'ю Віктора «6 з 10»):
   • Числа — моноширинні (--at-fm): колонки не «пливуть» при зміні цифр,
     і рядок нарешті читається як ТАБЛО, а не як таблиця в адмінці.
   • Затримка — найбільше число рядка (17px/700) + м'яке світіння лампи
     (text-shadow), як на справжньому табло. Світіння мінімальне: воно
     має підказувати матеріал, а не «неонити» (skill: minimal glow).
   • Вхід рядків — сходинками по 40мс: погляд встигає за появою (stagger).
   • Ховер піднімає рядок світлом, а не рухом: табло не стрибає. */
.brow{display:grid;grid-template-columns:88px minmax(0,1fr) 108px 116px 84px 92px minmax(0,160px);
  gap:var(--s3);align-items:center;padding:13px var(--s5);border-bottom:1px solid #FFFFFF0D;
  position:relative;z-index:1;transition:background .15s}
.brow:not(.bhead){animation:row-in .34s var(--e) backwards}
.brow:nth-child(3){animation-delay:.04s}
.brow:nth-child(4){animation-delay:.08s}
.brow:nth-child(5){animation-delay:.12s}
.brow:nth-child(6){animation-delay:.16s}
.brow:nth-child(7){animation-delay:.20s}
.brow:nth-child(8){animation-delay:.24s}
@keyframes row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bhead{font-family:var(--at-fh);font-weight:700;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#FFFFFF80;background:#FFFFFF08;padding:9px var(--s5)}
.bhead:hover{background:#FFFFFF08}
.brow:hover{background:#FFFFFF08}
.brow:last-child{border-bottom:0}
/* № поїзда — моно: колонка не «пливе» */
.bno{font-family:var(--at-fm);font-weight:700;font-size:13.5px;letter-spacing:-.02em;color:#DCE4F5}
.brt{min-width:0}
.brt b{display:block;font-family:var(--at-fh);font-weight:600;font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.brt span{font-size:11.5px;color:#FFFFFF80}
/* Затримка — головне число рядка + м'яке світіння лампи табло */
.bdel{font-family:var(--at-fm);font-weight:700;font-size:17px;letter-spacing:-.03em;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.bdel > span[aria-hidden]{font-size:10px;opacity:.85}
.bdel--hard{color:#FF9A91;text-shadow:0 0 12px #E4685F4D}
.bdel--soft{color:#FFD98A;text-shadow:0 0 12px #FFB80038}
.bdel--ok{color:#8FEFC4;font-size:13px;letter-spacing:0;font-family:var(--at-fh);font-weight:700;
  text-shadow:0 0 12px #3ECF8E33}
/* Статус поїзда — є в даних DelayService, у першій версії мока бракувало */
.bst{display:inline-flex;align-items:center;gap:6px;font-family:var(--at-fh);font-weight:600;
  font-size:12px;color:#CBD5EA;white-space:nowrap}
.bst i{width:6px;height:6px;border-radius:50%;background:var(--at-live);flex:0 0 auto}
.bst--wait i{background:#8A93A8}
.beta{font-family:var(--at-fm);font-weight:500;font-size:13.5px;color:#fff;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
/* Надійність прогнозу — крапка з підказкою (у старій було текстом під маршрутом) */
.rel{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.rel--hi{background:var(--at-live)}
.rel--mid{background:var(--at-amber)}
.rel--low{background:#8A93A8}
.bcause{font-size:12px;color:#FFFFFF99;min-width:0;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@container root (max-width:900px){
  .brow{grid-template-columns:auto minmax(0,1fr) auto;row-gap:6px;padding:12px var(--s4)}
  .bhead{display:none}
  .beta{grid-column:2}
  .bcause{grid-column:1/-1;white-space:normal}
}

/* підвал панелі: чесність джерела */
.bfoot{padding:12px var(--s5);border-top:1px solid #FFFFFF14;font-size:12px;color:#FFFFFF80;
  display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center;position:relative;z-index:3}
.bfoot a{color:#CBD5EA;text-decoration:underline}

/* ── ПІД ТАБЛО: пояснення (SEO-текст лишається як був) ─────────────────── */
.sec{padding:var(--between) 0}
.sec h2{margin:0 0 10px;font-size:clamp(19px,2vw,24px);font-weight:800;letter-spacing:-.02em}
.sec p{margin:0 0 12px;font-size:14.5px;line-height:1.62;color:var(--at-text2);max-width:760px}
.cta{display:inline-flex;align-items:center;gap:9px;min-height:48px;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 12px 26px -8px rgba(255,184,0,.5)}

/* Рух — не обов'язковий: хто вимкнув анімації, бачить табло одразу */
@media (prefers-reduced-motion:reduce){
  .r2026 *{animation:none !important;transition:none !important}
}