/* mech-nixie — Nixie tube / VFD numerals. Colours come from custom properties the module sets from opts
   (--mc-nx-hue, --mc-nx-core, --mc-nx-glass…); override them on .mc-nixie to restyle. No transitions here:
   every change is an opacity crossfade run by component.js; the glow is a static SVG filter, never animated. */
.mc-nixie {
  --mc-nx-size: 72px; --mc-nx-contrast: 1;
  position: relative; display: inline-flex; vertical-align: middle; line-height: 1; font-family: var(--mc-font);
}
.mc-nixie .mc-nx-sr, .mc-nixie .mc-nx-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.mc-nixie .mc-nx-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.mc-nixie .mc-nx-rack { display: inline-flex; align-items: flex-end; gap: calc(var(--mc-nx-size) * 0.06); }

/* the tube: a glass envelope with a domed top, a seated base and a soft reflection */
.mc-nixie .mc-nx-tube {
  position: relative; flex: none; width: calc(var(--mc-nx-size) * 0.64); height: var(--mc-nx-size);
  border-radius: calc(var(--mc-nx-size) * 0.32) calc(var(--mc-nx-size) * 0.32) calc(var(--mc-nx-size) * 0.08) calc(var(--mc-nx-size) * 0.08);
  background: radial-gradient(120% 80% at 50% 38%, var(--mc-nx-tint) 0%, var(--mc-nx-glass-2) 55%, var(--mc-nx-glass) 100%);
  box-shadow: inset 0 0 0 1px var(--mc-nx-rim), inset 0 calc(var(--mc-nx-size) * -0.05) calc(var(--mc-nx-size) * 0.08) var(--mc-nx-glass);
  isolation: isolate;
}
.mc-nixie .mc-nx-tube::before { /* glass reflection: a static vertical sheen */
  content: ""; position: absolute; inset: 6% 58% 18% 14%; border-radius: 999px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--mc-nx-core) 45%, transparent); opacity: 0.09;
}
.mc-nixie .mc-nx-tube::after { /* bakelite base */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: calc(var(--mc-nx-size) * -0.07); height: calc(var(--mc-nx-size) * 0.07);
  border-radius: 0 0 calc(var(--mc-nx-size) * 0.04) calc(var(--mc-nx-size) * 0.04); background: var(--mc-nx-rim);
}
.mc-nixie .mc-nx-sep { position: relative; flex: none; width: calc(var(--mc-nx-size) * 0.2); height: var(--mc-nx-size); }
.mc-nixie .mc-nx-svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; }

/* cathodes: dark wire always visible; the lit core + pre-blurred halo layers only change opacity */
.mc-nixie .mc-nx-wire { fill: none; stroke: var(--mc-nx-wire); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round;
  opacity: calc(var(--mc-nx-ghost) * var(--mc-nx-contrast)); }
.mc-nixie .mc-nx-core { fill: none; stroke: var(--mc-nx-core); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mc-nixie .mc-nx-halo { fill: none; stroke: var(--mc-nx-hue); stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; }
.mc-nixie .mc-nx-flare { fill: none; stroke: var(--mc-nx-hue); stroke-width: 5; stroke-linecap: round; }
.mc-nixie .mc-nx-sep .mc-nx-core, .mc-nixie .mc-nx-sep .mc-nx-halo { fill: var(--mc-nx-core); stroke: none; }
.mc-nixie .mc-nx-sep .mc-nx-halo { fill: var(--mc-nx-hue); }
.mc-nixie .mc-nx-sep .mc-nx-wire { fill: var(--mc-nx-wire); stroke: none; }
.mc-nixie .mc-nx-mesh { pointer-events: none; opacity: 0.55; }
.mc-nixie .mc-nx-mesh-line { fill: none; stroke: var(--mc-nx-wire); stroke-width: 0.22; }
.mc-nixie .mc-nx-sep .mc-nx-mesh { display: none; }

/* VFD: one phosphor window, slanted 7-segment cells, ghost segments in the phosphor hue */
.mc-nixie.is-vfd .mc-nx-rack {
  position: relative; gap: calc(var(--mc-nx-size) * 0.04); padding: calc(var(--mc-nx-size) * 0.14) calc(var(--mc-nx-size) * 0.18);
  border-radius: calc(var(--mc-nx-size) * 0.08); background: radial-gradient(140% 120% at 50% 40%, var(--mc-nx-tint), var(--mc-nx-glass) 70%);
  box-shadow: inset 0 0 0 1px var(--mc-nx-rim);
}
.mc-nixie.is-vfd .mc-nx-rack::after { /* the tinted filter glass over the phosphor */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--mc-nx-core) 0%, transparent 18%); opacity: 0.06;
}
.mc-nixie.is-vfd .mc-nx-tube { width: calc(var(--mc-nx-size) * 0.56); background: none; box-shadow: none; border-radius: 0; }
.mc-nixie.is-vfd .mc-nx-tube::before, .mc-nixie.is-vfd .mc-nx-tube::after { display: none; }
.mc-nixie.is-vfd .mc-nx-sep { width: calc(var(--mc-nx-size) * 0.16); }
.mc-nixie.is-vfd .mc-nx-svg { transform: skewX(-7deg); }
.mc-nixie.is-vfd .mc-nx-wire { fill: var(--mc-nx-hue); stroke: none; }
.mc-nixie.is-vfd .mc-nx-core { fill: var(--mc-nx-core); stroke: none; }
.mc-nixie.is-vfd .mc-nx-halo, .mc-nixie.is-vfd .mc-nx-flare { fill: var(--mc-nx-hue); stroke: none; }
.mc-nixie.is-vfd .mc-nx-mesh { opacity: 0.35; }

@media (prefers-reduced-motion: reduce) {
  /* the module swaps digits in one frame with no flare; the flare layer is not drawn at all */
  .mc-nixie .mc-nx-flare { display: none; }
}
@media (prefers-contrast: more) {
  .mc-nixie { --mc-nx-contrast: 1.8; }
  .mc-nixie .mc-nx-tube { box-shadow: inset 0 0 0 2px var(--mc-nx-rim); }
}

/* forced colours: plain digits in system colours, the tubes are not drawn */
@media (forced-colors: active) {
  .mc-nixie .mc-nx-rack { display: none; }
  .mc-nixie .mc-nx-text {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none;
    padding: 0.1em 0.3em; border: 2px solid CanvasText; color: CanvasText; background: Canvas;
    font-size: calc(var(--mc-nx-size) * 0.62); font-variant-numeric: tabular-nums; white-space: pre;
  }
}
:root[data-mc-forced="active"] .mc-nixie .mc-nx-rack { display: none; }
:root[data-mc-forced="active"] .mc-nixie .mc-nx-text {
  position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none;
  padding: 0.1em 0.3em; border: 2px solid CanvasText; color: CanvasText; background: Canvas;
  font-size: calc(var(--mc-nx-size) * 0.62); font-variant-numeric: tabular-nums; white-space: pre;
}