/* The two ways into a lesson, as icons.

   The course page and a major's content page carry the same pair of controls.
   One had them as 44px text pills that dominated the card, the other as flat
   beige text tags that barely read as controls at all. The labels only repeat
   what the icon says, so they moved into the tooltip and the control shrank to
   the icon itself. */

.lesson-acts {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.lesson-act {
  align-items: center;
  border-radius: 999px;
  box-sizing: border-box;
  display: inline-flex;
  /* The glyph is the control - the ochre play-circle the playlist cards resume
     from - so there is no chip drawn behind it. */
  font-size: 1.4rem;
  height: 28px;
  justify-content: center;
  line-height: 1;
  position: relative;
  text-decoration: none;
  transition:
    transform 0.15s ease,
    color 0.15s ease;
  width: 28px;
}

a.lesson-act:hover {
  text-decoration: none;
  transform: scale(1.08);
}

.lesson-act:focus-visible {
  outline: 3px solid rgba(190, 113, 35, 0.5);
  outline-offset: 2px;
}

/* The page's own two colours: the ochre it draws every play control in, and the
   maroon it titles its pages in. A control looks the same done or not - the
   check in the corner is what says it is done, and it says it loudly enough on
   its own. */
.lesson-act--video {
  color: #be7123;
}

.lesson-act--text {
  color: #7d2020;
}

.lesson-act--empty {
  color: #c3bda9;
}

.lesson-act--admin {
  color: #a8977f;
  font-size: 1rem;
}

/* The check rides the corner rather than replacing the icon: a finished control
   still has to say which of the two it is. It is a saturated green on both,
   not a tint of the control underneath - a done mark that borrows the control's
   own colour disappears into it. */
.lesson-act.is-done::after {
  align-items: center;
  background-color: #17a34a;
  border-radius: 999px;
  bottom: -2px;
  box-shadow:
    0 0 0 1.5px #fff,
    0 1px 3px rgba(35, 28, 18, 0.3);
  color: #fff;
  content: "✓";
  display: flex;
  font-size: 8px;
  font-weight: 700;
  height: 13px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: -2px;
  width: 13px;
}

@media (max-width: 600px) {
  .lesson-act {
    font-size: 1.7rem;
    height: 34px;
    width: 34px;
  }

  .lesson-act--admin {
    font-size: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-act {
    transition: none;
  }

  a.lesson-act:hover {
    transform: none;
  }
}