/* Rawana — Booking Pulse: the live weekly occupancy chart. */

.rwn-pulse {
  margin-top: var(--wp--preset--spacing--50);
  padding: var(--wp--preset--spacing--50);
  border-radius: var(--wp--custom--radius-md);
  border: var(--wp--custom--border-width) solid var(--wp--custom--border-hairline);
  border-top-color: var(--wp--custom--border-top-light);
  background-color: var(--wp--preset--color--surface-two);
  background-image: var(--wp--custom--gradient-surface-top);
}

.rwn-pulse__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30);
  margin-bottom: var(--wp--preset--spacing--40);
}

.rwn-pulse__title,
.rwn-pulse__live,
.rwn-pulse__foot {
  margin: 0;
  font-size: var(--wp--preset--font-size--xxs);
  letter-spacing: var(--wp--custom--tracking-widest);
  text-transform: uppercase;
}

.rwn-pulse__title { color: var(--wp--preset--color--accent); }

.rwn-pulse__live {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--wp--preset--color--dim);
}

/* The dot is the only thing on the page that says "this is happening now". */
.rwn-pulse__dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
  animation: rwn-pulse-blink 2.4s var(--wp--custom--ease-out) infinite;
}

@keyframes rwn-pulse-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

/* ---- The bars ---- */

.rwn-pulse__chart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(0.35rem, 1.5vw, 0.75rem);
  align-items: end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rwn-pulse__day {
  display: grid;
  justify-items: center;
  gap: 0.35em;
  margin: 0;
  padding: 0;
}

.rwn-pulse__track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: clamp(56px, 12vw, 84px);
  border-radius: var(--wp--custom--radius-sm);
  background: var(--wp--preset--color--surface-inset);
  overflow: hidden;
}

.rwn-pulse__fill {
  display: block;
  width: 100%;
  border-radius: var(--wp--custom--radius-sm);
  background: var(--wp--preset--color--dim);
  /* Height is the only thing that changes on a poll, so animate just that. */
  transition: height var(--wp--custom--duration-slow, 600ms) var(--wp--custom--ease-out),
              background-color var(--wp--custom--duration-slow, 600ms) var(--wp--custom--ease-out);
}

/* Quiet days stay muted; the fuller a day gets, the more it pulls the accent. */
.rwn-pulse__day[data-level="0"] .rwn-pulse__fill { background: color-mix(in srgb, var(--wp--preset--color--dim) 55%, transparent); }
.rwn-pulse__day[data-level="1"] .rwn-pulse__fill { background: color-mix(in srgb, var(--wp--preset--color--accent) 35%, var(--wp--preset--color--dim)); }
.rwn-pulse__day[data-level="2"] .rwn-pulse__fill { background: color-mix(in srgb, var(--wp--preset--color--accent) 65%, var(--wp--preset--color--dim)); }
.rwn-pulse__day[data-level="3"] .rwn-pulse__fill { background: var(--wp--preset--color--accent); }
.rwn-pulse__day[data-level="4"] .rwn-pulse__fill { background: var(--wp--preset--color--accent); box-shadow: 0 0 12px var(--wp--custom--accent-wash); }

.rwn-pulse__weekday,
.rwn-pulse__date {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xxs);
  line-height: 1.1;
  color: var(--wp--preset--color--dim);
}

.rwn-pulse__weekday { text-transform: uppercase; letter-spacing: var(--wp--custom--tracking-wide); }

.rwn-pulse__day.is-today .rwn-pulse__weekday,
.rwn-pulse__day.is-today .rwn-pulse__date {
  color: var(--wp--preset--color--accent);
}

.rwn-pulse__day.is-today .rwn-pulse__track {
  outline: var(--wp--custom--border-width) solid var(--wp--custom--border-accent);
  outline-offset: 2px;
}

.rwn-pulse__foot {
  margin-top: var(--wp--preset--spacing--40);
  color: var(--wp--preset--color--muted);
}

/* A refresh that lands while you are looking at it should be felt, not read. */
.rwn-pulse.is-refreshing .rwn-pulse__dot { animation-duration: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  .rwn-pulse__dot { animation: none; }
  .rwn-pulse__fill { transition: none; }
}