/* =====================================================================
   Operation Nightjar PIN lock (nightjar-lock.js)
   - .nl: the PIN pad, a red phosphor terminal that turns green when the
     PIN is accepted. One colour (--nl-c) drives every glow.
   - .nl-alarm / .nl-granted / .nl-shake: the terminal that launched the
     lock. The training TV is styled here; the Nightjar activity card
     styles its own.
   - .nl-siren: the "ACCESS LOCKED" screen laid over that terminal.
   ===================================================================== */
@font-face {
  font-family: "Nightjar Lock Mono";
  src: url("/assets/training/fonts/jetbrains-mono.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@property --nl-c {
  syntax: "<color>";
  inherits: true;
  initial-value: #ff4a3d;
}

/* ---------------------------------------------------------- PIN pad */
.nl {
  --nl-mono: "Nightjar Lock Mono", ui-monospace, Consolas, monospace;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 16px;
  overflow: auto;
  border: 0;
  background: transparent;
  color: #fff;
  direction: ltr;
  font-family: var(--nl-mono);
  text-align: center;
}
.nl[open] { display: grid; place-items: center; }
.nl::backdrop {
  background: radial-gradient(ellipse at 50% 45%, rgba(110, 6, 2, .5), rgba(8, 1, 1, .9) 72%);
  -webkit-backdrop-filter: blur(5px) saturate(.7);
  backdrop-filter: blur(5px) saturate(.7);
  animation: nlFade .35s ease both;
}
.nl .ar { font-family: "Noto Kufi Arabic", var(--nl-mono); }
body.lang-ar .nl__title,
body.lang-ar .nl__desc,
body.lang-ar .nl__status,
body.lang-ar .nl__foot { direction: rtl; }

.nl__frame { width: min(100%, 23.5rem); animation: nlOn .55s cubic-bezier(.2, .8, .2, 1) both; }
.nl__panel {
  --nl-c: #ff4a3d;
  position: relative;
  padding: 1.1rem 1.2rem 1rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--nl-c) 46%, transparent);
  border-radius: 24px;
  outline: none;
  background:
    radial-gradient(ellipse 120% 62% at 50% 0%, color-mix(in srgb, var(--nl-c) 17%, #0b0303), rgba(11, 3, 3, 0) 75%),
    linear-gradient(180deg, #0b0404, #050101);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .7),
    0 40px 120px color-mix(in srgb, var(--nl-c) 26%, transparent),
    inset 0 0 70px color-mix(in srgb, var(--nl-c) 9%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: --nl-c .5s ease;
}
.nl__panel[data-state="granted"] { --nl-c: #4dff8a; }
.nl__panel.is-shaking { animation: nlShake .5s cubic-bezier(.36, .07, .19, .97) both; }

/* Scanlines and a slow rolling band, like the training TV. */
.nl__scan {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--nl-c) 7%, transparent) 50%, transparent) 0 -40% / 100% 30% no-repeat,
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .26) 0 1px, transparent 1px 3px);
  animation: nlRoll 5.5s linear infinite;
}

.nl__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nl__tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .32rem .55rem;
  border: 1px solid color-mix(in srgb, var(--nl-c) 55%, transparent);
  border-radius: 6px;
  color: var(--nl-c);
  text-shadow: 0 0 .6em color-mix(in srgb, var(--nl-c) 70%, transparent);
  white-space: nowrap;
}
.nl__tag i {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--nl-c);
  box-shadow: 0 0 .7em var(--nl-c);
  animation: nlBlink 1s steps(1) infinite;
}
.nl__case { overflow: hidden; color: color-mix(in srgb, var(--nl-c) 45%, #8d8d8d); text-overflow: ellipsis; white-space: nowrap; }
.nl__close {
  flex: none;
  margin-inline-start: auto;
  padding: .36rem .55rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 7px;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .7);
  font: inherit;
  letter-spacing: .1em;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.nl__close:hover { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .09); color: #fff; }
.nl__close:focus-visible,
.nl__foot a:focus-visible { outline: 2px solid var(--nl-c); outline-offset: 2px; }

.nl__lock {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  margin: 1.15rem auto .7rem;
  border: 1px solid color-mix(in srgb, var(--nl-c) 35%, transparent);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--nl-c) 20%, transparent), transparent 70%);
  box-shadow: 0 0 2rem color-mix(in srgb, var(--nl-c) 25%, transparent);
  color: var(--nl-c);
}
.nl__lock::before {
  position: absolute;
  inset: -7px;
  border: 1px dashed color-mix(in srgb, var(--nl-c) 40%, transparent);
  border-radius: 50%;
  content: "";
  animation: nlSpin 14s linear infinite;
}
.nl__lock svg { width: 1.75rem; height: 2rem; filter: drop-shadow(0 0 .45rem var(--nl-c)); }
.nl-shackle { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); transform-origin: 34px 25px; }
[data-state="granted"] .nl-shackle,
.nl-granted .nl-shackle { transform: translateY(-5px) rotate(28deg); }
[data-state="denied"] .nl__lock svg { animation: nlWobble .45s ease both; }

.nl .nl__title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-family: var(--nl-mono);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.3;
  text-shadow: 0 0 .9em color-mix(in srgb, var(--nl-c) 55%, transparent);
}
.nl .nl__desc {
  position: relative;
  z-index: 1;
  max-width: 30ch;
  margin: .45rem auto 0;
  color: color-mix(in srgb, var(--nl-c) 22%, #b9b3b2);
  font-family: Inter, "Noto Kufi Arabic", sans-serif;
  font-size: .86rem;
  line-height: 1.55;
}

.nl__slots {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin: 1.15rem 0 .65rem;
  direction: ltr;
}
.nl__slot {
  position: relative;
  flex: 0 1 2.6rem;
  height: 3.1rem;
  border: 1px solid color-mix(in srgb, var(--nl-c) 30%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--nl-c) 5%, #050101);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .65);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.nl__slot::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .78rem;
  height: .78rem;
  margin: -.39rem 0 0 -.39rem;
  border-radius: 50%;
  background: var(--nl-c);
  box-shadow: 0 0 .9rem var(--nl-c);
  content: "";
  transform: scale(0);
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.nl__slot::before {
  position: absolute;
  right: 28%;
  bottom: .6rem;
  left: 28%;
  height: 2px;
  border-radius: 2px;
  background: var(--nl-c);
  box-shadow: 0 0 .5rem var(--nl-c);
  content: "";
  opacity: 0;
}
.nl__slot.is-next { border-color: color-mix(in srgb, var(--nl-c) 62%, transparent); }
.nl__slot.is-next::before { opacity: 1; animation: nlBlink 1s steps(1) infinite; }
[data-state="locked"] .nl__slot.is-next::before { opacity: 0; animation: none; }
.nl__slot.is-filled { border-color: color-mix(in srgb, var(--nl-c) 68%, transparent); background: color-mix(in srgb, var(--nl-c) 11%, #050101); }
.nl__slot.is-filled::after { transform: scale(1); }
[data-state="checking"] .nl__slot { animation: nlPulse .75s ease-in-out infinite alternate; animation-delay: calc(var(--i) * 90ms); }
[data-state="denied"] .nl__slot { border-color: var(--nl-c); background: color-mix(in srgb, var(--nl-c) 26%, #050101); box-shadow: 0 0 1rem color-mix(in srgb, var(--nl-c) 45%, transparent); }
[data-state="granted"] .nl__slot { border-color: var(--nl-c); box-shadow: 0 0 1rem color-mix(in srgb, var(--nl-c) 40%, transparent); transition-delay: calc(var(--i) * 70ms); }
[data-state="granted"] .nl__slot::after { transition-delay: calc(var(--i) * 70ms); }

.nl .nl__status {
  position: relative;
  z-index: 1;
  min-height: 1.35rem;
  margin: 0;
  color: var(--nl-c);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.35rem;
  text-shadow: 0 0 .7em color-mix(in srgb, var(--nl-c) 70%, transparent);
  text-transform: uppercase;
}
.nl .nl__status::after {
  display: inline-block;
  width: .55em;
  height: 1em;
  margin-inline-start: .3em;
  background: currentColor;
  vertical-align: -.15em;
  content: "";
  animation: nlBlink 1s steps(1) infinite;
}
body.lang-ar .nl__status { letter-spacing: 0; }

.nl__pad {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin-top: .9rem;
  direction: ltr;
}
.nl__pad button {
  height: 3.3rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--nl-c) 26%, transparent);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nl-c) 10%, #0d0404), color-mix(in srgb, var(--nl-c) 3%, #060101));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 16px rgba(0, 0, 0, .45);
  color: color-mix(in srgb, var(--nl-c) 22%, #fff);
  font-family: var(--nl-mono);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  text-shadow: 0 0 .55em color-mix(in srgb, var(--nl-c) 70%, transparent);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.nl__pad button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--nl-c) 62%, transparent); background: color-mix(in srgb, var(--nl-c) 15%, #0d0404); }
.nl__pad button:active:not(:disabled),
.nl__pad button.is-pressed:not(:disabled) {
  background: var(--nl-c);
  box-shadow: 0 0 1.4rem color-mix(in srgb, var(--nl-c) 65%, transparent);
  color: #1a0202;
  text-shadow: none;
  transform: scale(.95);
}
.nl__pad button:focus-visible { outline: 2px solid var(--nl-c); outline-offset: 2px; }
.nl__pad button:disabled { cursor: not-allowed; opacity: .32; }
.nl__pad .nl__fn { color: color-mix(in srgb, var(--nl-c) 70%, #fff); font-size: 1.15rem; }
.nl__pad .nl__enter {
  border-color: color-mix(in srgb, var(--nl-c) 60%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--nl-c) 28%, #0d0404), color-mix(in srgb, var(--nl-c) 12%, #060101));
}
[data-state="checking"] .nl__pad button:disabled,
[data-state="granted"] .nl__pad button:disabled { opacity: .55; }

.nl__foot {
  position: relative;
  z-index: 1;
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px dashed color-mix(in srgb, var(--nl-c) 24%, transparent);
  font-size: .7rem;
  letter-spacing: .04em;
}
.nl__foot a { color: color-mix(in srgb, var(--nl-c) 40%, #c9c4c3); text-decoration: none; transition: color .2s; }
.nl__foot a:hover { color: var(--nl-c); }

@media (max-width: 380px) {
  .nl { padding: 12px; }
  .nl__panel { padding: 1rem .9rem .9rem; border-radius: 20px; }
  .nl__pad { gap: .5rem; }
  .nl__pad button { height: 3.05rem; }
  .nl__slot { height: 2.8rem; }
  .nl__case { display: none; }
}
@media (max-height: 640px) {
  .nl__lock { width: 3.2rem; height: 3.2rem; margin: .7rem auto .45rem; }
  .nl .nl__desc { display: none; }
  .nl__pad button { height: 2.8rem; }
}

/* ------------------------------------------- Page flash on alarm */
.nl-flash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 40, 25, .05), rgba(190, 8, 0, .42) 78%);
  animation: nlFlash .85s ease-out both;
}

/* ------------------------------------- Locked screen on the terminal */
.nl-siren {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  container-type: inline-size;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 50%, rgba(80, 4, 2, .5), rgba(18, 1, 1, .86) 72%);
  color: #ff4a3d;
  font-family: "Nightjar Lock Mono", ui-monospace, Consolas, monospace;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s, color .4s ease;
}
.nl-alarm .nl-siren,
.nl-granted .nl-siren { opacity: 1; visibility: visible; transition: opacity .12s ease, color .4s ease; }
.nl-siren::after {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px);
  content: "";
}
.nl-siren__tape {
  position: absolute;
  top: 8%;
  left: -10%;
  right: -10%;
  height: 7%;
  background: repeating-linear-gradient(-45deg, #ff3b2f 0 1.1cqw, #160202 1.1cqw 2.2cqw);
  box-shadow: 0 0 2cqw rgba(255, 59, 47, .45);
  opacity: .82;
  animation: nlTape 1.4s linear infinite;
}
.nl-siren__tape--low { top: auto; bottom: 8%; animation-direction: reverse; }
.nl-siren__core {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: .55em;
  font-size: clamp(9px, 2.6cqw, 17px);
}
.nl-alarm .nl-siren__core { animation: nlGlitch .5s steps(1) both; }
.nl-siren__core svg { width: 3.1em; height: 3.6em; filter: drop-shadow(0 0 .6em currentColor); }
.nl-siren__core b {
  font-size: 2.6em;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.05;
  text-shadow: 0 0 .35em currentColor, 0 0 1.2em currentColor;
}
.nl-alarm .nl-siren__core b { animation: nlThrob 1.1s ease-in-out .5s infinite; }
.nl-siren__core small { font-size: .95em; font-weight: 700; letter-spacing: .26em; opacity: .85; }
.nl-siren__core small::after { display: inline-block; width: .55em; height: 1em; margin-left: .35em; background: currentColor; vertical-align: -.15em; content: ""; animation: nlBlink 1s steps(1) infinite; }
.nl-granted .nl-siren { color: #4dff8a; background: radial-gradient(ellipse at 50% 50%, rgba(4, 60, 22, .45), rgba(1, 14, 6, .86) 72%); }
.nl-granted .nl-siren__tape { opacity: 0; }

/* -------------------------------------------- Training TV (hub) */
.tx-tv.nl-alarm .tx-tv__tube { filter: grayscale(1) sepia(1) saturate(7) hue-rotate(-38deg) brightness(.78); }
.tx-tv.nl-alarm .tx-tv__glow,
.tx-tv.nl-granted .tx-tv__glow { opacity: 1; }
.tx-tv.nl-alarm .tx-tv__glow { background: radial-gradient(circle at 50% 44%, rgba(255, 40, 28, .42), rgba(226, 35, 26, .18) 46%, rgba(226, 35, 26, 0) 68%); }
.tx-tv.nl-alarm .tx-tv__screen { box-shadow: 0 44px 90px rgba(70, 6, 4, .42), 0 0 0 1px rgba(255, 60, 48, .55), 0 0 70px rgba(255, 40, 28, .35); }
.tx-tv.nl-granted .tx-tv__screen { box-shadow: 0 44px 90px rgba(6, 40, 18, .4), 0 0 0 1px rgba(77, 255, 138, .5), 0 0 70px rgba(77, 255, 138, .3); }
.tx-tv.nl-shake .tx-tv__screen { animation: nlShake .6s cubic-bezier(.36, .07, .19, .97) both; }
.tx-tv .tx-tv__tube { transition: filter .3s ease; }

@keyframes nlOn {
  0% { opacity: 0; transform: scale(1, .02); filter: brightness(4); }
  35% { opacity: 1; transform: scale(1.03, .05); filter: brightness(3); }
  70% { transform: scale(1, 1.02); filter: brightness(1.4); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes nlShake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(5px, 1px, 0) rotate(.3deg); }
  30%, 50%, 70% { transform: translate3d(-9px, -1px, 0) rotate(-.5deg); }
  40%, 60% { transform: translate3d(9px, 1px, 0) rotate(.5deg); }
}
@keyframes nlGlitch {
  0% { opacity: 0; transform: translateX(-8%) skewX(-14deg); clip-path: inset(42% 0 34% 0); }
  20% { opacity: 1; transform: translateX(6%); clip-path: inset(8% 0 62% 0); }
  40% { transform: translateX(-4%) skewX(8deg); clip-path: inset(58% 0 6% 0); }
  60% { transform: translateX(3%); clip-path: inset(20% 0 30% 0); }
  80% { transform: translateX(-1%); clip-path: inset(0); }
  100% { opacity: 1; transform: none; clip-path: inset(0); }
}
@keyframes nlThrob { 50% { opacity: .55; } }
@keyframes nlBlink { 50% { opacity: 0; } }
@keyframes nlFade { from { opacity: 0; } }
@keyframes nlFlash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nlRoll { to { background-position: 0 140%, 0 0; } }
@keyframes nlSpin { to { transform: rotate(1turn); } }
@keyframes nlPulse { from { box-shadow: inset 0 2px 7px rgba(0, 0, 0, .65); } to { box-shadow: 0 0 1rem color-mix(in srgb, var(--nl-c) 45%, transparent); border-color: var(--nl-c); } }
@keyframes nlWobble { 25% { transform: rotate(-12deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-6deg); } }
@keyframes nlTape { to { background-position: 6cqw 0; } }

@media (prefers-reduced-motion: reduce) {
  .nl *, .nl::backdrop, .nl-siren, .nl-siren *, .tx-tv.nl-shake .tx-tv__screen {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}