/* 8-semester grid — fixed columns on desktop, horizontal scroll on mobile.
 * The container `.future-terms-scroll` has overflow-x:auto.
 * On mobile we set a min-width so columns keep ~180px each and the
 * user swipes horizontally instead of the columns collapsing.
 */
.future-terms-grid { grid-template-columns: repeat(8, 1fr); }

@media (max-width: 767px) {
  .future-terms-grid {
    grid-template-columns: repeat(8, 180px) !important;
    min-width: max-content;
  }
}

.term-col { display: flex; flex-direction: column; min-height: 450px; }
.term-head { padding: 10px 12px; background: var(--bg-subtle); border: 1px solid var(--border); border-bottom: 0; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.term-body { flex: 1; padding: 8px; background: var(--bg-elevated); border: 1px solid var(--border); border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); display: flex; flex-direction: column; gap: 6px; position: relative; }
.course-chip { padding: 7px 9px; border-radius: 6px; font-size: 11.5px; cursor: grab; line-height: 1.3; position: relative; }
.course-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.course-chip[data-locked="true"] { opacity: .8; }
.course-chip .meta { font-size: 10px; opacity: .75; margin-top: 1px; display: block; font-family: var(--font-mono); }
.term-done { background: var(--bg-subtle); }
.term-current { box-shadow: 0 0 0 2px var(--primary-500); }
#predictions .course-chip button { display: none; }