/* ==========================================================================
   The month calendar (features/calendar): what the month holds, and the day she picks.
   ========================================================================== */
.cal { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-head strong { font-size: var(--t-body); }
.cal-head .mini-btn { display: grid; place-items: center; text-decoration: none; color: var(--text); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-wd { text-align: center; font-size: var(--t-caption); font-weight: 700; color: var(--muted); padding-bottom: 2px; }
.cal-cell {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
  min-width: 0; aspect-ratio: 1 / 1.05; padding: 3px 2px; border: 2px solid transparent; border-radius: 10px;
  background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; overflow: hidden;
}
.cal-cell.is-blank { background: transparent; cursor: default; }
.cal-cell.has-plan { background: color-mix(in srgb, var(--job-sky) 15%, var(--surface)); }
.cal-cell.is-away { background: color-mix(in srgb, var(--job-new) 10%, var(--surface)); }
.cal-cell.is-today .cal-num { color: color-mix(in srgb, var(--job-new) 85%, var(--text)); font-weight: 800; }
.cal-cell.is-selected { border-color: var(--primary); }
.cal-num { font-size: var(--t-caption); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-marks { display: flex; gap: 1px; min-height: 13px; }
.cal-mark { color: color-mix(in srgb, var(--tone, var(--muted)) 85%, var(--text)); line-height: 0; }
.cal-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }
.cal-legend .i { color: var(--muted); }
.cal-row { gap: var(--s2); text-decoration: none; color: var(--text); }
.cal-row .chevron { color: var(--muted); }

@media (max-width: 360px) {
  .cal-marks .cal-mark:nth-child(3) { display: none; }
}

/* Unfolded phone and tablets: the month keeps a comfortable size instead of stretching into tall boxes. */
@media (min-width: 720px) {
  .cal { max-width: 680px; width: 100%; margin: 0 auto; }
  .cal-cell { aspect-ratio: auto; min-height: 58px; justify-content: space-between; padding: 5px 4px; }
  .cal-num { font-size: var(--t-small); }
}