/* The Jurassic Park "you didn't say the magic word" panel — SHARED by every
 * door onto this box: the dashboard's /login and the /soundsnobs password gate.
 * Markup + behaviour: templates/_nedry_monitor.html. Keep them together.
 */
  /* "Ah ah ah — you didn't say the magic word." The GIF carries its own WHITE
     background (it's a screen in the film), so it gets a bezel: framed, it reads
     as the Jurassic Park control-room monitor instead of a bright block dropped
     on a dark card. Don't "fix" the white by keying it out — the caption inside
     the frame is black text and disappears on dark. */
  .monitor { margin:0 0 20px; border:1px solid rgba(255,255,255,.16); border-radius:8px;
             overflow:hidden; background:rgba(10,17,34,.55); }
  .monitor-bar { display:flex; align-items:center; gap:6px; padding:6px 9px; background:rgba(255,255,255,.05);
                 border-bottom:1px solid rgba(255,255,255,.16); font-size:9.5px; letter-spacing:.1em;
                 color:#86efac; text-transform:uppercase; }
  .monitor-bar i { display:block; width:6px; height:6px; border-radius:50%; background:#86efac;
                   box-shadow:0 0 6px #86efac; animation:blink 1.6s steps(1,end) infinite; }
  /* Replay control — and the fallback when the browser refuses to autoplay
     audio (see the script at the bottom of this file). */
  .spk { margin-left:auto; display:flex; align-items:center; background:none; border:0;
         color:inherit; padding:0 1px; cursor:pointer; opacity:.75; }
  .spk:hover { opacity:1; }
  .spk svg { display:block; }
  /* Two states in one icon: waves when it will play, an x when it is muted. */
  .spk .spk-x { display:none; }
  .spk.muted .spk-wave { display:none; }
  .spk.muted .spk-x { display:inline; }
  .spk.muted { opacity:.5; }
  .monitor img { display:block; width:100%; background:#f2f2f2; }
  .monitor-cap { padding:8px 10px; font-size:10.5px; color:#86efac; border-top:1px solid rgba(255,255,255,.16); }
  .monitor-cap .cur { animation:blink 1.1s steps(1,end) infinite; }
  /* Same frame, red, on the 403 from google_callback() — a Google account that
     isn't on GOOGLE_ALLOWED_EMAILS. That is where the line is literally true. */
  .monitor.denied .monitor-bar, .monitor.denied .monitor-cap { color:#fda4af; }
  .monitor.denied .monitor-bar i { background:#fda4af; box-shadow:0 0 6px #fda4af; }
  @keyframes blink { 50% { opacity:.25 } }
  @media (prefers-reduced-motion: reduce) {
    .monitor-bar i, .monitor-cap .cur { animation:none; }
  }