/* month.css — the month view, on top of home.css (the same world, type and
   item styles). A grid of days you can read at a glance, and the chosen
   day's list under it. */

#monthApp {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* The linen runs to the bottom however quiet the day, and there's no add
   field here to leave room for. */
#monthApp .sheet { flex: 1; padding-bottom: calc(env(safe-area-inset-bottom) + 40px); }

/* The head keeps the day screen's shape, so the title sits where the
   weekday sits there; only shorter, since the grid is what you came for. */
.month-head { min-height: 0; padding-top: calc(18 * var(--sp-out)); padding-bottom: calc(22 * var(--sp-out)); }
.month-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(12 * var(--sp-in)); }
.month-nav { display: flex; gap: calc(4 * var(--sp-in)); margin-bottom: calc(2 * var(--sp-in)); }
.month-nav button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: calc(var(--radius) * 22 / 12);
  background: none;
  color: var(--head-ink);
  cursor: pointer;
}
.month-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: calc(2 * var(--sp-in));
  margin: 0 calc(-8 * var(--sp-in));
}
.month-dow {
  padding: 0 0 calc(8 * var(--sp-in));
  text-align: center;
  font-family: var(--sans);
  font-size: calc(13 * var(--fs));
  font-weight: 500;
  color: var(--ink-faint);
}
.month-cell {
  position: relative;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: calc(6 * var(--sp-in));
  border: none;
  border-radius: calc(var(--radius) * 14 / 12);
  background: none;
  font-family: var(--sans);
  font-size: calc(17 * var(--fs));
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
  cursor: pointer;
}
.month-cell.outside { color: var(--ink-faint); }
.month-cell.today .month-num { color: var(--accent); font-weight: 700; }
.month-cell.selected { background: var(--rule); }
.month-num { line-height: 24px; }
/* How much is on, as marks under the number: one to three. */
.month-marks { display: flex; gap: calc(3 * var(--sp-in)); margin-top: calc(3 * var(--sp-in)); }
.month-marks i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.75; }
.month-cell.outside .month-marks i { opacity: 0.35; }

.month-day { margin-top: calc(26 * var(--sp-out)); }
.month-sync { margin: calc(40 * var(--sp-out)) 0 0; font-family: var(--sans); font-size: calc(14 * var(--fs)); }
.month-sync a { color: var(--ink-soft); text-underline-offset: 3px; }

@media (min-width: 760px) {
  #monthApp { max-width: 480px; margin: 0 auto; }
}