/* A major's course content - eleven majors, some of them several hundred
   lessons long.

   It used to be a grey grid of thumbnails, each card carrying "课程标题-->>课程"
   cut off mid-word and two links, with nothing to say which lesson of the major
   it was, whether it had been watched, or how far in the reader was. The cards
   are numbered and ticked now, the major says what it covers and where to pick
   it up, and its courses are chips that jump to the page they start on. */
.mj-page {
  margin: 0 auto;
  max-width: 1160px;
  padding: 0 14px;
  text-align: left;
}

.mj-head {
  border-bottom: 1px solid #ddddc8;
  padding: 14px 0 12px;
}

.mj-head__row {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.mj-head__title {
  color: #4e0d0d;
  font-size: 1.45em;
  margin: 0;
}

.mj-head__back {
  color: #4a7c59;
  flex: none;
  font-size: 0.9em;
}

.mj-head__lead {
  color: #6b6257;
  font-size: 0.92em;
  line-height: 1.6;
  margin: 6px 0 0;
  max-width: 720px;
}

.mj-head__meta {
  align-items: center;
  color: #8a7a6a;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.88em;
  gap: 2px;
  margin-top: 8px;
}

.mj-head__meta strong {
  color: #4a7c59;
  font-weight: 600;
}

.mj-head__sep {
  opacity: 0.5;
  padding: 0 6px;
}

.mj-head__progress {
  align-items: center;
  display: inline-flex;
}

/* Where to go next, then what to do with the major. The plan links used to be
   small grey text floated into the top corner, several sizes quieter than the
   thing they change. */
/* Its own row. A reader signed in to a 207-lesson major has four counts on the
   line above and four buttons on this one; sharing a line put eight things in a
   row that wrapped into a worse two rows anyway. */
.mj-acts {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
}

.mj-acts__resume {
  font-size: 0.95em;
  padding: 7px 16px;
}

.mj-acts__icon {
  padding-right: 6px;
}

.mj-acts__done {
  color: #4a7c59;
  font-size: 0.92em;
}

.mj-acts__note {
  color: #6b8b74;
  font-size: 0.88em;
}

.mj-acts__form {
  margin: 0;
}

.mj-acts__plan {
  background-color: #fff;
  border: 1px solid #d9c7a0;
  border-radius: 999px;
  color: #4e0d0d;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 0.88em;
  padding: 6px 14px;
  text-decoration: none;
}

.mj-acts__plan:hover {
  background-color: #f7f1dd;
  border-color: #b99c60;
  color: #4e0d0d;
  text-decoration: none;
}

.mj-acts__plan--link {
  border-style: dashed;
  color: #6b6257;
}

/* 重新闻思 throws records away, so it reads as the one button on the row that
   costs something rather than as another way to move the major between lists. */
.mj-acts__restart {
  border-color: #d3b3b3;
  color: #9b2c2c;
}

.mj-acts__restart:hover {
  background-color: #fbf1f0;
  border-color: #9b2c2c;
  color: #9b2c2c;
}

/* The courses the major is made of, each jumping to the page it starts on. */
.mj-sections {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 0 4px;
}

.mj-sections__label {
  color: #8a8a78;
  flex: none;
  font-size: 0.82em;
}

.mj-chip {
  background-color: #fdfdf8;
  border: 1px solid #dcd8c4;
  border-radius: 999px;
  color: #4e0d0d;
  font-size: 0.82em;
  line-height: 1.4;
  padding: 3px 10px;
  text-decoration: none;
}

.mj-chip:hover {
  background-color: #fff;
  border-color: rgba(78, 13, 13, 0.5);
  text-decoration: none;
}

.mj-chip small {
  opacity: 0.7;
  padding-left: 4px;
}

/* A talk's full title runs to thirty characters, and a major can be a dozen of
   them: cut the chip rather than let one course own a whole row. */
.mj-chip__name {
  display: inline-block;
  max-width: 11em;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.mj-chip--current {
  background-color: #4e0d0d;
  border-color: #4e0d0d;
  color: #f5efdd;
}

.mj-chip--current:hover {
  background-color: #4e0d0d;
  color: #f5efdd;
}

.mj-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  list-style: none;
  margin: 14px 0;
  padding: 0;
}

.mj-lesson {
  background-color: #fff;
  border: 1px solid #e0dcc8;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.mj-lesson:hover {
  border-color: #b99c60;
  box-shadow: 0 8px 18px rgba(62, 47, 25, 0.14);
  transform: translateY(-2px);
}

/* A watched lesson steps back so the unwatched ones stand out; twelve cards
   from one course otherwise look alike whatever has been done. */
.mj-lesson--watched {
  background-color: #f8f8f1;
}

.mj-lesson--watched .mj-lesson__thumb img {
  opacity: 0.65;
}

.mj-lesson__thumb {
  aspect-ratio: 16 / 9;
  background-color: #ded9c6;
  display: block;
  position: relative;
}

.mj-lesson__thumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* The number of the lesson within the major, counted across the pages: the only
   thing telling two frames of the same talk apart. */
.mj-lesson__number {
  background-color: rgba(20, 16, 10, 0.72);
  border-radius: 4px;
  bottom: 6px;
  color: #fff;
  font-size: 0.76em;
  left: 6px;
  padding: 1px 6px;
  position: absolute;
}

/* Bottom right, where every video player has put it since forever. */
.mj-lesson__duration {
  background-color: rgba(20, 16, 10, 0.72);
  border-radius: 4px;
  bottom: 6px;
  color: #fff;
  font-size: 0.76em;
  padding: 1px 6px;
  position: absolute;
  right: 6px;
}

.mj-lesson__tick {
  background-color: rgba(74, 124, 89, 0.92);
  border-radius: 999px;
  color: #fff;
  font-size: 0.78em;
  height: 20px;
  line-height: 20px;
  position: absolute;
  right: 6px;
  text-align: center;
  top: 6px;
  width: 20px;
}

.mj-lesson__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 4px;
  padding: 8px 10px 10px;
}

.mj-lesson__course {
  color: #8a8a78;
  font-size: 0.76em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Two lines of title, then an ellipsis - the old single line cut most titles in
   the middle of the lesson number they ended with. */
.mj-lesson__title {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #29251f;
  display: -webkit-box;
  font-size: 0.92em;
  line-height: 1.45;
  overflow: hidden;
  text-decoration: none;
}

.mj-lesson__title:hover {
  color: #4e0d0d;
  text-decoration: underline;
}

.mj-empty {
  color: #6b6b5a;
  grid-column: 1 / -1;
  padding: 24px 10px;
  text-align: center;
}

@media (max-width: 600px) {
  /* Fourteen chips wrap into fourteen rows on a phone and push the lessons
     themselves below the fold. One scrolling row instead. */
  .mj-sections {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    /* No scroll snapping: it pulls a chip to the start of the strip on load and
       takes the 课程 label off the left edge with it. */
    scrollbar-width: thin;
  }

  .mj-chip {
    flex: none;
  }

  .mj-grid {
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .mj-head__row {
    flex-wrap: wrap;
  }
}