/* A genuine availability calendar, using labels and symbols in addition to colour. */
.availability-calendar { width:100%; max-width:34rem; min-width:0; border:1px solid var(--brand-line); border-radius:6px; background:var(--paper); padding:18px; margin:12px 0 20px; }
.calendar-heading { display:grid; grid-template-columns:72px minmax(0,1fr) 72px; align-items:center; gap:10px; margin-bottom:15px; }
.calendar-heading .calendar-month { margin:0; text-align:center; font-size:1.1rem; line-height:1.5; }
.availability-calendar .calendar-month-button { width:72px; height:44px; padding:0 6px; background:var(--brand-bg); color:var(--brand-navy); border:1px solid var(--brand-line); font-size:.75rem; }
.availability-calendar .calendar-month-button:hover { background:var(--brand-navy-soft)!important; color:var(--brand-navy); }
.availability-calendar .calendar-month-button:disabled { opacity:.35; cursor:default; }
.calendar-table { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:4px; margin:0; }
.calendar-table th { border:0; padding:4px 0 9px; text-align:center; font-size:.64rem; font-weight:600; white-space:normal; color:var(--muted); }
.calendar-table td { border:0; padding:0; white-space:normal; text-align:center; }
.availability-calendar .calendar-day { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; width:100%; min-height:48px; padding:4px 0; border-radius:4px; border:1px solid var(--brand-line); background:#f0f1f3; color:#697382; font-weight:600; line-height:1.2; font-size:.86rem; }
.calendar-day-number { font-variant-numeric:tabular-nums; }
.calendar-day-symbol { font-size:.65rem; }
.availability-calendar .calendar-day[data-status=available] { background:#e5f2e9; color:#215d38; border-color:#9dc3aa; }
.availability-calendar .calendar-day[data-status=available]:hover { background:#cde6d5!important; color:#17492b; }
.availability-calendar .calendar-day[data-status=unavailable],.availability-calendar .calendar-day[data-status=unavailable]:hover { background:#fbe9e8!important; color:#933336; border-color:#e4b0b0; cursor:not-allowed; }
.availability-calendar .calendar-day[data-status=outside],.availability-calendar .calendar-day[data-status=unknown],.availability-calendar .calendar-day[data-status=outside]:hover,.availability-calendar .calendar-day[data-status=unknown]:hover { background:#f0f1f3!important; color:#697382; border-color:#dfe2e7; cursor:not-allowed; }
.availability-calendar .calendar-day[aria-pressed=true] { outline:2px solid var(--brand-navy); outline-offset:1px; }
.availability-calendar .calendar-day[aria-current=date] .calendar-day-number { text-decoration:underline; text-underline-offset:3px; }
.availability-calendar .calendar-day:focus-visible { outline:3px solid var(--brand-gold-deep); outline-offset:2px; }
.calendar-legend { display:flex; flex-wrap:wrap; align-items:center; gap:7px 16px; padding-top:14px; margin-top:12px; border-top:1px solid var(--brand-line); }
.calendar-legend>span { display:flex; gap:5px; align-items:center; color:var(--muted); font-size:.65rem; }
.calendar-legend b { display:inline-grid; place-items:center; width:18px; height:18px; font-size:.7rem; font-weight:650; border:1px solid transparent; border-radius:3px; }
.calendar-legend [data-status=available] b { color:#215d38; background:#e5f2e9; border-color:#9dc3aa; }
.calendar-legend [data-status=unavailable] b { color:#933336; background:#fbe9e8; border-color:#e4b0b0; }
.calendar-legend [data-status=outside] b { color:#697382; background:#f0f1f3; border-color:#dfe2e7; }
.calendar-status { font-size:.77rem; color:var(--muted); margin:13px 0 0; line-height:1.8; }
.calendar-selection { font-size:.76rem; color:var(--brand-navy); margin:8px 0 0; font-weight:600; line-height:1.8; }
.calendar-selection:empty { display:none; }
.calendar-freshness { margin:8px 0 0; font-size:.65rem; color:var(--muted); line-height:1.8; }
.availability-calendar .calendar-retry { font-size:.75rem; margin-top:8px; padding:8px 12px; }
.calendar-manual { max-width:34rem; font-size:.75rem; border-top:0; padding:0 0 10px; margin-bottom:8px; }
.calendar-manual summary { color:var(--muted); font-size:.75rem; min-height:30px; }
.calendar-manual>label { margin-top:10px; }
.appointment-actions details:has(.availability-calendar) { max-width:min(34rem,100%); width:100%; }
@media(max-width:600px) {
  .availability-calendar { padding:12px 9px; }
  .calendar-table { border-spacing:3px; }
  .calendar-heading { margin-bottom:10px; gap:6px; }
  .calendar-heading .calendar-month { font-size:1rem; }
  .calendar-table th { font-size:.59rem; }
  .availability-calendar .calendar-day { min-height:45px; font-size:.8rem; }
  .calendar-legend { gap:7px 10px; }
}