/* Light styling on top of the "cosmo" Quarto theme */

/*
 * Fix: quarto-live's exercise editor card only clips its header/code
 * background to the card's rounded corners when rendered as reveal.js
 * slides (see .reveal .card.exercise-editor { overflow: hidden } in the
 * extension's own CSS). On a normal page, that overflow rule is missing,
 * so the code editor's background square peeks out past the card's
 * rounded border at each corner. Applying the same overflow: hidden here
 * fixes it outside of reveal.js too.
 */
.card.exercise-editor {
  overflow: hidden;
  border-radius: 0.5rem;
}

/*
 * A single larger, softly shaded container around each full exercise
 * (editor + hints + check feedback + progress checkbox), similar to the
 * card-like grouping used on the SQL tutorial site. Wrap the exercise's
 * webr/hint/solution/check blocks in a fenced div with this class:
 *
 *   ::: {.exercise-box}
 *   ```{webr}
 *   ...
 *   ```
 *   :::
 */
.exercise-box {
  background-color: var(--bs-gray-100, #f4f4f5);
  border: 1px solid var(--bs-gray-300, #dee2e6);
  border-radius: 0.6rem;
  padding: 1.25rem 1.25rem 0.75rem;
  margin: 1rem 0 1.75rem;
}

/* Avoid stacking the editor card's own top margin on top of the box's padding */
.exercise-box .card.exercise-editor {
  margin-top: 0;
}

/* Trim trailing margin so the box doesn't end with extra empty space */
.exercise-box > :last-child {
  margin-bottom: 0;
}

/* Give the self-report progress checkboxes a bit of breathing room */
input[type="checkbox"][data-progress-id] {
  margin-right: 0.4em;
  transform: scale(1.1);
}

/* Make callout-based hints/solutions a touch more compact */
.exercise-box .callout {
  margin-top: 0.75rem;
}