/* Course calendar — one table for the whole quarter.
   Structure/markup adapted from Just the Class (github.com/kevinlin1/just-the-class, MIT);
   re-implemented standalone (no Just the Docs framework) and themed for CS283.
   Each _modules doc contributes a <tbody>: a week header row plus one row per
   lecture, section, or note. See _layouts/module.html. */

.cal-scroll {
  overflow-x: auto;
  margin-top: 1.5rem;
}

.cal {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

/* Column header row. Set in the utility face and pinned quietly above the
   first week so the week bars stay the loudest thing on the page. */
.cal thead th {
  font-family: "Courier Prime", monospace;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666;
  text-align: left;
  padding: 0 0.6rem 0.35rem;
  border-bottom: 2px solid var(--cardinal);
}

/* Week header: one cardinal bar spanning the table, the calendar's only
   full-strength accent. */
.cal-week-title {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-align: left;
  background-color: var(--cardinal);
  color: #fff;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
}

.cal-week-row + tr td {
  border-top: none;
}

/* Space between weeks without a margin (tbody can't take one). */
.cal-week + .cal-week .cal-week-title {
  border-top: 0.9rem solid transparent;
  background-clip: padding-box;
}

/* Middle, not baseline: a row's tallest cell is usually the wrapped lecture
   title or a two-line due badge, and on a baseline the date, [slides] and badge
   all hung off its first line. Centred, every cell reads against one centre
   line per row. */
.cal td {
  padding: 0.5rem 0.6rem;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  vertical-align: middle;
}

.cal-date {
  font-family: "Courier Prime", monospace;
  font-size: 0.8rem;
  color: #555;
  white-space: nowrap;
  width: 7.5rem;
}

/* The cell's own contents also centre on that line. A <td> can't be the flex
   container — changing its display would destroy its table-cell box — so the
   number and title are flexed inside a wrapper span (see module.html). This is
   what keeps the number level with a title that has wrapped to two or three
   lines instead of stuck on the first. */
.cal-topic-inner {
  display: flex;
  align-items: center;
}

.cal-topic-inner > .cal-num,
.cal-topic-inner > .label {
  flex: 0 0 auto;
}

/* Lecture number: the sequence is load-bearing on this page, so it gets its own
   fixed-width figure rather than being folded into the title. */
.cal-num {
  display: inline-block;
  min-width: 1.4rem;
  font-family: "Courier Prime", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: #999;
}

.cal-slides {
  width: 5.5rem;
  white-space: nowrap;
}

/* Placeholder until a deck exists: same shape as the real link, visibly inert. */
.cal-slides-tbd {
  font-family: "Courier Prime", monospace;
  font-size: 0.78rem;
  color: #aaa;
}

.cal-slides a {
  font-family: "Courier Prime", monospace;
  font-size: 0.78rem;
}

.cal-deadline {
  width: 9rem;
}

.cal-row--note td {
  font-style: italic;
  color: #666;
}

/* Badges (kramdown IAL elsewhere: **HW 1 due**{: .label .label-due }) */
.label {
  display: inline-block;
  font-family: "Lato", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.4;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  margin-right: 0.4rem;
  background-color: var(--cardinal-tint);
  color: var(--cardinal);
  vertical-align: baseline;
}

/* Tinted (sections, labs) — also aliased to Just the Class's .label-purple */
.label-section,
.label-purple {
  background-color: var(--cardinal-tint);
  color: var(--cardinal);
}

/* Deadlines are grey, not cardinal: the column mixes dates for two audiences,
   and two shades of red were not separable at this size. Grey also leaves
   cardinal to .label-section alone, so a glance at the column distinguishes a
   deadline from a section. Set in the utility face, not .label's Lato, so every
   "due" string on the site matches: .milestone-due on /assignments/, the
   calendar dates, and [slides]. Only the date is bold (see module.html).

   Shared (non-law) deadlines are the dark grey of the pair. .label-exam and
   .label-red keep the cardinal wash — they are unused Just the Class aliases
   whose names promise red. */
.label-due {
  font-family: "Courier Prime", monospace;
  font-weight: 400;
  background-color: var(--grey-dark);
  color: #fff;
}

.label-exam,
.label-red {
  font-family: "Courier Prime", monospace;
  font-weight: 400;
  background-color: var(--cardinal-wash);
  color: var(--cardinal);
}

/* Law-track deadlines (track: law in a lecture's `deadlines:` entry) — the
   light grey of the pair, inverted to dark text, so the two audiences' dates
   are separable at a glance even stacked in the same cell (L19). */
.label-due--law {
  background-color: var(--grey-light);
  color: var(--grey-ink);
}

/* A lecture can carry two deadlines (L19 closes both the final project and the
   law paper). Inline-block badges wrap inside the 9rem cell with no leading of
   their own, so give a stacked second badge some air. */
.cal-deadline .label + .label {
  margin-top: 0.3rem;
}

/* nowrap so the date never splits across lines inside a badge that wraps —
   "DRAFT DUE MON / NOV 16" stopped the bolded date reading as one unit. */
.label-due strong,
.label-exam strong,
.label-red strong {
  font-weight: 700;
  white-space: nowrap;
}

/* ---- Narrow screens -----------------------------------------------------
   Stack each row instead of scrolling the table sideways: date on its own
   line, then the lecture, then slides and any deadline beneath it. */

@media (max-width: 40rem) {
  .cal thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .cal,
  .cal tbody,
  .cal tr,
  .cal td,
  .cal th {
    display: block;
    width: auto;
  }

  .cal tr {
    border-top: 1px solid rgba(0, 0, 0, 0.14);
    padding: 0.5rem 0;
  }

  .cal-week-row {
    border-top: none;
    padding: 0;
  }

  .cal td {
    border-top: none;
    padding: 0.1rem 0.2rem;
  }

  .cal-week-title {
    margin-top: 1.25rem;
  }

  .cal-week + .cal-week .cal-week-title {
    border-top: none;
  }

  /* An empty slides/deadline cell would otherwise leave a blank line. */
  .cal td:empty {
    display: none;
  }
}

/* ---- Dark mode ---------------------------------------------------------
   The .cal-week-title bar (cardinal + white) already reads well against dark,
   so it needs no override. Keyed off the data-theme attribute so it follows the
   nav light/dark toggle. */

:root[data-theme="dark"] {
  .cal thead th {
    color: #aaa;
    border-bottom-color: var(--cardinal-light);
  }

  .cal td {
    border-top-color: rgba(255, 255, 255, 0.14);
  }

  .cal-date,
  .cal-row--note td {
    color: #aaa;
  }

  .cal-num,
  .cal-slides-tbd {
    color: #777;
  }

  @media (max-width: 40rem) {
    .cal tr {
      border-top-color: rgba(255, 255, 255, 0.14);
    }
  }

  /* Section badges: lift text to the light cardinal so they stay legible on
     the dark page. */
  .label-section,
  .label-purple {
    background-color: rgba(232, 116, 111, 0.22);
    color: var(--cardinal-light);
  }

  .label-exam,
  .label-red {
    background-color: rgba(232, 116, 111, 0.40);
    color: var(--cardinal-light);
  }

  /* The light theme's --grey-dark is too near the #303030 page to read as a
     badge, so the shared deadline lifts to a mid grey and keeps its white
     text. The law badge's light grey already stands off the dark page, so it
     carries over unchanged. */
  .label-due {
    background-color: #5C605E;
    color: #fff;
  }
}

@media print {
  .cal tr,
  .cal-week {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}