/* THE fixed-slot digits widget — each digit sits in a fixed-width slot, so nothing jitters
   as values change. Colours/size are CSS variables; override per use site.
   Markup is built by cyber-clock.js (CyberClock.mount / set / mountNum / setNum / digits). */
.cyber-clock {
    --cc-size: 1.4rem;        /* overall size */
    --cc-digit: #fff;         /* digit colour */
    --cc-colon: #00d2ff;      /* separator colour */
    --cc-dw: 0.78em;          /* digit slot width (relative to size) */
    --cc-font: 'Orbitron';    /* digit font — override per instance (e.g. Arial) via the `font` option */
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-family: var(--cc-font), sans-serif;
    font-size: var(--cc-size);
    line-height: 1;
}
.cyber-clock .cc-d {
    width: var(--cc-dw);
    text-align: center;
    font-weight: 900;
    color: var(--cc-digit);
}
.cyber-clock .cc-sep {
    width: var(--cc-sw, 0.6em); /* colon slot — wider than the digit gap → clear air left & right */
    text-align: center;
    font-weight: 700;
    color: var(--cc-colon);
}

/* Number variant (stats) — lighter than the clock, with a narrow decimal-point slot.
   --cc-dw is the digit slot width: it MUST exceed the widest Orbitron-700 digit advance
   or wide digits clip ("gequetscht"); tune/measure on device like the timer's --cc-dw. */
.cyber-num {
    --cc-dw: 0.7em;
    gap: 0;
}
.cyber-num .cc-d {
    font-weight: 700;
}
.cyber-num .cc-dot {
    width: 0.26em;
    text-align: center;
    font-weight: 700;
    color: var(--cc-digit);
}

/* General digits (CyberClock.digits): telemetry in the labs, score columns in tables.
   Slot height, weight, colour and glow come from variables — the labs set their neon look
   centrally in cyber-lab-overrides.css, a light page like the svp sets its own. */
.cyber-digits {
    --cc-dw: 0.7em;
    --cc-sw: 0.35em;
    --cc-colon: var(--cc-digit);      /* separators in the digit colour */
    gap: 2px;
}
.cyber-digits .cc-d, .cyber-digits .cc-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--cc-h, auto);
    font-weight: var(--cc-weight, 700);
    text-shadow: var(--cc-shadow, none);
}
.cyber-digits .cc-sep { opacity: var(--cc-sep-opacity, 1); }