/* ============================================================================
 * shared/devoxx/03-machine-id/style.css
 * ───────────────────────────────────────────────────────────────────────────
 * Module-specific sizing + counter styling. All role colors, state classes,
 * label fade, terminal styling are inherited from the zen framework:
 *   - /shared/zen/core/core.css
 *   - /shared/zen/components/box/box.css
 *   - /shared/zen/components/label/label.css
 *   - /shared/zen/components/terminal/terminal.css
 * ============================================================================ */

/* Box sizing — keep room between the 3 top boxes and the bottom row. */
#box-gitlab,
#box-teleport,
#box-target { width: 14%; }

#box-counter { width: 20%; }

#term {
    width: 30%;
    height: 26%;
}

/* Counter display — big number, pulse on update */
.counter-card .counter-value {
    font-family: 'Courier New', monospace;
    font-size: 3.4rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--pink);
    text-align: center;
    margin: 10px 0 4px 0;
    line-height: 1;
    text-shadow: 0 0 24px rgba(244, 114, 182, 0.45);
}

.counter-card .counter-value.pulse {
    animation: counter-pulse 0.45s cubic-bezier(.16, 1, .3, 1);
}

@keyframes counter-pulse {
    0%   { transform: scale(1);    filter: brightness(1); }
    40%  { transform: scale(1.08); filter: brightness(1.25); }
    100% { transform: scale(1);    filter: brightness(1); }
}

/* Secret card — red, floats next to GitLab, slightly bigger than a regular chip */
.secret-card {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    padding: 6px 12px;
    letter-spacing: 0.03em;
}