.legend{
  margin: 10px 0 12px 0;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}

.pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 86%, transparent);
  font-size: 0.92rem;
}

table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;

  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

th{
  padding: 10px 6px;
  color: var(--muted);
  font-weight: 800;
  background: color-mix(in oklab, var(--card) 92%, transparent);
  font-size: 0.95rem;
}

td{
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  height: 74px;
  vertical-align: top;
  padding: 0;
  background: var(--card);
}

tr td:last-child{ border-right: none; }

.cell{
  display: block;
  height: 100%;
  padding: 10px;
}

.daynum{ font-weight: 850; }

.other .cell{
  background: color-mix(in oklab, var(--card) 75%, var(--bg));
  color: color-mix(in oklab, var(--muted) 70%, transparent);
}

.disabled .cell{
  color: color-mix(in oklab, var(--muted) 55%, transparent);
  background: color-mix(in oklab, var(--card) 85%, transparent);
}

.clickable .cell{
  cursor: pointer;
  transition: transform 80ms ease, background 120ms ease;
}

.clickable .cell:hover{
  background: color-mix(in oklab, var(--card) 90%, var(--bg));
}

.clickable .cell:active{
  transform: translateY(1px);
  background: color-mix(in oklab, var(--card) 80%, var(--bg));
}

.today{
  position: relative;
}

.today::after{
  content: "";
  position: absolute;
  inset: 0;
  outline: 2px solid color-mix(in oklab, var(--text) 85%, transparent);
  outline-offset: -2px;
  pointer-events: none;
}

@media (max-width: 520px){
  th{ font-size: 0.85rem; padding: 9px 4px; }
  td{ height: 62px; }
  .cell{ padding: 8px; }
}