/* ---------------------------------------------------------------------------
   exercises.css -- look of the exercise pages

   Everything here is generated by exercises.lua; none of these class names
   appear in the .qmd files.  Colors follow the site's sandstone theme through
   the Bootstrap custom properties, with literal fallbacks for safety.
--------------------------------------------------------------------------- */

:root {
  --ex-hint: #8a6d2f;
  --ex-hint-bg: #fbf7ee;
  --ex-sol: var(--bs-primary, #325d88);
  --ex-sol-bg: #f2f6fa;
  --ex-muted: #8e8c84;
  --ex-rule: #dedbd4;
}

/* ------------------------------------------------------------- headings -- */
/* Quarto sizes h1 and h2 for a page with a handful of headings.  An exercise
   page has one every few paragraphs, so both steps come down a long way and
   the exercise heading sits just above body text.

   `ex-section` and `ex-heading` are added by exercises.lua, so these rules
   hold whatever `exercise-level` is set to.  Quarto copies the class onto the
   wrapping <section> as well as the heading, and a font-size there would
   cascade into the prose -- hence the explicit element selectors.  The table
   of contents is outside <main> and keeps Quarto's own sizing. */

main :is(h1, h2, h3).ex-section {
  margin-top: 3rem;
  margin-bottom: 1.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--ex-rule, #dedbd4);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.015em;
}

main :is(h1, h2, h3, h4).ex-heading {
  margin-top: 2.25rem;
  margin-bottom: 0.65rem;
  font-size: 1.15rem;
  font-weight: 400;
}

/* the exercise number, which exercises.lua counts off the document order */
.ex-num {
  font-weight: 700;
  letter-spacing: 0.01em;
}

main .ex-num::after {
  content: "·";
  margin-left: 0.35em;
  color: var(--ex-muted, #8e8c84);
  font-weight: 400;
}

/* the divider that opens an extra-practice section, for a week that has one */
main :is(h1, h2).ex-divider {
  margin-top: 3.25rem;
  padding-top: 1.6rem;
  border-top: 3px double var(--ex-rule, #dedbd4);
  font-size: 1.35rem;
  font-weight: 600;
}

/* ------------------------------------------------- the release notice ---- */

.ex-notice {
  margin: 1.25rem 0 2rem;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--ex-rule, #dedbd4);
  background: #f8f5f0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.ex-notice-wait {
  border-left-color: var(--ex-sol, #325d88);
}

.ex-countdown {
  color: var(--ex-muted, #8e8c84);
  white-space: nowrap;
}

.ex-countdown:not(:empty)::before {
  content: "— ";
}

/* --------------------------------------------------------- the buttons --- */

.ex-reveal,
.ex-slot {
  margin: 0.75rem 0;
}

.ex-reveal + .ex-reveal,
.ex-reveal + .ex-slot,
.ex-slot + .ex-reveal {
  margin-top: 0.4rem;
}

.ex-btn {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem 0.4rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.3rem 0.85rem;
  border: 1px solid currentColor;
  border-radius: 2rem;
  background: transparent;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

/* kill the native disclosure triangle, in every engine */
summary.ex-btn {
  list-style: none;
}

summary.ex-btn::-webkit-details-marker {
  display: none;
}

/* our own chevron, which turns as the panel opens */
summary.ex-btn::before {
  content: "";
  flex: none;
  width: 0.36em;
  height: 0.36em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

details[open] > summary.ex-btn::before {
  transform: rotate(45deg);
}

.ex-btn-hint {
  color: var(--ex-hint, #8a6d2f);
}

.ex-btn-hint:hover {
  background: var(--ex-hint-bg, #fbf7ee);
}

.ex-btn-sol {
  color: var(--ex-sol, #325d88);
}

.ex-btn-sol:hover {
  background: var(--ex-sol-bg, #f2f6fa);
}

.ex-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* a hint that is still a placeholder */
.ex-reveal.ex-draft > summary.ex-btn {
  border-style: dashed;
  opacity: 0.75;
}

/* ------------------------------------------------------ locked solution -- */

.ex-btn-locked {
  color: var(--ex-muted, #8e8c84);
  border-style: dashed;
  cursor: not-allowed;
}

.ex-btn-locked .ex-btn-when {
  color: var(--ex-muted, #8e8c84);
  font-weight: 400;
  font-style: italic;
  opacity: 0.85;
}

.ex-lock {
  flex: none;
  width: 0.85em;
  height: 0.85em;
  fill: currentColor;
}

/* browser gating: before the release moment, show the stub, not the panel */
.ex-slot.ex-pending > .ex-reveal {
  display: none;
}

.ex-slot:not(.ex-pending) > .ex-btn-locked {
  display: none;
}

/* ------------------------------------------------------ revealed panels -- */

.ex-reveal-body {
  margin: 0.55rem 0 0 0.05rem;
  padding: 0.1rem 0 0.1rem 1rem;
  border-left: 3px solid var(--ex-rule, #dedbd4);
}

.ex-reveal-hint > .ex-reveal-body {
  border-left-color: var(--ex-hint, #8a6d2f);
  background: var(--ex-hint-bg, #fbf7ee);
  padding: 0.6rem 0.9rem;
}

.ex-reveal-sol > .ex-reveal-body {
  border-left-color: var(--ex-sol, #325d88);
}

.ex-reveal-body > :last-child {
  margin-bottom: 0;
}

/* code and tables inside a panel should not push the page sideways */
.ex-reveal-body pre,
.ex-reveal-body .cell-output,
.ex-reveal-body table {
  max-width: 100%;
  overflow-x: auto;
}

/* ------------------------------------------------------------- printing -- */

@media print {
  .ex-reveal[open] > summary.ex-btn::before,
  .ex-btn-locked {
    display: none;
  }

  .ex-reveal:not([open]) > .ex-reveal-body {
    display: none;
  }

  .ex-btn {
    border: none;
    padding-left: 0;
    font-weight: 700;
  }
}