/* Buttons: Always white text */
button {
  color: white;
}

/* All other text: Black in light mode, white in dark mode */
@media (prefers-color-scheme: light) {
  body,
  h1, h2, h3, h4, h5, h6,
  p, span, li, label,
  input, textarea {
    color: black;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
  }

  body,
  h1, h2, h3, h4, h5, h6,
  p, span, li, label,
  input, textarea {
    color: white;
  }
}

/* Input and button layout inside each prompt */
.input-button-container {
  display: flex;
  flex-direction: column; /* Mobile default */
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Responsive desktop layout */
@media (min-width: 768px) {
  .input-button-container {
    flex-direction: row;
    align-items: center;
  }

  .input-button-container input {
    flex: 1;
    min-width: 0; /* Prevent overflow */
  }

  .input-button-container button {
    white-space: nowrap;
    min-width: 120px; /* Optional: control button width */
  }
}

/* Grid layout for prompts per section */
.prompt-grid {
  display: grid;
  grid-template-columns: 1fr; /* Default: mobile view */
  gap: 1rem;
}

@media (min-width: 768px) {
  .prompt-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 per row on desktop */
  }
}

/* Moved from inline style in HTML */
.button-descriptions {
  margin-top: 1rem;
}

/* Basic wrapper for each prompt */
.prompt-card {
  padding: 1rem;
}

/* Layout for the top intro section */
.intro-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 1rem; /* Increased for consistent spacing */
}

@media (min-width: 768px) {
  .intro-grid {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .intro-left,
  .intro-right {
    flex: 1;
  }

  .intro-left {
    padding-right: 2rem;
  }
}

/* Apply consistent top spacing inside all prompt sections */
#topics-section section {
  padding-block-start: 1rem;
}

/* Cancel default margin between prompt sections (Pico override) */
#topics-section section + section {
  margin-top: 0;
}