/* ============ Timetable page (.pg-timetable) ============ */

.pg-timetable .tt-heading { margin-bottom: 2px; }
.pg-timetable .tt-week-badge { flex: none; }
.pg-timetable .tt-sections { margin-bottom: 16px; }
.pg-timetable .tt-sec-chip[disabled] { opacity: .6; pointer-events: none; }

/* ---------- desktop week grid ---------- */
.pg-timetable .tt-week { padding: 0; overflow: hidden; }
.pg-timetable .tt-head {
  display: grid; grid-template-columns: 56px repeat(var(--tt-days, 6), 1fr);
  border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.pg-timetable .tt-day-head {
  padding: 9px 6px 10px; text-align: center; font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  border-left: 1px solid var(--line);
}
.pg-timetable .tt-day-head b { display: block; font-size: 16px; font-weight: 800; color: var(--text); line-height: 1.3; }
.pg-timetable .tt-day-head.today { background: var(--warning-tint); color: var(--indigo); }
.pg-timetable .tt-day-head.today b { color: var(--gold-dark); }

.pg-timetable .tt-body { position: relative; }
.pg-timetable .tt-line { position: absolute; left: 56px; right: 0; border-top: 1px dashed var(--line); }
.pg-timetable .tt-axis-label {
  position: absolute; left: 0; width: 48px; text-align: right; transform: translateY(-50%);
  font-size: 10.5px; font-weight: 600; color: var(--muted);
}
.pg-timetable .tt-cols {
  position: absolute; inset: 0 0 0 56px;
  display: grid; grid-template-columns: repeat(var(--tt-days, 6), 1fr);
}
.pg-timetable .tt-col { position: relative; border-left: 1px solid var(--line); min-width: 0; }
.pg-timetable .tt-col.today { background: color-mix(in srgb, var(--gold) 6%, transparent); }

.pg-timetable .tt-slot {
  position: absolute; overflow: hidden; cursor: pointer;
  border-radius: 8px; padding: 5px 7px 5px 8px;
  border-left: 4px solid var(--cc);
  background: color-mix(in srgb, var(--cc) 10%, var(--card));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--indigo) 10%, transparent);
  font-size: 10.8px; line-height: 1.4;
  transition: box-shadow .12s ease, transform .12s ease;
}
.pg-timetable .tt-slot:hover, .pg-timetable .tt-slot:focus-visible {
  box-shadow: 0 3px 10px color-mix(in srgb, var(--indigo) 18%, transparent); transform: translateY(-1px); z-index: 2;
  outline: none;
}
.pg-timetable .tt-slot > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-timetable .tt-slot-code { font-weight: 800; font-size: 10.5px; letter-spacing: .03em; color: var(--cc); }
.pg-timetable .tt-slot-title { font-weight: 700; font-size: 11.2px; color: var(--text); }
.pg-timetable .tt-slot-meta { color: var(--muted); font-size: 10.2px; }

/* ---------- mobile day list ---------- */
.pg-timetable .tt-mobile { display: none; }
.pg-timetable .tt-days { margin-bottom: 14px; }
.pg-timetable .tt-day-chip { position: relative; flex: 1; text-align: center; min-width: 0; padding: 8px 4px; }
.pg-timetable .tt-day-chip .tt-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); margin-left: 4px; vertical-align: middle;
}
.pg-timetable .tt-day-chip.active .tt-dot { background: var(--gold); }
.pg-timetable .tt-day-list-head {
  font-weight: 800; font-size: 15px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.pg-timetable .tt-card {
  display: flex; gap: 12px; align-items: center; cursor: pointer;
  border: 1px solid var(--line); border-left: 4px solid var(--cc);
  border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 10px;
  background: color-mix(in srgb, var(--cc) 5%, var(--card));
}
.pg-timetable .tt-card:last-child { margin-bottom: 0; }
.pg-timetable .tt-card:active { transform: scale(.99); }
.pg-timetable .tt-card-time {
  flex: none; width: 52px; text-align: center; line-height: 1.35;
}
.pg-timetable .tt-card-time b { display: block; font-size: 14px; font-weight: 800; color: var(--indigo); }
.pg-timetable .tt-card-time span { font-size: 11px; color: var(--muted); font-weight: 600; }
.pg-timetable .tt-card-main { flex: 1; min-width: 0; }
.pg-timetable .tt-card-code { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; color: var(--cc); }
.pg-timetable .tt-card-title { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-timetable .tt-card-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- slot detail modal ---------- */
.pg-timetable .tt-detail { border-left: 4px solid var(--cc); padding-left: 14px; }
.pg-timetable .tt-detail-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; font-weight: 600;
}
.pg-timetable .tt-detail-row svg { width: 17px; height: 17px; color: var(--indigo-3); flex: none; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .pg-timetable .tt-slot-who { display: none; }
}
@media (max-width: 760px) {
  .pg-timetable .tt-desktop { display: none; }
  .pg-timetable .tt-mobile { display: block; }
  .pg-timetable .tt-week-badge { display: none; }
}

/* ---------- Denning records ---------- */
.pg-timetable .tt-head-badges { gap: 8px; flex: none; }
.pg-timetable .tt-source { background: var(--accent-tint); color: var(--accent); }
.pg-timetable .tt-notice { margin-bottom: 14px; color: var(--text-2); border-left: 3px solid var(--warning); }
.pg-timetable .tt-detail-row a { color: var(--accent); font-weight: 600; }