/* ==========================================================================
   NEXICUS — interaction states
   --------------------------------------------------------------------------
   The previous framework compiled style-hover / style-focus attributes into
   real CSS at render time. This build is plain HTML, where those attributes do
   nothing, so every rule below is the compiled equivalent. Generated from the
   markup — do not hand-edit; change the source attribute and rebuild.

   Declarations carry !important because the base value is an inline style,
   which would otherwise always win.
   ========================================================================== */

@media (hover: hover) {
  .nxh1:hover { color:var(--color-gold-300) !important }
  .nxh2:hover { color:var(--color-accent-700) !important }
  .nxh3:hover { transform:translateY(-1px) !important;box-shadow:var(--shadow-md) !important }
  .nxh4:hover { background:var(--color-accent-100) !important;border-color:var(--color-accent-300) !important }
  .nxh5:hover { background:var(--color-accent-100) !important;border-color:var(--color-accent-400) !important;color:var(--color-accent-800) !important }
  .nxh6:hover { border-color:var(--nx-teal) !important;color:var(--color-accent-800) !important }
  .nxh7:hover { color:var(--nx-teal) !important }
  .nxh8:hover { border-color:var(--nx-teal) !important;background:var(--color-accent-100) !important }
  .nxh9:hover { border-color:var(--nx-coral) !important;background:var(--color-accent-2-100) !important }
  .nxh10:hover { transform:translateY(-3px) !important;box-shadow:var(--shadow-md) !important;border-color:var(--nx-teal) !important }
  .nxh11:hover { background:var(--color-gold-400) !important }
  .nxh12:hover { background:rgba(255,255,255,0.12) !important }
  .nxh13:hover { transform:translateY(-2px) !important;background:var(--color-accent-800) !important }
  .nxh14:hover { background:rgba(255,255,255,0.14) !important }
  .nxh15:hover { color:#fff !important }
  .nxh16:hover { border-color:var(--nx-coral) !important;color:var(--color-accent-2-800) !important }
  .nxh17:hover { transform:translateY(-3px) !important;box-shadow:var(--shadow-md) !important;border-color:var(--nx-coral) !important }
  .nxh18:hover { background:#fff !important;color:var(--color-accent-800) !important }
  .nxh19:hover { border-color:var(--nx-gold) !important;color:#fff !important }
  .nxh20:hover { transform:translateY(-3px) !important;box-shadow:var(--shadow-lg) !important }
  .nxh21:hover { transform:translateY(-3px) !important;box-shadow:var(--shadow-md) !important;border-color:var(--nx-gold) !important }
}

/* Keyboard focus — always active, never gated behind a hover query. */
.nxf1:focus-visible { left:0 !important;top:0 !important }

/* Give keyboard users the same affordance as pointer users. */
.nxh1:focus-visible { color:var(--color-gold-300) !important }
.nxh2:focus-visible { color:var(--color-accent-700) !important }
.nxh3:focus-visible { transform:translateY(-1px) !important;box-shadow:var(--shadow-md) !important }
.nxh4:focus-visible { background:var(--color-accent-100) !important;border-color:var(--color-accent-300) !important }
.nxh5:focus-visible { background:var(--color-accent-100) !important;border-color:var(--color-accent-400) !important;color:var(--color-accent-800) !important }
.nxh6:focus-visible { border-color:var(--nx-teal) !important;color:var(--color-accent-800) !important }
.nxh7:focus-visible { color:var(--nx-teal) !important }
.nxh8:focus-visible { border-color:var(--nx-teal) !important;background:var(--color-accent-100) !important }
.nxh9:focus-visible { border-color:var(--nx-coral) !important;background:var(--color-accent-2-100) !important }
.nxh10:focus-visible { transform:translateY(-3px) !important;box-shadow:var(--shadow-md) !important;border-color:var(--nx-teal) !important }
.nxh11:focus-visible { background:var(--color-gold-400) !important }
.nxh12:focus-visible { background:rgba(255,255,255,0.12) !important }
.nxh13:focus-visible { transform:translateY(-2px) !important;background:var(--color-accent-800) !important }
.nxh14:focus-visible { background:rgba(255,255,255,0.14) !important }
.nxh15:focus-visible { color:#fff !important }
.nxh16:focus-visible { border-color:var(--nx-coral) !important;color:var(--color-accent-2-800) !important }
.nxh17:focus-visible { transform:translateY(-3px) !important;box-shadow:var(--shadow-md) !important;border-color:var(--nx-coral) !important }
.nxh18:focus-visible { background:#fff !important;color:var(--color-accent-800) !important }
.nxh19:focus-visible { border-color:var(--nx-gold) !important;color:#fff !important }
.nxh20:focus-visible { transform:translateY(-3px) !important;box-shadow:var(--shadow-lg) !important }
.nxh21:focus-visible { transform:translateY(-3px) !important;box-shadow:var(--shadow-md) !important;border-color:var(--nx-gold) !important }