/* Account course navigation v1
   Turns course summaries into clear, accessible classroom entry points. */

button.account-course-chip,
button.profile-course-pill {
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

button.account-course-chip {
  min-height: 46px;
  padding: 8px 11px;
}

button.account-course-chip > .profile-ui-icon:last-child {
  width: 16px;
  height: 16px;
  margin-left: 1px;
  color: var(--violet);
  transition: transform .18s ease;
}

button.account-course-chip:hover,
button.account-course-chip:focus-visible,
button.profile-course-pill:hover,
button.profile-course-pill:focus-visible {
  border-color: color-mix(in srgb, var(--violet), transparent 42%);
  background: color-mix(in srgb, var(--violet), var(--card-2) 91%);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--violet), transparent 87%);
  transform: translateY(-1px);
}

button.account-course-chip:hover > .profile-ui-icon:last-child,
button.account-course-chip:focus-visible > .profile-ui-icon:last-child,
button.profile-course-pill:hover > .profile-ui-icon:last-child,
button.profile-course-pill:focus-visible > .profile-ui-icon:last-child {
  transform: translateX(3px);
}

button.account-course-chip:focus-visible,
button.profile-course-pill:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--violet), transparent 76%);
  outline-offset: 2px;
}

button.profile-course-pill {
  min-height: 58px;
  color: var(--text);
}

button.profile-course-pill > .profile-ui-icon:last-child {
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--violet);
  transition: transform .18s ease;
}

@media (prefers-reduced-motion: reduce) {
  button.account-course-chip,
  button.account-course-chip > .profile-ui-icon:last-child,
  button.profile-course-pill,
  button.profile-course-pill > .profile-ui-icon:last-child {
    transition: none;
  }
}