/* Split-flap boards. FLAP-owned.
   Geometry comes from the --flap-* tokens (60 x 75, 10px padding, 8px gap). Every value
   resolves to whole pixels: a tile is two equal halves plus a real 1px hinge gap
   (75 = 37 + 1 + 37), so the halves always meet on the same pixel row.

   Cell anatomy (built by js/split-flap.js):
     .sf-cell              tile box: perspective, soft depth, hinge band, appear/disappear
       .sf-top.sf-static   next glyph, top half (revealed as the flap falls)
       .sf-bottom.sf-static current glyph, bottom half (covered as the flap lands)
       .sf-bottom.sf-flap  next glyph, bottom half: lands 90deg -> 0 on its top edge
       .sf-top.sf-flap     current glyph, top half: falls 0 -> -90deg on its bottom edge
   Each half clips a full-height glyph layer, so both halves share one baseline. */

.split-flap {
  display: block;
  margin: 0;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

/* Hero board: scales with its own width, so it is a size container. It must stay a
   full-width block (width:100%), otherwise an inline-size container collapses. */
.split-flap--fluid {
  container-type: inline-size;
  /* Size containment gives the host no intrinsic width; inside a shrink-to-fit parent
     (the h1 is a centred flex item) declare the full-size row width instead. */
  contain-intrinsic-inline-size: calc(var(--flap-w, 60px) * 10 + var(--flap-gap, 8px) * 9);
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}

/* LAUNCH countdown size (44 x 55, 7px padding, 6px gap). */
.split-flap--sm {
  --flap-w: 44px;
  --flap-h: 55px;
  --flap-pad: 7px;
  --flap-gap: 6px;
  --flap-mid: 2px;
}

.sf-row {
  --sf-n: 10;
  --sf-w: var(--flap-w, 60px);
  --sf-pad: var(--flap-pad, 10px);
  --sf-gap: var(--flap-gap, 8px);
  --sf-mid: var(--flap-mid, 2px);                /* the visible split between the two flaps */
  --sf-h: var(--flap-h, 75px);                   /* tile height stays exact (75 = 36 + 2 + 37) */
  --sf-half: calc((var(--sf-h) - var(--sf-mid)) / 2);        /* top flap */
  --sf-half-b: calc(var(--sf-h) - var(--sf-mid) - var(--sf-half)); /* bottom flap takes the odd pixel */
  --sf-font: calc(var(--sf-w) * .8334);          /* 50px glyphs on a 60px tile */
  --sf-dy: calc(var(--sf-font) * .045);          /* optical centre: caps centred on the hinge */
  --sf-radius: 4px;
  --sf-top: #f3f3f3;                             /* a hair lighter than the bottom half */
  --sf-bottom: var(--tile, #efefef);
  --sf-hinge: transparent;                       /* the split reads as a real gap */
  --sf-ink: var(--ink, #191919);
  --sf-shade: #000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sf-gap);
  height: var(--sf-h);
}

/* Proportional scaling (4:5 tile; padding and gap scale too) when the container can't
   fit the row at full size: 10 x 60 + 9 x 8 = 672px. Ratios mirror the tokens. */
.split-flap--fluid > .sf-row {
  --sf-w: min(var(--flap-w, 60px), (100cqw + .5px) / (var(--sf-n) + (var(--sf-n) - 1) * .13333));
  --sf-gap: min(var(--flap-gap, 8px), var(--sf-w) * .13333);
  --sf-pad: min(var(--flap-pad, 10px), var(--sf-w) / 6);
  --sf-mid: var(--flap-mid, 2px);
  --sf-h: min(var(--flap-h, 75px), var(--sf-w) * 1.25);
}

@supports (width: round(down, 1.5px, 1px)) {
  .sf-row {
    --sf-half: round(down, (var(--sf-h) - var(--sf-mid)) / 2, 1px);
    --sf-font: round(var(--sf-w) * .8334, 1px);
    --sf-dy: round(var(--sf-font) * .045, 1px);
  }
  .split-flap--fluid > .sf-row {
    --sf-w: min(var(--flap-w, 60px), round(down, (100cqw + .5px) / (var(--sf-n) + (var(--sf-n) - 1) * .13333), 1px));
    --sf-gap: min(var(--flap-gap, 8px), round(down, var(--sf-w) * .13334, 1px));
    --sf-pad: min(var(--flap-pad, 10px), round(var(--sf-w) / 6, 1px));
    --sf-mid: clamp(1px, round(var(--sf-w) / 30, 1px), var(--flap-mid, 2px));
    --sf-h: min(var(--flap-h, 75px), round(var(--sf-w) * 1.25, 1px));
    --sf-half: round(down, (var(--sf-h) - var(--sf-mid)) / 2, 1px);
  }
}

.split-flap--sm > .sf-row { --sf-radius: 3px; }

.sf-cell {
  position: relative;
  display: block;
  flex: 0 0 var(--sf-w);
  box-sizing: border-box;
  width: var(--sf-w);
  height: var(--sf-h);
  border-radius: var(--sf-radius);
  /* The split: only the gap between the halves shows this band. */
  background: linear-gradient(to bottom,
    transparent var(--sf-half),
    var(--sf-hinge) var(--sf-half) calc(var(--sf-half) + var(--sf-mid)),
    transparent calc(var(--sf-half) + var(--sf-mid)));
  box-shadow: none;
  perspective: calc(var(--sf-h) * 4);
  perspective-origin: 50% 50%;
}

.sf-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--sf-half);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.sf-top {
  top: 0;
  border-radius: var(--sf-radius) var(--sf-radius) 0 0;
  background: var(--sf-top);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(25, 25, 25, .07);
  transform-origin: 50% 100%;
}
.sf-bottom {
  top: calc(var(--sf-half) + var(--sf-mid));
  height: var(--sf-half-b);
  border-radius: 0 0 var(--sf-radius) var(--sf-radius);
  background: var(--sf-bottom);
  box-shadow: inset 0 -1px 0 rgba(25, 25, 25, .035);
  transform-origin: 50% 0;
}
.sf-flap { z-index: 2; }
.sf-flap.sf-bottom { transform: rotateX(90deg); opacity: 0; }

/* Full-height glyph layer, clipped by its half. Flex centring keeps an extra-wide glyph
   (M, W) centred on the tile instead of overflowing to one side. */
.sf-glyph {
  position: absolute;
  left: 0;
  top: var(--sf-dy);
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: var(--sf-h);
  padding: 0 var(--sf-pad);
  color: var(--sf-ink);
  font-family: var(--font-display, 'Turret Road', Arial, sans-serif);
  font-size: var(--sf-font);
  font-style: normal;
  font-weight: 500;
  line-height: var(--sf-h);
  letter-spacing: 0;
  text-transform: none;
  white-space: pre;
  font-kerning: none;
  font-synthesis: none;
  pointer-events: none;
}
.sf-bottom > .sf-glyph { top: calc(var(--sf-dy) - var(--sf-half) - var(--sf-mid)); }

.sf-shade {
  position: absolute;
  inset: 0;
  background: var(--sf-shade);
  opacity: 0;
  pointer-events: none;
}

/* Authored fallback (index.html): the same tile, drawn flat, until the board is built.
   Pixel-identical at rest so the swap is invisible and nothing shifts. */
.sf-row--static > .sf-cell {
  display: flex;
  justify-content: center;
  padding: var(--sf-dy) var(--sf-pad) 0;
  overflow: hidden;
  background: linear-gradient(to bottom,
    var(--sf-top) var(--sf-half),
    transparent var(--sf-half) calc(var(--sf-half) + var(--sf-mid)),
    var(--sf-bottom) calc(var(--sf-half) + var(--sf-mid)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
  color: var(--sf-ink);
  font-family: var(--font-display, 'Turret Road', Arial, sans-serif);
  font-size: var(--sf-font);
  font-weight: 500;
  line-height: var(--sf-h);
  white-space: pre;
  font-kerning: none;
}
.sf-row--static > .sf-cell::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: var(--sf-half);
  height: var(--sf-mid);
  background: var(--sf-hinge);
}
.sf-row--static > .sf-cell--blank { opacity: 0; }

/* Accessible text for boards whose host is not aria-hidden (e.g. the countdown). */
.sf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Narrow phones: smaller countdown tiles (still 4:5, odd height for a centred hinge). */
@media (max-width: 480px) {
  .split-flap--sm {
    --flap-w: 36px;
    --flap-h: 45px;
    --flap-pad: 6px;
    --flap-gap: 5px;
    --flap-mid: 2px;
  }
}

@media (forced-colors: active) {
  .sf-cell, .sf-half, .sf-row--static > .sf-cell { forced-color-adjust: none; }
}