.followup-calendar {
  --calendar-blue: #2056a4;
  --calendar-ink: #183052;
  --calendar-muted: #4c627f;
  --calendar-line: #dce6f2;
  --calendar-tint: #edf5ff;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: clamp(12px, 2vw, 18px);
  border-color: var(--calendar-line);
  color: var(--calendar-ink);
}

.followup-calendar [hidden] { display: none; }
.followup-calendar :focus-visible { outline: 2px solid var(--calendar-blue); outline-offset: 2px; }
.followup-calendar-header, .followup-calendar-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.followup-calendar-header h2 { margin: 0; font-size: 1.04rem; }
.followup-calendar-header p, .followup-calendar-footer p { margin: 0; color: var(--calendar-muted); font-size: .86rem; }
.followup-calendar-navigation, .followup-calendar-footer > div { display: flex; align-items: center; gap: 8px; }
.followup-calendar-navigation [data-calendar-month] { min-width: 128px; font-size: .92rem; font-weight: 720; text-align: center; }
.followup-calendar-navigation button, .followup-calendar-footer button { border: 1px solid var(--calendar-line); border-radius: 7px; background: #fff; color: var(--calendar-blue); font: inherit; font-weight: 720; cursor: pointer; }
.followup-calendar-navigation .followup-calendar-arrow { width: 34px; height: 34px; padding: 0; font-size: 1.35rem; line-height: 1; }
.followup-calendar-footer button { min-height: 32px; padding: 4px 9px; font-size: .79rem; }
.followup-calendar-navigation button:hover, .followup-calendar-footer button:hover { background: var(--calendar-tint); }

.followup-calendar-weekdays, .followup-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.followup-calendar-weekdays { color: var(--calendar-muted); text-align: center; font-size: .75rem; font-weight: 700; }
.followup-calendar-days button { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 4px 8px; border: 1px solid var(--calendar-line); border-radius: 7px; background: #f9fbff; color: inherit; font: inherit; font-size: .84rem; font-weight: 650; cursor: pointer; }
.followup-calendar-days button:hover, .followup-calendar-days button[aria-current=date] { border-color: #9fbde7; background: var(--calendar-tint); }
.followup-calendar-days button[aria-pressed=true] { border-color: var(--calendar-blue); background: var(--calendar-blue); color: #fff; }
.followup-calendar-count { min-width: 18px; padding: 1px 4px; border-radius: 999px; background: #dbeaff; color: #174482; font-size: .69rem; font-variant-numeric: tabular-nums; text-align: center; line-height: 1.25; }
.followup-calendar-footer { padding-top: 3px; }

@media (max-width: 520px) {
  .followup-calendar-weekdays, .followup-calendar-days { gap: 3px; }
  .followup-calendar-days button { flex-direction: column; justify-content: center; gap: 2px; padding-inline: 2px; }
  .followup-calendar-navigation [data-calendar-month] { min-width: 100px; }
}