/* Live "we're open" widget for the hero: gear-shifter version on desktop, a simple card on phones */
.lw {
  display: grid; grid-template-columns: 148px 1fr; gap: 18px; align-items: center;
  margin-top: 26px; max-width: 540px; padding: 16px 20px 16px 16px;
  background: rgba(10, 46, 34, .62); border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lw--gear { grid-template-columns: 64px 1fr; }
.lw__date { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #BFE3CF; }
.lw__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 7px; }
.lw__label { display: inline-flex; align-items: center; gap: 8px; font: 900 19px/1 var(--display); color: #fff; }
.lw__dot { width: 10px; height: 10px; border-radius: 50%; background: #5FD394; animation: lw-ping 1.8s infinite; }
.lw[data-state="bonus"] .lw__dot { background: var(--yellow); }
.lw[data-state="closed"] .lw__dot { background: #9AA5AB; animation: none; }
@keyframes lw-ping { 0% { box-shadow: 0 0 0 0 rgba(95, 211, 148, .55); } 70% { box-shadow: 0 0 0 10px rgba(95, 211, 148, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 211, 148, 0); } }
.lw__clock { font: 900 26px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.lw__clock .ap { font-size: .5em; margin-left: 4px; }
.lw__clock .tz { font: 600 .38em/1 var(--mono); letter-spacing: .1em; color: #BFE3CF; margin-left: 4px; }
.lw__colon { animation: lw-blink 1s steps(1) infinite; }
@keyframes lw-blink { 50% { opacity: .15; } }
.lw__msg { margin-top: 6px; font-size: 15px; color: #DCEBE2; }
.lw__msg strong { color: #fff; }
.lw__msg a { color: var(--yellow); font-weight: 700; }
.lw__edge { display: none; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: #FFE08A; }
.lw[data-state="bonus"] .lw__edge { display: block; }
.lw__hours { margin-top: 6px; font-size: 12.5px; color: #9FC4B0; }

/* gear shifter */
.lw__gate { display: grid; gap: 6px; padding: 8px 6px; background: #0E1517; border: 2px solid #2A3438; border-radius: 12px; }
.lw__gate span { font: 900 17px/1 var(--display); text-align: center; padding: 9px 0; border-radius: 7px; color: #4E5A5E; transition: background .4s, color .4s; }
.lw__gate span.on { color: var(--asphalt); background: #5FD394; }
.lw__gate span.on.od { background: var(--yellow); }
.lw__gate span.on.park { background: #C9D2CE; }
.lw__lights { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lw__light { font: 700 10.5px/1 var(--mono); letter-spacing: .06em; padding: 6px 8px; border-radius: 5px; border: 1.5px solid #2E4A3E; color: #5E7B6E; display: inline-flex; gap: 6px; align-items: center; }
.lw__light::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lw__light.lit { color: #5FD394; border-color: #5FD394; }
.lw__light.lit.amber { color: var(--yellow); border-color: var(--yellow); }
.lw__light.lit.grey { color: #C9D2CE; border-color: #C9D2CE; }

/* Phones: just the date, open status with the time, and the hours, with room above it */
@media (max-width: 680px) {
  .lw, .lw--gear { display: inline-block; margin-top: 56px; padding: 12px 16px; border-radius: 14px; }
  .lw__gate, .lw__lights, .lw__msg, .lw[data-state] .lw__edge { display: none; }
  .lw__row { margin-top: 8px; }
  .lw__label { font-size: 17px; }
  .lw__clock { font-size: 22px; }
  .lw__hours { margin-top: 8px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .lw__dot, .lw__colon { animation: none; } }