/* Variable-length custom AI program controls. */

.program-count-picker {
  display: grid;
  gap: 7px;
  margin-top: 24px;
  padding: 18px;
  border: 1px solid #d2e3fc;
  border-radius: 14px;
  background: #f8fbff;
}

.program-count-picker[hidden] {
  display: none !important;
}

.program-count-picker label {
  color: #202124;
  font-size: 14px;
  font-weight: 850;
}

.program-count-picker input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid #b8cdf5;
  border-radius: 12px;
  color: #202124;
  background: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.program-count-picker input:focus {
  border-color: #4285f4;
  outline: 3px solid rgba(66, 133, 244, .16);
  outline-offset: 1px;
}

.program-count-picker input:disabled {
  color: #6f7783;
  border-color: #d8dde5;
  background: #e8ebef;
  cursor: not-allowed;
}

.program-count-picker small {
  color: #5f6368;
  font-size: 12px;
  line-height: 1.5;
}

/* Keep the Minecraft item at the left and the path badge at the right.
   The item artwork is absolutely positioned, so the badge needs its own
   reserved right-side area instead of collapsing into the same space. */
.program-card-art .program-card-badge {
  margin-left: auto;
  align-self: flex-end;
  max-width: min(160px, calc(100% - 112px));
}

.program-card[data-program-slug="custom-ai-learning-journey"] .program-card-art {
  background: linear-gradient(145deg, #f8fbff, #e8f0fe);
}

.program-card[data-program-slug="custom-ai-learning-journey"] .program-card-badge {
  color: #174ea6;
}

@media (max-width: 620px) {
  .program-count-picker {
    margin-top: 20px;
    padding: 15px;
  }

  .program-card-art .program-card-badge {
    max-width: min(150px, calc(100% - 96px));
  }
}