/* Job board nav tab: a little pixel lantern whose flame flickers in three frames, in place of the
   live dot (Bryan's pick 5, Oct 29; it replaced the Torch ring, which washed under the label on the
   Job board page). Flat colours, no glow; it holds still on frame one when motion is turned off. */
.nav-lantern {
  display: block;
  flex-shrink: 0;
  width: 10px;
  height: 14px;
}
.nav-lantern .frame {
  fill: var(--green);
}
.nav-lantern .am {
  fill: #d9822b;
}
.nav-lantern .co {
  fill: #f2c14e;
}
:root[data-theme='dark'] .nav-lantern .am {
  fill: #e8923a;
}
:root[data-theme='dark'] .nav-lantern .co {
  fill: #f6d06b;
}
.nav-lantern .fl {
  opacity: 0;
}
.nav-lantern .fl.a {
  opacity: 1;
}
/* Six 0.2 s frames: tall, low, tall, leaning, tall, low. */
@media (prefers-reduced-motion: no-preference) {
  .nav-lantern .fl.a {
    animation: lantern-a 1.2s step-end infinite;
  }
  .nav-lantern .fl.b {
    animation: lantern-b 1.2s step-end infinite;
  }
  .nav-lantern .fl.c {
    animation: lantern-c 1.2s step-end infinite;
  }
}
@keyframes lantern-a {
  0% { opacity: 1; }
  16.67% { opacity: 0; }
  33.33% { opacity: 1; }
  50% { opacity: 0; }
  66.67% { opacity: 1; }
  83.33%, 100% { opacity: 0; }
}
@keyframes lantern-b {
  0% { opacity: 0; }
  16.67% { opacity: 1; }
  33.33% { opacity: 0; }
  83.33%, 100% { opacity: 1; }
}
@keyframes lantern-c {
  0% { opacity: 0; }
  50% { opacity: 1; }
  66.67%, 100% { opacity: 0; }
}
/* In dark mode the count reads in dark ink on the light green (white was hard to read). */
:root[data-theme='dark'] .nav-roles .nav-count {
  color: var(--bg);
}