/* Task 1161: one visual contract for the two course-management selectors. */
.operator-course-management-card select:is(#course, #archive-course) {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: 2.75rem;
  margin: 0;
  padding: 0.625rem 2.5rem 0.625rem 0.875rem;
  border: 1px solid rgba(113, 67, 47, 0.42);
  border-radius: 0.75rem;
  background-color: rgba(255, 251, 247, 0.92);
  background-image:
    linear-gradient(45deg, transparent 50%, #71432f 50%),
    linear-gradient(135deg, #71432f 50%, transparent 50%);
  background-position:
    calc(100% - 1.0625rem) 50%,
    calc(100% - 0.75rem) 50%;
  background-repeat: no-repeat;
  background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
  color: #3f3027;
  font: inherit;
  line-height: 1.25;
  box-shadow: 0 1px 2px rgba(63, 48, 39, 0.06);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.operator-course-management-card select:is(#course, #archive-course):hover {
  border-color: rgba(113, 67, 47, 0.68);
  background-color: #fffaf6;
}

.operator-course-management-card select:is(#course, #archive-course):focus-visible {
  outline: 2px solid rgba(113, 67, 47, 0.32);
  outline-offset: 2px;
  border-color: #71432f;
  background-color: #fffaf6;
  box-shadow: 0 0 0 3px rgba(113, 67, 47, 0.12);
}

@media (max-width: 640px) {
  .operator-course-management-card select:is(#course, #archive-course) {
    max-inline-size: 100%;
  }
}