/* #region CSS Reset */
*, *::before, *::after { box-sizing: border-box; }
*:not(dialog) { margin: 0 }
body { line-height: 1.5 }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word }
h1, h2, h3, h4, h5, h6 { text-wrap: balance }
/* #endregion CSS Reset */


:root {
  --mono-bg-default: #eff3fc;
  --mono-fg-default: #11133c;

  --mono-bg: var(--mono-bg-default);
  --mono-fg: var(--mono-fg-default);

  --mono-bg-correct: #e1ecd2;
  --mono-fg-correct: #194a07;

  --mono-bg-wrong: #fbe4d8;
  --mono-fg-wrong: #280b04;

  --accent-fg: #245ada;
  --accent-bg: var(--mono-bg);

  --dim-color: #777;

  --base-mono-font-family:
      ui-monospace, 'Cascadia Code', 'Source Code Pro',
      Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --mono-font-family: var(--base-mono-font-family);

  --default-font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
}

@media (width < 52.00rem) {
  /* Use narrower monospace font so that code doesn't have to wrap */
  :root {
    --mono-font-family:
        'Ubuntu Mono', 'LXGW WenKai Mono TC', 'Iosevka',
        var(--base-mono-font-family);
  }
}

body {
  font-family: var(--default-font-family);
  font-variant-ligatures: none;
}

h1 {
  text-align: center;
  margin: 0;

  background: var(--accent-bg);
  color: var(--accent-fg);

  font-family: var(--mono-font-family);
  padding-top: calc(clamp(0.1rem, 10vw - 3rem, 0.5rem));
  margin-bottom: calc(clamp(0rem, 10vw - 3rem, 1rem));
}

.layout {
  display: grid;

  grid-template-areas: "nav" "main";
  grid-template-columns: 100%;

  @media (width >= 52.00rem) {
    grid-template-columns: minmax(auto, 1fr) minmax(20rem, 45rem) 1fr;
    grid-template-areas: "nav main .";
  }
}

nav {
  grid-area: nav;

  min-width: 15em;

  @media (width < 60.00rem) {
    &:not(:has(details[open])) {
      min-width: 10em;
    }
  }

  padding-inline-start: calc(clamp(0px, 5vw - 4rem, 1.5rem));
  @media (width < 52.00rem) {
    &:has(details[open]) {
      margin-block-end: 1rem;
    }
  }

  summary {
    color: var(--dim-color);
    font-weight: bold;
  }

  ol {
    padding-inline-start: revert-layer;
  }
}

main {
  grid-area: main;
}

.quiz-item {
  --quiz-inline-padding: 0.5rem;
  padding-inline: var(--quiz-inline-padding);

  display: flex;
  flex-direction: column;
  gap: 1rem;

  width: 100%;

  &>details>button {
    margin-block: 1rem;
    font-size: 1.5rem;
  }

  &>details>summary {
    font-size: 1.25rem;
  }
}

.quiz-item:has(details[open]) .quiz-answers > li {
  /* When the "Reveal answer" box is revealed */

  padding-inline-start: 1ch;

  &[data-is-correct-answer] {
    --mono-bg: var(--mono-bg-correct);
    --mono-fg: var(--mono-fg-correct);
    font-weight: bold;

    &::marker {
      content: "✅" / "correct";
      color: var(--mono-fg);
      font-size: 1.25rem;
      font-weight: bold;
    }
  }

  &:not([data-is-correct-answer]) {
    --mono-bg: var(--mono-bg-wrong);
    --mono-fg: var(--mono-fg-wrong);

    &::marker {
      content: "❌" / "wrong";
      color: var(--mono-fg);
      font-size: 1.25rem;
      font-weight: bold;
    }
  }
}

@media (width >= 52.00rem) {
  .explanation {
    margin-inline-start: 0.4ch;
    border-inline-start: 2px dotted var(--dim-color);
    padding-inline-start: 0.5rem;
    padding-block-start: 0.5rem;
  }
}


/* Utility stuff: */

summary {
  cursor: pointer;
}

.flow > * + * {
  margin-top: 0.5lh;
}

@media (width < 52.00rem) {
  ul, ol {
    /* reduce indentation in lists */
    padding-inline-start: 1rem;
  }
}

* + p {
  margin-top: 0.5lh;
}

.progress {
  color: #848f9a;
  font-weight: normal;
}

blockquote {
  border-inline-start: 2px solid var(--accent-fg);
  background: var(--accent-bg);
  padding-inline-start: 4px;
}

code {
  border-radius: 4px;

  background: var(--mono-bg);
  color: var(--mono-fg);

  font-family: var(--mono-font-family);

  white-space: pre-wrap;
}

.code-block {
  line-height: 1.25;

  /* stretch the code block over the entire width on mobile */
  margin-block: 2px;
  margin-inline: calc(-1 * var(--quiz-inline-padding, 0px));
  @media (width >= 52.00rem) {
    /* avoid wrapping if the screen alows it */
    margin-inline-end: calc(-1 * var(--quiz-inline-padding, 0px));
    font-size: 1.125em;
  }
  background: var(--mono-bg);
  color: var(--mono-fg);

  padding: 0.25em;
  @media (width < 40.00rem) {
    padding-block-end: 0.75em /* make space for scrollbar */;
  }
  white-space: pre;
  overflow-x: auto;
  word-break: break-all;
  font-family: var(--mono-font-family);
}

.svg-icon {
  display: inline-block;
  vertical-align: middle;
}