/* Visual mechanism only; these are not manufacturing dimensions. */
.flap-grid {
  display: grid;
  grid-template-columns: repeat(var(--flap-cols, 15), minmax(0, 1fr));
  gap: var(--row-gap, 5px) var(--column-gap, 5px);
  isolation: isolate;
}
.flap-cell {
  position: relative;
  min-width: 0;
  aspect-ratio: var(--cell-aspect, .48);
  height: var(--cell-h, auto);
  border-radius: 5% / 2.8%;
  background: #090909;
  box-shadow: inset 1px 0 2px #000, inset -1px 0 2px #000,
    0 1px 0 #ffffff09, 0 -1px 0 #000;
  -webkit-tap-highlight-color: transparent;
}
.flap-cell::before,
.flap-cell::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, #20201f 0, #20201f .7px, #060606 1.1px, #060606 2.5px);
  box-shadow: inset 0 1px 2px #000, 1px 0 1px #000, -1px 0 1px #000;
}
.flap-cell::before { top: 3%; height: 10%; border-radius: 4px 4px 0 0; opacity: .65; }
.flap-cell::after { bottom: 3%; height: 12%; border-radius: 0 0 3px 3px; transform: perspective(180px) rotateX(17deg); transform-origin: top; }
.flap-retainer {
  position: absolute;
  width: 5%;
  min-width: 1px;
  height: 8%;
  top: 5%;
  z-index: 4;
  background: linear-gradient(90deg, #080808, #464644 45%, #141414 75%);
  border-radius: 0 0 1px 1px;
  box-shadow: 1px 1px 1px #000;
  pointer-events: none;
}
.flap-retainer--left { left: 24%; }
.flap-retainer--right { right: 24%; }
.flap-display {
  position: absolute;
  inset: 12% 5% 14%;
  perspective: 450px;
  perspective-origin: 50% 50%;
  border-radius: 2px;
  background: #181817;
  --face-color: #1d1d1b;
}
.flap-half,
.flap-face {
  position: absolute;
  inset-inline: 0;
  height: 50%;
  overflow: hidden;
  background: var(--face-color, #1d1d1b);
  color: var(--glyph-color, #e9e8e2);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flap-half::after,
.flap-face::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, #ffffff03, transparent 50%);
}
.flap-half--top {
  top: 0;
  border-radius: 2px 2px 0 0;
  background-image: linear-gradient(#ffffff05, transparent 80%, #00000016);
}
.flap-half--bottom {
  bottom: 0;
  border-radius: 0 0 2px 2px;
  background-image: linear-gradient(#00000018, transparent 18%, #00000008);
}
.flap-glyph {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: var(--flap-height, 48px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--glyph-font, 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif);
  font-size: var(--glyph-size, calc(var(--flap-height, 48px) * 1.1));
  font-weight: var(--glyph-weight, 300);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  letter-spacing: var(--glyph-spacing, 0);
  white-space: pre;
  transform: scaleX(var(--glyph-scale-x, .74)) translateY(var(--glyph-offset, 0));
  user-select: none;
  -webkit-user-select: none;
  text-shadow: 0 .25px 0 #ffffff12;
}
.flap-half--bottom .flap-glyph,
.flap-face--back .flap-glyph { top: calc(var(--flap-height, 48px) * -.5); }
.flap-leaf {
  position: absolute;
  inset: 0 0 50%;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transform: rotateX(0deg);
  z-index: 2;
  visibility: hidden;
  pointer-events: none;
}
.flap-cell.is-flipping .flap-leaf { visibility: visible; will-change: transform; }
.flap-face { inset: 0; height: 100%; }
.flap-face--front { transform: translateZ(.05px); border-radius: 2px 2px 0 0; }
.flap-face--back { transform: rotateX(180deg) translateZ(.05px); border-radius: 0 0 2px 2px; }
.flap-face--front::after { background: linear-gradient(to bottom, #ffffff04, #00000012); }
.flap-face--back::after { background: linear-gradient(to bottom, #00000012, transparent 35%); }
.flap-hinge {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: var(--hinge-width, 1px);
  transform: translateY(-50%) translateZ(.2px);
  background: #060606;
  box-shadow: 0 1px 0 #ffffff06;
  z-index: 3;
  pointer-events: none;
}
.flap-cell[data-color] .flap-display { box-shadow: 0 0 1px #000; }
@media (prefers-reduced-motion: reduce) {
  .flap-leaf { will-change: auto !important; }
}