@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3/SourceSans3VF-Upright.ttf.woff2")
    format("woff2-variations");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3/SourceSans3VF-Italic.ttf.woff2")
    format("woff2-variations");
}

:root {
  --bc-text: var(--bs-body-color);
  --bc-bg: var(--bs-body-bg);
  --bc-muted: var(--bs-secondary-color);
  --bc-border: var(--bs-border-color);
  --bc-table-rule-color: var(--bc-text);
  --bc-accent: var(--bs-primary);
  --bc-focus: var(--bc-accent);
  /* Not --bs-tertiary-bg: the dark theme stylesheet leaves it light. */
  --bc-control-bg: color-mix(in srgb, var(--bs-body-color) 5%, var(--bs-body-bg));
  --bc-highlight-bg: color-mix(in srgb, var(--bc-accent) 12%, transparent);
  --bc-current-color: #d1495b;
  --bc-danger-color: #c63f3f;
  --bc-comparison-color: #2f6f9f;
  --bc-neutral-color: #7b818a;
  --bc-radius-sm: 4px;
  --bc-radius-md: 6px;
  --bc-radius-lg: 8px;
  --bc-figure-margin: 1.25rem auto;
  --bc-figure-max-width: 48rem;
  --bc-cover-max-width: 46rem;
  --bc-control-gap: 0.8rem;
  --bc-action-gap: 0.4rem;
  --bc-button-min-height: 2rem;
  /* Semantic figure typography. SVG-based figures should consume these as
     CSS sizes rather than changing font size with the chart breakpoint.
     A figure keeps them at their real size by letting its viewBox track the
     chart wrap's measured width (see observeResponsiveLayout) instead of
     leaving the viewBox fixed while CSS scales the whole box down.
     --bc-figure-micro-size is the one concession to narrow layouts: a dense
     in-plot annotation layer, such as direct labels on a many-series line
     chart, may step down to it while axis furniture stays fixed. */
  --bc-figure-title-size: 1rem;
  --bc-figure-label-size: 0.875rem;
  --bc-figure-note-size: 0.8125rem;
  --bc-figure-tick-size: 0.8125rem;
  --bc-figure-small-size: 0.75rem;
  --bc-figure-micro-size: 0.6875rem;
  --bc-math-font-family: MJXZERO, MJXTEX, "MathJax_Main", "STIX Two Math", "Cambria Math", "Times New Roman", serif;
  --graph-axis-color: var(--bc-text);
  --graph-data-color: #0072b2;
  --graph-text-color: var(--bc-muted);
  --graph-grid-color: color-mix(in srgb, var(--bc-text) 12%, transparent);
  --graph-bar-fill: var(--graph-data-color);
  --graph-bar-stroke: color-mix(in srgb, var(--graph-data-color) 70%, var(--bc-text));
  --graph-block-fill: var(--graph-bar-fill);
  --graph-block-stroke: var(--graph-bar-stroke);
  --graph-line-color: var(--graph-data-color);
  --graph-point-fill: var(--graph-data-color);
  --graph-point-stroke: var(--bc-bg);
  /* Seven chromatic colors from Okabe and Ito's Color Universal Design
     palette. Black is omitted because neutral text and axes already use
     --bc-text. Series 6–7 need redundant cues on light backgrounds. */
  --graph-series-1: var(--graph-data-color);
  --graph-series-2: #e69f00;
  --graph-series-3: #009e73;
  --graph-series-4: #d55e00;
  --graph-series-5: #cc79a7;
  --graph-series-6: #56b4e9;
  --graph-series-7: #f0e442;
  --graph-medal-gold: #d4af37;
  --graph-medal-silver: #b8bcc2;
  --graph-medal-bronze: #b08d57;
}

/* The dark Bootstrap theme paints form-control backgrounds dark but never
   declares a color scheme, so unstyled inputs keep UA light-mode text and
   chrome (black on dark). */
body.quarto-dark {
  color-scheme: dark;
}

#quarto-header .navbar {
  --bc-navbar-accent: color-mix(
    in srgb,
    var(--quarto-scss-export-callout-color-tip, var(--bs-success)) 70%,
    var(--quarto-body-color)
  );
  background-color: var(--quarto-body-bg);
  border-bottom: 0 !important;
}

#quarto-header .navbar .navbar-title {
  color: var(--bc-navbar-accent);
  letter-spacing: 0.015em;
  text-transform: uppercase;
  font-weight: 700;
  /* font-size: 0.9em; */
}

#quarto-header .navbar .bc-navbar-author {
  font-size: 0.8em;
  font-weight: 300;
}

@media (max-width: 991.98px) {
  #quarto-header .navbar .bc-navbar-author {
    display: none;
  }
}

#quarto-header .navbar .quarto-navigation-tool,
#quarto-header .navbar #quarto-search .aa-DetachedSearchButton {
  color: var(--bc-navbar-accent);
}

#quarto-header .navbar #quarto-search .aa-DetachedSearchButtonIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--bc-navbar-accent);
}

#quarto-header .navbar #quarto-search .aa-SubmitIcon {
  color: var(--bc-navbar-accent);
  fill: currentColor;
}

#quarto-header .navbar .quarto-navbar-tools {
  display: flex;
  align-items: center;
  margin-left: auto;
}

#quarto-header .navbar #quarto-search {
  display: flex;
  align-items: center;
  width: 40px;
  margin-left: 0.25rem !important;
}

#quarto-header .navbar .bc-settings-button,
#quarto-header .navbar #quarto-search .aa-DetachedSearchButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
}

#quarto-header .navbar #quarto-search .aa-SubmitIcon {
  width: 26px;
  height: 26px;
  font-size: 26px;
  line-height: 1;
}

#quarto-header .navbar .bc-settings-button .bi {
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 1;
}

/* Quarto's theme pill is replaced by the reader-settings menu below. Keeping
   the original control in the DOM preserves Quarto's own theme machinery. */
html.bc-settings-ready .quarto-navbar-tools > .quarto-color-scheme-toggle {
  display: none !important;
}

.bc-settings {
  display: inline-flex;
  align-items: center;
}

.bc-settings-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--bc-radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
}

.bc-settings-button:hover,
.bc-settings-button:focus-visible,
.bc-settings-button[aria-expanded="true"] {
  background: transparent;
  color: inherit;
}

.bc-settings-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.bc-settings-button::after {
  display: none;
}

.bc-settings-button .bi {
  font-size: 1rem;
  line-height: 1;
}

/* The menu paints itself in the page's colours, but it lives inside the
   dark-themed navbar, which would otherwise hand the radios and checkbox a
   dark color-scheme and paint them as filled blobs on the light site. */
.bc-settings-menu {
  color-scheme: light;
  /* Popper leaves the menu almost no available width, so min-width is what
     actually sizes it: wide enough for the theme options on one line. */
  --bs-dropdown-min-width: 20.5rem;
  min-width: var(--bs-dropdown-min-width);
  max-width: 22rem;
  padding: 0.6rem 0.8rem 0.7rem;
  color: var(--bc-text);
  background: var(--bc-bg);
  border-color: var(--bc-border);
  box-shadow: 0 0.35rem 1rem color-mix(in srgb, #000 18%, transparent);
  font-size: 0.875rem;
  line-height: 1.35;
}

body.quarto-dark .bc-settings-menu {
  color-scheme: dark;
}

.bc-settings-heading {
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--bc-border);
  color: var(--bc-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The theme field is a fieldset, so reset the browser's fieldset and legend
   defaults rather than relying on Bootstrap's reboot alone. */
.bc-settings-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.bc-settings-field + .bc-settings-field {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bc-border);
}

.bc-settings-field-label {
  display: block;
  float: none;
  width: auto;
  margin: 0 0 0.25rem;
  padding: 0;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
}

/* The theme options sit on one line, wrapping only if the menu is squeezed. */
.bc-settings-options {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.9rem;
  row-gap: 0.1rem;
}

/* Own the control/label geometry here: Bootstrap's .form-check lays its input
   out with a float and a negative margin, which leaves no reliable gap. */
.bc-settings-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0;
}

.bc-settings-input {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  accent-color: var(--bc-accent);
  cursor: pointer;
}

.bc-settings-input:disabled {
  cursor: default;
}

.bc-settings-check-label {
  margin: 0;
  cursor: pointer;
}

.bc-settings-check:has(.bc-settings-input:disabled) .bc-settings-check-label {
  cursor: default;
  opacity: 0.7;
}

.bc-settings-help {
  margin-top: 0.2rem;
  color: var(--bc-muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

html[data-motion="reduced"] {
  scroll-behavior: auto !important;
}

html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  scroll-behavior: auto !important;
  animation-delay: 0s !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-delay: 0s !important;
  transition-duration: 0.001ms !important;
}

html[data-capture="true"] *,
html[data-capture="true"] *::before,
html[data-capture="true"] *::after {
  caret-color: transparent !important;
}

html[data-capture="true"] .interactive-figure-mount {
  width: min(100%, var(--bc-capture-width, 760px));
  margin-right: auto;
  margin-left: auto;
}

html[data-capture="true"] .bc-figure-row > .interactive-figure-mount {
  width: auto;
}

.center {
  text-align: center;
}

/* Homepage hero: the original Psych Stats falling-dot banner, rebuilt as a
   static inline SVG with a one-shot CSS animation. Its fills inherit the
   book-wide Okabe-Ito graph-series palette. */
body.home-page #title-block-header {
  display: none;
}

body.home-page .quarto-secondary-nav {
  display: none !important;
}

body.home-page h1.home-page-heading {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.home-dots-hero {
  --home-dots-accent: var(
    --quarto-scss-export-callout-color-tip,
    var(--bs-success)
  );
  width: min(100%, 58rem);
  margin: 0.25rem auto 1.75rem;
  padding: clamp(0.35rem, 1.5vw, 0.9rem) clamp(0.2rem, 1vw, 0.65rem) 0.15rem;
  overflow: hidden;
  border-radius: var(--bc-radius-lg);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--home-dots-accent) 14%, transparent),
    transparent 82%
  );
}

.home-dots-hero svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.home-dots__marks circle {
  r: 0.44px;
  stroke: none;
  transform-box: view-box;
  animation: home-dot-fall 700ms cubic-bezier(0.55, 0, 1, 0.45) backwards;
  animation-delay: calc(var(--i) * 6ms);
}

.home-dots__marks circle:nth-child(7n + 1) { fill: var(--graph-series-1); }
.home-dots__marks circle:nth-child(7n + 2) { fill: var(--graph-series-2); }
.home-dots__marks circle:nth-child(7n + 3) { fill: var(--graph-series-3); }
.home-dots__marks circle:nth-child(7n + 4) { fill: var(--graph-series-4); }
.home-dots__marks circle:nth-child(7n + 5) { fill: var(--graph-series-5); }
.home-dots__marks circle:nth-child(7n + 6) { fill: var(--graph-series-6); }
.home-dots__marks circle:nth-child(7n) { fill: var(--graph-series-7); }

@keyframes home-dot-fall {
  from { transform: translateY(-125%); }
  to { transform: translateY(0); }
}

html[data-motion="reduced"] .home-dots__marks circle {
  animation-delay: 0s;
  animation-duration: 0.001ms;
}

@media (prefers-reduced-motion: reduce) {
  .home-dots__marks circle {
    animation-delay: 0s;
    animation-duration: 0.001ms;
  }
}

.bc-figure {
  box-sizing: border-box;
  margin: var(--bc-figure-margin);
  max-width: var(--bc-figure-max-width);
  color: var(--bc-text);
  font-family: var(--bs-body-font-family);
}

.bc-figure *,
.bc-figure *::before,
.bc-figure *::after {
  box-sizing: border-box;
}

.bc-figure-cover {
  --bc-figure-max-width: var(--bc-cover-max-width);
  --bc-figure-margin: 0.65rem auto 1.5rem;
}

/* Small-multiple rows: interactive figures laid out side by side. */
.bc-figure-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.bc-figure-row > .interactive-figure-mount {
  flex: 1 1 7.5rem;
  min-width: 7rem;
  max-width: 15rem;
  margin: 0;
}

/* Wider variant: two larger panels per row (e.g. 2x2 grids). */
.bc-figure-row.bc-figure-row-wide > .interactive-figure-mount {
  flex-basis: 14rem;
  min-width: 12rem;
  max-width: 22rem;
}

.bc-figure-row .bc-figure {
  margin: 0;
}

/* Likert items: one response card can contain a short multi-item scale. */
.likert-card {
  --bc-figure-max-width: 46rem;
  width: fit-content;
  padding: 1rem;
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-md);
  background: var(--bc-bg);
  text-align: left;
}

.likert-card.likert-multiple {
  width: min(100%, var(--bc-figure-max-width));
}

.likert-card.likert-align-responses {
  container-type: inline-size;
}

.likert-groups {
  display: grid;
  gap: 1.25rem 2rem;
}

.likert-multiple .likert-groups {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.likert-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.likert-group legend {
  float: none;
  width: auto;
  margin: 0 0 0.65rem;
  padding: 0;
  color: var(--bc-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

@container (min-width: 40rem) {
  .likert-align-responses .likert-group legend {
    min-height: var(--likert-question-min-height);
  }
}

.likert-options {
  display: grid;
  gap: 0.2rem;
}

.likert-label {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  min-height: 1.55rem;
  line-height: 1.35;
  cursor: pointer;
}

.likert-button {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0.17rem 0 0;
}

.bc-chart-wrap {
  position: relative;
  min-width: 0;
  overflow: visible;
}

.bc-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.bc-control-grid {
  display: grid;
  gap: var(--bc-control-gap);
}

.bc-control-panel {
  position: relative;
  min-width: 0;
}

.bc-control-title {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}

.bc-control-row {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) minmax(2.7rem, auto) 1fr;
  gap: 0.45rem;
  align-items: center;
  min-height: 1.8rem;
  margin: 0.22rem 0;
  font-size: 0.95rem;
  line-height: 1.25;
}

.bc-check-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.65rem;
  margin: 0.18rem 0;
  font-size: 0.95rem;
  line-height: 1.25;
}

.bc-check-row input[type="checkbox"],
.bc-figure input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
}

.bc-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bc-action-gap);
  align-items: center;
}

.bc-button,
.bc-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bc-button-min-height);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-sm);
  background: var(--bc-bg);
  color: var(--bc-text);
  font: inherit;
  line-height: 1.15;
  cursor: pointer;
}

.bc-button {
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.92rem;
}

.bc-icon-button {
  width: var(--bc-button-min-height);
  height: var(--bc-button-min-height);
  padding: 0;
}

.bc-button:hover:not(:disabled),
.bc-button:focus-visible:not(:disabled),
.bc-icon-button:hover:not(:disabled),
.bc-icon-button:focus-visible:not(:disabled) {
  border-color: var(--bc-focus);
  color: var(--bc-focus);
}

.bc-button:focus-visible,
.bc-icon-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.bc-button:disabled,
.bc-icon-button:disabled {
  cursor: default;
  opacity: 0.45;
}

.bc-button .bi,
.bc-icon-button .bi {
  flex: 0 0 auto;
  line-height: 1;
}

.bc-readout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
  min-height: 3.35rem;
  margin: 0 0 0.35rem;
  color: var(--bc-text);
  font-size: 0.95rem;
  line-height: 1.35;
}

.bc-readout[hidden] {
  display: none !important;
}

.bc-readout-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  min-width: 0;
  align-items: baseline;
}

.bc-readout-label {
  flex: 0 0 auto;
  color: var(--bc-muted);
  font-weight: 700;
}

.bc-readout-value {
  min-width: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.bc-graph {
  max-width: 100%;
  height: auto;
  overflow: visible;
  color: var(--bc-text);
  font-family: var(--bs-body-font-family);
}

.bc-graph text {
  fill: var(--graph-text-color);
  font-family: inherit;
}

.bc-graph .bc-graph-title {
  fill: var(--bc-text);
  font-size: var(--bc-figure-title-size);
  font-weight: 700;
}

.bc-graph .bc-graph-label,
.bc-axis-label {
  fill: var(--bc-text);
  font-size: var(--bc-figure-label-size);
}

.bc-graph .bc-graph-tick-label,
.bc-graph .bc-graph-legend text,
.bc-tick-label {
  fill: var(--graph-text-color);
  font-size: var(--bc-figure-tick-size);
}

.bc-graph .bc-graph-domain,
.bc-graph .bc-graph-tick-line,
.bc-axis path,
.bc-axis line {
  stroke: var(--graph-axis-color);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.bc-axis text {
  fill: var(--graph-text-color);
}

.bc-graph .bc-graph-grid .tick line {
  stroke: var(--graph-grid-color);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.bc-graph .bc-graph-grid text {
  display: none;
}

.bc-graph .bc-graph-grid .domain {
  display: none;
}

.bc-graph .bc-graph-bar {
  fill: var(--graph-bar-fill);
  stroke: var(--graph-bar-stroke);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.bc-graph .bc-graph-block {
  fill: var(--graph-block-fill);
  stroke: var(--graph-block-stroke);
  shape-rendering: crispEdges;
}

.bc-graph .bc-graph-line {
  stroke: var(--graph-line-color);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.bc-graph .bc-graph-area {
  fill-opacity: 0.16;
}

.bc-graph .bc-graph-point {
  fill: var(--graph-point-fill);
  stroke: var(--graph-point-stroke);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.bc-graph .bc-graph-legend line {
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.bc-graph .bc-graph-reference-marker line {
  vector-effect: non-scaling-stroke;
}

.bc-graph .bc-graph-reference-marker text {
  font-size: var(--bc-figure-label-size);
  font-weight: 700;
}

.bc-data-emphasis {
  color: var(--graph-data-color);
  font-weight: 700;
}

/* Chapter 5 cover: one abstract block distribution, with the original-score
   ruler retained while its aligned z-score ruler emerges beneath it. The
   blocks come from the shared graph generator and use the standard series
   palette; the ruler colors preserve the chapter's instructional grammar. */
.z-score-cover,
.z-score-cover .zsc-source-graph {
  width: 100%;
}

.z-score-cover .zsc-source-graph {
  margin: 0;
  max-width: none;
}

.z-score-cover .zsc-source-graph {
  overflow: visible;
}

.z-score-cover .bc-graph-block {
  stroke-width: 1.25;
}

.z-score-cover .zsc-axis .bc-graph-domain,
.z-score-cover .zsc-axis .bc-graph-tick-line {
  stroke-width: 1.7;
}

.z-score-cover .zsc-math-label {
  font-family: var(--bc-math-font-family);
  font-size: 1.08rem;
  font-style: italic;
  font-weight: 400;
}

.z-score-cover .zsc-raw-axis .bc-graph-domain,
.z-score-cover .zsc-raw-axis .bc-graph-tick-line {
  stroke: var(--graph-axis-color);
}

.z-score-cover .zsc-raw-axis .zsc-math-label {
  fill: var(--graph-axis-color);
}

.z-score-cover .zsc-z-axis .bc-graph-domain,
.z-score-cover .zsc-z-axis .bc-graph-tick-line {
  stroke: var(--graph-data-color);
}

.z-score-cover .zsc-z-axis .zsc-math-label {
  fill: var(--graph-data-color);
}

/* Chapter 5 aligned raw-score and z-score examples. Each panel is composed
   from the shared histogram/curve/block generators, with the same compact
   ruler layer added below its original x axis. */
.bc-figure-row.bc-standardization-comparison-row > .interactive-figure-mount {
  flex: 1 1 20rem;
  min-width: min(100%, 17rem);
  max-width: 30rem;
}

.standardized-score-graph,
.standardized-score-graph .ss-source-graph {
  width: 100%;
  margin: 0;
}

.standardized-score-graph .ss-source-graph > svg,
.standardized-score-graph > svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.standardized-score-graph .ss-axis-side-label {
  fill: var(--bc-muted);
  font-size: var(--bc-figure-tick-size);
  font-weight: 600;
}

.standardized-score-graph .ss-z-axis-side-label,
.standardized-score-graph .ss-z-axis .bc-graph-tick-label {
  fill: var(--graph-data-color);
  font-weight: 700;
}

.standardized-score-graph .ss-z-axis .bc-graph-domain,
.standardized-score-graph .ss-z-axis .bc-graph-tick-line {
  stroke: var(--graph-data-color);
  stroke-width: 1.5;
}

.standardized-score-graph .ss-mean-line {
  stroke: var(--bc-muted);
  stroke-width: 1.35;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}

.standardized-score-graph .ss-sd-line {
  stroke: var(--bc-muted);
  stroke-width: 1.2;
  stroke-dasharray: 1 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.standardized-score-graph .ss-stat-label {
  fill: var(--bc-muted);
  font-family: var(--bc-math-font-family);
  font-size: var(--bc-figure-tick-size);
  font-style: italic;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--bc-bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Chapter 5 standardization tutorial: one stationary distribution with
   interchangeable physical-looking coordinate strips beneath it. */
.standardization-ruler {
  --sr-focus: var(--graph-data-color);
}

.standardization-ruler .sr-chart-wrap {
  overflow: hidden;
}

.standardization-ruler .sr-plot-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.standardization-ruler .sr-plot-layer {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}

.standardization-ruler .sr-shared-plot,
.standardization-ruler .sr-ruler-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: hidden;
}

.standardization-ruler .sr-ruler {
  pointer-events: none;
  will-change: transform, opacity;
}

.standardization-ruler .sr-ruler-board {
  fill: var(--bc-control-bg);
  stroke: var(--bc-border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.standardization-ruler .sr-ruler-title {
  font-weight: 600;
}

.standardization-ruler .sr-ruler-operation {
  fill: var(--sr-focus);
  font-weight: 700;
  opacity: 0;
}

.standardization-ruler .sr-ruler-testWorking .bc-graph-tick-label {
  font-variant-numeric: tabular-nums;
}

.standardization-ruler .sr-ruler.is-reference {
  color: var(--bc-muted);
}

.standardization-ruler .sr-ruler.is-reference .sr-ruler-title,
.standardization-ruler .sr-ruler.is-reference .bc-graph-tick-label {
  fill: var(--bc-muted);
}

.standardization-ruler .sr-ruler.is-reference .sr-ruler-board,
.standardization-ruler .sr-ruler.is-reference .bc-graph-domain,
.standardization-ruler .sr-ruler.is-reference .bc-graph-tick-line {
  stroke: color-mix(in srgb, var(--bc-muted) 72%, transparent);
}

.standardization-ruler .sr-ruler.is-focus .sr-ruler-board {
  fill: color-mix(in srgb, var(--sr-focus) 10%, var(--bc-control-bg));
  stroke: var(--sr-focus);
  stroke-width: 1.75;
}

.standardization-ruler .sr-ruler.is-focus .sr-ruler-title,
.standardization-ruler .sr-ruler.is-focus .bc-graph-tick-label {
  fill: var(--sr-focus);
  font-weight: 700;
}

.standardization-ruler .sr-ruler.is-focus .bc-graph-domain,
.standardization-ruler .sr-ruler.is-focus .bc-graph-tick-line {
  stroke: var(--sr-focus);
  stroke-width: 1.75;
}

@media (prefers-reduced-motion: reduce) {
  .standardization-ruler .sr-ruler,
  .standardization-ruler .sr-plot-layer {
    animation: none !important;
    transition: none !important;
  }
}

/* Long display equations scroll sideways, like responsive tables. Overflow
   that widens the layout viewport past the visual viewport detaches the
   fixed-position navigation on mobile browsers. */
mjx-container[display="true"] {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 0.15rem;
}

/* Last-resort guard for the same failure: the value propagates to the
   viewport, so stray wide content clips instead of expanding the page. */
body {
  overflow-x: hidden;
}

/* Bibliography DOI/URL strings are unbreakable by default and widen the
   page on narrow screens. */
.csl-entry {
  overflow-wrap: anywhere;
}

main table,
main table.table,
.bc-data-table,
.bc-frequency-table {
  width: auto;
  max-width: 100%;
  margin: 1rem auto;
  font-variant-numeric: tabular-nums;
  /* font-family: MathJax; */
}

main table caption,
.bc-data-table caption,
.bc-frequency-table caption {
  caption-side: top;
  color: var(--bc-text);
  font-weight: 700;
  text-align: left;
}

main table,
main table.table,
.bc-data-table,
.bc-frequency-table {
  border-collapse: collapse;
  border-top: 2px solid var(--bc-table-rule-color);
  border-bottom: 2px solid var(--bc-table-rule-color);
}

main table th,
main table td,
.bc-data-table th,
.bc-data-table td,
.bc-frequency-table th,
.bc-frequency-table td {
  border: 0;
  vertical-align: middle;
}

main table thead,
main table.table thead,
.bc-data-table thead,
.bc-frequency-table thead {
  border-bottom: 2px solid var(--bc-table-rule-color);
}

main table.table > :not(caption) > * > *,
.bc-data-table.table > :not(caption) > * > *,
.bc-frequency-table.table > :not(caption) > * > * {
  border-width: 0;
}

main table th,
.bc-data-table th {
  font-weight: 700;
}

.bc-table-summary-row td {
  color: var(--bc-muted);
}

/* Match the row and column dice in Chapter 6. These are the same red and blue
   used by the first two dice on the chapter cover. */
#tbl-dice-sums {
  --bc-die-red-text: rgb(209 64 79);
  --bc-die-blue-text: rgb(51 120 176);
}

#tbl-dice-sums thead th:not(:first-child) {
  color: var(--bc-die-blue-text);
}

#tbl-dice-sums tbody td:first-child {
  color: var(--bc-die-red-text);
}

body.quarto-dark #tbl-dice-sums {
  --bc-die-red-text: color-mix(in srgb, rgb(209 64 79) 72%, white);
  --bc-die-blue-text: color-mix(in srgb, rgb(51 120 176) 72%, white);
}

/* Mark a modal row in static frequency tables without coupling the styling
   to a particular row number. Mixing yellow with the current page background
   gives the highlight enough contrast in either theme without becoming an
   opaque stripe. The heavier type keeps the cue from relying on color alone. */
.bc-mode-table {
  --bc-mode-highlight-bg: color-mix(
    in srgb,
    var(--graph-series-7, #f0e442) 32%,
    var(--bc-bg)
  );
}

.bc-mode-table tbody tr:has(.bc-mode-marker) > * {
  background: var(--bc-mode-highlight-bg);
  font-weight: 700;
}

/* Median tutorial ------------------------------------------------------- */

.median-tutorial {
  --mt-accent: var(--graph-series-3, var(--bc-accent));
  --mt-below: var(--graph-series-1, #0072b2);
  --mt-above: var(--graph-series-4, #d55e00);
  margin: 1.1rem auto;
}

.median-tutorial .mt-chart-wrap {
  overflow-x: auto;
  padding-bottom: 0.25rem;
  width: 100%;
  scrollbar-gutter: stable;
}

.median-tutorial .mt-stage {
  box-sizing: border-box;
  min-width: 0;
  min-height: 13rem;
  padding: 1rem clamp(0.35rem, 2vw, 1rem) 0.4rem;
}

.median-tutorial .mt-stage-label {
  margin: 0 0 0.8rem;
  color: var(--bc-muted);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
}

.median-tutorial .mt-values,
.median-tutorial .mt-marker-grid {
  display: grid;
  grid-template-columns: repeat(var(--mt-count), minmax(0, 1fr));
  gap: clamp(0.125rem, 1vw, 0.65rem);
  width: min(100%, 34rem);
  margin-inline: auto;
}

.median-tutorial .mt-values {
  position: relative;
}

.median-tutorial .mt-score.mt-score-ghost {
  position: absolute;
  z-index: 2;
  margin: 0;
  pointer-events: none;
}

.median-tutorial .mt-score {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0;
  min-height: clamp(2.2rem, 11vw, 2.75rem);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-sm, 4px);
  background: var(--bc-bg);
  color: var(--bc-text);
  font-size: clamp(0.8rem, 4vw, 1.25rem);
  font-variant-numeric: tabular-nums;
  transition:
    opacity 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease,
    background-color 240ms ease;
}

/* Keep long rows of cards visible together on phone-sized screens. The
   zero-minimum grid tracks above let the row use the width it actually has;
   these tighter insets leave that width for the cards rather than creating a
   barely perceptible horizontal overflow. */
@media (max-width: 480px) {
  .median-tutorial .mt-stage {
    padding-right: 0.125rem;
    padding-left: 0.125rem;
  }

  .median-tutorial .mt-values,
  .median-tutorial .mt-marker-grid {
    gap: 0.125rem;
    width: 100%;
  }
}

.median-tutorial.is-dense .mt-values,
.median-tutorial.is-dense .mt-marker-grid {
  gap: clamp(0.125rem, 0.6vw, 0.35rem);
  width: min(100%, 44rem);
}

.median-tutorial.is-dense .mt-score {
  min-height: clamp(1.9rem, 8vw, 2.4rem);
  font-size: clamp(0.72rem, 3.2vw, 1rem);
}

.median-tutorial .mt-score::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 560ms ease;
}

.median-tutorial .mt-score-value {
  position: relative;
  z-index: 1;
}

.median-tutorial .mt-score.is-middle {
  border: 2px solid var(--mt-accent);
  background: color-mix(in srgb, var(--mt-accent) 10%, var(--bc-bg));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mt-accent) 13%, transparent);
  font-weight: 700;
}

.median-tutorial .mt-score.is-muted {
  opacity: 0.3;
}

.median-tutorial .mt-score.is-below {
  border-color: color-mix(in srgb, var(--mt-below) 62%, var(--bc-border));
}

.median-tutorial .mt-score.is-below::before {
  background: color-mix(in srgb, var(--mt-below) 14%, var(--bc-bg));
  opacity: 1;
}

.median-tutorial .mt-score.is-above {
  border-color: color-mix(in srgb, var(--mt-above) 62%, var(--bc-border));
}

.median-tutorial .mt-score.is-above::before {
  background: color-mix(in srgb, var(--mt-above) 14%, var(--bc-bg));
  opacity: 1;
}

.median-tutorial .mt-score.is-equal::before {
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--mt-below) 17%, var(--bc-bg)) 0 0.42rem,
    color-mix(in srgb, var(--mt-above) 17%, var(--bc-bg)) 0.42rem 0.84rem
  );
  opacity: 1;
}

.median-tutorial .mt-score.is-equal {
  border: 2px solid var(--mt-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mt-accent) 11%, transparent);
  font-weight: 700;
}

.median-tutorial.median-cards-static .mt-stage {
  min-height: 9.9rem;
}

.median-tutorial.median-cards-static.is-reveal-pending .mt-score::before {
  opacity: 0;
}

.median-tutorial .mt-marker-grid {
  min-height: 4.35rem;
  margin-top: 0.55rem;
}

.median-tutorial .mt-marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.9rem;
  color: var(--bc-text);
  text-align: center;
}

.median-tutorial .mt-marker::before {
  position: absolute;
  top: 0;
  right: 0.35rem;
  left: 0.35rem;
  border-top: 2px solid var(--mt-accent);
  content: "";
}

.median-tutorial .mt-marker::after {
  position: absolute;
  top: 0;
  left: 50%;
  height: 0.55rem;
  border-left: 2px solid var(--mt-accent);
  content: "";
}

.median-tutorial .mt-marker-label,
.median-tutorial .mt-marker-detail {
  display: block;
  line-height: 1.2;
}

.median-tutorial .mt-marker-label {
  font-size: 0.98rem;
  white-space: nowrap;
}

.median-tutorial .mt-marker-detail {
  margin-top: 0.15rem;
  color: var(--bc-muted);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.median-tutorial .mt-marker.is-median .mt-marker-label {
  font-size: 1.05rem;
}

.median-tutorial .mt-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1rem;
  width: min(100%, 36rem);
  margin: 0.35rem auto 0;
  color: var(--bc-muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.median-tutorial .mt-legend[hidden] {
  display: none;
}

.median-tutorial .mt-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.median-tutorial .mt-legend-item[hidden] {
  display: none;
}

.median-tutorial .mt-legend-swatch {
  display: inline-block;
  width: 1.4rem;
  height: 0.85rem;
  border: 1px solid var(--bc-border);
  border-radius: 2px;
}

.median-tutorial .mt-legend-swatch.is-below {
  border-color: color-mix(in srgb, var(--mt-below) 62%, var(--bc-border));
  background: color-mix(in srgb, var(--mt-below) 14%, var(--bc-bg));
}

.median-tutorial .mt-legend-swatch.is-above {
  border-color: color-mix(in srgb, var(--mt-above) 62%, var(--bc-border));
  background: color-mix(in srgb, var(--mt-above) 14%, var(--bc-bg));
}

.median-tutorial .mt-legend-swatch.is-equal {
  border-color: var(--mt-accent);
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--mt-below) 17%, var(--bc-bg)) 0 0.25rem,
    color-mix(in srgb, var(--mt-above) 17%, var(--bc-bg)) 0.25rem 0.5rem
  );
}

@media (prefers-reduced-motion: reduce) {
  .median-tutorial .mt-score,
  .median-tutorial .mt-score::before {
    transition: none !important;
  }
}

html[data-motion="reduced"] .median-tutorial .mt-score,
html[data-motion="reduced"] .median-tutorial .mt-score::before {
  transition: none !important;
}

.bc-highlight {
  background: var(--bc-highlight-bg);
  border-radius: 3px;
}

.bc-frequency-table th,
.bc-frequency-table td {
  padding-right: 1rem;
  text-align: right;
}

.bc-frequency-table th:first-child,
.bc-frequency-table td:first-child {
  text-align: left;
}

.callout {
  --bc-callout-border-color: var(--bs-secondary);
}

.callout.callout-note {
  --bc-callout-border-color: var(--quarto-scss-export-callout-color-note, var(--bs-primary));
}

.callout.callout-tip {
  --bc-callout-border-color: var(--quarto-scss-export-callout-color-tip, var(--bs-success));
}

.callout.callout-warning {
  --bc-callout-border-color: var(--quarto-scss-export-callout-color-warning, var(--bs-warning));
}

.callout.callout-caution {
  --bc-callout-border-color: var(--quarto-scss-export-callout-color-caution, var(--bs-orange, #fd7e14));
}

.callout.callout-important {
  --bc-callout-border-color: var(--quarto-scss-export-callout-color-important, var(--bs-danger));
}

.callout.callout-style-default,
.callout.callout-style-simple {
  border: 1px solid var(--bc-callout-border-color);
}

.callout.interactive {
  --interactive-callout-color: var(--quarto-scss-export-callout-color-tip, var(--bs-success));
  --bc-callout-border-color: var(--interactive-callout-color);
  --interactive-callout-bg: color-mix(in srgb, var(--interactive-callout-color) 14%, transparent);
}

.callout.interactive.callout-style-default > .callout-header {
  background-color: var(--interactive-callout-bg);
}

.callout.interactive.callout-style-default > .callout-body-container.callout-body > .callout-footer,
.callout.interactive.callout-style-default > .callout-body-container.callout-body > p:last-child {
  margin: 0em -0.5em;
  padding-top: 0.2rem;
  padding-right: 0.5em;
  padding-bottom: 0.2rem;
  padding-left: 0.5em;
  background-color: var(--interactive-callout-bg);
  color: var(--bs-body-color);
  line-height: 1.35;
}

.callout.interactive.callout-style-default > .callout-body-container.callout-body > .callout-footer > :first-child {
  margin-top: 0;
}

.callout.interactive.callout-style-default > .callout-body-container.callout-body > .callout-footer > :last-child {
  margin-bottom: 0;
}

/* Inside interactive callouts the controls panel sits flush against the
   header and callout edges: cancel the figure-mount padding (0.5rem), the
   bc-figure top margin (1.25rem), and the callout body side padding, minus
   the 0.2em the header overlaps the body. */
.callout.interactive .bc-if-controls {
  margin: calc(0.2em - 1.75rem) -0.5em 0.75rem;
  border-radius: 0;
}

/* The flush drawer above must span the callout no matter how narrow the
   figure is, so inside interactive callouts the width cap moves off the
   figure root and onto the chart alone. The top margin is pinned to the
   standard 1.25rem the drawer offset assumes, so module-level
   --bc-figure-margin overrides (e.g. statistical-power's 1.5rem) can't
   open a gap under the callout header. */
.callout.interactive .bc-if-root.bc-figure {
  max-width: none;
  margin-top: 1.25rem;
}

.callout.interactive .bc-if-root.bc-figure .bc-chart-wrap {
  max-width: var(--bc-figure-max-width);
  margin-inline: auto;
}

.callout-footer.bc-if-tutorial > .tutorial-step[hidden] {
  display: none !important;
}

/* Two lines' worth of floor on the step prose. The nav sits above it, so its
   position is already fixed; this only stops the page below the callout from
   twitching as steps alternate between one and two lines. Deliberately not
   tall enough to reserve room for the longest step---that would leave short
   steps sitting in a mostly empty box. */
.callout-footer.bc-if-tutorial > .tutorial-step {
  min-height: 2.7em;
}

.callout-footer.bc-if-tutorial > .tutorial-step > :first-child {
  margin-top: 0;
}

.callout-footer.bc-if-tutorial > .tutorial-step > :last-child {
  margin-bottom: 0;
}

/* Shared by both arrangements: in side mode the arrows live outside the nav,
   so the accent tokens cannot hang off .bc-if-tutorial-nav alone. */
.bc-if-tutorial-nav,
.bc-if-side-nav {
  --bc-if-step-accent: var(--interactive-callout-color, var(--bc-accent));
  --bc-if-step-idle: color-mix(in srgb, var(--bc-muted) 55%, transparent);
  --bc-if-step-track: color-mix(in srgb, var(--bc-border) 90%, var(--bc-text));
  --bc-if-step-on-accent: #fff;
}

.bc-if-tutorial-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Inline arrangement: the bar sits above the step prose, so its rule reads as
   a header separator. */
.bc-if-tutorial-nav[data-mode="inline"] {
  margin-bottom: 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--bc-border);
}

/* Compact (narrow screens): a one-line readout replaces the rail, so the bar
   is button-height instead of rail-height and the step text stays near the viz. */
.bc-if-step-readout {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--bc-muted);
  font-size: 0.82rem;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bc-if-step-readout-title {
  color: var(--bc-text);
  font-weight: 600;
}

/* Both of these sit below the prose: the rail (side arrangement) and the
   compact bar, which lands at the foot of the callout within thumb reach. */
.bc-if-tutorial-nav[data-mode="rail"],
.bc-if-tutorial-nav[data-mode="compact"] {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bc-border);
}

/* Matching bottom padding, so the row sits exactly centred in its band. Needs
   this much specificity to beat Quarto's own
   `.callout.callout-titled .callout-body > div > :last-child` rule, which
   applies padding-bottom: .5rem to whatever ends the footer -- now this bar. */
.callout.interactive .callout-footer.bc-if-tutorial > .bc-if-tutorial-nav[data-mode="rail"],
.callout.interactive .callout-footer.bc-if-tutorial > .bc-if-tutorial-nav[data-mode="compact"] {
  padding-bottom: 0.3rem;
}

.bc-if-stepper {
  flex: 1 1 auto;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.bc-if-substep {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.bc-if-stepper-step[data-state="upcoming"] .bc-if-substep {
  opacity: 1;
  border-color: color-mix(in srgb, var(--bc-muted) 30%, transparent);
  background: color-mix(in srgb, var(--bc-muted) 30%, transparent);
}

.bc-if-stepper-step[data-state="complete"] .bc-if-substep {
  opacity: 1;
  border-color: var(--bc-if-step-accent);
  background: var(--bc-if-step-accent);
}

.bc-if-stepper-step[data-state="current"] .bc-if-substep {
  opacity: 1;
  border: 2px solid var(--bc-if-step-accent);
  background: var(--bc-if-step-on-accent);
  transform: scale(1.08);
}

.bc-if-stepper-step[data-state="upcoming"] .bc-if-substep:focus-visible {
  opacity: 1;
  border-color: var(--bc-if-step-idle);
  background: var(--bc-if-step-idle);
}

.bc-if-substep:hover,
.bc-if-substep:focus-visible {
  border-color: var(--bc-if-step-accent);
  transform: scale(1.18);
}

.bc-if-substep:focus-visible {
  outline: 2px solid var(--bc-focus);
  outline-offset: 2px;
}

.bc-if-stepper-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.bc-if-stepper[data-grouped="true"] {
  min-height: 2.65rem;
}

.bc-if-stepper[data-grouped="true"] .bc-if-stepper-step--minor {
  box-sizing: border-box;
  padding-top: 0.575rem;
}

.bc-if-stepper-step + .bc-if-stepper-step::before {
  content: "";
  position: absolute;
  top: 0.85rem;
  left: calc(-50% + 0.85rem);
  right: calc(50% + 0.85rem);
  height: 2px;
  border-radius: 1px;
  background-image: linear-gradient(
    to right,
    var(--bc-if-step-accent) 50%,
    var(--bc-if-step-track) 50%
  );
  background-size: 205% 100%;
  background-position: 100% 0;
  transition: background-position 320ms ease;
}

.bc-if-stepper-step[data-filled="true"]::before {
  background-position: 0 0;
}

.bc-if-stepper[data-grouped="true"] .bc-if-stepper-step + .bc-if-stepper-step::before {
  top: calc(0.85rem - 1px);
  left: calc(-50% + 0.275rem);
  right: calc(50% + 0.275rem);
}

.bc-if-stepper[data-grouped="true"]
  .bc-if-stepper-step--major + .bc-if-stepper-step::before {
  left: calc(-50% + 0.7rem);
}

.bc-if-stepper[data-grouped="true"]
  .bc-if-stepper-step + .bc-if-stepper-step--major::before {
  right: calc(50% + 0.7rem);
}

.bc-if-stepper-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  min-width: 0;
  padding: 0.15rem 0.25rem 0.1rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.bc-if-stepper-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.4rem;
  height: 1.4rem;
  border: 0 solid var(--bc-if-step-accent);
  border-radius: 50%;
  background: var(--bc-if-step-accent);
  transition:
    transform 240ms ease,
    border-width 240ms ease,
    background-color 240ms ease;
}

.bc-if-stepper-dot .bi {
  color: var(--bc-if-step-on-accent);
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 200ms ease;
}

.bc-if-stepper-step[data-state="complete"] .bc-if-stepper-dot .bi {
  opacity: 1;
}

.bc-if-stepper-step[data-state="current"] .bc-if-stepper-dot {
  border-width: 0.42rem;
  background: transparent;
}

.bc-if-stepper-step[data-state="upcoming"] .bc-if-stepper-dot {
  transform: scale(0.4);
  background: var(--bc-if-step-idle);
}

.bc-if-stepper[data-grouped="true"]
  .bc-if-stepper-step--major[data-state="upcoming"] .bc-if-stepper-dot {
  transform: scale(0.62);
}

.bc-if-stepper-node:hover .bc-if-stepper-dot,
.bc-if-stepper-node:focus-visible .bc-if-stepper-dot {
  transform: scale(1.12);
}

.bc-if-stepper-step[data-state="upcoming"] .bc-if-stepper-node:hover .bc-if-stepper-dot,
.bc-if-stepper-step[data-state="upcoming"] .bc-if-stepper-node:focus-visible .bc-if-stepper-dot {
  transform: scale(0.6);
  background: var(--bc-muted);
}

.bc-if-stepper[data-grouped="true"]
  .bc-if-stepper-step--major[data-state="upcoming"] .bc-if-stepper-node:hover .bc-if-stepper-dot,
.bc-if-stepper[data-grouped="true"]
  .bc-if-stepper-step--major[data-state="upcoming"] .bc-if-stepper-node:focus-visible .bc-if-stepper-dot {
  transform: scale(0.74);
}

.bc-if-stepper-node:focus-visible {
  outline: none;
}

.bc-if-stepper-node:focus-visible .bc-if-stepper-dot {
  outline: 2px solid var(--bc-focus);
  outline-offset: 2px;
}

.bc-if-stepper-label {
  max-width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: auto;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--bc-muted);
  transition: color 200ms ease;
}

.bc-if-stepper-step[data-state="current"] .bc-if-stepper-label {
  color: var(--bc-if-step-accent);
}

.bc-if-stepper-step[data-section-current="true"] .bc-if-stepper-label {
  color: var(--bc-if-step-accent);
}

.bc-if-stepper[data-grouped="true"] .bc-if-stepper-label {
  position: absolute;
  top: 1.85rem;
  left: 50%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
}

.bc-if-stepper[data-grouped="true"]
  .bc-if-stepper-step--major:first-child .bc-if-stepper-label,
.bc-if-stepper[data-grouped="true"]
  .bc-if-stepper-step--major:first-child +
  .bc-if-stepper-step--major .bc-if-stepper-label {
  font-size: 0.65rem;
}

.bc-if-stepper-node:hover .bc-if-stepper-label {
  color: var(--bc-text);
}

.bc-if-stepper-step[data-state="current"] .bc-if-stepper-node:hover .bc-if-stepper-label {
  color: var(--bc-if-step-accent);
}

.bc-if-tutorial-button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding-block: 0.2rem;
  line-height: 1.2;
  white-space: nowrap;
}

.bc-if-tutorial-button .bi {
  font-size: 0.85rem;
  line-height: 1;
}

.bc-if-tutorial-button:hover:not(:disabled),
.bc-if-tutorial-button:focus-visible:not(:disabled) {
  border-color: var(--bc-if-step-accent, var(--bc-focus));
  color: var(--bc-if-step-accent, var(--bc-focus));
}

.bc-if-tutorial-next:not(:disabled) {
  border-color: transparent;
  background: var(--bc-if-step-accent);
  color: var(--bc-if-step-on-accent);
}

.bc-if-tutorial-next:hover:not(:disabled),
.bc-if-tutorial-next:focus-visible:not(:disabled) {
  border-color: transparent;
  background: color-mix(in srgb, var(--bc-if-step-accent) 82%, var(--bc-text));
  color: var(--bc-if-step-on-accent);
}

/* --- Side-arrow tutorial navigation ---------------------------------- */

.callout.interactive[data-tutorial-nav-mode="side"] {
  position: relative;
}

/* Reserve the gutters by insetting the viz rather than overlaying the arrows
   on it. The callout is a fixed ~749px and most chart wraps fill it to within
   9px, so an overlay would sit on live content. The controls drawer is
   excluded: it is deliberately flush to the callout edges. */
.callout.interactive[data-tutorial-nav-mode="side"] .bc-if-tutorial-viz > *:not(.bc-if-controls) {
  padding-inline: var(--bc-if-side-gutter, 3.25rem);
}

/* Authored-only figures (every tutorial by default, plus anything marked
   .no-controls): the drawer and its toggle are gone for good, so nothing is
   left to reveal or reserve space for. The JS adds .bc-if-controls-suppressed
   to the figure root once it has resolved which case applies. */
.bc-if-controls-suppressed > .bc-if-controls,
.bc-if-controls-suppressed > .bc-if-toolbar,
.callout.no-controls .bc-if-toggle {
  display: none !important;
}

.bc-if-side-nav .bc-if-tutorial-button {
  position: absolute;
  top: var(--bc-if-arrow-top, 50%);
  z-index: 3;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--bc-text) 16%, transparent);
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease;
}

.bc-if-side-nav .bc-if-tutorial-prev {
  left: 0.5rem;
}

.bc-if-side-nav .bc-if-tutorial-next {
  right: 0.5rem;
}

/* The chevron carries the meaning at this size; the word would not fit. */
.bc-if-side-nav .bc-if-tutorial-button-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bc-if-side-nav .bc-if-tutorial-button .bi {
  font-size: 1.05rem;
}

.bc-if-side-nav .bc-if-tutorial-button:hover:not(:disabled) {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--bc-text) 24%, transparent);
}

/* Kept discoverable rather than hidden at the ends of the tutorial: a missing
   button would shift attention, and the greyed state also communicates
   "you are at the start / the end". */
.bc-if-side-nav .bc-if-tutorial-button:disabled {
  opacity: 0.35;
  box-shadow: none;
}

/* First-encounter hint. In side mode the Next control is a bare chevron out in
   the gutter with no label, so to a reader meeting their first tutorial there
   is nothing saying it is a control rather than an ornament. Three beats when
   it first scrolls fully into view, each one a swell of the button, a ring
   shed outward, and a nudge of the chevron itself -- then a long rest.
   The chevron nudge carries most of the meaning: it is the only part of this
   that says "forward" rather than merely "look here". The ring stays small
   because the gutter is small (see the cap below), and the accent fill is left
   alone throughout, since colour here encodes state, not decoration.
   interactive-figure.js decides when to arm and when to stop. */
.bc-if-side-nav .bc-if-tutorial-next.is-hinting {
  animation: bc-if-next-beat 2400ms cubic-bezier(0.34, 0, 0.28, 1) 900ms 3 both;
}

.bc-if-side-nav .bc-if-tutorial-next.is-hinting .bi {
  animation: bc-if-next-nudge 2400ms cubic-bezier(0.34, 0, 0.28, 1) 900ms 3 both;
}

.bc-if-side-nav .bc-if-tutorial-next.is-hinting::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--bc-if-step-accent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: bc-if-next-ping 2400ms ease-out 900ms 3 both;
}

/* The base rule translates the button onto the arrow centre line, so every
   frame has to carry that translate or the beat would fling it half its own
   height down the gutter. */
@keyframes bc-if-next-beat {
  0%, 40%, 100% {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--bc-text) 16%, transparent);
  }
  14% {
    transform: translateY(-50%) scale(1.07);
    box-shadow: 0 3px 11px color-mix(in srgb, var(--bc-if-step-accent) 48%, transparent);
  }
}

@keyframes bc-if-next-nudge {
  0%, 40%, 100% { transform: translateX(0); }
  16% { transform: translateX(2px); }
}

/* Standing invitation, shown on a tutorial's opening step until the reader
   starts it. The pulse above answers "is this a control"; this answers "is
   this worth starting", which is a live question only at step 0 -- once a
   reader is stepping through, the unfilled dots on the progress rail already
   say there is more, and they say it without moving. Motion is for "act now",
   a static indicator is for "there is more", and using motion for both would
   spend the louder signal on the weaker need.

   So: the nudge alone, no swell and no ring, on a long cycle that is mostly
   stillness -- roughly a second of movement, then nearly four of quiet. It is
   also gated on the arrow being fully on screen and capped at twelve beats, so
   it cannot become the permanent background flicker that a reader stops seeing
   and starts being annoyed by. */
.bc-if-side-nav .bc-if-tutorial-next.is-inviting .bi {
  animation: bc-if-next-invite 4600ms cubic-bezier(0.34, 0, 0.28, 1) 700ms 12 both;
}

/* Slightly further than the pulse's nudge: there is no swell or ring carrying
   it here, so it has to read on its own. */
@keyframes bc-if-next-invite {
  0%, 20%, 100% { transform: translateX(0); }
  8% { transform: translateX(3px); }
}

/* Capped at 1.34x. The arrow sits 0.5rem from the callout border with only
   0.4rem of clearance to the viz on its other side, so a wider ring would
   cross one or the other; what the ring cannot do in reach it does in dwell,
   holding most of its opacity through the first half of the throw. */
@keyframes bc-if-next-ping {
  0% { opacity: 0; transform: scale(0.98); }
  10% { opacity: 0.55; }
  22% { opacity: 0.45; }
  46%, 100% { opacity: 0; transform: scale(1.34); }
}

@media (prefers-reduced-motion: reduce) {
  .bc-if-side-nav .bc-if-tutorial-button {
    transition: none;
  }

  .bc-if-side-nav .bc-if-tutorial-next.is-hinting,
  .bc-if-side-nav .bc-if-tutorial-next.is-hinting .bi,
  .bc-if-side-nav .bc-if-tutorial-next.is-inviting .bi {
    animation: none;
  }

  .bc-if-side-nav .bc-if-tutorial-next.is-hinting::after {
    content: none;
  }
}

html[data-motion="reduced"] .bc-if-side-nav .bc-if-tutorial-next.is-hinting,
html[data-motion="reduced"] .bc-if-side-nav .bc-if-tutorial-next.is-hinting .bi,
html[data-motion="reduced"] .bc-if-side-nav .bc-if-tutorial-next.is-inviting .bi {
  animation: none;
}

html[data-motion="reduced"] .bc-if-side-nav .bc-if-tutorial-next.is-hinting::after {
  content: none;
}

@media (max-width: 680px) {
  .bc-if-stepper[data-grouped="true"]
    .bc-if-stepper-step--major:not([data-section-current="true"]) .bc-if-stepper-label {
    visibility: hidden;
  }
}

@media (max-width: 480px) {
  .bc-if-tutorial-nav {
    gap: 0.35rem;
  }

  .bc-if-stepper-step:not([data-state="current"]) .bc-if-stepper-label {
    visibility: hidden;
  }

  .bc-if-stepper[data-grouped="true"]
    .bc-if-stepper-step--major[data-section-current="true"] .bc-if-stepper-label {
    visibility: visible;
  }

  .bc-if-tutorial-button .bc-if-tutorial-button-text {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-if-stepper-step + .bc-if-stepper-step::before,
  .bc-if-stepper-dot,
  .bc-if-stepper-dot .bi,
  .bc-if-stepper-label,
  .bc-if-substep {
    transition: none !important;
  }
}

/* Align the desktop navbar contents with the centered sidebar-plus-article
   frame. Quarto switches to its compact full-width header below 992px. */
@media (min-width: 992px) {
  #quarto-header .navbar-container {
    width: calc(100% - 2.25rem);
    max-width: 1080px;
    margin-inline: auto;
  }
}

/* Below 992px the pinned header is a single navbar row: a menu button
   (added by mobile-nav.js) opens Quarto's sidebar drawer, which hosts the
   settings and search tools. */
#quarto-header .navbar .bc-nav-menu-toggle {
  display: none;
}

.bc-drawer-tools {
  display: none;
}

@media (max-width: 991.98px) {
  .quarto-secondary-nav {
    display: none !important;
  }

  /* Quarto marks the page title d-none below lg because the secondary nav
     row normally shows it; with that row gone the title returns in-page. */
  #title-block-header .quarto-title > h1.title {
    display: block !important;
  }

  #quarto-header .navbar #quarto-search {
    display: none;
  }

  #quarto-header .navbar .bc-nav-menu-toggle {
    display: inline-flex;
    /* The glyph is inset 8px in its 40px button; pulling the button out by
       that much puts the icon's optical edge on the content margin. */
    margin-right: -8px;
  }

  /* Align the navbar row with the article text edges (1.5rem below 768px). */
  #quarto-header .navbar {
    padding-inline: 0;
  }

  #quarto-header .navbar .navbar-container {
    padding-inline: 1.5rem;
  }

  /* Quarto's empty logo link still carries a 4px margin. */
  #quarto-header .navbar .navbar-brand-logo {
    margin-right: 0;
  }

  /* Quarto reserves 115px of brand width for navbar tools; on mobile only
     the 40px menu button remains, so the title gets the freed space. */
  #quarto-header .navbar .navbar-brand-container {
    max-width: calc(100% - 3.25rem);
  }

  /* Quarto's grid widens the content margins in the tablet band. */
  @media (min-width: 768px) {
    #quarto-header .navbar .navbar-container {
      padding-inline: 2.5rem;
    }
  }

  .bc-drawer-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin: 0.5rem 0 0.25rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--bc-border);
  }

  /* Pull the first (settings) button out by its glyph inset so the icons'
     optical edge lines up with the menu text below. */
  .bc-drawer-tools .bc-settings .bc-settings-button {
    margin-left: -0.55rem;
  }

  /* Button and menu join the tools row directly so the static dropdown can
     wrap onto its own full-width line below the icons. */
  .bc-drawer-tools .bc-settings {
    display: contents;
  }

  .bc-drawer-tools .bc-settings-menu {
    order: 10;
    position: static;
    /* flex: 0 0 100% rather than width: 100%: as a flex item the menu would
       otherwise shrink back onto the icons' line instead of wrapping below. */
    flex: 0 0 100%;
    min-width: 0;
    max-width: none;
    /* The drawer is sized by its contents, so without inline-size containment
       the open menu widens the whole navigation panel. Contained, the menu
       takes the drawer's width and wraps its own content to fit. */
    contain: inline-size;
    margin: 0.25rem 0;
    box-shadow: none;
  }

  /* The drawer is too narrow for the three theme options side by side. */
  .bc-drawer-tools .bc-settings-options {
    flex-direction: column;
  }

  .bc-drawer-tools .bc-settings-button {
    width: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
  }

  .bc-drawer-tools .bc-settings-button .bi {
    font-size: 1.15rem;
  }
}

#quarto-margin-sidebar {
  display: none;
}

#quarto-sidebar .sidebar-page-toc {
  margin: 0.15rem 0 0.35rem 0.85rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--bs-border-color);
}

#quarto-sidebar .sidebar-page-toc ul {
  margin: 0.1rem 0 0.1rem 0.65rem;
  padding-left: 0.65rem;
  border-left: 1px solid var(--bs-border-color);
  list-style: none;
}

#quarto-sidebar .sidebar-page-toc li {
  margin: 0;
}

#quarto-sidebar .sidebar-page-toc a {
  display: block;
  padding: 0.16rem 0.25rem;
  color: var(--bs-secondary-color);
  font-size: 0.82rem;
  line-height: 1.25;
  text-decoration: none;
}

#quarto-sidebar .sidebar-page-toc a:hover,
#quarto-sidebar .sidebar-page-toc a.active {
  color: var(--bs-body-color);
}

#quarto-sidebar .sidebar-page-toc a.active {
  font-weight: 700;
}

#quarto-sidebar .sidebar-page-toc .header-section-number {
  color: inherit;
}

#title-block-header {
  text-align: center;
}
#title-block-header .chapter-number::before {
  content: "Chapter ";
}
#title-block-header .chapter-number::after {
  content: ":";
}