/* Inline class chooser: a compact yellow index tab, not a form control. */
.class-switch{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  vertical-align:baseline;
  margin:0 .1em;
  transform:translateY(-.035em);
}
.class-switch select{
  appearance:none;
  -webkit-appearance:none;
  width:auto;
  min-width:1.36em;
  height:.92em;
  margin:0;
  padding:0 .56em 0 .16em;
  border:1.5px solid var(--brand-yellow);
  border-radius:10px 10px 8px 8px;
  background:var(--yellow-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23226E2C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .2em center / .32em no-repeat;
  color:var(--ink);
  font:inherit;
  font-size:.9em;
  font-family:'Lora',Georgia,serif;
  font-weight:600;
  line-height:1;
  text-align:center;
  cursor:pointer;
  box-shadow:0 3px 0 rgba(255,198,41,.22);
  animation:class-hint 3.4s ease .9s 1;
  transition:border-color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease;
}
.class-switch select:hover{
  background:var(--green-tint);
  border-color:var(--action-green);
  box-shadow:0 3px 0 rgba(34,110,44,.16);
}
.class-switch select:focus-visible{
  outline:3px solid var(--action-green);
  outline-offset:4px;
}

[data-theme="dark"] .class-switch select{
  background:rgba(255,198,41,.14);
  color:var(--ink);
  box-shadow:0 3px 0 rgba(255,198,41,.1);
}
[data-theme="dark"] .class-switch::after{border-color:var(--brand-yellow)}
@keyframes class-hint{
  0%,100%{box-shadow:0 3px 0 rgba(255,198,41,.22)}
  50%{box-shadow:0 3px 0 rgba(255,198,41,.22),0 0 0 .12em rgba(255,198,41,.16)}
}
@media (prefers-reduced-motion: reduce){
  .class-switch select{transition:none;animation:none}
}
@media (max-width:560px){
  .class-switch select{height:.96em;padding-right:.34em}
}