/* Reading width belongs to course content, never to the holiday header.
   Keep one native horizontal scroller; the page remains vertically scrollable. */
.schedule-table-wrap { overflow:visible; min-width:0; }
.schedule-grid-viewport {
  --schedule-time-col:6.75rem;
  --schedule-day-col:9.75rem;
  --schedule-grid-gap:.25rem;
  width:100%; max-width:100%; min-width:0;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain; touch-action:auto;
  scrollbar-width:auto; scrollbar-color:var(--sky2) var(--sky-bg);
}
.schedule-grid-viewport:focus-visible { outline:2px solid var(--sky2); outline-offset:2px; }
.schedule-grid-viewport .schedule-table {
  table-layout:fixed; width:100%;
  min-width:calc(var(--schedule-time-col) + 7 * var(--schedule-day-col) + 9 * var(--schedule-grid-gap));
  border-spacing:var(--schedule-grid-gap);
}
.schedule-table .schedule-time-column { width:var(--schedule-time-col); }
.schedule-grid-viewport .schedule-table :is(th,td) { min-width:0; width:auto; }
.schedule-grid-viewport .schedule-table th { white-space:normal; padding:.4rem .35rem; }
.schedule-grid-viewport .schedule-th-content {
  min-height:6rem; height:auto; width:100%; gap:.15rem;
  overflow:visible; white-space:normal; overflow-wrap:anywhere;
}
.schedule-grid-viewport :is(.schedule-th-day,.schedule-th-date) { white-space:nowrap; }
.schedule-grid-viewport .schedule-th-status {
  display:block; max-width:100%; white-space:normal; overflow:visible;
  text-overflow:clip; overflow-wrap:anywhere; border-radius:.65rem;
}
.schedule-grid-viewport :is(.schedule-th-festival,.schedule-th-term) {
  color:#fff; background:rgba(15,23,42,.16); opacity:1;
}
.schedule-grid-viewport .schedule-th-holiday { color:#064e3b; background:rgba(255,255,255,.32); }
.schedule-grid-viewport .course { padding:.45rem .5rem; min-width:0; }
.schedule-grid-viewport :is(.course-name,.course-teacher,.course-room,.course-weeks,.course-notes) {
  white-space:normal; word-break:normal; overflow-wrap:anywhere;
}
.schedule-grid-viewport .time-label-cell,
.schedule-grid-viewport .schedule-time-heading {
  position:sticky; left:0; z-index:2; cursor:default;
}
.schedule-grid-viewport .time-label-cell { background:var(--sky-bg)!important; }
.schedule-grid-viewport .schedule-time-heading { z-index:3; }
.schedule-grid-viewport.can-scroll-left :is(.time-label-cell,.schedule-time-heading) {
  box-shadow:.3rem 0 .45rem -.25rem rgba(15,70,100,.35);
}
.schedule-grid-nav { display:flex; align-items:center; gap:.5rem; margin:0 .25rem .5rem; }
.schedule-grid-nav[hidden] { display:none; }
.schedule-grid-nav p { flex:1; min-width:0; margin:0; color:var(--muted); font-size:.75rem; line-height:1.5; text-align:center; }
.schedule-grid-nav button {
  flex-shrink:0; min-width:2.75rem; min-height:2.75rem; border:1px solid var(--sky-border);
  border-radius:.7rem; background:var(--card); color:var(--sky2); font:inherit;
  font-size:1rem; cursor:pointer;
}
.schedule-grid-nav button:disabled { opacity:.35; cursor:default; }
.schedule-grid-nav button:focus-visible { outline:2px solid var(--sky2); outline-offset:2px; }
/* Dense course actions have their own touch sizing in readability.css. Keep
   enough content width for three 36px targets without inflating the grid. */
@media (pointer:coarse) {
  .schedule-grid-viewport { --schedule-day-col:max(10.25rem,140px); }
}
@media (hover:hover) and (pointer:fine) {
  .schedule-grid-viewport.has-horizontal-overflow { cursor:grab; }
  .schedule-grid-viewport.is-panning { cursor:grabbing; user-select:none; }
}
@media print {
  .schedule-grid-nav { display:none!important; }
  .schedule-table-wrap { padding:0!important; contain:none!important; }
  .schedule-grid-viewport { overflow:visible!important; width:100%!important; }
  .schedule-grid-viewport .schedule-th-content { min-height:0; }
  .schedule-table .schedule-time-column { width:60px!important; }
  .schedule-grid-viewport :is(.time-label-cell,.schedule-time-heading) { position:static!important; box-shadow:none!important; }
}

/* A quiet time axis: labels and clock tokens stay separate at every width. */
.schedule-grid-viewport .time-label-cell { padding:.55rem .35rem; vertical-align:middle; }
.schedule-grid-viewport .time-label { gap:.25rem; padding:.1rem 0; min-width:0; }
.schedule-grid-viewport .time-label strong { display:block; max-width:100%; font-size:.75rem!important; line-height:1.45; overflow-wrap:anywhere; word-break:normal; }
.schedule-grid-viewport .time-label-subtitle { display:block; max-width:100%; font-size:.6875rem; color:var(--muted); line-height:1.4; overflow-wrap:anywhere; }
.schedule-grid-viewport .time-detail { font-size:.75rem; color:var(--sky2); font-weight:500; line-height:1.5; font-variant-numeric:tabular-nums; }
.schedule-grid-viewport .time-clock-range { display:flex; align-items:center; justify-content:center; gap:.12rem; white-space:nowrap; }
.schedule-grid-viewport .time-clock-separator { color:var(--muted); font-size:.65rem; }
.schedule-grid-viewport .time-clock-single { max-width:100%; overflow-wrap:anywhere; }
.schedule-grid-viewport .slot-mini { flex-wrap:wrap; justify-content:center; white-space:normal; font-size:.6875rem!important; }
.schedule-grid-viewport .slot-mini em { white-space:nowrap; }
.schedule-grid-viewport .slot-note { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.schedule-grid-viewport .time-type-break .time-label { gap:.05rem; }
.schedule-grid-viewport .time-type-break .time-label strong { color:var(--muted); font-size:.6875rem!important; font-weight:500; }
.schedule-grid-viewport .time-type-break .time-detail { color:var(--muted); font-size:.6875rem; }
@media (max-width:767px) {
  .schedule-grid-viewport { --schedule-time-col:6.25rem; }
  .schedule-grid-viewport .time-label-cell { padding:.4rem .25rem; }
  .schedule-grid-viewport .time-detail { font-size:.6875rem; }
}
@media print {
  .schedule-grid-viewport .time-clock-range { flex-direction:column; gap:0; }
  .schedule-grid-viewport .time-clock-separator { display:none; }
  .schedule-grid-viewport .time-label strong { font-size:9px!important; }
  .schedule-grid-viewport .time-label-subtitle,.schedule-grid-viewport .time-detail { font-size:8px; }
}