/* First Class: Flight timeline page (Flight Information rotation), drawn as a paper boarding-pass stub. */
.topbar-flightinfo-timeline-page {
  /* One design pixel: 1px on a 1920x1080 screen, following the smaller screen axis on other PC sizes. */
  --fi-tl-u: clamp(0.5px, min(calc(100vw / 1920), calc(100vh / 1080)), 2px);
  --fi-tl-fs: var(--airshow-ui-font-size-scale, 1);
  /* Big numbers, stamps and city names already fill their columns: the reader's larger-text setting stops at 100%. */
  --fi-tl-fs-big: min(var(--fi-tl-fs), 1);
  --fi-tl-paper: #f5f2ea;
  --fi-tl-ink: #1b1547;
  --fi-tl-ink-soft: rgba(27, 21, 71, 0.6);
  --fi-tl-ink-faint: rgba(27, 21, 71, 0.24);
  --fi-tl-stub-w: calc(370 * var(--fi-tl-u));
  --fi-tl-label-w: calc(196 * var(--fi-tl-u));
  --fi-tl-main-pad: calc(48 * var(--fi-tl-u));
  --fi-tl-edge: calc(46 * var(--fi-tl-u));
  --fi-tl-radius: calc(22 * var(--fi-tl-u));
  --fi-tl-notch: calc(20 * var(--fi-tl-u));
  --fi-tl-row-dot: calc(62 * var(--fi-tl-u));
  --fi-tl-row-name: calc(60 * var(--fi-tl-u));
  --fi-tl-row-time: calc(80 * var(--fi-tl-u));
  --fi-tl-row-status: calc(64 * var(--fi-tl-u));
  grid-row: 2;
  grid-column: 1;
  align-self: center;
  width: min(calc(1700 * var(--fi-tl-u)), calc(100vw - 96px));
  margin: 0 auto;
  display: none;
  opacity: 0;
  translate: 0 8px;
  transition: opacity 200ms ease, translate 220ms cubic-bezier(0.2, 0.7, 0.2, 1), display 200ms allow-discrete;
}
.topbar-flightinfo-timeline-page.visible {
  display: block;
  opacity: 1;
  translate: 0 0;
}
@starting-style {
  .topbar-flightinfo-timeline-page.visible {
    opacity: 0;
    translate: 0 8px;
  }
}
.fi-tl-pass {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--fi-tl-stub-w);
  border-radius: var(--fi-tl-radius);
  background: var(--fi-tl-paper);
  color: var(--fi-tl-ink);
  box-shadow: 0 calc(26 * var(--fi-tl-u)) calc(54 * var(--fi-tl-u)) rgba(0, 0, 0, 0.42), 0 2px 0 rgba(255, 255, 255, 0.6) inset;
  /* Ticket notches where the stub tears off. */
  -webkit-mask:
    radial-gradient(circle var(--fi-tl-notch) at calc(100% - var(--fi-tl-stub-w)) 0, transparent 97%, #000 100%) top / 100% 51% no-repeat,
    radial-gradient(circle var(--fi-tl-notch) at calc(100% - var(--fi-tl-stub-w)) 100%, transparent 97%, #000 100%) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--fi-tl-notch) at calc(100% - var(--fi-tl-stub-w)) 0, transparent 97%, #000 100%) top / 100% 51% no-repeat,
    radial-gradient(circle var(--fi-tl-notch) at calc(100% - var(--fi-tl-stub-w)) 100%, transparent 97%, #000 100%) bottom / 100% 51% no-repeat;
}
.fi-tl-main {
  padding: 0 var(--fi-tl-main-pad) calc(38 * var(--fi-tl-u)) 0;
  min-width: 0;
}
.fi-tl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(28 * var(--fi-tl-u));
  margin: 0 calc(-1 * var(--fi-tl-main-pad)) calc(28 * var(--fi-tl-u)) 0;
  padding: calc(21 * var(--fi-tl-u)) var(--fi-tl-edge) calc(19 * var(--fi-tl-u));
  border-radius: var(--fi-tl-radius) 0 0 0;
  background: var(--airshow-theme-color, #1d0d78);
  color: #ffffff;
}
.fi-tl-kicker {
  font-size: calc(23 * var(--fi-tl-u) * var(--fi-tl-fs));
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.fi-tl-flight {
  font-size: calc(26 * var(--fi-tl-u) * var(--fi-tl-fs));
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.88;
  white-space: nowrap;
}
.fi-tl-grid {
  display: grid;
  grid-template-columns: var(--fi-tl-label-w) minmax(0, 1fr);
}
.fi-tl-rowlabels,
.fi-tl-event {
  display: grid;
  grid-template-rows: var(--fi-tl-row-dot) var(--fi-tl-row-name) var(--fi-tl-row-time) var(--fi-tl-row-time) var(--fi-tl-row-status);
  align-items: center;
}
.fi-tl-rowlabels {
  padding-left: var(--fi-tl-edge);
}
.fi-tl-rowlabels span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(3 * var(--fi-tl-u));
  line-height: 1.1;
  min-width: 0;
}
.fi-tl-rowlabels b {
  font-size: calc(26 * var(--fi-tl-u) * var(--fi-tl-fs-big) * 9 / max(9, var(--fi-tl-word, 9)));
  font-weight: 700;
  overflow-wrap: anywhere;
}
.fi-tl-rowlabels i {
  font-style: normal;
  font-size: calc(18 * var(--fi-tl-u) * var(--fi-tl-fs));
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fi-tl-ink-soft);
}
.fi-tl-body {
  position: relative;
}
.fi-tl-events {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.fi-tl-event {
  justify-items: center;
  text-align: center;
  min-width: 0;
}
.fi-tl-track {
  position: absolute;
  top: calc(var(--fi-tl-row-dot) / 2 - 1.5 * var(--fi-tl-u));
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: max(2px, calc(3 * var(--fi-tl-u)));
  background: repeating-linear-gradient(90deg, var(--fi-tl-ink-faint) 0 calc(11 * var(--fi-tl-u)), transparent calc(11 * var(--fi-tl-u)) calc(20 * var(--fi-tl-u)));
}
.fi-tl-done {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--fi-tl-progress, 0) * 100%);
  background: var(--fi-tl-ink);
  transition: width 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fi-tl-plane {
  position: absolute;
  top: 50%;
  left: calc(var(--fi-tl-progress, 0) * 100%);
  width: calc(40 * var(--fi-tl-u));
  height: calc(40 * var(--fi-tl-u));
  margin: calc(-20 * var(--fi-tl-u)) 0 0 calc(-20 * var(--fi-tl-u));
  border-radius: 50%;
  background: var(--fi-tl-paper);
  z-index: 1;
  transition: left 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fi-tl-plane svg {
  width: 100%;
  height: 100%;
  fill: var(--fi-tl-ink);
  transform: rotate(90deg);
}
.fi-tl-dot {
  position: relative;
  z-index: 1;
  width: calc(22 * var(--fi-tl-u));
  height: calc(22 * var(--fi-tl-u));
  border-radius: 50%;
  border: max(1.5px, calc(3 * var(--fi-tl-u))) solid var(--fi-tl-ink);
  background: var(--fi-tl-paper);
}
.fi-tl-event.is-actual .fi-tl-dot {
  background: var(--fi-tl-ink);
}
.fi-tl-event.is-estimate .fi-tl-dot {
  border-style: dashed;
  border-color: var(--fi-tl-ink-soft);
}
/* Long moment names break into two balanced lines ("Top of / descent") and hang from the same top line. */
.fi-tl-name {
  align-self: start;
  max-width: 6.6em;
  font-size: calc(21 * var(--fi-tl-u) * var(--fi-tl-fs));
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--fi-tl-ink-soft);
}
.fi-tl-time {
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.fi-tl-time b {
  font-size: calc(32 * var(--fi-tl-u) * var(--fi-tl-fs));
  font-weight: 600;
  color: var(--fi-tl-ink-soft);
}
.fi-tl-time.is-primary b {
  font-size: calc(50 * var(--fi-tl-u) * var(--fi-tl-fs-big));
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fi-tl-ink);
}
.fi-tl-events.is-12h .fi-tl-time.is-primary b {
  font-size: calc(44 * var(--fi-tl-u) * var(--fi-tl-fs-big));
}
.fi-tl-time small {
  margin-left: 0.14em;
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.fi-tl-event.is-estimate .fi-tl-time.is-primary b {
  font-weight: 700;
}
.fi-tl-status {
  font-size: calc(17 * var(--fi-tl-u) * var(--fi-tl-fs-big));
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: calc(6 * var(--fi-tl-u)) calc(13 * var(--fi-tl-u)) calc(5 * var(--fi-tl-u));
  border-radius: calc(6 * var(--fi-tl-u));
  border: max(1px, calc(2 * var(--fi-tl-u))) solid var(--fi-tl-ink);
}
.fi-tl-event.is-estimate .fi-tl-status {
  border-style: dashed;
  border-color: var(--fi-tl-ink-soft);
  color: var(--fi-tl-ink-soft);
}
.fi-tl-stub {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: calc(36 * var(--fi-tl-u)) calc(38 * var(--fi-tl-u)) calc(36 * var(--fi-tl-u)) calc(44 * var(--fi-tl-u));
  border-left: max(1.5px, calc(3 * var(--fi-tl-u))) dashed var(--fi-tl-ink-faint);
}
.fi-tl-stub-kicker {
  font-size: calc(19 * var(--fi-tl-u) * var(--fi-tl-fs));
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fi-tl-ink-soft);
}
.fi-tl-phase {
  margin-top: calc(10 * var(--fi-tl-u));
  font-size: calc(52 * var(--fi-tl-u) * var(--fi-tl-fs-big));
  font-weight: 800;
  line-height: 1.05;
}
.fi-tl-level {
  margin-top: calc(6 * var(--fi-tl-u));
  font-size: calc(34 * var(--fi-tl-u) * var(--fi-tl-fs));
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fi-tl-ink-soft);
}
.fi-tl-next {
  margin-top: calc(22 * var(--fi-tl-u));
  font-size: calc(24 * var(--fi-tl-u) * var(--fi-tl-fs));
  font-weight: 600;
  line-height: 1.3;
}
.fi-tl-barcode {
  margin-top: auto;
  height: calc(84 * var(--fi-tl-u));
  width: 100%;
  opacity: 0.86;
  background: linear-gradient(90deg,
      var(--fi-tl-ink) 0 8.333%, transparent 8.333% 16.667%, var(--fi-tl-ink) 16.667% 20.833%,
      transparent 20.833% 33.333%, var(--fi-tl-ink) 33.333% 45.833%, transparent 45.833% 50%,
      var(--fi-tl-ink) 50% 54.167%, transparent 54.167% 66.667%, var(--fi-tl-ink) 66.667% 70.833%,
      transparent 70.833% 79.167%, var(--fi-tl-ink) 79.167% 91.667%, transparent 91.667% 100%)
    0 0 / calc(36 * var(--fi-tl-u)) 100% repeat-x;
}

/* Phone landscape and other short screens: the card spans the width and uses the free height under the title. */
@media (max-height: 520px) {
  .topbar-flightinfo-timeline-page {
    --fi-tl-stub-w: 150px;
    --fi-tl-label-w: 82px;
    --fi-tl-main-pad: 14px;
    --fi-tl-edge: 14px;
    --fi-tl-radius: 10px;
    --fi-tl-notch: 8px;
    --fi-tl-row-dot: 26px;
    --fi-tl-row-name: 30px;
    --fi-tl-row-time: 32px;
    --fi-tl-row-status: 28px;
    width: calc(100vw - 32px);
  }
  .fi-tl-pass {
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  }
  .fi-tl-main {
    padding-bottom: 12px;
  }
  .fi-tl-head {
    gap: 12px;
    margin-bottom: 8px;
    padding: 7px 14px 6px;
  }
  .fi-tl-kicker {
    font-size: calc(10px * var(--fi-tl-fs));
  }
  .fi-tl-flight {
    font-size: calc(11px * var(--fi-tl-fs));
  }
  .fi-tl-rowlabels span {
    gap: 1px;
  }
  .fi-tl-rowlabels b {
    font-size: calc(12.5px * var(--fi-tl-fs-big) * 9 / max(9, var(--fi-tl-word, 9)));
  }
  .fi-tl-rowlabels i {
    font-size: calc(9.5px * var(--fi-tl-fs));
    letter-spacing: 0.04em;
  }
  .fi-tl-track {
    top: calc(var(--fi-tl-row-dot) / 2 - 1px);
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--fi-tl-ink-faint) 0 6px, transparent 6px 11px);
  }
  .fi-tl-name {
    font-size: calc(10.5px * var(--fi-tl-fs));
    letter-spacing: 0.06em;
  }
  .fi-tl-time b {
    font-size: calc(14px * var(--fi-tl-fs));
  }
  .fi-tl-time.is-primary b {
    font-size: calc(23px * var(--fi-tl-fs-big));
  }
  .fi-tl-events.is-12h .fi-tl-time.is-primary b {
    font-size: calc(19px * var(--fi-tl-fs-big));
  }
  .fi-tl-status {
    font-size: calc(9px * var(--fi-tl-fs-big));
    letter-spacing: 0.1em;
    padding: 3px 5px 2px;
    border-radius: 3px;
    border-width: 1px;
  }
  .fi-tl-dot {
    width: 11px;
    height: 11px;
    border-width: 2px;
  }
  .fi-tl-plane {
    width: 19px;
    height: 19px;
    margin: -9.5px 0 0 -9.5px;
  }
  .fi-tl-stub {
    padding: 12px 12px 12px 14px;
    border-left-width: 2px;
  }
  .fi-tl-stub-kicker {
    font-size: calc(9px * var(--fi-tl-fs));
  }
  .fi-tl-phase {
    margin-top: 3px;
    font-size: calc(20px * var(--fi-tl-fs-big));
  }
  .fi-tl-level {
    margin-top: 2px;
    font-size: calc(13px * var(--fi-tl-fs));
  }
  .fi-tl-next {
    margin-top: 8px;
    font-size: calc(10.5px * var(--fi-tl-fs));
  }
  .fi-tl-barcode {
    height: 28px;
    background-size: 20px 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar-flightinfo-timeline-page,
  .fi-tl-done,
  .fi-tl-plane {
    transition: none !important;
    translate: none !important;
  }
}