/* Pasek „Na żywo” (Kamil 28.10.2026): the real state of TILO from the panel, under the hero of /urodziny and
   /sala-zabaw. Free birthday starts of the next weekends, or how full the playroom usually is now. Colours come
   from day.css, so the party page shows berry and the playroom teal. The section stays hidden without data. */
.live {
  background: var(--day-soft, #fdeed6);
  color: var(--day-ink, #1f1430);
  border-bottom: 1px solid rgba(31, 20, 48, 0.08);
}
.live .wrap {
  display: grid;
  gap: 14px;
  padding-block: 22px;
}
.live-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
}
.live-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 800;
}
.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--day-teal, #1fa59a);
  flex: none;
  animation: live-pulse 2.4s infinite;
}
@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--day-teal, #1fa59a) 55%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 9px transparent;
  }
}
.live-text {
  margin: 0;
  max-width: 70ch;
  color: var(--day-muted, #5f5668);
}
.live-at {
  font-size: 0.8rem;
  color: var(--day-muted, #5f5668);
}
.live-days {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}
.live-day {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 10px 6px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(31, 20, 48, 0.08);
  color: inherit;
  text-decoration: none;
  font-size: 0.78rem;
  text-align: center;
}
a.live-day:hover,
a.live-day:focus-visible {
  border-color: var(--day-teal, #1fa59a);
  outline: none;
  box-shadow: 0 0 0 2px var(--day-teal, #1fa59a);
}
.live-day strong {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.live-day.full {
  opacity: 0.55;
}
.live-marks {
  display: flex;
  gap: 3px;
}
.live-marks i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--day-teal, #1fa59a);
}
.live-marks i.taken {
  background: rgba(31, 20, 48, 0.15);
}
.live-free {
  font-weight: 700;
  color: var(--day-teal-ink, #137a72);
}
.live-day.full .live-free {
  color: var(--day-muted, #5f5668);
}
.live-bars {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 5px;
  align-items: end;
  height: 72px;
}
.live-bars span {
  display: block;
  min-height: 4px;
  border-radius: 5px 5px 0 0;
  background: color-mix(in srgb, var(--day-teal, #1fa59a) 35%, #fff);
}
.live-bars span.now {
  background: var(--day-teal, #1fa59a);
}
.live-hours {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 5px;
  font-size: 0.7rem;
  text-align: center;
  color: var(--day-muted, #5f5668);
  font-variant-numeric: tabular-nums;
}
.live-level {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  background: var(--day-mint, #e6f5f2);
  color: var(--day-teal-ink, #137a72);
}
.live-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  font-size: 0.85rem;
  color: var(--day-muted, #5f5668);
}
.live-foot-cta {
  justify-content: flex-start;
}
@media (max-width: 760px) {
  .live-days {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot {
    animation: none;
  }
}