/* Calendar and availability grid. */
.slots{display:grid;gap:12px}
.slot-day{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--hair)}
.cal{padding:0 12px 12px}
.avail-grid{display:grid;grid-template-columns:40px repeat(13,1fr);gap:3px;align-items:center;overflow-x:auto}
.av-c{height:26px;border:1px solid var(--hair);background:var(--paper);padding:0}
.av-c[aria-pressed="true"]{background:var(--accent);border-color:var(--on-accent)}
@media (max-width:600px){
  .slot-day{grid-template-columns:1fr}
}
@media (max-width: 960px), (pointer: coarse){
  .av-c{min-height:40px}
}
@media (max-width:760px){
  /* ---------- Calendar weekly hours (mentors only see this grid): 44 px cells, the grid scrolls sideways on phones ---------- */
  .avail-grid{grid-template-columns:48px repeat(13,44px);overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .avail-grid .av-c,.av-c{min-height:44px;height:44px}
  .avail-grid > span.small{position:sticky;left:0;z-index:1;background:var(--paper);align-self:stretch;display:flex;align-items:center}
}