/* ============================================================
   D-PAD Departures Board — Split-flap component
   Scoped under .dpad-board so nothing leaks into the rest of
   the app. Drop-in alongside intel-earnings.css.
   ============================================================ */

.dpad-board {
  --board-bg: #0f0f23;            /* matches --surface-darker */
  --board-frame: #1a1a2e;          /* matches --surface-dark */
  --flap-bg: #2a2a3e;
  --flap-bg-shadow: #1c1c2c;
  --flap-fg: #FFD93D;              /* matches --accent-gold */
  --flap-divider: rgba(0, 0, 0, 0.55);
  --flap-divider-h: 1px;
  --flap-gap: 4px;
  --row-gap: 10px;
  --label-w: 11ch;                 /* leftmost label column */
  --value-w: 14ch;                 /* middle (place / sponsor) */
  --meta-w: 8ch;                   /* right (distance / time) */
  --flap-h: 42px;                  /* total flap height */
  --flap-w: 0.62;                  /* per-character width multiplier (unitless) */
  --flap-font: 28px;               /* logical char size */
  --flap-font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;

  font-family: var(--font-display, 'Archivo Black', sans-serif);
  background: var(--board-bg);
  border: 2px solid var(--flap-fg);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4) inset,
    0 8px 32px rgba(0,0,0,0.45),
    0 0 24px rgba(255,217,61,0.08);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  contain: content;
}

/* Mini header that mimics the airport board strip */
.dpad-board__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-ui, 'Figtree', system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--flap-fg);
  opacity: 0.7;
  margin-bottom: 12px;
  padding: 0 4px;
}

.dpad-board__header .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--flap-fg);
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--flap-fg);
  animation: dpad-board-pulse 2s ease-in-out infinite;
}

@keyframes dpad-board-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* The rows container */
.dpad-board__rows {
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
}

.dpad-board__row {
  display: flex;
  gap: var(--flap-gap);
  align-items: center;
  justify-content: flex-start;
}

.dpad-board__col {
  display: flex;
  gap: var(--flap-gap);
}

/* 2026-05-04: multi-row value support. The stack wrapper holds 1+ flap
   rows that share the same width and look like a single block. With
   --multi (valueRows > 1) it stacks rows vertically with a small gap. */
.dpad-board__col-stack {
  display: flex;
  flex-direction: column;
  gap: var(--flap-gap);
}

/* Empty padding flaps — keep layout space (so meta column stays
   anchored on the right) but disappear visually. Without this rule,
   trailing/leading padding cells render as visible dark frames that
   look like "blank cells before the text". */
.dpad-board__col .flap[data-empty="true"] {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.dpad-board__col .flap[data-empty="true"] * {
  visibility: hidden;
}

/* Spacer between columns */
.dpad-board__sep {
  width: var(--board-sep, 14px);
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   Image slot (optional, leftmost) — for stamp series covers
   ---------------------------------------------------------- */
.dpad-board__icon {
  width: var(--icon-size, var(--flap-h));
  height: var(--icon-size, var(--flap-h));
  flex-shrink: 0;
  margin-right: var(--icon-margin, 10px);
  border-radius: 6px;
  background: var(--flap-bg);
  border: 1px solid rgba(255, 217, 61, 0.35);
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.dpad-board__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 280ms ease-out;
}

.dpad-board__icon img.visible {
  opacity: 1;
}

/* Placeholder slot (no image yet) — keeps row alignment when other
   rows in the same board DO have icons */
.dpad-board__icon--empty {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* ----------------------------------------------------------
   Individual flap
   ---------------------------------------------------------- */
.dpad-board__flap {
  position: relative;
  width: calc(var(--flap-font) * var(--flap-w));
  height: var(--flap-h);
  font-size: var(--flap-font);
  line-height: 1;
  flex-shrink: 0;
  perspective: 240px;
}

.dpad-board__flap .half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  background: var(--flap-bg);
  color: var(--flap-fg);
  border-radius: 4px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.dpad-board__flap .half.top    { top: 0;    border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.dpad-board__flap .half.bottom { bottom: 0; border-top-left-radius: 0;    border-top-right-radius: 0; background: var(--flap-bg-shadow); }

/* The thin seam between top/bottom halves */
.dpad-board__flap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--flap-divider-h, 1px);
  background: var(--flap-divider);
  transform: translateY(-50%);
  z-index: 5;
  pointer-events: none;
}

/* Centre the glyph: top half shows the upper portion of the
   character, bottom half shows the lower portion */
.dpad-board__flap .half .glyph {
  position: absolute;
  width: 100%;
  text-align: center;
  height: var(--flap-h);
  line-height: var(--flap-h);
  font-family: var(--flap-font-family);
  font-weight: 700;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}
.dpad-board__flap .half.top    .glyph { top: 0; }
.dpad-board__flap .half.bottom .glyph { bottom: 0; }

/* The animated leaves: a top leaf flips down to reveal the new
   top, a bottom leaf flips up to reveal the new bottom. We use
   two extra layers for this. */
.dpad-board__flap .leaf {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  background: var(--flap-bg);
  color: var(--flap-fg);
  border-radius: 4px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 3;
  will-change: transform;
}

/* Leaf glyphs use the same top/bottom positioning trick as halves.
   Must mirror .half .glyph EXACTLY — top and bottom of a character
   are rendered by different layers, so any font mismatch is visible. */
.dpad-board__flap .leaf .glyph {
  position: absolute;
  width: 100%;
  text-align: center;
  height: var(--flap-h);
  line-height: var(--flap-h);
  font-family: var(--flap-font-family);
  font-weight: 700;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}
.dpad-board__flap .leaf.top    .glyph { top: 0; }
.dpad-board__flap .leaf.bottom .glyph { bottom: 0; }

.dpad-board__flap .leaf.top {
  top: 0;
  transform-origin: bottom center;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dpad-board__flap .leaf.bottom {
  bottom: 0;
  transform-origin: top center;
  background: var(--flap-bg-shadow);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  transform: rotateX(90deg);
}

.dpad-board__flap.flipping .leaf.top {
  animation: dpad-flip-top 28ms ease-in forwards;
}
.dpad-board__flap.flipping .leaf.bottom {
  animation: dpad-flip-bottom 28ms ease-out 28ms forwards;
}

@keyframes dpad-flip-top {
  0%   { transform: rotateX(0deg);   background: var(--flap-bg); }
  100% { transform: rotateX(-90deg); background: #15151f; }
}
@keyframes dpad-flip-bottom {
  0%   { transform: rotateX(90deg); background: #15151f; }
  100% { transform: rotateX(0deg);  background: var(--flap-bg-shadow); }
}

/* ----------------------------------------------------------
   Responsive: --flap-font and --flap-h are written by the JS
   _fit() routine based on container width. We just dial back
   the padding on narrow screens.
   ---------------------------------------------------------- */
@media (max-width: 640px) { .dpad-board { padding: 12px 10px; } }
@media (max-width: 420px) { .dpad-board { padding: 10px 8px; } }

/* Reduced motion: no flips, just instant text swaps */
@media (prefers-reduced-motion: reduce) {
  .dpad-board__flap.flipping .leaf.top,
  .dpad-board__flap.flipping .leaf.bottom {
    animation-duration: 0.001s;
  }
}