/* The gap on the right leaves the exterior view's altitude scale visible. */
.display #flight-clock {
  --clock-accent: var(--cyan, #99e7dc);
  position: absolute;
  top: 16px;
  right: clamp(49px, 4vw, 64px);
  z-index: 3;
  display: grid;
  justify-items: start;
  gap: 2px;
  min-inline-size: 89px;
  padding: 6px 11px 7px;
  border: 1px solid #637b91;
  border-inline-start: 3px solid var(--clock-accent);
  background: #0a1730ed;
  box-shadow: 2px 2px 0 #081023;
  color: var(--clock-accent);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.display #flight-clock[hidden] { display: none; }

#flight-clock > .fc-label {
  color: #cfdbde;
  font: 11px/1.25 var(--pixel, sans-serif);
  letter-spacing: .07em;
  white-space: nowrap;
}

#flight-clock > .fc-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  font: bold 32px/.98 var(--mono, monospace);
  letter-spacing: -.06em;
}

#flight-clock .fc-value small {
  font: 12px/1 var(--pixel, sans-serif);
  letter-spacing: 0;
}

.display #flight-clock.is-countdown {
  --clock-accent: var(--lime, #e2f495);
}

.display #flight-clock.is-urgent {
  --clock-accent: #ffae82;
  background: #291d2aef;
  border-color: #9d665c;
  border-inline-start-color: var(--clock-accent);
}

.mission .countdown-center {
  margin-block: 8px 4px;
  color: var(--lime, #e2f495);
  font: bold clamp(64px, 6.8vw, 92px)/1.07 var(--pixel, monospace);
  font-variant-numeric: tabular-nums;
  text-shadow: 3px 3px 0 #596442;
}

.mission .time-line.is-urgent {
  background: #50323a;
  box-shadow: 0 1px #302127;
}

.mission .time-line.is-urgent > i { background: #ffae82; }

@media (max-width: 700px) {
  .display #flight-clock {
    top: 9px;
    right: 35px;
    min-inline-size: 69px;
    padding: 4px 7px 5px;
    gap: 0;
  }
  #flight-clock > .fc-label { font-size: 10px; }
  #flight-clock > .fc-value { font-size: 26px; }
  #flight-clock .fc-value small { font-size: 10px; }
  .mission .countdown-center { font-size: 58px; }
}

@media (prefers-reduced-motion: no-preference) {
  :root:not(.calm) .display #flight-clock.is-urgent {
    animation: flight-clock-pulse 1s ease-out infinite;
  }
}

@keyframes flight-clock-pulse {
  0%, 100% { box-shadow: 2px 2px 0 #081023; }
  35% { box-shadow: 2px 2px 0 #081023, 0 0 7px #ff9e7738; }
}