/* ============================================================================
   components/blocks.css  --  the course's teaching blocks

   Everything a lecture or reference page uses to explain something. Authors
   write fenced divs; lua/course.lua turns them into the markup
   styled here. The full list, with every option, is in handbook/.

     Labeled blocks     .key-idea .intuition .why .recall .prereq .outcomes
                         .pitfall .misconception .in-practice .history .checkpoint
     Collapsible         .derivation  .deep-dive  .technical  (<details>)   and  .answer
     Theorem-like        Quarto's own #thm- #lem- #cor- #prp- #cnj- #def- #exm- #exr-
                         divs, plus .proof .remark .solution
     Worked example      .worked-example  with .given .step .answer .takeaway
     Algorithm           .algorithm  (input / output / cost / pseudocode)
     Notation box        {{< notation id ... >}}

   Colors come from base/tokens.css (--course-*), which follow the theme, so
   there is no dark-mode block in this file.
   ==========================================================================*/


/* ---------------------------------------------------------------- 1. Labeled blocks */

.course-block {
  --role: var(--course-key);
  margin: 1.4rem 0;
  padding: 0.85rem 1.1rem;
  border-left: 3px solid var(--role);
  border-radius: 0 var(--course-radius) var(--course-radius) 0;
  background: color-mix(in srgb, var(--role) 7%, var(--course-paper));
  text-align: left;
}

/* the small-caps label; a block that has no data-label just has no header */
.course-block[data-label]::before,
details.course-block>summary strong:first-child {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: color-mix(in srgb, var(--role) 80%, var(--course-ink));
}

.course-block[data-label]::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
}

.course-block>.block-title {
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.course-block> :is(p, ul, ol, div, table, pre, figure):first-child,
.course-block>.block-title+ :is(p, ul, ol, div, table, pre, figure) {
  margin-top: 0;
}

.course-block> :last-child {
  margin-bottom: 0;
}

/* roles */
.key-idea,
.why,
.prereq,
.outcomes,
.recall {
  --role: var(--course-key);
}

.intuition {
  --role: var(--course-intuition);
}

.pitfall,
.misconception {
  --role: var(--course-caution);
}

.in-practice,
.checkpoint {
  --role: var(--course-practice);
}

.history,
.deep-dive,
.derivation,
.technical {
  --role: var(--course-history);
}

.program-output {
  --role: var(--course-muted);
}

.program-output pre {
  margin-bottom: 0;
}

/* prerequisites and outcomes read as short lists */
:is(.prereq, .outcomes) ul,
:is(.prereq, .outcomes) ol {
  margin-bottom: 0;
  padding-left: 1.2rem;
}


/* ------------------------------------------------------------- 2. Collapsible blocks */

details.course-block {
  padding: 0.55rem 1.1rem;
}

details.course-block>summary {
  cursor: pointer;
  list-style-position: outside;
  padding: 0.15rem 0;
}

details.course-block[open]>summary {
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--course-rule);
}

details.course-block>div> :first-child {
  margin-top: 0;
}

details.course-block>div> :last-child {
  margin-bottom: 0;
}

/* an answer is hidden until asked for; it can sit inside any block */
details.course-answer {
  margin: 0.9rem 0;
  border: 1px dashed var(--course-rule);
  border-radius: var(--course-radius);
  padding: 0.35rem 0.9rem;
  text-align: left;
}

details.course-answer>summary {
  cursor: pointer;
  font-weight: 600;
  color: color-mix(in srgb, var(--course-practice) 80%, var(--course-ink));
}

details.course-answer[open] {
  background: color-mix(in srgb, var(--course-practice) 5%, var(--course-paper));
  border-style: solid;
  border-color: color-mix(in srgb, var(--course-practice) 45%, transparent);
}

details.course-answer>div {
  padding: 0.3rem 0 0.2rem;
}

details.course-answer>div> :first-child {
  margin-top: 0.4rem;
}

details.course-answer>div> :last-child {
  margin-bottom: 0;
}


/* ----------------------------------------------- 3. Theorem-like blocks (Quarto's own)
   Quarto numbers these and makes them cross-referenceable (@thm-x, @def-x, ...).
   Here they only get the course look. */

:is(.theorem, .lemma, .corollary, .proposition, .conjecture, .definition, .hypothesis,
  .example, .exercise, .remark) {
  --role: var(--course-key);
  margin: 1.4rem 0;
  padding: 0.8rem 1.1rem;
  border-left: 3px solid var(--role);
  border-radius: 0 var(--course-radius) var(--course-radius) 0;
  background: color-mix(in srgb, var(--role) 6%, var(--course-paper));
}

:is(.example, .exercise) {
  --role: var(--course-practice);
}

.remark {
  --role: var(--course-history);
}

:is(.theorem, .lemma, .corollary, .proposition, .conjecture, .definition, .hypothesis,
  .example, .exercise, .remark)> :is(p, ul, ol):first-child {
  margin-top: 0;
}

:is(.theorem, .lemma, .corollary, .proposition, .conjecture, .definition, .hypothesis,
  .example, .exercise, .remark)> :last-child {
  margin-bottom: 0;
}

:is(.theorem, .lemma, .corollary, .proposition, .conjecture, .definition, .hypothesis,
  .example, .exercise, .remark) :is(.theorem-title, .definition-title, .example-title,
  .exercise-title, .remark-title, .lemma-title, .corollary-title, .proposition-title,
  .conjecture-title, .hypothesis-title) {
  color: color-mix(in srgb, var(--role) 80%, var(--course-ink));
}

/* proofs and solutions: quieter, with the end-of-proof mark */
:is(.proof, .solution) {
  margin: 1rem 0 1.4rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--course-rule);
}

.proof> :last-child::after {
  content: "\220E";
  /* end-of-proof square */
  float: right;
  margin-left: 1rem;
  color: var(--course-muted);
}


/* ------------------------------------------------------------ 4. Worked examples
   A worked example is a problem worked to its answer in numbered steps.

     ::: {#wex-hamming .worked-example title="Comparing two reads"}
     ::: given
     ...what is known...
     :::
     ::: {.step title="Line them up"}
     ...
     :::
     ::: answer
     ...
     :::
     :::

   Give it an id starting `wex-` to number it and cite it with @wex-hamming.
   Add `.stepped` to reveal one step at a time (static/js/components/course.js). */

.worked-example {
  --role: var(--course-practice);
  counter-reset: wex-step;
}

/* A numbered example is wrapped by Quarto in a figure, inside the block's own frame.
   The caption goes on top, like a heading, and the text stays left-aligned. */
.worked-example.quarto-float,
.algorithm.quarto-float,
.quarto-float-wex,
.quarto-float-alg {
  text-align: left;
}

figure.quarto-float-wex {
  display: flex;
  flex-direction: column;
  margin: 0;
}

figure.quarto-float-wex>figcaption {
  order: -1;
  text-align: left;
  font-weight: 600;
  margin: 0 0 0.35rem;
  color: color-mix(in srgb, var(--course-practice) 80%, var(--course-ink));
}

/* nested given / problem / takeaway are lighter than the frame around them */
.worked-example>.course-block {
  margin: 0.9rem 0;
  padding: 0.5rem 0.9rem;
  border-left-width: 2px;
  background: transparent;
}

.worked-example>.course-block[data-label]::before {
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}

.course-step {
  counter-increment: wex-step;
  position: relative;
  margin: 0.9rem 0;
  padding-left: 2.5rem;
  text-align: left;
}

.course-step::before {
  content: counter(wex-step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: var(--course-paper);
  background: var(--role, var(--course-practice));
}

.course-step>.step-title {
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.course-step> :is(p, ul, ol, div, pre, table):first-child,
.course-step>.step-title+ :is(p, ul, ol, div, pre, table) {
  margin-top: 0;
}

.course-step> :last-child {
  margin-bottom: 0;
}

/* stepped reveal (only when the script has run; without it every step shows) */
.worked-example.js-stepped>[hidden] {
  display: none;
}

.wex-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0.8rem 0 0.2rem;
  font-size: 0.9rem;
}

.wex-controls button {
  color: var(--course-ink);
  background: color-mix(in srgb, var(--course-ink) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--course-ink) 35%, transparent);
  border-radius: var(--course-radius);
  padding: 0.2rem 0.75rem;
  cursor: pointer;
}

.wex-controls button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--course-ink) 18%, transparent);
}

.wex-controls button:disabled {
  opacity: 0.45;
  cursor: default;
}

.wex-controls .wex-progress {
  color: var(--course-muted);
  margin-left: auto;
}


/* ------------------------------------------------------------- 5. Algorithm cards
     ::: {#alg-scan .algorithm title="Naive scan" input="text $T$, pattern $P$"
           output="every position where $P$ occurs in $T$" time="$O(nm)$" space="$O(1)$"}
     ```pseudo
     ...
     ```
     :::
   `#alg-` numbers it (cite with @alg-scan); leave the id off for an unnumbered card.
   `lines="false"` turns the line numbers off; `lab="URL"` adds a "Run it in the lab" link. */

.algorithm {
  --role: var(--course-algorithm);
  padding: 0.6rem 1.1rem 0.8rem;
}

.algorithm[data-label]::before {
  margin-bottom: 0.3rem;
}

.alg-io {
  margin: 0 0 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--course-rule);
  font-size: 0.95rem;
}

.alg-io p {
  margin: 0.1rem 0;
  text-align: left;
}

.algorithm div.sourceCode {
  margin: 0.4rem 0;
  background: transparent;
}

.alg-facts {
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--course-rule);
  font-size: 0.9rem;
}

.alg-facts p {
  margin: 0;
  text-align: left;
}

.alg-fact {
  display: inline-block;
  margin: 0.1rem 1.2rem 0.1rem 0;
}

.alg-fact .fact-label {
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-right: 0.15rem;
  color: color-mix(in srgb, var(--course-algorithm) 80%, var(--course-ink));
}

/* the numbered form: Quarto wraps it in a figure and builds "Algorithm 3: Title" */
figure.quarto-float-alg {
  display: flex;
  flex-direction: column;
  margin: 0;
}

figure.quarto-float-alg>figcaption {
  order: -1;
  text-align: left;
  font-weight: 600;
  margin: 0 0 0.35rem;
  color: color-mix(in srgb, var(--course-algorithm) 80%, var(--course-ink));
}

/* a trace of an algorithm's state, one row per step:  : Caption {.trace}  after a table */
table.trace {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
}

table.trace th,
table.trace td {
  text-align: center;
}


/* ------------------------------------------------------------------ 6. Notation box
   {{< notation reals argmax >}}: the symbols a chapter uses, taken from registry/notation.yml. */

.notation-box {
  margin: 1.4rem 0;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--course-rule);
  border-radius: var(--course-radius);
  background: var(--course-wash);
  font-size: 0.95rem;
  overflow-x: auto;
  /* a narrow screen scrolls the table rather than squeezing a formula */
}

.notation-box>.block-title {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--course-muted);
}

.notation-box table {
  margin: 0;
  width: 100%;
}

.notation-box td {
  padding: 0.2rem 0.6rem 0.2rem 0;
  border: 0;
  vertical-align: baseline;
}

/* The symbol column. MathJax 4 breaks an inline formula at "=" as soon as it is wider than the
   cell it is typeset in, and `white-space: nowrap` does not stop that. A formula such as
   CPM_gj = K_gj/N_j x 10^6 is about 10.5em wide, so the column gets a floor above that. */
.notation-box td:first-child {
  white-space: nowrap;
  width: 1%;
  min-width: 11.5em;
}

/* the name column: wide enough that "counts per million" wraps at most once */
.notation-box td:nth-child(2) {
  min-width: 8em;
}

/* On a phone the two fixed columns would leave the meaning a sliver, so each row stacks:
   symbol, name, then meaning. */
@media (max-width: 40em) {

  .notation-box table,
  .notation-box tbody,
  .notation-box tr,
  .notation-box td {
    display: block;
  }

  .notation-box tr {
    padding: 0.45rem 0;
  }

  .notation-box tr+tr {
    border-top: 1px solid var(--course-rule);
  }

  .notation-box td,
  .notation-box td:first-child,
  .notation-box td:nth-child(2) {
    width: auto;
    min-width: 0;
    padding: 0.05rem 0;
  }

  .notation-box td:nth-child(2) {
    color: var(--course-muted);
  }
}

/* a numbered block already says what it is in its caption ("Algorithm 3: ..."), so drop the label */
.course-block.quarto-float[data-label]::before {
  display: none;
}

/* An algorithm card is wrapped in a closed <details> (lua/course.lua). The wrapper carries the
   frame and the "Algorithm: title" summary, so the card inside gives up its own frame and label. */
details.algorithm-fold {
  --role: var(--course-algorithm);
}

details.worked-fold {
  --role: var(--course-practice);
}

details.algorithm-fold .algorithm,
details.worked-fold .worked-example {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

details.algorithm-fold .algorithm[data-label]::before,
details.worked-fold .worked-example[data-label]::before {
  display: none;
}