/* ── Neon ─────────────────────────────────────────────────────────────────
   The neon treatment as CSS, not artwork.

   The headings and the nav CTA are PNGs because they are display type and
   never change. Buttons are NOT: a picture of a button loses its hover
   state, its focus ring, its text scaling and its translation, and needs
   alt text to say what a label already says. So the same look is rebuilt
   here out of a border, a box-shadow and a text-shadow.

   Colour follows the house rule in CLAUDE.md: --accent is the SYSTEM colour,
   it means "you can press this", and a .tint-* must never recolour a button.
   So the tube on a BUTTON is pinned to --sys, exactly as theme.css:163 pins
   the solid ones — including the ghost buttons, which that rule misses and
   which were coming out indigo inside .tint-fleet. Tags and headings are not
   pressable, so those do take the section hue.

   Add .neon to an existing .btn / .pill-btn / .status-tag. The base class
   keeps the sizing; this only restyles the surface.
   ──────────────────────────────────────────────────────────────────────── */

.neon {
  --neon: var(--sys, #0071e3);
  --neon-90: color-mix(in srgb, var(--neon) 90%, transparent);
  --neon-55: color-mix(in srgb, var(--neon) 55%, transparent);
  --neon-30: color-mix(in srgb, var(--neon) 30%, transparent);
  --neon-18: color-mix(in srgb, var(--neon) 18%, transparent);

  background: transparent;
  color: var(--neon);
  border: 2px solid var(--neon);
  box-shadow: 0 0 4px var(--neon-90), 0 0 14px var(--neon-55),
              0 0 32px var(--neon-30), inset 0 0 10px var(--neon-18);
  text-shadow: 0 0 7px var(--neon-55);
  transition: box-shadow .18s ease, color .18s ease, border-color .18s ease;
}

/* Dark surfaces get the lifted blue, same pairing theme.css uses. */
:is(:root[data-theme="dark"], .on-dark, .card.dark) .neon { --neon: var(--sys-dark, #0A84FF); }

.neon:hover,
.neon:focus-visible {
  box-shadow: 0 0 6px var(--neon), 0 0 22px var(--neon-90),
              0 0 52px var(--neon-55), inset 0 0 16px var(--neon-30);
  text-shadow: 0 0 10px var(--neon-90);
}
/* The focus ring must not be the glow — a glow is decoration and is the same
   in both states. Keep a real, high-contrast outline. */
.neon:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
.neon:active { box-shadow: 0 0 3px var(--neon-90), inset 0 0 18px var(--neon-30); }

/* Pill geometry, matching the artwork CTAs. The two-class form is deliberate:
   .btn.ghost already sets a colour at (0,2,0), so a bare .neon at (0,1,0)
   would lose and the label would stay dark inside a glowing tube. */
.pill-btn.neon, .btn.neon, .cta.neon { border-radius: 999px; }
.btn.neon, .btn.ghost.neon, .btn.small.neon, .cta.neon,
.pill-btn.neon, .pill-btn.solid.neon, .pill-btn.line.neon,
/* home.css scopes the outline pill per card — .card.dark .pill-btn.line is
   four classes, so the three-class form above loses to it and the label came
   out white inside a blue tube. These match that weight and then some. */
.card.light .pill-btn.line.neon, .card.dark .pill-btn.line.neon,
.card.light .pill-btn.solid.neon, .card.dark .pill-btn.solid.neon {
  background: transparent; color: var(--neon); border-color: var(--neon);
}
.btn.neon { padding: 13px 25px; font-weight: 600; }

/* Status badges: same tube, quieter, since they sit above the heading */
/* Tags carry the SUBJECT, so these do take the section hue. */
.status-tag.neon {
  --neon: var(--accent, #0071e3);
  background: transparent; border: 1.5px solid var(--neon); color: var(--neon);
  box-shadow: 0 0 3px var(--neon-90), 0 0 10px var(--neon-30);
  text-shadow: 0 0 6px var(--neon-30);
}

/* Headline text as neon, for the sentence-length H1s that are too long to
   ship as images. Outline type needs a real stroke, and -webkit-text-stroke
   is the only one that does not double the weight. */
.h-neon {
  --neon: var(--accent, #0071e3);
  color: transparent;
  -webkit-text-stroke: 1.6px var(--neon);
  paint-order: stroke fill;
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--neon) 85%, transparent))
          drop-shadow(0 0 12px color-mix(in srgb, var(--neon) 45%, transparent));
}
@supports not (-webkit-text-stroke: 1px red) {
  .h-neon { color: var(--neon); -webkit-text-stroke: 0; }
}

/* color-mix is Safari 16.2+/Chrome 111+. Older engines get a flat outlined
   button rather than a transparent, invisible one. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .neon { color: var(--neon); border-color: var(--neon); box-shadow: none; text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) { .neon { transition: none; } }
/* Glow is contrast-reducing by nature; forced-colours users get the plain
   button back. */
@media (prefers-contrast: more), (forced-colors: active) {
  .neon { box-shadow: none; text-shadow: none; }
  .h-neon { filter: none; color: var(--neon); -webkit-text-stroke: 0; }
}

/* ── The artwork CTA outside the nav ──────────────────────────────────────
   chrome.css sizes .cta-neon only inside .nav-pill, so the same markup used
   in a page body rendered at the file's natural 495px. This is the body
   size; the nav rule is more specific and still wins there. */
.cta-neon { background: none; border: 0; padding: 0; line-height: 0; display: inline-block; }
.cta-neon img { display: block; width: auto; height: 52px; }
@media (max-width: 560px) { .cta-neon img { height: 46px; } }