/* Keep calendar dates readable instead of squeezing five days into tiny cells.
   Only the timetable scrolls; the page and its controls continue to reflow. */
main, #app, #content, .panel, .field, .grid > *, .week-controls > *,
.event-filters > *, .week-history-days > *, .next-lesson > *,
.agenda-strip > *, .event-card > *, .event-times > *, .candidate-choice > * {
  min-width: 0;
}
.control { box-sizing: border-box; max-width: 100%; }
input.control[type='date'], input.control[type='datetime-local'], input.control[type='time'] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  /* Safari's native date editor otherwise imposes its intrinsic field width. */
  -webkit-appearance: none;
  appearance: none;
}
input.control::-webkit-date-and-time-value { min-width: 0; text-align: left; }
input.control::-webkit-datetime-edit { min-width: 0; padding: 0; }
input.control::-webkit-calendar-picker-indicator { flex: 0 0 auto; margin-left: 4px; }

.schedule {
  grid-template-columns: repeat(5, minmax(5.5rem, 1fr));
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 3px 12px;
  scrollbar-width: auto;
}
.schedule > * { min-width: 0; }
.schedule .day { padding-inline: 4px; }
.schedule .day strong {
  font-size: 1.75rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.schedule .slot { height: auto; min-height: 64px; overflow-wrap: anywhere; }
.schedule:focus-visible, .agenda-strip:focus-visible { outline: 3px solid #1688b7; outline-offset: 3px; }
.schedule-scroll-hint { display: none; margin: 12px 0 0; color: #526476; font-size: .875rem; }
.week-range-caption { margin: 6px 0 0; font-size: .9375rem; color: #40586a; overflow-wrap: anywhere; }

h1, h2, h3, .thread-title, .week-history-toolbar > strong,
.next-lesson time, .week-history-day h3, .week-booking time,
.agenda-day h3, .agenda-row time, .event-time strong, .event-card > strong,
.event-card > small, .candidate-rank, .member-state {
  overflow-wrap: anywhere;
}
.next-lesson { max-width: 100%; }
.next-lesson time { line-height: 1.5; }
.event-card { grid-template-columns: minmax(0, 1fr) auto; }
.event-times { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.event-time { min-width: 0; }
.agenda-strip { max-width: 100%; }
.agenda-row > *, .bar > *, .week-history-toolbar > *, .window-actions > * { min-width: 0; max-width: 100%; }
.week-booking { overflow-wrap: anywhere; }
button, .owner-links a { overflow-wrap: anywhere; }
.member-state { white-space: normal; }
.schedule-legend i { flex-shrink: 0; }

dialog, dialog.manual, dialog.events-dialog {
  max-width: calc(100% - 24px);
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
  overflow-wrap: anywhere;
}
dialog > button { max-width: 100%; }

@media (max-width: 650px) {
  .schedule { grid-template-columns: repeat(5, minmax(5rem, 1fr)); gap: 6px; }
  .schedule .day strong { font-size: 1.25rem; }
  .schedule .day { font-size: .875rem; }
  .schedule .slot { font-size: .875rem; }
  .schedule .slot-member { font-size: .8125rem; }
  .next-lesson { padding: 14px; }
  .next-lesson time { font-size: 1.125rem; }
  dialog.events-dialog .event-filters { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .schedule-scroll-hint { display: block; }
  .week-controls, .event-filters { grid-template-columns: minmax(0, 1fr); }
  .week-booking { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .week-booking time { font-size: 1.375rem; }
  .candidate-choice { grid-template-columns: minmax(0, 1fr); }
  .candidate-rank { grid-column: 1; }
  .header-actions { max-width: 100%; }
  header .header-actions { margin-left: auto; }
  .inbox-panel .inbox-group-title { flex-wrap: wrap; }
  .inbox-panel .thread-item button {
    max-width: calc(100% - var(--inbox-inset) * 2);
  }
  .device-settings button { max-width: 100%; margin-right: 0; }
  .panel > .secondary, .panel > .primary, dialog > .secondary, dialog > .primary {
    max-width: 100%; margin-inline-end: 0;
  }
}
@media (max-width: 360px) {
  main { padding-inline: 12px; }
  .panel { padding-inline: 12px; }
  dialog, dialog.manual, dialog.events-dialog { padding-inline: 14px; }
  .event-card, .event-time { padding-inline: 12px; }
  .event-card { grid-template-columns: minmax(0, 1fr); }
  .event-badge { justify-self: start; }
}