/* Week schedule — shared by Home (388:1275) and Profile (388:964).
   Both frames draw the same component at two scales; the per-page sizes come
   from the custom properties below. */

.schedule {
  /* The five course chips share the width of the block (was a fixed 180px /
     194px per chip in the frames); --course-h / --course-gap / --week-h stay
     per-page so Home and Profile keep their two scales. */
  --course-h: 80px;
  --course-gap: 22px;
  --week-h: 298px;
  --block-inset: 3px;

  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 14px 0 49px;   /* room for the day labels under the grid */
}

.courses {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--course-gap);
  padding: 0 14px;
}
.course {
  min-height: var(--course-h);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 13px 15px 0;
}
.course__code { font-size: 10.5px; }
.course__name { font-size: 10.5px; }
.course__credits { font-size: 10px; color: var(--ink-2); margin-top: 18px; }

.course--cs   { background: var(--c-cs); }
.course--math { background: var(--sch-math); }
.course--phys { background: var(--sch-phys); }
.course--engl { background: var(--sch-engl); }
.course--psy  { background: var(--sch-psy); }

.week {
  position: relative;
  margin: 20px 26px 0 42px;   /* leaves room for the hour gutter */
  height: var(--week-h);
}
.week__rows { position: absolute; inset: 0; }
.week__row { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); }
.week__hour {
  position: absolute;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--scroll-thumb);
  white-space: nowrap;
}
.week__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.week__col { border-left: 1px solid var(--border); }
.week__col:last-child { border-right: 1px solid var(--border); }
.week__days {
  position: absolute; top: calc(100% + 18px); left: 0; right: 0;
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-size: 13px; color: var(--scroll-thumb);
}
.week__days span { padding-left: 14px; }

.block {
  position: absolute;
  border-radius: 5px;
  font-size: 9.5px; font-weight: 600;
  display: grid; place-items: center;
  width: calc(100% / 7 - var(--block-inset) * 2);
}
.block--cs   { background: var(--c-cs);  color: var(--accent); }
.block--engl { background: var(--sch-engl);      color: var(--sch-engl-ink); font-size: 10.5px; }
.block--phys { background: var(--sch-phys);      color: var(--sch-phys-ink); }
.block--math { background: var(--sch-math);      color: var(--green); font-size: 10.5px; }
.block--psy  { background: var(--sch-psy);      color: var(--sch-psy-ink); }

/* --- phones ------------------------------------------------------------------
   Five course chips cannot share 340px, so they become a row you swipe; the
   week grid keeps all seven days but tightens its gutters and block type. */
@media (max-width: 600px) {
  .schedule { --course-h: 88px; --course-gap: 10px; border-radius: 16px; padding-bottom: 40px; }
  .courses {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 128px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 0 12px 6px;
    scrollbar-width: none;
  }
  .courses::-webkit-scrollbar { display: none; }
  .course { scroll-snap-align: start; border-radius: 14px; padding: 10px 12px 0; }
  .course__credits { margin-top: 10px; }
  .week { margin: 18px 8px 0 36px; }
  .week__hour { font-size: 9.5px; right: calc(100% + 6px); }
  .week__days { font-size: 11px; top: calc(100% + 12px); }
  .week__days span { padding-left: 4px; }
  .block { font-size: 7.5px; line-height: 1.1; text-align: center; letter-spacing: -.01em; }
  .block--engl, .block--math { font-size: 7.5px; }
}