html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

pre {
  max-width: 100%;
  height: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.quantum-cat {
  width: fit-content;
  margin-left: auto;
}

.image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 2rem 0;
}

.image-card {
  flex: 1 1 12rem;
  text-align: center;
}

.image-card p {
  margin: 0.5rem 0 0;
}

.image-card img {
  width: 14rem;
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
}

:root {
  --table-border: color-mix(in srgb, CanvasText 18%, Canvas);
  --table-header: color-mix(in srgb, CanvasText 7%, Canvas);
  --table-hover: color-mix(in srgb, CanvasText 4%, Canvas);
}

.table-scroll {
  margin: 1.5rem 0;
  overflow-x: auto;
  border: 1px solid var(--table-border);
  border-radius: 0.6rem;
}

table {
  display: table;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--table-border);
  border-radius: 0.6rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
}

tbody {
  border: 0;
}

.table-scroll table {
  border: 0;
  border-radius: 0;
}

th,
td {
  padding: 0.75rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--table-border);
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-top: 0;
  background: var(--table-header);
  font-weight: 600;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover td {
  background: var(--table-hover);
}

.grade-table table {
  min-width: 42rem;
}

.grade-table tbody td:first-child {
  background: var(--table-header);
  font-weight: 600;
}

/* Keep schedule metadata compact and give the reading list room. */
.schedule-table table {
  min-width: 70rem;
  table-layout: fixed;
}

.schedule-table col:nth-child(1) { width: 5rem !important; }
.schedule-table col:nth-child(2) { width: 24rem !important; }
.schedule-table col:nth-child(3) { width: 10rem !important; }
.schedule-table col:nth-child(4) { width: 31rem !important; }