/* ============================================================================
   components/scaffold.css  --  the parts of a page that scaffold learning

     .kind-chip .level-chip   what kind of page this is and who it is for
     .depth-switch            Intuition / Core / Technical  (course.js turns it on)
     .course-bridge           Last time / Today / Next, at the top of a lecture
     .course-prereq           "Before you start": what the page assumes
     .course-bio              the biological-context card
     .course-layers           one idea at three depths (tabs when JavaScript runs)
     .pseudo-mojo: pseudocode and Mojo as tabs in one collapsed block; .cf-head: a file bar above code
     .course-introduced, .course-deeper, .go-deeper   end-of-page and inline pointers
     .kind-outline            the printed outline of a page kind (Start here)

   Everything works without JavaScript: the depth switch and the tick boxes stay
   hidden, the three layers are shown stacked and labeled, folds stay folds.
   Colors come from base/tokens.css, so dark mode needs no rules here.
   ==========================================================================*/

/* Some section stylesheets (lectures/1) set white-space on their containers; the scaffold parts
   must not inherit line breaks from the newlines in generated markup. */
.course-bridge,
.course-prereq,
.course-bio,
.course-layers,
.course-introduced,
.course-deeper,
.go-deeper,
.depth-switch,
.cf-head,
.pseudo-mojo>summary {
  white-space: normal;
}

/* ---------------------------------------------------------------- chips */

.kind-chip,
.level-chip {
  display: inline-block;
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.kind-chip {
  --role: var(--course-key);
  color: color-mix(in srgb, var(--role) 85%, var(--course-ink));
  background: color-mix(in srgb, var(--role) 12%, var(--course-paper));
  border: 1px solid color-mix(in srgb, var(--role) 45%, transparent);
}

.kind-lecture {
  --role: var(--course-key);
}

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

.kind-method {
  --role: var(--course-algorithm);
}

.kind-case-study {
  --role: var(--course-practice);
}

.kind-deep-dive {
  --role: var(--course-history);
}

.kind-primer {
  --role: var(--course-caution);
}

.level-chip {
  color: var(--course-muted);
  border: 1px solid var(--course-rule);
  font-weight: 500;
}

.course-meta .kind-chip+.level-chip::before,
.course-meta .level-chip+.cm-item::before {
  content: none;
}

.ci-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-left: 0.6rem;
  vertical-align: middle;
}

.ci-chips .cm-item {
  color: var(--course-muted);
  font-size: 0.8rem;
}

/* --------------------------------------------------------- depth switch */

.depth-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 1.2rem;
  font-size: 0.88rem;
}

.depth-switch[hidden] {
  display: none;
}

.depth-switch .ds-label {
  color: var(--course-muted);
  margin-right: 0.3rem;
}

.depth-switch .ds-btn {
  padding: 0.15rem 0.8rem;
  border: 1px solid var(--course-rule);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.depth-switch .ds-btn:hover {
  background: var(--course-wash);
}

.depth-switch .ds-btn[aria-pressed="true"] {
  border-color: var(--course-key);
  background: color-mix(in srgb, var(--course-key) 14%, var(--course-paper));
  font-weight: 600;
}

.depth-switch .ds-tip {
  flex-basis: 100%;
  color: var(--course-muted);
  font-size: 0.82rem;
  min-height: 1.2em;
}

@media (min-width: 720px) {
  .depth-switch .ds-tip {
    flex-basis: auto;
    margin-left: 0.6rem;
  }
}

/* --------------------------------------------------------------- bridge */

.course-bridge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0;
  margin: 0 0 1.4rem;
  border: 1px solid var(--course-rule);
  border-radius: var(--course-radius);
  overflow: hidden;
  font-size: 0.92rem;
}

.course-bridge .cb-cell {
  padding: 0.7rem 0.9rem;
  border-left: 1px solid var(--course-rule);
}

.course-bridge .cb-cell:first-child {
  border-left: 0;
}

.course-bridge .cb-cell> :last-child {
  margin-bottom: 0;
}

.course-bridge .cb-cell p {
  margin: 0.25rem 0;
}

.course-bridge .cb-title {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--course-muted);
}

.course-bridge .cb-today {
  background: color-mix(in srgb, var(--course-key) 7%, var(--course-paper));
}

.course-bridge .cb-today .cb-title {
  color: color-mix(in srgb, var(--course-key) 80%, var(--course-ink));
}

@media (max-width: 720px) {
  .course-bridge .cb-cell {
    border-left: 0;
    border-top: 1px solid var(--course-rule);
  }

  .course-bridge .cb-cell:first-child {
    border-top: 0;
  }
}

/* ------------------------------------------------------ prerequisites box */

.course-prereq {
  margin: 0 0 1.4rem;
  padding: 0.7rem 1rem 0.8rem;
  border: 1px solid var(--course-rule);
  border-left: 4px solid var(--course-caution);
  border-radius: 0 var(--course-radius) var(--course-radius) 0;
  background: color-mix(in srgb, var(--course-caution) 5%, var(--course-paper));
  font-size: 0.95rem;
}

.course-prereq .pr-head {
  margin-bottom: 0.3rem;
}

.course-prereq .pr-head p {
  margin: 0;
}

.course-prereq .pr-sub {
  margin-left: 0.6rem;
  color: var(--course-muted);
  font-size: 0.85rem;
}

.course-prereq .pr-progress {
  float: right;
  color: var(--course-muted);
  font-size: 0.85rem;
}

.course-prereq .pr-item {
  padding: 0.35rem 0;
  border-top: 1px solid color-mix(in srgb, var(--course-ink) 8%, transparent);
}

.course-prereq .pr-item:first-of-type {
  border-top: 0;
}

.course-prereq .pr-line p {
  margin: 0;
}

.course-prereq .pr-cb {
  margin-right: 0.5rem;
  vertical-align: -0.1em;
}

.course-prereq .pr-term {
  font-weight: 600;
}

.course-prereq .pr-where,
.course-prereq .pr-tag {
  margin-left: 0.4rem;
  padding: 0 0.45rem;
  border: 1px solid var(--course-rule);
  border-radius: 999px;
  color: var(--course-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.course-prereq .pr-tag.pr-warn {
  border-color: var(--course-caution);
  color: var(--course-caution);
}

.course-prereq .pr-missing .pr-where {
  border-style: dashed;
}

.course-prereq .pr-plain {
  margin: 0.15rem 0 0 1.6rem;
  color: var(--course-muted);
}

.course-prereq .pr-plain p {
  margin: 0;
}

.course-prereq .js-checks .pr-plain {
  margin-left: 1.9rem;
}

.course-prereq .pr-item.pr-done .pr-term {
  font-weight: 500;
}

.course-prereq .pr-item.pr-done .pr-line {
  opacity: 0.6;
}

.course-prereq .pr-test {
  margin: 0.35rem 0 0 1.6rem;
  font-size: 0.9rem;
}

.course-prereq .pr-test>summary {
  cursor: pointer;
  color: var(--course-key);
}

.course-prereq .pr-hint {
  margin-top: 0.6rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--course-radius);
  background: color-mix(in srgb, var(--course-caution) 12%, var(--course-paper));
  font-size: 0.88rem;
}

.course-prereq .pr-hint[hidden] {
  display: none;
}

.course-prereq .pr-hint button {
  margin-left: 0.4rem;
  padding: 0 0.6rem;
  border: 1px solid var(--course-rule);
  border-radius: 999px;
  background: var(--course-paper);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* ------------------------------------------------------ biological context */

.course-bio {
  margin: 0 0 1.4rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--course-rule);
  border-left: 4px solid var(--course-practice);
  border-radius: 0 var(--course-radius) var(--course-radius) 0;
  background: color-mix(in srgb, var(--course-practice) 5%, var(--course-paper));
  font-size: 0.95rem;
}

.course-bio .ctx-head p {
  margin: 0 0 0.3rem;
}

.course-bio .ctx-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.15rem 1rem;
  padding: 0.2rem 0;
}

.course-bio .ctx-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.course-bio .ctx-label {
  color: var(--course-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.course-bio .ctx-label p,
.course-bio .ctx-text p {
  margin: 0;
}

.course-bio .ctx-text> :not(:last-child) {
  margin-bottom: 0.4rem;
}

@media (max-width: 640px) {
  .course-bio .ctx-row {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- layers */

.course-layers {
  margin: 1.2rem 0;
}

.course-layers .block-title {
  font-weight: 700;
  margin-bottom: 0.3rem;
}

/* no JavaScript: three labeled panels, stacked */
.course-layers .layer {
  margin: 0.5rem 0;
  padding: 0.6rem 1rem;
  border-left: 3px solid var(--course-rule);
}

.course-layers .layer::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--course-muted);
}

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

.course-layers .layer-plain {
  border-left-color: var(--course-intuition);
}

.course-layers .layer-precise {
  border-left-color: var(--course-key);
}

.course-layers .layer-formal {
  border-left-color: var(--course-algorithm);
}

/* JavaScript: tabs */
.course-layers.js-tabs {
  border: 1px solid var(--course-rule);
  border-radius: var(--course-radius);
  overflow: hidden;
}

.course-layers.js-tabs .layer {
  margin: 0;
  border-left: 0;
  padding: 0.8rem 1rem 0.9rem;
}

.course-layers.js-tabs .layer::before {
  content: none;
}

.course-layers.js-tabs .layer[hidden] {
  display: none;
}

.course-layers.js-tabs .block-title {
  padding: 0.5rem 1rem 0;
  margin: 0;
}

.course-layers .tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--course-rule);
  background: var(--course-wash);
}

.course-layers .tab-btn {
  padding: 0.4rem 1rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--course-muted);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.course-layers .tab-btn:hover {
  color: var(--course-ink);
}

.course-layers .tab-btn[aria-selected="true"] {
  color: var(--course-ink);
  font-weight: 600;
  border-bottom-color: var(--course-key);
}

/* ------------------------------------------------ pseudocode and Mojo
   One collapsed block (a <details>); each language is a tab, and the choice carries to every other
   block on the page (Quarto tabset group "language"). The tab for Mojo also holds the numbered
   notes and the "how it ran" footer, so the stats stay with the code they describe. */

.pseudo-mojo .panel-tabset {
  margin: 0;
}

.pseudo-mojo .nav-tabs {
  margin-bottom: 0.7rem;
}

.pseudo-mojo .tab-content {
  padding: 0;
}

.pseudo-mojo div.sourceCode {
  margin: 0;
}

/* the tab already names the language, so the small label inside the code block goes */
.pseudo-mojo {
  --code-label-space: 0.6rem;
}

.pseudo-mojo div.sourceCode::before {
  display: none;
}

.cf-head {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
  padding: 0.25rem 0.8rem;
  border: 1px solid var(--course-rule);
  border-bottom: 0;
  border-radius: var(--course-radius) var(--course-radius) 0 0;
  background: var(--course-wash);
  font-size: 0.85rem;
}

.cf-head p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  align-items: baseline;
}

.cf-head .cf-name {
  font-family: var(--bs-font-monospace, monospace);
  font-weight: 600;
}

.cf-head .cf-run {
  color: var(--course-muted);
}

.cf-head .cf-run::before {
  content: "run: ";
}

.cf-head .cf-run code {
  background: transparent;
  color: inherit;
  padding: 0;
  border: 0;
}

.cf-head+.code-copy-outer-scaffold,
.cf-head+div.sourceCode {
  margin-top: 0;
}

.cf-head+.code-copy-outer-scaffold div.sourceCode,
.cf-head+div.sourceCode {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ----------------------------------------------- end of page and pointers */

.course-introduced,
.course-deeper {
  margin: 2rem 0 1rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--course-rule);
  border-radius: var(--course-radius);
  font-size: 0.95rem;
}

.course-deeper {
  border-left: 4px solid var(--course-history);
}

.course-introduced {
  border-left: 4px solid var(--course-key);
}

.course-introduced .ci-head p,
.course-deeper .ci-head p {
  margin: 0 0 0.3rem;
}

.course-introduced .ci-item,
.course-deeper .ci-item {
  padding: 0.3rem 0;
  border-top: 1px solid color-mix(in srgb, var(--course-ink) 8%, transparent);
}

.course-introduced .ci-item:first-of-type,
.course-deeper .ci-item:first-of-type {
  border-top: 0;
}

.course-introduced .ci-line p,
.course-deeper .ci-line p,
.course-introduced .ci-used p {
  margin: 0;
}

.course-introduced .pr-term,
.course-deeper .ci-line a {
  font-weight: 600;
}

.course-introduced .pr-plain,
.course-deeper .pr-plain {
  color: var(--course-muted);
}

.course-introduced .pr-plain p,
.course-deeper .pr-plain p {
  margin: 0;
}

.course-introduced .ci-used {
  color: var(--course-muted);
  font-size: 0.88rem;
}

.go-deeper {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
  margin: 1.2rem 0;
  padding: 0.6rem 1rem;
  border-left: 4px solid var(--course-history);
  background: color-mix(in srgb, var(--course-history) 8%, var(--course-paper));
  border-radius: 0 var(--course-radius) var(--course-radius) 0;
}

.go-deeper .gd-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--course-muted);
}

.go-deeper .gd-title {
  font-weight: 600;
}

.go-deeper .gd-summary {
  flex-basis: 100%;
  color: var(--course-muted);
  font-size: 0.92rem;
}

/* ------------------------------------------------------- printed outlines */

.kind-outline {
  margin: 0.3rem 0 1.4rem;
  padding-left: 1.4rem;
}

.kind-outline li {
  margin: 0.2rem 0;
}

.kind-outline .cm-item {
  color: var(--course-muted);
  font-size: 0.8rem;
  margin-left: 0.3rem;
}

/* ------------------------------------------------------------------ print */

@media print {

  .depth-switch,
  .course-prereq .pr-cb,
  .course-prereq .pr-hint {
    display: none !important;
  }

  .course-layers .layer[hidden] {
    display: block !important;
  }
}

/* ------------------------------------------------------------ code-run
   The "how it ran" block under a listing (generated by scripts/build_code.py from code/results.json):
   what ran, on what, and the timing table. States: -pass, -fail, -stale, -none. The state is also
   said in words, so the colored edge is only a hint. */

.code-run {
  margin: 0.5rem 0 1.25rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--course-rule);
  border-left: 4px solid var(--course-rule);
  border-radius: var(--course-radius);
  background: var(--course-wash);
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: normal;
}

.code-run-pass {
  border-left-color: var(--viz-3);
}

.code-run-fail {
  border-left-color: var(--viz-2);
}

.code-run-none,
.code-run-stale {
  color: var(--course-muted);
  border-style: dashed;
  border-left-width: 1px;
}

.code-run p {
  margin: 0.25rem 0;
}

.code-run table {
  width: 100%;
  margin: 0.5rem 0;
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
}

.code-run th,
.code-run td {
  padding: 0.15rem 0.45rem 0.15rem 0;
}


.code-run td:not(:first-child) {
  white-space: nowrap;
}

/* the range may wrap, at its dash (each value is bound to its unit), when the block is narrow */
.code-run td:nth-child(5) {
  white-space: normal;
}

/* a narrow block scrolls the table sideways rather than clipping or breaking a value */
.code-run table {
  display: block;
  overflow-x: auto;
}

.code-run .code-run-note {
  color: var(--course-muted);
}

.code-run code {
  font-size: 0.85em;
}

/* Inside a .pseudo-mojo block the stats are a footer of the Mojo tab, not a card of their own:
   no box, a rule above, quieter type. */
.pseudo-mojo .code-run {
  margin: 1rem 0 0;
  padding: 0.6rem 0 0;
  border: 0;
  border-top: 1px solid var(--course-rule);
  border-radius: 0;
  background: transparent;
  color: var(--course-muted);
}

.pseudo-mojo .code-run strong {
  color: var(--course-ink);
}

.pseudo-mojo .code-run-fail strong {
  color: var(--viz-2);
}

.pseudo-mojo .code-run p:first-child {
  margin-top: 0;
}

.pseudo-mojo .code-run> :last-child {
  margin-bottom: 0;
}