/* Month calendar (System v2 "Month calendar" and "Calendar day"): the date
   picker of Plan meals (index.html) and of the grocery list
   (js/month-calendar.js), on both pages. The box around it (where it opens,
   its border and shadow) belongs to each user. */
.cal-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:var(--space-8); font:var(--type-body-semibold); }
.cal-head button{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0; border:none; border-radius:var(--radius-base); background:none; color:var(--text-primary); cursor:pointer;
}
.cal-head button:hover:not(:disabled){ background:var(--surface-subtle); }
.cal-head button:disabled{ color:var(--border-default); cursor:default; }
.cal-head .icon{ width:16px; height:16px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7, 1fr); row-gap:var(--space-4); }
.cal-wd{ padding:var(--space-4) 0; text-align:center; font:var(--type-support); color:var(--text-secondary); }
.cal-day{
  height:36px; padding:0; border:none; border-radius:var(--radius-control);
  background:none; font:var(--type-body); color:var(--text-primary); cursor:pointer;
}
.cal-day:hover:not(:disabled){ background:var(--surface-subtle); }
.cal-day:disabled{ color:var(--border-default); cursor:default; }
.cal-day.is-today{ font-weight:600; }
.cal-day.in-range{ border-radius:0; background:var(--selection-surface); color:var(--selection-text); }
.cal-day.is-start, .cal-day.is-end{ background:var(--action-primary); color:var(--text-inverse); font-weight:600; }
.cal-day.is-start{ border-radius:var(--radius-control) 0 0 var(--radius-control); }
.cal-day.is-end{ border-radius:0 var(--radius-control) var(--radius-control) 0; }
.cal-day.is-start.is-end{ border-radius:var(--radius-control); }
.cal-hint{ margin:0; padding:var(--space-8) 0 0 var(--space-4); font:var(--type-support); color:var(--text-secondary); }