.calendar-rail {
  display: grid;
  grid-template-columns: 230px repeat(5, minmax(150px, 1fr));
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: #090d0f;
}

.calendar-rail[hidden] { display: none; }

.calendar-source,
.calendar-day {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111618;
}

.calendar-source small,
.calendar-day small {
  display: block;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.calendar-source > b,
.calendar-day > b {
  display: block;
  margin: 2px 0 8px;
  font: 900 1.05rem/1 "Barlow Condensed", Impact, sans-serif;
  letter-spacing: .05em;
}

.calendar-source p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .68rem;
}

.calendar-state {
  display: inline-block;
  padding: 4px 7px;
  border: 1px solid #745f20;
  border-radius: 99px;
  background: #30280e;
  color: var(--yellow);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .07em;
}

.calendar-day.today {
  border-color: var(--vertical, var(--sky));
  box-shadow: inset 0 3px 0 var(--vertical, var(--sky));
}

.calendar-event {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 6px;
  padding: 5px 0;
  border-top: 1px solid #263034;
  font-size: .68rem;
}

.calendar-event time {
  color: var(--muted);
  font: 800 .62rem/1.35 ui-monospace, monospace;
}

.calendar-event span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event.open span {
  color: var(--green);
  font-weight: 800;
}

@media (max-width: 1100px) {
  .calendar-rail {
    overflow-x: auto;
    grid-template-columns: 220px repeat(5, 180px);
  }
}