/* Design tokens (docs/authoring.md, "Visual design"). The colours are the
   values of src/pbc/authoring/design.py; a unit test compares them and checks
   the contrast of every pair that sets text or a control. Type and spacing
   are defined here only. */
:root {
  --pbc-text: #1f2328;
  --pbc-background: #ffffff;
  --pbc-muted: #57606a;
  --pbc-link: #0a58ca;
  --pbc-rule: #767676;
  --pbc-surface: #f6f8fa;
  --pbc-focus: #00429d;
  --pbc-warning: #7a4100;
  --pbc-warning-surface: #fff8e6;
  --pbc-navbar: #517699;
  --pbc-navbar-text: #ffffff;
  --pbc-claim-observational-fg: #0b4f6c;
  --pbc-claim-observational-bg: #e3f1f7;
  --pbc-claim-experimentally-supported-fg: #5b2a86;
  --pbc-claim-experimentally-supported-bg: #efe6f6;
  --pbc-claim-numerically-verified-fg: #00429d;
  --pbc-claim-numerically-verified-bg: #e6edf8;
  --pbc-claim-formal-theorem-fg: #1d5c2e;
  --pbc-claim-formal-theorem-bg: #e5f2e8;
  --pbc-status-measured-fg: #7a2e00;
  --pbc-status-measured-bg: #fdebdc;
  --pbc-status-calibrated-fg: #6a4a00;
  --pbc-status-calibrated-bg: #fbf1d3;
  --pbc-status-processed-fg: #3b4252;
  --pbc-status-processed-bg: #eaecf0;
  --pbc-status-simulated-fg: #00429d;
  --pbc-status-simulated-bg: #e6edf8;
  --pbc-status-conceptual-fg: #5a2a5a;
  --pbc-status-conceptual-bg: #f3e8f3;
  --pbc-figure-1: #00429d;
  --pbc-figure-2: #93003a;
  --pbc-figure-3: #555555;
  --pbc-figure-4: #8a5a00;
  --pbc-figure-5: #006b5c;
  --pbc-figure-6: #6a3d9a;

  /* Type scale (a ratio of 1.25 from the base size) and the line heights. */
  --pbc-text-small: 0.875rem;
  --pbc-text-base: 1rem;
  --pbc-text-large: 1.25rem;
  --pbc-heading-3: 1.25rem;
  --pbc-heading-2: 1.5rem;
  --pbc-heading-1: 2rem;
  --pbc-leading-tight: 1.25;
  --pbc-leading-body: 1.6;

  /* Spacing scale. */
  --pbc-space-1: 0.25rem;
  --pbc-space-2: 0.5rem;
  --pbc-space-3: 1rem;
  --pbc-space-4: 1.5rem;
  --pbc-space-5: 2.5rem;

  --pbc-radius: 0.25rem;
  --pbc-focus-width: 3px;
}

/* Self-hosted math font, so equations look the same in every browser and no
   font is requested from another origin. Source and licence: fonts/README.md. */
@font-face {
  font-family: "STIX Two Math";
  src: url("fonts/STIXTwoMath-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

math {
  font-family: "STIX Two Math", math;
}

/* A wide display equation scrolls inside its own box instead of widening the
   page on a narrow screen. The box is focusable (_filters/scroll-regions.lua),
   so it can be scrolled with the keyboard. */
.display-math {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* A figure scales down to the width of a narrow screen. Its width and height
   attributes still reserve the right space before the image loads. */
main img {
  max-width: 100%;
  height: auto;
}

/* The navigation bar does not collapse into a menu (that needs a script), so
   its entries wrap onto further lines on a narrow screen. The theme lays the
   bar out as rows that never wrap, which pushes the last entries past the
   right edge of a phone screen; how many fit depends on the fonts of the
   machine. An entry of two words stays on one line when it wraps. */
.navbar .navbar-container,
.navbar .navbar-nav {
  flex-wrap: wrap;
}

.navbar-nav .nav-link {
  white-space: nowrap;
}

/* Lesson constructs (docs/authoring.md). The markup comes from
   _filters/lesson.lua and from the helpers in src/pbc/authoring. */

/* Material that did not come through a verified display form. The label is
   text in the page; the frame only sets the material apart. */
div.not-verified {
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--pbc-warning);
  border-left-width: 0.375rem;
  background: var(--pbc-warning-surface);
}

.not-verified-label {
  color: var(--pbc-warning);
}

div.not-verified-label p {
  margin-bottom: 0.5rem;
}

span.not-verified {
  border-bottom: 1px dashed var(--pbc-warning);
}

span.not-verified-label {
  font-size: 0.875em;
  font-style: italic;
}

/* The header of a lesson (pbc.authoring.lesson_header): strand, position,
   difficulty, prerequisites, and the previous and next lesson, as a list of
   terms. On a wider screen the terms and their values form two columns. The
   box has no background: the theme's link colour has just enough contrast
   on white and too little on grey (accessibility scan). */
.lesson-header {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--pbc-rule);
  border-radius: 0.25rem;
}

.lesson-header dl {
  margin: 0;
}

.lesson-header dt {
  font-weight: 600;
}

.lesson-header dd,
.lesson-header dd > p {
  margin: 0;
}

.lesson-header dd + dt {
  margin-top: 0.375rem;
}

@media (min-width: 576px) {
  .lesson-header dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1rem;
    row-gap: 0.375rem;
  }

  .lesson-header dd + dt {
    margin-top: 0;
  }
}

/* Where a by-reference excerpt was read from, directly under its listing. */
.excerpt-source {
  margin: -0.5rem 0 1rem;
  font-size: 0.875em;
}

.exercise {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 0.25rem solid var(--pbc-focus);
}

details.solution {
  margin: 0.75rem 0;
}

details.solution > summary {
  font-weight: 600;
  cursor: pointer;
}

details.solution[open] > summary {
  margin-bottom: 0.75rem;
}

/* Code inside a link keeps the colour of the link. On the grey background
   of inline code that colour has too little contrast, so the background is
   dropped there. The theme also keeps such code on one line, which cuts a
   long path off at the edge of a narrow screen, so it may wrap. The selector
   has to outweigh the theme's rule for inline code. */
main a > code:not(.sourceCode) {
  background-color: transparent;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* A recorded agent run and a hunt verdict print whole tool calls as inline
   code. The theme keeps inline code on one line, so a call with three
   arguments would widen the page on a phone: let it wrap. */
.agent-run code:not(.sourceCode),
.verdict code:not(.sourceCode) {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* A quoted citation ends in the address of the site, which has no space to
   break at and would widen the page on a phone: let it wrap. */
main blockquote {
  overflow-wrap: anywhere;
}

/* The layout of code listings, which Pandoc writes into a page only when the
   page has a highlighted code cell of its own. A lesson whose code is all
   shown by reference (the excerpts of its experiment, F117) has none, so the
   rules are here for every page: the listing box that the scroll-regions
   filter makes focusable is the one that scrolls, and its lines keep their
   shape. The colours come from Quarto's highlighting stylesheet. */
pre > code.sourceCode {
  white-space: pre;
  position: relative;
}
pre > code.sourceCode > span {
  display: inline-block;
  line-height: 1.25;
}
pre > code.sourceCode > span:empty {
  height: 1.2em;
}
.sourceCode {
  overflow: visible;
}
code.sourceCode > span {
  color: inherit;
  text-decoration: inherit;
}
div.sourceCode {
  margin: 1em 0;
}
pre.sourceCode {
  margin: 0;
}
@media screen {
  div.sourceCode {
    overflow: auto;
  }
}

/* The build evidence of a Lean lesson: what compiled the proofs, and where to
   read them. */
.lean-evidence {
  margin: 1rem 0 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--pbc-rule);
  border-radius: 0.25rem;
  font-size: 0.9375em;
}

/* The last section (the experiment or the proof check) and the Lean evidence show a short summary
   and keep the full listing in a closed details element. */
.reproduce-details,
.lean-evidence-details {
  margin-top: 0.75rem;
}

.reproduce-details > summary,
.lean-evidence-details > summary {
  font-weight: 600;
  cursor: pointer;
}

.reproduce-details[open] > summary,
.lean-evidence-details[open] > summary {
  margin-bottom: 0.75rem;
}

.lean-evidence > :first-child {
  margin-top: 0;
}

.lean-evidence > :last-child {
  margin-bottom: 0;
}

.lean-evidence li {
  overflow-wrap: anywhere;
}

/* A data card names its source by its address, which has no space to break
   at and would run off a phone screen: let the values of the card wrap. */
.data-card dd {
  overflow-wrap: anywhere;
}

/* Widgets (docs/authoring.md, "Widgets"). A widget enhances the static
   figure inside its [data-enhancement] element: the script replaces the image
   with a drawing in the image's box and fills .widget-controls. The space for
   the controls is reserved here, so that the page does not move when the
   script has run. Nothing animates. */
.widget-controls {
  /* Without a script this holds one sentence; with it, the controls, which
     fit in this height at every width the site supports but a phone's. */
  min-height: 21rem;
}

@media (max-width: 575.98px) {
  .widget-controls {
    /* On a phone the choices stack in one column and the readout wraps. */
    min-height: 36rem;
  }
}

/* The drawing scales down with the page as a figure image does (main img
   above); its width and height attributes, taken from the image it replaced,
   reserve its box. */
.widget-drawing {
  max-width: 100%;
  height: auto;
}

.widget-panel fieldset {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.widget-panel legend {
  margin-bottom: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
}

.widget-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.25rem 1rem;
}

.widget-choices label,
.widget-slider label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
}

.widget-slider {
  margin-bottom: 1rem;
}

.widget-slider label {
  font-weight: 600;
}

.widget-slider input[type="range"] {
  display: block;
  width: 100%;
  max-width: 28rem;
}

.widget-readout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 1rem;
  max-width: 34rem;
  margin: 0;
}

.widget-readout dt {
  font-weight: normal;
}

.widget-readout dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The export of a comparator: a button, a download link, and the values as
   text. The text appears only when asked for. */
.widget-export {
  margin-top: 1rem;
}

.widget-export button,
.widget-controls > button {
  min-height: 2.5rem;
  margin-right: 1rem;
}

.widget-export textarea {
  display: block;
  width: 100%;
  max-width: 34rem;
  margin-top: 0.5rem;
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.85rem;
}

.widget-panel :focus-visible,
.widget-controls > button:focus-visible {
  outline: 3px solid var(--pbc-focus);
  outline-offset: 2px;
}

.widget-panel output {
  font-family: inherit;
}

/* Page chrome ------------------------------------------------------------ */

body {
  color: var(--pbc-text);
  line-height: var(--pbc-leading-body);
}

main a:not(.btn) {
  color: var(--pbc-link);
}

/* Heading hierarchy: three clear steps, each closer to the body size. */
main h1,
main h2,
main h3,
main h4 {
  line-height: var(--pbc-leading-tight);
  overflow-wrap: break-word;
}

main h1.title {
  font-size: var(--pbc-heading-1);
}

main h2 {
  margin-top: var(--pbc-space-5);
  padding-bottom: var(--pbc-space-1);
  border-bottom: 1px solid var(--pbc-rule);
  font-size: var(--pbc-heading-2);
}

main h3 {
  margin-top: var(--pbc-space-4);
  font-size: var(--pbc-heading-3);
}

main h4 {
  margin-top: var(--pbc-space-4);
  font-size: var(--pbc-text-base);
  font-weight: 700;
}

.text-muted,
main .quarto-title-meta,
.page-footer {
  color: var(--pbc-muted);
}

/* The theme's navigation colour, stated so that the contrast of its text and
   its focus ring is tested against it (src/pbc/authoring/design.py). */
.navbar {
  background-color: var(--pbc-navbar);
}

.navbar .navbar-nav .nav-link,
.navbar .navbar-brand {
  color: var(--pbc-navbar-text);
}

/* The theme's focus ring on the navigation is a pale blue shadow at a quarter
   of its strength: on this bar it has a contrast of about 1.2:1. A white ring
   of three pixels has 4.8:1 against the bar (WCAG 2.2, 2.4.13). */
.navbar a:focus-visible,
.navbar .aa-DetachedSearchButton:focus-visible {
  outline: var(--pbc-focus-width) solid var(--pbc-navbar-text);
  outline-offset: 2px;
  box-shadow: none;
}

/* The search box is a light field on the dark bar, so its controls take the
   ring of the page, in the focus colour. The search script removes the
   outline of its input; the identifier outranks that rule. */
#quarto-search .aa-Input:focus-visible,
#quarto-search .aa-SubmitButton:focus-visible,
#quarto-search .aa-ClearButton:focus-visible {
  outline: var(--pbc-focus-width) solid var(--pbc-focus);
  outline-offset: 2px;
}

/* Everywhere else a focused control gets the same ring in the focus colour. */
main a:focus-visible,
main summary:focus-visible,
main [tabindex="0"]:focus-visible,
main input:focus-visible,
main button:focus-visible,
.page-footer a:focus-visible,
.skip-link:focus-visible {
  outline: var(--pbc-focus-width) solid var(--pbc-focus);
  outline-offset: 2px;
}

/* Skip link: the first stop of the keyboard, off the screen until focused.
   It sits above the fixed navigation bar. */
#quarto-document-content:focus {
  outline: none;
}

.skip-link {
  position: absolute;
  top: var(--pbc-space-2);
  left: var(--pbc-space-2);
  z-index: 2000;
  padding: var(--pbc-space-2) var(--pbc-space-3);
  border-radius: var(--pbc-radius);
  background: var(--pbc-background);
  color: var(--pbc-link);
  font-weight: 600;
  transform: translateY(-300%);
}

.skip-link:focus {
  transform: none;
}

/* Footer attribution slot (F57): one discreet line under the licences. */
.footer-attribution {
  margin: var(--pbc-space-2) 0 0;
  color: var(--pbc-muted);
  font-size: var(--pbc-text-small);
  text-align: center;
}

/* Lesson components ------------------------------------------------------ */

/* "What you'll learn" and the assumptions list: a plain list in a framed
   box with a short heading, so that both read as part of the lesson. */
.learn-box,
.assumptions {
  margin: var(--pbc-space-3) 0;
  padding: var(--pbc-space-3);
  border: 1px solid var(--pbc-rule);
  border-radius: var(--pbc-radius);
  background: var(--pbc-surface);
}

.learn-box > :first-child,
.assumptions > :first-child {
  margin-top: 0;
}

.learn-box > :last-child,
.assumptions > :last-child {
  margin-bottom: 0;
}

.assumptions {
  border-left-width: 0.375rem;
}

/* Claim labels. The label is words in the page; the colours only support
   them, and each type has its own text, so no meaning depends on colour. */
.claim {
  padding: 0.0625rem 0.375rem;
  border-radius: var(--pbc-radius);
  font-size: var(--pbc-text-small);
  font-weight: 600;
  white-space: nowrap;
}

/* A label with a scope can be longer than a phone screen. */
.claim-statement > .claim {
  white-space: normal;
}

div.claim {
  display: block;
  margin: var(--pbc-space-3) 0;
  padding: var(--pbc-space-2) var(--pbc-space-3);
  border-left: 0.375rem solid currentcolor;
  border-radius: 0;
  font-size: inherit;
  font-weight: normal;
  white-space: normal;
}

.claim[data-type="observational"] {
  background: var(--pbc-claim-observational-bg);
  color: var(--pbc-claim-observational-fg);
}

.claim[data-type="experimentally-supported"] {
  background: var(--pbc-claim-experimentally-supported-bg);
  color: var(--pbc-claim-experimentally-supported-fg);
}

.claim[data-type="numerically-verified"] {
  background: var(--pbc-claim-numerically-verified-bg);
  color: var(--pbc-claim-numerically-verified-fg);
}

.claim[data-type="formal-theorem"] {
  background: var(--pbc-claim-formal-theorem-bg);
  color: var(--pbc-claim-formal-theorem-fg);
}

/* Figures: the image scales (main img above); the caption sits close under
   it, and the status label opens the caption. */
main figure {
  margin: var(--pbc-space-4) 0;
}

main figcaption {
  margin-top: var(--pbc-space-2);
  color: var(--pbc-text);
  font-size: var(--pbc-text-small);
}

.figure-status {
  display: inline-block;
  margin-right: var(--pbc-space-2);
  padding: 0 0.375rem;
  border-radius: var(--pbc-radius);
  font-size: var(--pbc-text-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.figure-status[data-status="measured"] {
  background: var(--pbc-status-measured-bg);
  color: var(--pbc-status-measured-fg);
}

.figure-status[data-status="calibrated"] {
  background: var(--pbc-status-calibrated-bg);
  color: var(--pbc-status-calibrated-fg);
}

.figure-status[data-status="processed"] {
  background: var(--pbc-status-processed-bg);
  color: var(--pbc-status-processed-fg);
}

.figure-status[data-status="simulated"] {
  background: var(--pbc-status-simulated-bg);
  color: var(--pbc-status-simulated-fg);
}

.figure-status[data-status="conceptual"] {
  background: var(--pbc-status-conceptual-bg);
  color: var(--pbc-status-conceptual-fg);
}

/* An annotated excerpt: line numbers and the marks are generated content, so
   the listing's text stays the source. A marked line is bold, has a heavy
   rule on its left and says which note explains it, so it does not depend
   on colour. */
.excerpt-listing {
  overflow-x: auto;
  padding: 0.5rem 0;
}

.excerpt-listing .line {
  display: block;
  padding-left: 0.5rem;
  border-left: 0.25rem solid transparent;
  white-space: pre;
}

.excerpt-listing .line::before {
  content: attr(data-line);
  display: inline-block;
  width: 3ch;
  margin-right: 1ch;
  text-align: right;
  opacity: 0.7;
}

.excerpt-listing .line.marked {
  font-weight: 700;
  border-left-color: currentColor;
  background: rgba(0, 66, 157, 0.12);
}

.excerpt-listing .line.marked::after {
  content: "  \2190 note " attr(data-note);
  font-weight: 400;
  font-style: italic;
}

.excerpt-notes {
  margin: 0 0 0.75rem;
}

/* Semantic result tables (pbc.authoring.table, F36): a table with a caption,
   units in the column headings, and numbers right-aligned in equal-width
   digits so that the decimals line up. A table wider than the screen scrolls
   inside its own box, which is focusable like a wide equation and gets its
   name from the caption. */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin: var(--pbc-space-3) 0;
}

.result-table {
  border-collapse: collapse;
  margin: 0;
}

.result-table caption {
  padding: 0 0 var(--pbc-space-2);
  caption-side: top;
  color: var(--pbc-text);
  font-weight: 600;
  text-align: left;
}

.result-table th,
.result-table td {
  padding: var(--pbc-space-1) var(--pbc-space-3);
  border-bottom: 1px solid var(--pbc-rule);
  text-align: left;
}

.result-table th {
  font-weight: 600;
}

.result-table tbody th {
  font-weight: normal;
}

.result-table th.num,
.result-table td.num {
  text-align: right;
}

.result-table td.num {
  font-variant-numeric: tabular-nums;
}

/* Annotated excerpts (F35): the listing, then the numbered notes that refer
   to its lines. */
.annotated-excerpt {
  margin: var(--pbc-space-3) 0;
}

.annotated-excerpt > ol {
  margin: var(--pbc-space-2) 0 0;
  padding-left: var(--pbc-space-4);
  font-size: var(--pbc-text-small);
}

.annotated-excerpt > ol > li + li {
  margin-top: var(--pbc-space-1);
}

/* "Go deeper": optional reading, set off from the core text by a dashed
   frame, so that it is plain what a reader may skip. */
.go-deeper {
  margin: var(--pbc-space-4) 0;
  padding: var(--pbc-space-3);
  border: 1px dashed var(--pbc-rule);
  border-radius: var(--pbc-radius);
}

.go-deeper > :first-child {
  margin-top: 0;
}

.go-deeper > :last-child {
  margin-bottom: 0;
}

.go-deeper li {
  overflow-wrap: anywhere;
}

/* Self-check and hint steps: the exercise bar, with a hint opening in the
   same way as a solution. */
.exercise.self-check {
  padding: var(--pbc-space-2) var(--pbc-space-3);
  border-left-color: var(--pbc-claim-numerically-verified-fg);
  background: var(--pbc-surface);
}

details.hint {
  margin: var(--pbc-space-2) 0;
  padding-left: var(--pbc-space-3);
  border-left: 0.25rem solid var(--pbc-rule);
}

details.hint > summary {
  cursor: pointer;
  font-weight: 600;
}

details.hint[open] > summary {
  margin-bottom: var(--pbc-space-2);
}

/* Self-check choices and learner state (F13). Without a script the choices
   are a plain list with an explanation each; the script (learner/progress.js)
   replaces it with radio buttons, and adds the progress status of a lesson
   and the marks on the path cards. State is never shown by colour alone. */
ol.choices {
  padding-left: var(--pbc-space-4);
}

ol.choices > li {
  margin: var(--pbc-space-2) 0;
}

.choice-form {
  margin: var(--pbc-space-3) 0;
  padding: 0;
  border: 0;
}

.choice-form legend {
  margin-bottom: var(--pbc-space-1);
  font-weight: 600;
}

.choice-option {
  margin: var(--pbc-space-1) 0;
}

.choice-option label {
  display: flex;
  gap: var(--pbc-space-2);
  align-items: baseline;
}

.self-check-result {
  margin: var(--pbc-space-2) 0;
}

.learner-panel {
  margin: var(--pbc-space-3) 0;
  padding: var(--pbc-space-2) var(--pbc-space-3);
  border-left: 0.25rem solid var(--pbc-rule);
  background: var(--pbc-surface);
}

.learner-panel p,
.learner-note {
  margin: var(--pbc-space-1) 0;
}

.learner-note {
  color: var(--pbc-muted);
  font-size: var(--pbc-text-small);
}

main button {
  min-height: 2.75rem;
  padding: var(--pbc-space-1) var(--pbc-space-3);
  border: 2px solid var(--pbc-focus);
  border-radius: var(--pbc-radius);
  background: var(--pbc-background);
  color: var(--pbc-focus);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.completed-lessons {
  margin: var(--pbc-space-2) 0;
}

/* A completed lesson is marked on its card by the script, in words that the
   markup of the card does not carry, so that the mark does not rest on colour. */
.path-card[data-completed="true"] .lesson-card-title a::after,
.path-link[data-completed="true"] .lesson-link::after {
  content: " \2713 completed";
  color: var(--pbc-claim-formal-theorem-fg);
  font-size: var(--pbc-text-small);
  font-weight: 600;
}

/* Course panels and lesson rows (F64): a course is a panel with its
   preview, and its lessons are small rows behind a disclosure. */
.course-panel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pbc-space-3);
  align-items: flex-start;
  margin: var(--pbc-space-3) 0;
  padding: var(--pbc-space-3);
  border: 1px solid var(--pbc-rule);
  border-radius: var(--pbc-radius);
}

.course-thumbnail {
  width: min(100%, 12rem);
  height: auto;
  border: 1px solid var(--pbc-rule);
}

.course-summary {
  flex: 1 1 14rem;
  min-width: 0;
}

.course-summary > :first-child {
  margin-top: 0;
}

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

.course-count {
  font-weight: 600;
}

.course-lessons > summary,
.course-map > summary,
.dependency-map > summary,
.lesson-details > summary {
  cursor: pointer;
  font-weight: 600;
}

.course-lessons > summary:focus-visible,
.course-map > summary:focus-visible,
.dependency-map > summary:focus-visible,
.lesson-details > summary:focus-visible {
  outline: var(--pbc-focus-width) solid var(--pbc-focus);
  outline-offset: 2px;
}

.path-rows,
.path-links {
  margin: var(--pbc-space-3) 0;
  padding: 0;
  list-style: none;
}

.path-card {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--pbc-space-1) var(--pbc-space-3);
  margin: 0 0 var(--pbc-space-2);
  padding: var(--pbc-space-2) var(--pbc-space-3);
  border: 1px solid var(--pbc-rule);
  border-radius: var(--pbc-radius);
}

.path-card > .lesson-summary {
  grid-column: 2;
  min-width: 0;
}

.path-card > .lesson-details {
  grid-column: 1 / -1;
}

.lesson-thumbnail {
  grid-column: 1;
  grid-row: 1;
  width: 6rem;
  height: auto;
  border: 1px solid var(--pbc-rule);
}

/* Without a thumbnail the summary takes the whole row. */
.path-card > .lesson-summary:first-child {
  grid-column: 1 / -1;
}

.lesson-question,
.lesson-meta {
  margin: 0 0 var(--pbc-space-1);
}

.lesson-meta {
  color: var(--pbc-muted);
  font-size: var(--pbc-text-small);
}

.level-badge,
.chips li {
  display: inline-block;
  padding: 0 var(--pbc-space-2);
  border: 1px solid var(--pbc-rule);
  border-radius: var(--pbc-radius);
  font-size: var(--pbc-text-small);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pbc-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.path-link {
  margin: 0 0 var(--pbc-space-1);
}

.path-link-meta {
  color: var(--pbc-muted);
  font-size: var(--pbc-text-small);
}

.path-jump ul {
  margin: 0 0 var(--pbc-space-3);
}

.path-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pbc-space-2) var(--pbc-space-3);
  align-items: center;
}

/* A long option (a course title) must not widen the form past a narrow
   screen: the label takes the row, the select shrinks to it. */
.path-filter-form label {
  max-width: 100%;
}

.path-filter-form select {
  max-width: 100%;
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* Planned slots of the reference curriculum (ADR 013): visibly not a lesson
   row, a dashed rule and the word "planned"; never a link. */
.planned-slot {
  margin: 0 0 var(--pbc-space-2);
  padding: var(--pbc-space-2) var(--pbc-space-3);
  border: 1px dashed var(--pbc-rule);
  border-radius: var(--pbc-radius);
  color: var(--pbc-muted);
}

.planned-slot .slot-label {
  color: var(--pbc-text);
  font-weight: 600;
}

.planned-slot .slot-status {
  font-style: italic;
}

/* The facts inside a path card (pbc.authoring.learning_path). */
.path-card .lesson-card-title {
  margin: 0 0 var(--pbc-space-2);
  font-size: var(--pbc-heading-3);
}

.path-card dl,
.path-card dd,
.path-card dd > ul {
  margin: 0;
}

.path-card dt {
  margin-top: var(--pbc-space-2);
  font-weight: 600;
}

.path-card {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The prerequisite graph (F26): the drawing scrolls inside its own box. The
   box is focusable, so the keyboard can scroll it. */
.prerequisite-graph {
  max-width: 100%;
  margin: var(--pbc-space-3) 0;
  padding: var(--pbc-space-2);
  overflow: auto;
  border: 1px solid var(--pbc-rule);
  border-radius: var(--pbc-radius);
}

/* The theme sets the summary of a closed <details> in a muted grey, which
   has too little contrast on the surface colour. */
main details > summary {
  color: var(--pbc-text);
}

/* The graph itself (F26). Lines and arrowheads differ by dash and by shape,
   not only by colour. */
.prerequisite-graph {
  position: relative;
}

.prerequisite-graph svg {
  display: block;
  max-width: none;
  height: auto;
}

.prerequisite-graph .band {
  fill: var(--pbc-surface);
  stroke: var(--pbc-rule);
  stroke-width: 1;
}

.prerequisite-graph .band-label,
.prerequisite-graph text {
  fill: var(--pbc-text);
  font-size: 13px;
}

.prerequisite-graph .band-label {
  font-weight: 600;
}

.prerequisite-graph .node {
  fill: var(--pbc-background);
  stroke: var(--pbc-rule);
  stroke-width: 1.5;
}

.prerequisite-graph a {
  cursor: pointer;
}

.prerequisite-graph a text {
  fill: var(--pbc-link);
  text-decoration: underline;
}

.prerequisite-graph a:focus-visible {
  outline: none;
}

.prerequisite-graph a:focus-visible .node {
  stroke: var(--pbc-focus);
  stroke-width: var(--pbc-focus-width);
}

.graph-legend {
  padding-left: 0;
  list-style: none;
}

.graph-legend svg,
.prerequisite-graph svg {
  overflow: visible;
}

.edge-requires,
.edge-related {
  fill: none;
  stroke: var(--pbc-text);
  stroke-width: 1.5;
}

.edge-related {
  stroke-dasharray: 6 4;
}

.arrow-requires {
  fill: var(--pbc-text);
}

.arrow-related {
  fill: none;
  stroke: var(--pbc-text);
  stroke-width: 1.5;
}

/* Present for assistive technology and without styles, not shown. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A stub of a Lean exercise (pbc.authoring.exercises) is highlighted like a
   proof; the warning surface would leave its tokens below the contrast the
   scan requires, so the listing keeps the page background. */
div.not-verified div.sourceCode {
  background-color: var(--pbc-background);
/* Suggestions of what to do next (F14): the reason of each stays visible. */
.recommendations {
  margin: var(--pbc-space-2) 0;
  padding-left: var(--pbc-space-4);
}

.recommendations-panel {
  margin: var(--pbc-space-3) 0;
  padding: var(--pbc-space-2) var(--pbc-space-3);
  border-left: 0.25rem solid var(--pbc-rule);
  background: var(--pbc-surface);
}

.recommendation-reason {
  margin: var(--pbc-space-1) 0;
  color: var(--pbc-muted);
}