/* Schedule page — week grid (Tue/Thu columns), generated by gen_schedule.py.
   Loads after style.css, which owns the :root tokens and the header band.

   Layout: each .week-row is a 3-row grid — day header / topic A / topic B.
   Day cells span all three rows with subgrid, so every week's A slots (and
   B slots) share a height across the columns. DUE beats live at the top of
   topic A's box, as a red "HW DUE" line above the topic title; normal
   meetings pin an End-of-class quiz link to the bottom of topic B's box. */

/* Same content box as the header's .wrap (style.css), so the schedule's
   day columns line up with the header band's Home button and nav. */
main { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.schedule {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 20px 0;
}

.week-row {
  display: grid;
  grid-template-columns: 2.6rem repeat(var(--day-cols, 2), 1fr);
  grid-template-rows: auto auto auto;
  gap: 0 10px;
  align-items: stretch;
}
/* Hang the "Wk N" gutter in the left margin so the Tuesday column's left
   edge sits exactly on the header content box (the Home button). Only when
   the viewport leaves room for the overhang; narrower screens keep the
   gutter inside the content box. */
@media (min-width: 1200px) {
  .week-row { margin-left: calc(-2.6rem - 10px); }
}
.week-row.header-row { grid-template-rows: auto; }

/* Small "Wk N" gutter label at the left of each week */
.week-label {
  grid-row: 1 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 12px var(--sans);
  color: #9a8f85;
}

/* Column header row (Tuesday / Thursday) */
.header-row .col-head {
  background: var(--orange);
  color: white;
  text-align: center;
  font: 600 14px var(--sans);
  padding: 7px;
  border-radius: 8px;
}

/* Day cell: subgrid aligns its header/A/B rows with the week's other days */
.day-cell {
  grid-row: 1 / 4;
  display: grid;
  grid-template-rows: subgrid;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}
@supports not (grid-template-rows: subgrid) {
  .day-cell { display: flex; flex-direction: column; }
}
.day-cell.empty {
  border: 1px dashed #e6e2dd;
  background: transparent;
}

.day-header {
  font: 600 13px var(--sans);
  color: #7a3600;
  padding: 6px 12px;
  background: #fff5ec;
  border-bottom: 2px solid var(--orange);
}
.day-date {
  font-size: 13px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  opacity: 0.78;
}
.meeting-title {
  margin-top: 2px;
  color: #3d2b20;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
}

/* Topic slots: A (t1) plain, B (t2) lightly tinted */
.slot { padding: 10px 12px; font-size: 13.5px; line-height: 1.45; }
.slot.t1 { background: white; }
.slot.t2 {
  background: rgba(204, 85, 0, 0.05);
  border-top: 1px solid #f0ece6;
  /* Column flex so .quiz-row's margin-top:auto pins the quiz link to the
     bottom of the subgrid-aligned B box */
  display: flex;
  flex-direction: column;
}
.slot.shade-flat { background: transparent; }
.slot.tbd {
  color: #776d65;
  background: repeating-linear-gradient(
    -45deg,
    #fbfaf8,
    #fbfaf8 8px,
    #f4f1ed 8px,
    #f4f1ed 16px
  );
  font-style: italic;
}
.slot.tbd .slot-title::before {
  content: "TBD";
  display: inline-block;
  margin-right: 8px;
  padding: 1px 5px;
  border: 1px solid #b9afa6;
  border-radius: 4px;
  font: 700 9px var(--sans);
  letter-spacing: 0.06em;
  vertical-align: 0.12em;
}

/* DUE beats: red line at the top of topic A's box, above the topic title */
.due-line {
  margin-bottom: 7px;
  color: var(--red);
  font: 700 12.5px var(--sans);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.due-tag {
  background: var(--red);
  color: white;
  font: 800 10px var(--sans);
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: 0.06em;
  flex: none;
}
.beat-icon svg {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
}

/* Title links must out-specify style.css's global `a` color */
.title-link:link, .title-link:visited { color: inherit; text-decoration: none; }
.title-link:hover { text-decoration: underline; }

.slot-title { font-weight: 500; }
.deck-mark { color: var(--orange); opacity: 0.8; margin-left: 2px; }
.deck-mark svg { width: 0.95em; height: 0.95em; vertical-align: -0.12em; }

/* Slot deck links: the deck presented in class (.slot-deck) is a solid
   burnt-orange pill; companion decks are cream pills stepping darker
   down the list (g0 palest .. g3) so the two kinds read differently
   at a glance */
.slot-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  margin-top: 7px;
  font: 500 12px var(--sans);
}
.slot-link, .slot-link:link, .slot-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  text-decoration: none;
  color: #6b4a26;
}
.slot-link.g0 { background: #faf3ea; }
.slot-link.g1 { background: #f7ecdb; }
.slot-link.g2 { background: #f4e4cc; }
.slot-link.g3 { background: #f1dcbe; }
.slot-link.slot-deck, .slot-link.slot-deck:link, .slot-link.slot-deck:visited {
  font-weight: 650;
  background: var(--orange);
  color: #fff;
}
.slot-link:hover { background: #ecd2ac; color: #4f3517; }
.slot-link.slot-deck:hover { background: var(--orange-deep); color: #fff; }
.slot-deck .pill-icon { color: #ffd9b8; }
.pill-icon { color: #b06a24; display: inline-flex; }
.pill-icon svg { width: 1.05em; height: 1.05em; }
.slot-activity { background: #fff3e0; color: #e65100; }

/* DECK_STATUS badges — the deck is linked and published but still being
   written. Rendered inside the deck's pill (dated slot and companion links)
   and beside the REFERENCES card title. */
.slot-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px dashed #c08a3e;
  background: #fffaf2;
  color: #8a5a1c;
  font: 650 10.5px var(--sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.slot-link .slot-badge { padding: 1px 7px; }
.slot-title .slot-badge { margin-left: 7px; }

/* End-of-class quiz link at the bottom of every normal meeting's B box */
.quiz-row {
  margin-top: auto;
  padding-top: 9px;
  font: 500 12px var(--sans);
  font-style: normal;   /* a tbd B slot is italic; the quiz link is not */
}
.slot-quiz, .slot-quiz:link, .slot-quiz:visited {
  background: white;
  border: 1px solid #e8c9a8;
  color: #a2570f;
  font-weight: 650;
}
.slot-quiz:hover { background: #fdf1e3; color: #4f3517; }

/* Special day types */
.day-cell.noclass { border-color: #8fd68a; }
.day-cell.noclass .day-header {
  background: #e4f6e2;
  color: #2e7d32;
  border-bottom-color: #57b256;
}
.day-cell.noclass .slot {
  background: #f1faf0;
  text-align: center;
  font-weight: 500;
}
.day-cell.info .day-header {
  background: #fffdf0;
  color: #7a6a00;
  border-bottom-color: #e6c200;
}
.day-cell.info .slot { background: #fffef7; }
.day-cell.exam .day-header {
  background: #fff8e1;
  color: #7a5a00;
  border-bottom-color: #f0b000;
}
.day-cell.exam .slot { background: #fffdf3; }

/* Topic-organized slide deck regions below the schedule */
.references-head {
  margin: 2.4rem 0 0.75rem;
  font: 700 1.1rem var(--sans);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--orange);
}
.reference-groups {
  display: grid;
  gap: 14px;
}
.ref-group {
  --ref-accent: var(--orange);
  --ref-border: #efd7bd;
  --ref-bg: #fff8f0;
  border: 1px solid var(--ref-border);
  border-radius: 12px;
  background: var(--ref-bg);
  padding: 12px;
}
.ref-group-platform {
  --ref-accent: #2e7d32;
  --ref-border: #b9d8bc;
  --ref-bg: #f1faf0;
}
.ref-group-accounts {
  --ref-accent: #476a9c;
  --ref-border: #bed0e6;
  --ref-bg: #f1f6fc;
}
.ref-group-tools {
  --ref-accent: #bf5700;
  --ref-border: #efcfa9;
  --ref-bg: #fff6ec;
}
.ref-group-working-with-agents {
  --ref-accent: #6f4bb3;
  --ref-border: #d2c4ec;
  --ref-bg: #f7f2ff;
}
.ref-group-final-project {
  --ref-accent: #8a6400;
  --ref-border: #e5d298;
  --ref-bg: #fff9e5;
}
.ref-group-head {
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--ref-accent);
  color: var(--ref-accent);
  font: 800 13px var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.references {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  max-width: none;
  margin: 0;
}
.references .ref-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 0;
  margin: 0;
}
.ref-card .slot-title { padding: 10px 14px; font: 500 13px var(--sans); }
.ref-icon { color: var(--ref-accent, var(--orange)); margin-right: 8px; display: inline-flex; vertical-align: -0.28em; }
.ref-icon svg { width: 1.25em; height: 1.25em; }
.ref-card:hover {
  border-color: var(--ref-accent, var(--orange));
  box-shadow: 0 1px 5px rgba(35, 32, 28, 0.16);
}
.ref-external {
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 700 10px var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ref-accent, var(--orange));
  opacity: 0.8;
  white-space: nowrap;
}

/* Today floating button */
#today-button {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 8px 14px;
  background: var(--orange);
  color: white;
  border: none;
  border-radius: 6px;
  font: 600 14px var(--sans);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 100;
}
#today-button:hover { background: var(--orange-deep); }
.today-highlight {
  box-shadow: 0 0 0 3px var(--orange);
  border-color: var(--orange);
}

/* Mobile: collapse to a single column; Tue then Thu stack */
@media (max-width: 720px) {
  .header-row { display: none; }
  .week-row { display: block; }
  .week-label { justify-content: flex-start; padding: 6px 2px; }
  .day-cell { display: flex; flex-direction: column; margin-bottom: 8px; }
  .day-cell.empty { display: none; }
  #today-button {
    bottom: 16px;
    right: 16px;
    padding: 6px 12px;
    font-size: 14px;
  }
}