.unit-context-selector {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: min(25rem, 44vw);
  min-height: 3.6rem;
  padding: .45rem .7rem;
  border: 1px solid hsl(var(--primary) / .42);
  border-left: 4px solid hsl(var(--primary));
  border-radius: .75rem;
  background: hsl(var(--primary) / .055);
  box-shadow: 0 3px 12px hsl(var(--primary) / .09);
}
.unit-context-icon {
  display: grid;
  place-items: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: .55rem;
  background: hsl(var(--primary) / .13);
  font-size: 1rem;
}
.unit-context-content { min-width: 0; flex: 1; }
.unit-context-label {
  display: block;
  margin: 0 0 .05rem .2rem;
  color: hsl(var(--primary));
  font-size: .65rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.unit-context-select {
  width: 100%;
  height: 1.8rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: hsl(var(--foreground));
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}
.unit-context-selector:focus-within {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / .16);
}
@media (max-width: 700px) {
  .unit-context-selector { width: min(18rem, 64vw); min-height: 3.1rem; }
  .unit-context-icon { display: none; }
  .unit-context-label { font-size: .58rem; }
  .unit-context-select { font-size: .8rem; }
}