/*
 * Random picker layout corrections
 * --------------------------------
 * Keeps the modern random picker fully inside the desktop viewport and makes
 * the compact control area robust against inherited grid rules and narrow
 * sidebar widths.
 *
 * The page shell intentionally has no random-picker-specific top margin or
 * height correction. Its vertical position is shared with the other ClassFlow
 * workbench pages through viewport.css.
 */

/*
 * Das Glücksrad darf niemals über zwei unabhängig berechnete Achsen skaliert
 * werden. Wrapper und Canvas bleiben deshalb in jedem Breakpoint strikt 1:1.
 * viewport.js setzt zusätzlich dieselbe einzelne Seitenlänge explizit auf
 * Breite und Höhe, sobald der verfügbare Platz neu berechnet wird.
 */
.random-workbench-page .wheel-wrap {
  box-sizing: border-box;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
}

.random-workbench-page .wheel-canvas {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  transform-origin: 50% 50%;
}

.random-workbench-page .random-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 10px;
}

.random-workbench-page .random-controls .random-section-heading {
  width: 100%;
  min-width: 0;
  margin-bottom: 0;
}

.random-workbench-page .random-controls .random-section-heading > div {
  min-width: 0;
}

.random-workbench-page .draw-mode {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.random-workbench-page .draw-mode label {
  min-width: 0;
  white-space: normal;
  line-height: 1.18;
  text-align: center;
}

.random-workbench-page .random-side__buttons {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, .92fr));
  margin-top: 0;
}

.random-workbench-page .random-side__buttons .button {
  width: 100%;
  min-width: 0;
  padding-inline: 8px;
}

.random-workbench-page .random-mode-help {
  min-width: 0;
  margin: 0 1px;
  overflow-wrap: anywhere;
}

@media (min-width: 720px) {
  .random-workbench-page .random-window {
    grid-template-columns: minmax(420px, 1.45fr) minmax(360px, .9fr);
  }

  .random-workbench-page .wheel-panel {
    padding: clamp(12px, .9vw, 18px);
  }

  .random-workbench-page .wheel-stage {
    padding: 4px 0 12px;
  }

  .random-workbench-page .wheel-wrap {
    width: min(100%, 620px, calc(100dvh - 300px));
    height: auto;
    max-width: calc(100% - 24px);
    max-height: none;
  }
}

@media (min-width: 720px) and (max-width: 1180px) {
  .random-workbench-page .random-window {
    grid-template-columns: minmax(390px, 1.35fr) minmax(330px, .95fr);
  }

  .random-workbench-page .random-side__buttons {
    grid-template-columns: 1fr 1fr;
  }

  .random-workbench-page .random-side__buttons #draw-student {
    grid-column: 1 / -1;
  }
}

@media (min-width: 720px) and (max-height: 760px) {
  .random-workbench-page .wheel-wrap {
    width: min(100%, 520px, calc(100dvh - 285px));
  }
}

@media (max-width: 719px) {
  .random-workbench-page .random-controls {
    gap: 9px;
  }

  .random-workbench-page .random-side__buttons {
    grid-template-columns: 1fr 1fr;
  }

  .random-workbench-page .random-side__buttons #draw-student {
    grid-column: 1 / -1;
  }
}

@media (max-width: 440px) {
  .random-workbench-page .draw-mode,
  .random-workbench-page .random-side__buttons {
    grid-template-columns: 1fr;
  }

  .random-workbench-page .random-side__buttons #draw-student {
    grid-column: auto;
  }
}