/* The display controls, bottom right (spec 4.1). They only work with JavaScript, so they show only with it. */
.controls {
  display: none;
  gap: 2.6em;
}

.js .controls {
  display: flex;
}

/* Until shell.js has read the saved choice, the switches would show the wrong word: keep them
   hidden (holding their space) until it marks the page ready. */
.js:not(.shell-ready) .controls {
  visibility: hidden;
}

@media (max-width: 24rem) {
  .controls {
    flex-direction: column;
    align-items: flex-end;
    gap: .9em;
  }
}