/* fclass.by/tickets/tablo/ — live board of Minsk National Airport. Tokens: Sapphire Dreams (site.css). */
:root {
  --tb-ink: #0c1825;
  --tb-ink-2: #1a3a5c;
  --tb-panel: #0a1520;
  --tb-row-line: rgba(255, 255, 255, .07);
  --tb-text: #eef2f6;
  --tb-muted: #9aabbb;
  --tb-gold: #c9a962;
  --tb-gold-hi: #e3c98c;
  --tb-gold-ink: #7a5e1f;
  --tb-ok: #8fd3b4;
  --tb-air: #9ec3ea;
  --tb-warn: #f1b46a;
  --tb-bad: #ff8f8f;
  --tb-sand: #f7f8fa;
  --tb-ease: cubic-bezier(.23, 1, .32, 1);
}

.tb-hero { background: var(--tb-ink); color: #fff; padding: 128px 60px 56px; }
.tb-hero__inner { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-end; justify-content: space-between; }
.tb-hero h1 { font-family: var(--font-serif); font-size: clamp(32px, 4.6vw, 52px); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; max-width: 16ch; text-wrap: balance; }
.tb-hero h1 em { font-style: normal; color: var(--tb-gold); }
.tb-hero p { margin-top: 16px; max-width: 56ch; color: rgba(255, 255, 255, .78); font-size: 17px; line-height: 1.65; }
.tb-live { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(201, 169, 98, .3); font-size: 14px; color: rgba(255, 255, 255, .88); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-live__dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--tb-ok); }
.tb-live__dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--tb-ok); opacity: 0; animation: tb-ping 2.4s var(--tb-ease) infinite; }
.tb-live--stale .tb-live__dot { background: var(--tb-warn); }
.tb-live--stale .tb-live__dot::after { box-shadow: 0 0 0 2px var(--tb-warn); }
.tb-live--down .tb-live__dot { background: var(--tb-bad); }
.tb-live--down .tb-live__dot::after { animation: none; }
@keyframes tb-ping { 0% { transform: scale(.4); opacity: .9; } 80%, 100% { transform: scale(1.4); opacity: 0; } }

.tb-section { background: var(--tb-sand); padding: 40px 60px 72px; }
.tb-wrap { max-width: 1180px; margin: 0 auto; }

.tb-controls { display: grid; grid-template-columns: auto auto 1fr; gap: 14px 20px; align-items: center; margin-bottom: 18px; }
.tb-seg { display: inline-flex; padding: 4px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(12, 24, 37, .06), 0 6px 18px -10px rgba(12, 24, 37, .25); }
.tb-seg button { appearance: none; border: 0; background: transparent; font: 600 15px/1 var(--font-sans); color: var(--tb-ink); padding: 12px 18px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .2s var(--tb-ease), color .2s var(--tb-ease), transform 140ms var(--tb-ease); }
.tb-seg button:active { transform: scale(.97); }
.tb-seg button svg { width: 18px; height: 18px; flex: none; }
.tb-seg button[aria-selected="true"] { background: var(--tb-ink); color: #fff; }
.tb-seg button[aria-selected="true"] svg { color: var(--tb-gold); }
.tb-seg--days button { font-size: 14px; padding: 10px 14px; }
.tb-seg--days button[aria-pressed="true"] { background: var(--tb-ink); color: #fff; }

.tb-search { position: relative; justify-self: end; width: min(100%, 340px); }
.tb-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: #5a6d7e; pointer-events: none; }
.tb-search input { width: 100%; font: 400 15px/1.2 var(--font-sans); color: var(--tb-ink); padding: 13px 14px 13px 42px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(12, 24, 37, .14); transition: box-shadow .2s var(--tb-ease); }
.tb-search input::placeholder { color: #6b7d8c; }
.tb-search input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--tb-gold); }

.tb-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 14px; color: #5a6d7e; }
.tb-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.tb-check input { width: 18px; height: 18px; accent-color: var(--tb-ink); }

.tb-notice { display: none; margin-bottom: 12px; padding: 12px 16px; border-radius: 12px; background: #fff6e8; color: #6a4a12; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(241, 180, 106, .5); }
.tb-notice.is-on { display: block; }

.tb-board { background: var(--tb-panel); color: var(--tb-text); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 4px rgba(12, 24, 37, .08), 0 24px 48px -24px rgba(12, 24, 37, .55); }
.tb-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tb-table thead th { position: sticky; top: 0; z-index: 1; background: #0d1b29; text-align: left; font: 600 12px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tb-muted); padding: 16px 18px; box-shadow: inset 0 -1px 0 var(--tb-row-line); }
.tb-table td { padding: 15px 18px; border-top: 1px solid var(--tb-row-line); vertical-align: middle; font-size: 15px; }
.tb-table tbody tr { transition: background .2s var(--tb-ease); }
.tb-table tr.is-now td { border-top-color: var(--tb-gold); }
.tb-table tr.is-dim td { color: var(--tb-muted); }

.tb-time { font-size: 20px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.tb-time s { display: block; font-size: 13px; font-weight: 400; color: var(--tb-muted); text-decoration-thickness: 1px; }
.tb-time b { color: var(--tb-gold-hi); font-weight: 600; }
.tb-flight { font-weight: 600; white-space: nowrap; letter-spacing: .02em; }
.tb-flight small { display: block; font-weight: 400; font-size: 12px; color: var(--tb-muted); letter-spacing: 0; white-space: normal; }
.tb-city { font-family: var(--font-serif); font-size: 18px; font-weight: 600; }
.tb-airline { color: var(--tb-muted); font-size: 14px; max-width: 26ch; }
.tb-desk { color: var(--tb-muted); font-size: 14px; white-space: nowrap; }
.tb-desk span { color: var(--tb-text); }

.tb-status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.1; white-space: nowrap; background: rgba(255, 255, 255, .06); color: var(--tb-muted); }
.tb-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.tb-status--done { color: var(--tb-ok); background: rgba(143, 211, 180, .1); }
.tb-status--air { color: var(--tb-air); background: rgba(158, 195, 234, .1); }
.tb-status--checkin { color: var(--tb-gold-hi); background: rgba(201, 169, 98, .14); }
.tb-status--boarding { color: var(--tb-ink); background: var(--tb-gold); }
.tb-status--warn { color: var(--tb-warn); background: rgba(241, 180, 106, .12); }
.tb-status--bad { color: var(--tb-bad); background: rgba(255, 143, 143, .12); }

.tb-state { padding: 56px 24px; text-align: center; color: var(--tb-muted); font-size: 16px; }
.tb-state strong { display: block; color: var(--tb-text); font-family: var(--font-serif); font-size: 20px; margin-bottom: 8px; }
.tb-state a, .tb-state button { color: var(--tb-gold-hi); background: none; border: 0; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tb-skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.11), rgba(255,255,255,.05)); background-size: 200% 100%; animation: tb-shimmer 1.4s linear infinite; }
@keyframes tb-shimmer { to { background-position: -200% 0; } }

.tb-source { margin-top: 14px; font-size: 13px; color: #5a6d7e; }
.tb-source a { color: var(--tb-gold-ink); text-underline-offset: 3px; }

.tb-cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; padding: 28px 32px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(12, 24, 37, .06), 0 16px 32px -20px rgba(12, 24, 37, .3); }
.tb-cta h2 { font-family: var(--font-serif); font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; letter-spacing: -.01em; }
.tb-cta p { margin-top: 6px; color: #5a6d7e; max-width: 60ch; }
.tb-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.tb-cta .btn-outline { color: var(--tb-ink); border-color: rgba(12, 24, 37, .25); }
.tb-cta .btn-outline:hover { background: rgba(12, 24, 37, .05); border-color: var(--tb-ink); }

.tb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tb-section ::selection, .tb-hero ::selection { background: rgba(201, 169, 98, .35); }
.tb-seg button:focus-visible, .tb-check input:focus-visible, .tb-state button:focus-visible, .tb-cta a:focus-visible { outline: 2px solid var(--tb-gold); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  .tb-seg button:not([aria-selected="true"]):not([aria-pressed="true"]):hover { background: rgba(12, 24, 37, .05); }
  .tb-table tbody tr:hover { background: rgba(255, 255, 255, .03); }
}

.tb-flight__al { display: none; }

@media (max-width: 960px) {
  .tb-controls { grid-template-columns: 1fr auto; }
  .tb-search { grid-column: 1 / -1; justify-self: stretch; width: 100%; }
  .tb-airline { display: none; }
  .tb-table th.tb-col-airline { display: none; }
}

@media (max-width: 720px) {
  .tb-hero { padding: 104px 20px 36px; }
  .tb-hero p { font-size: 16px; }
  .tb-section { padding: 24px 12px 56px; }
  .tb-controls { grid-template-columns: 1fr; gap: 10px; }
  .tb-seg { display: flex; }
  .tb-seg button { flex: 1; justify-content: center; }
  .tb-board { border-radius: 14px; }
  .tb-table thead { display: none; }
  .tb-table, .tb-table tbody { display: block; }
  .tb-table tbody tr { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "time city status" "time flight status" "time desk desk"; column-gap: 12px; row-gap: 2px; padding: 14px 14px; border-top: 1px solid var(--tb-row-line); }
  .tb-table tbody tr:first-child { border-top: 0; }
  .tb-table tr.is-now { border-top-color: var(--tb-gold); }
  .tb-table td { padding: 0; border: 0; }
  .tb-table td.tb-c-time { grid-area: time; align-self: start; }
  .tb-table td.tb-c-city { grid-area: city; }
  .tb-table td.tb-c-flight { grid-area: flight; }
  .tb-table td.tb-c-status { grid-area: status; align-self: start; justify-self: end; }
  .tb-table td.tb-c-desk { grid-area: desk; padding-top: 6px; white-space: normal; min-width: 0; }
  .tb-table td.tb-c-desk:empty { display: none; }
  .tb-table td.tb-airline { display: none; }
  .tb-time { font-size: 18px; }
  .tb-city { font-size: 17px; }
  .tb-flight { font-size: 13px; color: var(--tb-muted); font-weight: 500; }
  .tb-flight__al { display: inline; font-weight: 400; }
  .tb-status { font-size: 12px; padding: 5px 9px; }
  .tb-cta { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-live__dot::after, .tb-skel { animation: none; }
  .tb-seg button, .tb-table tbody tr, .tb-search input { transition: none; }
  .tb-seg button:active { transform: none; }
}