/* Small additions for the single-page, client-rendered build. */
#main[aria-busy="true"] {
  min-height: 60vh;
}

#main[aria-busy="true"]::after {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  margin: 4rem auto;
  border: 3px solid rgba(127, 127, 127, 0.25);
  border-top-color: rgba(127, 127, 127, 0.8);
  border-radius: 50%;
  animation: brew-spin 0.8s linear infinite;
}

@keyframes brew-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #main[aria-busy="true"]::after { animation: none; }
}

html[dir="rtl"] #header-controls,
html[dir="rtl"] #information { text-align: start; }

/* --- Install command: fixed one-line box, overflow faded out ------------ */
#information .row > .copyable.install-command {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* The box keeps the same size whatever the command length. */
.install-command .highlight {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 44px);
  overflow: hidden;
}

/* One line, clipped at the right edge, no scrollbar. */
.install-command .highlight pre {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4.5em), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 4.5em), transparent 100%);
}

/* Shell commands and code stay left-to-right inside RTL pages. */
html[dir="rtl"] .highlight,
html[dir="rtl"] .highlight pre,
html[dir="rtl"] .highlight code,
html[dir="rtl"] code {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

.install-command pre code {
  display: inline;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}