/**
 * Problem Setup Component
 * 
 * Styles for the problem creation form including logic selector,
 * premises input, and conclusion input.
 * Dependencies: variables.css
 */

/* === Problem Setup Form === */
/* Panels / cards (white backgrounds, grayscale) */
.problem-setup {
  padding: var(--spacing-xl);
  background: var(--background);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  display: grid;
  grid-template-columns: var(--problem-setup-label-width) minmax(0, 1fr);
  gap: var(--spacing-md) var(--spacing-lg);
  align-items: center;
  min-width: 0; /* Allow shrinking below content size on mobile */
}

.problem-setup label {
  color: var(--text-color-secondary);
  font-size: var(--font-size-xl);
}

/* === Form Inputs === */
/* Logic select (width 50% of its field column) */
select.logic {
  font-family: var(--sans);
  font-size: var(--font-size-lg);
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--background);
  width: var(--logic-select-width);
}

/* Single-line inputs for Premises/Conclusion */
.text-input {
  font-family: var(--math-font);
  font-size: var(--font-size-lg);
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--background);
  width: 100%;
}

/* Placeholder text in text inputs should use regular font */
.text-input::placeholder {
  font-family: var(--sans);
}

/* === Problem Summary === */
/* Summary line above the editor */
.problem-summary {
  color: var(--ink);
  margin: 0 0 var(--problem-summary-margin-bottom);
  font-family: var(--sans);
  font-size: var(--font-size-xl);
}

/* Mathematical content in problem summary */
.problem-summary .math-content {
  font-family: var(--math-font);
}

/* === Button Container === */
.problem-setup > div:last-child {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
}