.focus-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .65rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.focus-controls label {
  width: 100%;
  margin: 0;
  color: var(--muted);
}

.focus-controls select {
  min-height: 2.75rem;
  max-width: 12rem;
  padding: .65rem 2rem .65rem .8rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: #0b0f13;
  color: var(--text);
  font: .85rem/1 var(--mono);
}

.focus-controls select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.focus-timer {
  display: grid;
  gap: .5rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  background: #0b0f13;
}

.focus-clock {
  font: 800 clamp(2rem, 9vw, 3.4rem)/1 var(--mono);
  letter-spacing: -.06em;
  color: var(--accent);
}

.focus-timer #focus-status {
  color: var(--muted);
  font: .82rem/1.5 var(--mono);
}

.focus-timer .quiet-button {
  justify-self: start;
}

button:disabled {
  cursor: default;
  opacity: .55;
  transform: none;
}

@media (min-width: 48rem) {
  .focus-controls label {
    width: auto;
    align-self: center;
  }
}