/* mod_busyness - (C) 2026 MajorWebHosting - GNU GPL v2 or later
   Override the colours in your template CSS with these variables if needed. */
.mod-busyness {
  --mb-green: #2f9e5b;
  --mb-orange: #ee8a12;
  --mb-red: #d9383e;
  --mb-text: inherit;
  --mb-muted: color-mix(in srgb, currentColor 62%, transparent);
  --mb-bar-height: .55rem;
  --mb-min-width: 2.55rem;
  margin: .25rem 0;
  padding: .25rem 0;
  color: var(--mb-text);
  line-height: 1.25;
}

.mod-busyness[hidden] {
  display: none !important;
}

.mod-busyness .mb-heading {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .95rem;
  margin: 0 0 .35rem;
}

/* Small "live" dot */
.mod-busyness .mb-heading::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--mb-green);
  box-shadow: 0 0 0 0 rgba(47, 158, 91, .5);
  animation: mb-pulse 2.4s ease-out infinite;
}

@keyframes mb-pulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 158, 91, .45); }
  70%, 100% { box-shadow: 0 0 0 .45rem rgba(47, 158, 91, 0); }
}

.mod-busyness .mb-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--mb-min-width), 1fr));
  gap: .35rem 3px;
}

.mod-busyness .mb-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.mod-busyness .mb-bar {
  display: block;
  width: 100%;
  height: var(--mb-bar-height);
  border-radius: 3px;
  background: var(--mb-green);
  transition: background-color .3s;
}

.mod-busyness .mb-orange .mb-bar { background: var(--mb-orange); }
.mod-busyness .mb-red .mb-bar { background: var(--mb-red); }

/* Red slots read as "closed": striped, so they don't depend on colour alone */
.mod-busyness .mb-red .mb-bar {
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .32) 0 3px, transparent 3px 6px);
}

.mod-busyness .mb-time {
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: var(--mb-muted);
  white-space: nowrap;
}

.mod-busyness .mb-red .mb-time {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--mb-red) 70%, transparent);
}

/* First upcoming block slightly emphasised */
.mod-busyness .mb-slot:first-child .mb-bar {
  height: calc(var(--mb-bar-height) + 3px);
}

.mod-busyness .mb-slot:first-child .mb-time {
  font-weight: 600;
  color: inherit;
}

.mod-busyness .mb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mod-busyness .mb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .9rem;
  margin-top: .4rem;
  font-size: .75rem;
  color: var(--mb-muted);
}

.mod-busyness .mb-key {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.mod-busyness .mb-key i {
  width: .6rem;
  height: .6rem;
  border-radius: 2px;
  background: var(--mb-green);
}

.mod-busyness .mb-key.mb-orange i { background: var(--mb-orange); }
.mod-busyness .mb-key.mb-red i {
  background: var(--mb-red) repeating-linear-gradient(-45deg, rgba(255, 255, 255, .32) 0 2px, transparent 2px 4px);
}

.mod-busyness .mb-text {
  margin-top: .3rem;
  font-size: .8rem;
  color: var(--mb-muted);
}

.mod-busyness .mb-text p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mod-busyness .mb-heading::before { animation: none; }
}