/* Live hours line (see part.js): pilot lamp, status, tonight line, today's underline. */
.lhl {
  --lhl-ink: #34302f;
  --lhl-lamp: #ffb54a;                    /* lit pilot lamp (amber) */
  --lhl-glow: rgba(255, 181, 74, .85);
  --lhl-glow-low: rgba(255, 181, 74, .45);
  --lhl-lamp-size: 9px;
  --lhl-breathe: 2.6s;                    /* lamp glow breathes 14px -> 6px -> 14px */
  --lhl-u-h: 2px;                         /* today's underline thickness */
  --lhl-u-dur: 1s;
  --lhl-u-ease: cubic-bezier(.16, 1, .3, 1);
  --lhl-u-delay: 1.6s;                    /* the source drew it after its entrance; 0s to draw at once */
  --lhl-name-bg: var(--lhl-ink);          /* the night's name in the tonight line sits on a small ink tag */
  --lhl-name-fg: #e4dfd3;
}
.lhl__lamp {
  display: inline-block; flex: none; vertical-align: .08em; width: var(--lhl-lamp-size); height: var(--lhl-lamp-size); margin-right: 9px;
  border-radius: 50%; background: var(--lhl-ink); opacity: .45; transition: background .6s, opacity .6s, box-shadow .6s;
}
.lhl.is-open .lhl__lamp {
  background: var(--lhl-lamp); opacity: 1; box-shadow: 0 0 0 2px var(--lhl-ink), 0 0 14px 3px var(--lhl-glow);
  animation: lhl-lamp var(--lhl-breathe) ease-in-out infinite;
}
@keyframes lhl-lamp { 50% { box-shadow: 0 0 0 2px var(--lhl-ink), 0 0 6px 1px var(--lhl-glow-low); } }

[data-lhl-tonight] b { font-weight: inherit; background: var(--lhl-name-bg); color: var(--lhl-name-fg); padding: 1px 6px 0; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
[data-lhl-tonight][hidden] { display: none; }

/* today's segment of the hours sentence: an underline draws in left to right */
.lhl [data-lhl-day] { white-space: nowrap; }
.lhl [data-lhl-day].is-today {
  background: linear-gradient(var(--lhl-ink), var(--lhl-ink)) no-repeat 0 100% / var(--lhl-u, 0%) var(--lhl-u-h);
  transition: background-size var(--lhl-u-dur) var(--lhl-u-ease) var(--lhl-u-delay);
}
.lhl.is-ready [data-lhl-day].is-today { --lhl-u: 100%; }

@media (prefers-reduced-motion: reduce) {
  .lhl.is-open .lhl__lamp { animation: none; }
  .lhl [data-lhl-day].is-today { transition: none; }
}