table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 2px; /* Adjust the spacing between cells */
    border: 0.5px solid #b7b7b7; /* White border color */
    border-radius: 10px; /* Add rounded borders */

  }
  th, td {
    padding: 10px;
    text-align: center;
    border: 0.25px solid #b7b7b7; /* White border color for cells */
    background-color: #fff !important; /* Light purple background color with !important */
    color: #000; /* Black text color */
    border-radius: 2px; /* Add rounded borders */
    vertical-align: middle;
  }
  th {
    background-color: #fff !important;  /* Light purple background color for header cells */
  }
  td {
    background-color: #fff !important; /* White background color for data cells */
  }
  td:nth-child(3) { 
    text-align: left;
    min-width: 20em !important;
  }
  td:nth-child(4) { 
    min-width: 7em !important;
  }
  td:nth-child(1) { 
      width: 3em;
  }
/* Plain data tables, e.g. on the practice pages: wrap in ::: {.freetable}
   to undo the schedule-oriented column widths above. */
/* The md-breakpoint rule below turns .table-scroll off for the schedule's
   card layout; a plain data table still needs its scroll container on a
   phone, so the combined class wins on specificity. */
.freetable.table-scroll { overflow-x: auto; }
.freetable td:nth-child(1), .freetable th:nth-child(1) { width: auto; }
.freetable td:nth-child(3), .freetable th:nth-child(3) { min-width: 0 !important; }
.freetable td:nth-child(4), .freetable th:nth-child(4) { min-width: 0 !important; }

/* ---------- Home page ---------- */

/* The table rules above are meant for the schedule on the content page.
   Keep them off the home page, where the grids are layout, not data. */
.quick-links table, .questions table, .course-details table { border: none; }

.hero {
  margin: 0.5rem 0 2rem 0;
  font-size: 1.3rem;
  line-height: 1.5;
  max-width: 46em;
}

.tag {
  display: inline-block;
  background: #FDF3EA;
  color: #8f4100;
  border: 1px solid #e8c3a3;
  border-radius: 999px;
  padding: 0.15em 0.75em;
  margin: 0.9rem 0.35rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.quick-links { margin-bottom: 2.5rem; }

/* Office-hours list on the home page: tight against the "Office hours:" line.
   (A div + markdown list; a raw <ul> around list items emits invalid nesting.) */
.office-hours ul { margin-top: 0; margin-bottom: 0.5em; }

.qcard {
  height: 100%;
  border: 1px solid #e3e3e3;
  border-top: 4px solid #BF5700;
  border-radius: 6px;
  padding: 1.1rem 1.25rem 1.25rem 1.25rem;
  background: #fff;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.qcard:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.qcard h4 {
  margin-top: 0;
  margin-bottom: 0.4rem;
  font-size: 1.05rem;
}
.qcard p { margin-bottom: 0.6rem; }
.qcard a { font-weight: 600; }

.questions ul { margin-bottom: 0; }
.questions li { margin-bottom: 0.5rem; }

.course-details h4 { margin-bottom: 0.5rem; }
.course-details { margin-bottom: 2rem; }

/* Respect users who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .qcard { transition: none; }
  .qcard:hover { transform: none; }
}

/* ---------- Schedule table (mirrors the ECON 441 pattern) ---------- */

/* Keep the table usable on narrow screens (WCAG 1.4.10 Reflow): it scrolls
   inside its own container rather than forcing the page sideways, and it is
   keyboard-focusable so scrolling works without a mouse. */
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll:focus-visible { outline: 3px solid #BF5700; outline-offset: 2px; }

.materials-legend { font-size: 0.9em; color: #393A3B; margin: 0.25em 0 1em 0; }

table.schedule-table { width: 100%; table-layout: fixed; border: 2px solid #393A3B !important; }
table.schedule-table caption {
  caption-side: top; text-align: left; font-size: 0.95rem;
  color: #747576; padding-bottom: 0.4em;
}
table.schedule-table th, table.schedule-table td {
  padding: 6px 6px; line-height: 1.35; vertical-align: middle !important;
}
table.schedule-table thead th { border-bottom: 2px solid #393A3B !important; text-align: left; }
table.schedule-table th[scope="row"] {
  width: 5.6em; text-align: left; background-color: #fff;
  white-space: nowrap; font-weight: 400;
}
table.schedule-table th[scope="rowgroup"] {
  width: 7.4em; background-color: #fff; font-weight: 700; text-align: left;
}
table.schedule-table td.lec { width: 2.8em; text-align: center !important; }
table.schedule-table td.topics { width: auto; text-align: left !important; }
table.schedule-table td.refs { width: 5.2em; text-align: left !important; font-size: 0.95em; }
table.schedule-table td.mat {
  width: 5.4em; text-align: center !important; font-size: 1.15em;
  letter-spacing: 0.12em; white-space: nowrap;
}
table.schedule-table tr.assessment td { text-align: left !important; background-color: #FDF3EA !important; }
table.schedule-table tr.recess td { text-align: left !important; background-color: #f6f6f6 !important; }
/* Heavier rule where each module block starts */
table.schedule-table tr.module-start > * { border-top: 2px solid #393A3B !important; }
table.schedule-table tbody tr:last-child > * { border-bottom: none; }

/* ---------- Schedule table: tablet ---------- */

/* Around iPad-portrait width the five columns still fit, but only just. Trim
   the fixed columns and the padding so the Topic column keeps enough room to
   set two or three words per line instead of one. */
@media (min-width: 768px) and (max-width: 991.98px) {
  table.schedule-table { font-size: 0.92em; }
  table.schedule-table th, table.schedule-table td { padding: 6px 5px; }
  table.schedule-table thead th:nth-child(1),
  table.schedule-table th[scope="rowgroup"] { width: 6.4em !important; }
  table.schedule-table thead th:nth-child(2),
  table.schedule-table th[scope="row"] { width: 5.6em !important; }
  table.schedule-table thead th:nth-child(4),
  table.schedule-table td.refs { width: 4.6em !important; }
  table.schedule-table thead th:nth-child(5),
  table.schedule-table td.mat { width: 5.1em !important; }
}

/* ---------- Schedule table: phone ---------- */

/* A fixed-layout table at width:100% cannot overflow, so on a phone the four
   fixed columns take the whole screen and Topic collapses to one word per
   line. Below the md breakpoint the same markup restyles into one card per
   class meeting: module band, date, topic, then labeled reading and
   materials lines. No horizontal scrolling, and the source order already
   reads correctly for screen readers. */
@media (max-width: 767.98px) {
  .table-scroll { overflow-x: visible; }

  table.schedule-table,
  table.schedule-table tbody,
  table.schedule-table tr,
  table.schedule-table th,
  table.schedule-table td {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    max-width: none;
  }

  table.schedule-table {
    table-layout: auto;
    border: none !important;
    border-radius: 0;
  }

  /* The column headers are replaced by the inline labels below, but stay in
     the document for assistive technology. */
  table.schedule-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  table.schedule-table tbody tr {
    border: 1px solid #d8d8d8 !important;
    border-radius: 6px;
    padding: 0.7em 0.85em;
    margin-bottom: 0.7em;
    background-color: #fff;
  }
  table.schedule-table tbody tr.module-start > *,
  table.schedule-table tbody tr:last-child > * { border-top: none !important; }

  table.schedule-table th,
  table.schedule-table td {
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
    background-color: transparent !important;
    white-space: normal;
  }
  /* Cells with no content would otherwise leave a gap inside the card */
  table.schedule-table th:empty,
  table.schedule-table td:empty { display: none; }

  /* The module name heads the first card of its block */
  table.schedule-table th[scope="rowgroup"] {
    font-family: "Fira Sans Condensed", Helvetica, sans-serif;
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8f4100;   /* 6.6:1 on the cream assessment card; #BF5700 fails there */
    padding-bottom: 0.35em !important;
    margin-bottom: 0.55em;
    border-bottom: 2px solid #BF5700 !important;
  }
  table.schedule-table th[scope="rowgroup"] a { color: inherit; }

  table.schedule-table th[scope="row"] {
    font-weight: 700;
    color: #393A3B;
    margin-bottom: 0.1em;
  }

  table.schedule-table td.topics { margin-bottom: 0.35em; }

  /* These three carry !important text-align in the desktop rules above */
  table.schedule-table td.topics,
  table.schedule-table td.refs,
  table.schedule-table td.mat { text-align: left !important; }
  table.schedule-table td.refs,
  table.schedule-table td.mat {
    font-size: 0.95em;
    letter-spacing: normal;
  }
  table.schedule-table td.refs::before,
  table.schedule-table td.mat::before {
    display: inline-block;
    min-width: 5.6em;
    color: #747576;
    font-size: 0.92em;
  }
  table.schedule-table td.refs::before { content: "Reading"; }
  table.schedule-table td.mat::before { content: "Materials"; }
  table.schedule-table td.mat { font-size: 1.05em; }
  table.schedule-table td.mat a { margin-right: 0.35em; }

  /* Exam and campus-closure rows keep their tint, now on the card itself */
  table.schedule-table tbody tr.assessment {
    background-color: #FDF3EA !important;
    border-color: #e8c3a3 !important;
  }
  table.schedule-table tbody tr.recess { background-color: #f6f6f6 !important; }
  table.schedule-table tr.assessment td,
  table.schedule-table tr.recess td { background-color: transparent !important; }
}

/* ---------- Lecture blocks on module content pages ---------- */

div.lecture {
  border-left: 4px solid #BF5700;
  background-color: #fdfaf7;
  border-radius: 4px;
  padding: 0.9em 1.1em;
  margin-bottom: 1.1em;
}
div.lecture h2 {
  font-size: 1.35rem;
  color: #8f4100;   /* on the tinted block; #BF5700 is only 4.4:1 there */
  margin-top: 0;
  margin-bottom: 0.45em;
}
div.lecture p { margin-bottom: 0.5em; }
p.lecture-links { margin-bottom: 0; }
p.lecture-links .btn {
  margin: 0.15em 0.35em 0.15em 0;
  font-size: 0.95rem;
  padding: 0.35em 0.9em;
  color: #8f4100;         /* on the tinted lecture block; #BF5700 is 4.4:1 there */
  border-color: #BF5700;
}
p.lecture-links .btn:hover { background-color: #BF5700; color: #fff; }
p.lecture-links.dim { color: #6b6b6b; font-style: italic; }

/* ---------- Reflow and equations (WCAG 1.4.10) ---------- */

/* Images never force the page wider than the viewport, and a display
   equation too wide for a phone scrolls inside its own box instead of
   scrolling the whole page sideways. */
main img { max-width: 100%; height: auto; }
mjx-container[display="true"] {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}
/* Applied by assets/site-a11y.html only to equations that actually poke past
   the viewport (long inline ones, mostly). Not a blanket rule: overflow on an
   inline-block shifts its baseline, so only offenders get it. */
mjx-container.mjx-scroll {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: middle;
}

/* ---------- Collapsible solutions on practice pages ---------- */

/* Native <details>/<summary>: keyboard-operable and announced as a disclosure
   widget by screen readers, with no JavaScript. Summary text is #8f4100
   (7.7:1 on white, and still AA on the cream panel, where #BF5700 is not). */
details.solution {
  margin: 0.6em 0 1.4em 0;
  border-left: 3px solid #BF5700;
  background-color: #FDF3EA;
  border-radius: 4px;
  padding: 0 1em;
}
details.solution > summary {
  cursor: pointer;
  padding: 0.55em 0;
  font-weight: 700;
  color: #8f4100;
  list-style-position: outside;
}
details.solution > summary:hover { text-decoration: underline; }
details.solution > summary:focus-visible {
  outline: 3px solid #8f4100;
  outline-offset: 2px;
}
details.solution[open] > summary {
  border-bottom: 1px solid #efdcc9;
  margin-bottom: 0.6em;
}
details.solution > :last-child { padding-bottom: 0.8em; }

/* ---------- Interactive multiple choice on practice pages ---------- */

/* Built at runtime by assets/practice-quiz.html from div.mcq blocks. The
   plain markdown option list is the no-JavaScript fallback. Each option is
   a label laid out as a grid (letter | input | text) so long options wrap
   cleanly under the text column; the native ol marker is dropped because
   it misaligns on multi-line items. Colors are the vetted theme browns;
   correctness is conveyed by the feedback wording, never by color alone. */
div.mcq fieldset.mcq-options {
  border: none;
  margin: 0;
  padding: 0;
}
div.mcq fieldset.mcq-options ol {
  list-style: none;
  margin: 0 0 0.5em 0;
  padding-left: 0.25em;
}
div.mcq fieldset.mcq-options li { margin: 0.45em 0; }
div.mcq fieldset.mcq-options li > label {
  display: grid;
  grid-template-columns: 1.3em auto 1fr;
  column-gap: 0.45em;
  align-items: start;
  cursor: pointer;
}
.mcq-letter { text-align: right; }
div.mcq fieldset.mcq-options input {
  width: 1.15em;
  height: 1.15em;
  margin: 0.2em 0 0 0;
  accent-color: #BF5700; /* navbar band color; 4.6:1 on white */
}
div.mcq fieldset.mcq-options input:focus-visible {
  outline: 3px solid #8f4100;
  outline-offset: 2px;
}
.mcq-controls { margin: 0.8em 0 0.4em 0; }
/* Same look as the Solution disclosure: cream panel, brand-orange rule,
   dark brown text (#8f4100 is AA on the cream, where #BF5700 is not). */
button.mcq-check {
  background-color: #FDF3EA;
  color: #8f4100;
  border: none;
  border-left: 3px solid #BF5700;
  border-radius: 4px;
  padding: 0.55em 1.1em;
  font-weight: 700;
  font-size: 0.95em;
  cursor: pointer;
}
button.mcq-check:hover { text-decoration: underline; }
button.mcq-check:focus-visible {
  outline: 3px solid #8f4100;
  outline-offset: 2px;
}
.mcq-feedback {
  margin: 0.6em 0 0 0;
  font-weight: 600;
  color: #393A3B;
}
.mcq-arrow { color: #BF5700; }
/* Solution body revealed on a correct answer; same panel as details.solution. */
.mcq-controls > .mcq-solution {
  margin-top: 0.7em;
  border-left: 3px solid #BF5700;
  background-color: #FDF3EA;
  border-radius: 4px;
  padding: 0.8em 1em;
}
.mcq-controls > .mcq-solution > :last-child { margin-bottom: 0; }

/* Status line hidden visually on a correct answer (the "Correct!" text is
   shown inline at the start of the solution instead) but kept in the
   accessibility tree so role="status" still announces it. */
.mcq-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Space between multiple-choice questions, with a light rule, so an open
   solution reads with its own question rather than the next one. */
div.mcq { margin-bottom: 2rem; }
div.mcq + div.mcq {
  border-top: 1px solid #d9d9d9;
  padding-top: 1.75rem;
}