/*
	Based upon Jakub Hampl's "Designing a departures board with CSS3".
	https://gampleman.eu/post/1488470623/designing-a-departures-board-with-css3
*/

.departure-board {
  /*margin-right: 10px;*/
  padding: 0.36em;
  display: inline-block;
  line-height: 1.3em;
  background: rgb(30, 30, 30);
  -webkit-border-radius: 0.21em;
  -moz-border-radius: 0.21em;
  border-radius: 0.21em;
  color: #eee;
  font-family: Helvetica;
  margin-bottom: 30px;
}

.departure-board span.letter {
  display: inline-block;
  width: 1em;
  margin: 0 0.1em;
  height: 1.3em;
  text-align: center;
  position: relative;
}

.departure-board span.letter {
  -webkit-box-shadow: inset 0 -0.07em 0 rgba(50, 50, 50, 0.7),
    inset 0 -0.14em 0 rgba(0, 0, 0, 0.7),
    inset 0.14em 0 0.28em rgba(0, 0, 0, 0.9),
    inset -0.14em 0 0.28em rgba(0, 0, 0, 0.9),
    0 0.07em 0 rgba(255, 255, 255, 0.2);

  -moz-box-shadow: inset 0 -0.07em 0 rgba(50, 50, 50, 0.7),
    inset 0 -0.14em 0 rgba(0, 0, 0, 0.7),
    inset 0.14em 0 0.28em rgba(0, 0, 0, 0.9),
    inset -0.14em 0 0.28em rgba(0, 0, 0, 0.9),
    0 0.07em 0 rgba(255, 255, 255, 0.2);

  -o-box-shadow: inset 0 -0.07em 0 rgba(50, 50, 50, 0.7),
    inset 0 -0.14em 0 rgba(0, 0, 0, 0.7),
    inset 0.14em 0 0.28em rgba(0, 0, 0, 0.9),
    inset -0.14em 0 0.28em rgba(0, 0, 0, 0.9),
    0 0.07em 0 rgba(255, 255, 255, 0.2);

  box-shadow: inset 0 -0.07em 0 rgba(50, 50, 50, 0.7),
    inset 0 -0.14em 0 rgba(0, 0, 0, 0.7),
    inset 0.14em 0 0.28em rgba(0, 0, 0, 0.9),
    inset -0.14em 0 0.28em rgba(0, 0, 0, 0.9),
    0 0.07em 0 rgba(255, 255, 255, 0.2);
}

.departure-board span.letter:before {
  border-top: 0.07em solid rgba(0, 0, 0, 0.4);
  border-bottom: 0.07em solid rgba(255, 255, 255, 0.08);
  height: 0;
  position: relative;
  width: 100%;
  left: 0;
  top: 0.62em;
  content: " ";
  display: block;
  z-index: 2;
  -moz-transform: translate(0, -0.05em);
  -o-transform: translate(0, -0.1em);
}

.departure-board span.fold {
  display: block;
  position: absolute;
  height: 0;
  top: 0.65em;
}

.departure-board span.flap {
  display: block;
  position: absolute;
  top: 0em;
  width: 1em;
  height: 0.65em;
  margin: 0;
  overflow: hidden;
}

.departure-board span.text {
  width: 100%;
}

.departure-board span.bottom {
  top: 0.65em;
}

.departure-board span.bottom span.text {
  position: relative;
  top: -0.65em;
}

.departure-board span.flap.falling {
  display: none;
  bottom: 0;
  top: auto;
}

.departure-board span.flap.falling span.text {
  -webkit-backface-visibility: hidden;
  border-top: 0.03em solid #444;
  border-bottom: 0.03em solid #444;
  background: #000;
  display: block;
  position: relative;

  -webkit-transform: scaleY(1);
  -moz-transform: scaleY(1);
  -o-transform: scaleY(1);
  transform: scaleY(1);

  -webkit-transition: -webkit-transform linear;
  -moz-transition: -moz-transform linear;
  -o-transition: -o-transform linear;
  transition: transform linear;
}

/* Page styling uses the shared FSM design system. */
.boards-page { flex: 1; }
.boards-content { max-width: 1008px; }
.boards-toolbar, .boards-refresh, .boards-tools {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.boards-toolbar { justify-content: space-between; margin-bottom: 1.5rem; }
.boards-refresh, .boards-timezone { font-size: .85rem; color: var(--fsm-text-muted); }
.boards-auto {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #047857;
    padding: .4rem .8rem;
    border-radius: 50px;
    font-weight: 700;
}
.boards-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; }
.boards-live-dot.live-off { background: var(--fsm-text-muted); }
.depboardtime { display: inline-block; min-width: 3.1em; color: var(--fsm-navy); font-weight: 700; font-variant-numeric: tabular-nums; }
#boards-container { display: grid; gap: 1.5rem; min-width: 0; }
.board-scroll {
    overflow-x: auto;
    border: 1px solid #1e1e1e;
    border-radius: 4px;
    box-shadow: var(--fsm-shadow-md);
    background: #1e1e1e;
    scrollbar-color: #ffc320 #1e1e1e;
}
.board-scroll:focus-visible { outline: 3px solid var(--fsm-blue); outline-offset: 4px; }
.boards-page .departure-board {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 982px;
    margin: 0;
    padding: .36em;
    border-radius: 0;
    background: #1e1e1e;
    font-size: 16px;
}
/* Bootstrap also uses .row: isolate the unchanged 50-character flap rows. */
.boards-page .departure-board > .row {
    display: block;
    width: 60em;
    margin: 0 auto;
    padding: 0;
    white-space: nowrap;
    line-height: 1.3em;
    letter-spacing: normal;
}
.boards-page .departure-board > .row > .letter { padding: 0; flex: none; }
.boards-page .board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 60px;
    padding-bottom: 0;
    margin-bottom: 0;
    font-family: Helvetica, sans-serif;
}
.boards-page .board-header h2 { display: flex; align-items: center; gap: .75rem; color: #ffc320; font-family: Helvetica, sans-serif; font-size: 2rem; margin: 0; }
.boards-page .plane-icon { width: 52px; height: 45px; padding: 5px; border-radius: 5px; background: #ffc320; }
.boards-page .clock { color: #eee; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; margin-right: 10px; }
.boards-page .board-columns { width: 60em; margin: 0 auto 4px; border-collapse: collapse; color: #eee; }
.boards-page .board-columns thead { display: block; }
.boards-page .board-columns tr { display: grid; grid-template-columns: 8.4em 20.4em 12em 19.2em; }
.boards-page .board-columns th { font-size: inherit; font-weight: 700; padding: 0 0 0 .1em; text-align: left; }
.boards-info { display: flex; gap: .75rem; margin-top: 1.5rem; padding: 1rem 1.25rem; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 12px; color: var(--fsm-blue-dark); }
.boards-info .note { margin: 0; font-size: .85rem; line-height: 1.8; color: var(--fsm-text-muted); }
.boards-contact { text-align: center; color: var(--fsm-text-muted); font-size: .85rem; margin: 1.5rem 0 0; }
.boards-contact a { color: var(--fsm-blue-dark); font-weight: 700; }
.boards-mobile-hint { display: none; }
/* Override the sound script's inline presentation without altering its behavior. */
#board-sound-control #muteButton {
    position: static !important;
    margin: 0 !important;
    background: #fff !important;
    border: 1px solid var(--fsm-border) !important;
    color: var(--fsm-blue-dark) !important;
    border-radius: 10px !important;
    box-shadow: var(--fsm-shadow-sm) !important;
    font-size: 18px !important;
    z-index: auto !important;
}
#board-sound-control #muteButton:hover { border-color: var(--fsm-blue) !important; }
#board-sound-control #muteButton:focus-visible { outline: 3px solid var(--fsm-blue); outline-offset: 3px; }
/* Two 984px boards, a 24px gap, page gutters and room for a scrollbar. */
@media (min-width: 2032px) {
    .boards-content { max-width: 2016px; }
    #boards-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1050px) { .boards-mobile-hint { display: inline; } }
@media (max-width: 575px) {
    .boards-toolbar { gap: .75rem; }
    .boards-refresh { gap: .5rem; }
    .boards-tools { width: 100%; justify-content: space-between; }
    .boards-contact { line-height: 1.8; }
}