.flip-board
{
    display: inline-flex;
    gap: 0.35rem;
    font-size: clamp(0.5rem, 5vw, 4rem);
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.flip-digit
{
    position: relative;
    width: 1em;
    height: 1.4em;
    perspective: 1000px;
}

.flip-card
{
    position: absolute;
    inset: 0;
}

.flip-half
{
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #111;
    color: #fff;
    backface-visibility: hidden;
}

.flip-top
{
    top: 0;
    border-bottom: 1px solid #000;
}

.flip-bottom
{
    bottom: 0;
    border-top: 1px solid #000;
}

.flip-top span
{
    transform: translateY(25%);
}

.flip-bottom span
{
    transform: translateY(-25%);
}

/* Animation */

.flip-digit.flipping .flip-top
{
    transform-origin: bottom;
    animation: flipTop 180ms ease-in forwards;
}

.flip-digit.flipping .flip-bottom
{
    transform-origin: top;
    animation: flipBottom 180ms ease-out 90ms forwards; /* delay so bottom starts as top finishes */
}

@keyframes flipTop
{
    from { transform: rotateX(0deg); }
    to   { transform: rotateX(-90deg); }
}

@keyframes flipBottom
{
    from { transform: rotateX(90deg); }
    to   { transform: rotateX(0deg); }
}

.flip-sep
{
    width: 0.4em;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
.green
{
    color:green;
}
.red
{
    color:var(--color-secondary);
}
.tbi
{
    font-size: .85rem;
}
.text-accent
{
    color: var(--color-accent);
}
@keyframes filingFadeUp
{
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.filing-new
{
    animation: filingFadeUp 0.35s ease both;
}