/* DerivaSteps: the look. It follows alexanderhubbert.com: Georgia headings in sentence case, a deep
   navy band for the navbar and the start page's hero, cream paper, and teal and orange only for
   the charts and for what can be clicked. Following the research on learning materials, the
   moving price paths are only in the hero of the start page, and the parts where students read
   and practise are dark text on a light, warm background, without decoration. Quarto's cosmo
   theme gives the base styles. */

/* The text font, Source Sans 3, served from this site (assets/fonts, under the SIL Open Font
   License in OFL.txt) rather than from Google, so no visitor's IP address goes to Google. Each
   file holds one set of characters, and a browser loads only the sets a page uses */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-sans-3-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-sans-3-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-sans-3-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --lab-navy: #0a2540;          /* the navy of alexanderhubbert.com: navbar, hero, headings, footer */
  --lab-paper: #f5f1e8;         /* the page, as on the main site */
  --lab-cream: #fcefe3;         /* the chart background of the main site */
  --lab-card: #fffdf9;          /* the main site's surface colour */
  --lab-rule: #e3d9c9;
  --lab-frame: #d5c6b4;         /* the main site's chart frame colour */
  --lab-ink: #17212b;           /* the main site's text colour */
  --lab-text: #17212b;
  --lab-muted: #5b6670;
  --lab-on-dark: #d2dce3;       /* text on the navy band, as on the main site */
  --lab-teal: #17868a;          /* the teal of the main site's charts */
  --lab-teal-dark: #106568;
  --lab-teal-button: #157c80;   /* the teal a shade darker, so white button text has a 5:1 contrast */
  --lab-teal-soft: #e3f1f1;
  --lab-teal-light: #78d6d9;    /* teal on the navy band */
  --lab-teal-glow: 52, 178, 182; /* a lighter teal, as r, g, b, for the price paths */
  --lab-orange: #d2822b;        /* the orange of the main site's charts */
  --lab-orange-dark: #9c5812;   /* dark enough for text on the cream chart background */
  --lab-red: #c0392b;
  --lab-red-dark: #9b2c20;
  --lab-red-soft: #fbeceb;
  --lab-heading: Georgia, "Times New Roman", serif;
  --lab-body: "Source Sans 3", "Source Sans Pro", "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------- the page */

/* Text at 1.125rem, 19 pixels, in the 860-pixel column of grid: body-width in _quarto.yml (widened
   on 2026-10-12 so that the page uses the screen's width): about 110 characters to a line, with the
   cards and charts as wide as the text */
body {
  background: var(--lab-paper);
  color: var(--lab-text);
  font-family: var(--lab-body);
  font-size: 1.125rem;
}

h1, h2, h3 {
  font-family: var(--lab-heading);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--lab-navy);
}

main h2 {
  margin-top: 2.8rem;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lab-rule);
  font-size: 1.75rem;
}

main h3 {
  font-size: 1.3rem;
}

main p, main li {
  line-height: 1.65;
}

main a {
  color: var(--lab-teal-dark);
}

main strong {
  color: var(--lab-navy);
}

/* A display formula wider than a phone scrolls sideways instead of running off the page */
mjx-container[display="true"] {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

/* The page title, on pages without a hero */
#title-block-header .title {
  margin: 2rem 0 0.4rem;
  font-size: clamp(2.1rem, 4.2vw, 2.8rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* ---------------------------------------------------------------- the navbar */

.navbar {
  background: var(--lab-navy) !important;
  border-bottom: none;
}

.navbar-brand,
.navbar-title {
  font-family: var(--lab-heading);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: 0;
}

/* The site's name is not a link (lab-ui.js removes its address). As on alexanderhubbert.com it
   keeps its colour under the mouse, shows no link cursor and cannot be selected */
.navbar-brand {
  color: #f5f1e8 !important;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

/* The navbar's links light up in the site's light teal, not the theme's blue (the id outranks
   Quarto's rule for dark navbars) */
#quarto-header .navbar {
  --bs-navbar-hover-color: var(--lab-teal-light);
  --bs-navbar-active-color: var(--lab-teal-light);
}

.navbar .dropdown-menu {
  border: 1px solid var(--lab-rule);
  border-radius: 6px;
}

.navbar .dropdown-item:active {
  background: var(--lab-teal-dark);
}

/* Where we are: the page's own link (Start, the option calculator) and, on a lesson, its level's
   name (lab-ui.js marks it) stand out as a pill, cream on the navy like the hero's text; in the
   level's menu, the lesson that is open has a light teal background */
#quarto-header .navbar-nav .nav-link.active,
#quarto-header .navbar-nav .nav-link.active:hover,
#quarto-header .navbar-nav .nav-link.active:focus {
  background: var(--lab-paper);
  color: var(--lab-navy);
  border-radius: 999px;
}

#quarto-header .navbar .dropdown-item.active {
  background: var(--lab-teal-soft);
  color: var(--lab-navy);
  font-weight: 600;
}

/* The lesson under the mouse, or reached with the keyboard, is clearly marked: white on teal,
   stronger than the light teal of the lesson that is open. The theme's own hover was a faint grey
   that hardly showed which lesson the mouse was on (2026-10-14) */
#quarto-header .navbar .dropdown-item:hover,
#quarto-header .navbar .dropdown-item:focus-visible {
  background: var(--lab-teal-button);
  color: #ffffff;
}

/* The pill is a little smaller than the link: part of the link's padding becomes margin, so the
   link takes the same room and nothing beside it moves */
@media (min-width: 1200px) {
  #quarto-header .navbar-nav .nav-link.active {
    padding: 0.25rem 0.375rem;
    margin: 0.25rem 0.125rem;
  }
}

/* In the folded menu of narrower screens the pill fits its words, not the menu's width; every
   link there has the same room at its sides, so their words stay in line with the pill's */
@media (max-width: 1199.98px) {
  #quarto-header .navbar-nav .nav-link {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  #quarto-header .navbar-nav .nav-link.active {
    display: inline-block;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
}

/* On a wide screen with a mouse, a level's menu opens when the pointer is over its name or the
   keyboard is on it; a click on the name opens the level's own page, on every screen (lab-ui.js) */
@media (min-width: 1200px) and (hover: hover) {
  #quarto-header .navbar .dropdown:hover > .dropdown-menu,
  #quarto-header .navbar .dropdown:focus-within > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* ---------------------------------------------------------------- the footer */

/* The footer of every page (_footer.html), as on alexanderhubbert.com: a navy band with the
   site and its author, the site's pages, the author's links, and the copyright line. Quarto puts
   it inside its page grid, after the main column, so it is stretched over the grid's full width;
   the id outranks Quarto's rules for the grid's items */
#quarto-content > .lab-footer {
  grid-column: screen-start / screen-end;
  margin-top: 4rem;
  padding: 48px 0 18px;
  background: var(--lab-navy);
  color: #e9eef2;
  /* Above the contents list in the right margin: its sticky box is as tall as the window and, at
     the bottom of a page, lay over the footer's right column and caught the clicks on "Report a
     problem" and LinkedIn (found on 2026-10-14) */
  position: relative;
  z-index: 2;
}

.lab-footer-shell {
  width: min(1140px, calc(100% - 48px));
  margin-inline: auto;
}

.lab-footer-grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 40px 56px;
}

.lab-footer-name {
  color: #e9eef2;
  font-family: var(--lab-heading);
  font-size: 1.6rem;
}

.lab-footer p {
  margin: 6px 0 0;
  color: #b7c3cc;
  font-size: 1rem;
  line-height: 1.5;
}

.lab-footer nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The site's pages in two columns of four: the start page and Levels 1 to 3, then Levels 4 to 6
   and the calculator */
.lab-footer .lab-footer-pages {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 8px 40px;
}

.lab-footer a {
  color: #e9eef2;
  text-decoration: none;
}

.lab-footer a:hover {
  color: var(--lab-teal-light);
  text-decoration: underline;
}

.lab-footer-bottom {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / 20%);
  color: #9fb0bc;
  font-size: 0.8rem;
}

@media (max-width: 760px) {
  .lab-footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ---------------------------------------------------------------- the contents list */

/* The contents list in the margin ("On this page"), in the plain look of alexanderhubbert.com's
   articles; the section on screen is marked in teal */
#toc-title {
  margin-bottom: 8px;
  color: #34414a;
  font-family: var(--lab-body);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
}

/* Quarto colours the marked entry with !important, so this rule needs it too */
#TOC .nav-link.active {
  color: var(--lab-teal-dark) !important;
  border-left-color: var(--lab-teal) !important;
}

/* The contents list starts below a full-width block at the top of a page: the start page's hero
   or the option calculator. Quarto folds the list into an "On this page" button wherever it would
   overlap such a block; lab-ui.js measures where the block ends and sets --lab-top-block */
body.lab-has-hero #quarto-margin-sidebar,
body.lab-has-wide #quarto-margin-sidebar {
  margin-top: calc(var(--lab-top-block, 520px) + 3rem);
}

/* ---------------------------------------------------------------- the hero of the start page */

/* A page that opens with a hero has no gap between the navbar and the hero: no padding above the
   content (Quarto's rule for it has an id, so this one needs one too), and no margin under the
   empty title block, as the start page has no title */
body.lab-has-hero #quarto-content,
body.lab-has-hero #quarto-content > main.content {
  margin-top: 0;
  padding-top: 0;
}

body.lab-has-hero #title-block-header {
  display: none;
}

/* The hero has the navbar's navy, so the two read as one band. Its text lines up with the text
   of the page below: the hero uses Quarto's page grid and its text the body column */
.lab-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 1.5rem;
  padding: 64px 0 60px;
  background: var(--lab-navy);
  color: #ffffff;
}

/* The canvas spans every column of the hero's page grid; otherwise Quarto's grid would hold it
   to the text column */
/* Quarto's page-grid rules set the hero's overflow back to visible, which let the shade behind
   the text widen a phone's page; the id makes this rule outrank them */
#quarto-document-content .lab-hero {
  overflow: hidden;
}

.lab-hero-canvas {
  position: absolute;
  inset: 0;
  grid-column: 1 / -1;
  width: 100%;
  height: 100%;
}

.lab-hero-inner {
  position: relative;
  z-index: 1;
}

/* A soft shade of the navy behind the hero's text, so a price path never runs through the words
   at full strength */
.lab-hero-inner::before {
  content: "";
  position: absolute;
  inset: -40px -56px;
  z-index: -1;
  background: radial-gradient(ellipse 75% 85% at 35% 50%, rgba(10, 37, 64, 0.92), rgba(10, 37, 64, 0.65) 60%, rgba(10, 37, 64, 0));
  pointer-events: none;
}

.lab-hero h1 {
  max-width: 11.5em;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.3rem, 5vw, 3.3rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}

.lab-hero-text {
  max-width: 30em;
  margin: 18px 0 0;
  color: var(--lab-on-dark);
  font-size: 1.15rem;
  line-height: 1.6;
}

.lab-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.lab-hero .lab-btn.secondary {
  background: transparent;
  border-color: rgba(var(--lab-teal-glow), 0.75);
  color: #ffffff;
}

.lab-hero .lab-btn.secondary:hover {
  background: rgba(var(--lab-teal-glow), 0.18);
  color: #ffffff;
}

/* ---------------------------------------------------------------- cards and text */

.lab-card {
  margin: 24px 0;
  padding: 22px 24px;
  background: var(--lab-card);
  border: 1px solid var(--lab-rule);
  border-radius: 8px;
}

/* A small label above a question, such as "Predict first" */
.lab-kicker {
  margin: 0 0 8px;
  color: var(--lab-teal-dark);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lab-question {
  margin: 0 0 16px;
  color: var(--lab-ink);
  font-size: 1.12rem;
  line-height: 1.55;
}

/* The count of a true-or-false check: which statement, and how many were right */
.lab-concept-count {
  margin: 0 0 6px;
  color: var(--lab-muted);
  font-size: 0.9rem;
}

.lab-summary {
  margin: 12px 0 0;
  color: var(--lab-navy);
  font-weight: 600;
}

.lab-hint {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--lab-teal);
  background: var(--lab-teal-soft);
  border-radius: 0 6px 6px 0;
  animation: lab-appear 0.3s ease;
}

.lab-steps {
  margin: 12px 0 0;
  padding-left: 1.4rem;
}

.lab-steps li {
  margin: 5px 0;
}

.lab-steps li + li {
  margin-top: 12px;
}

.lab-solution {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--lab-cream);
  border-radius: 6px;
  animation: lab-appear 0.3s ease;
}

.lab-link {
  display: inline-block;
  margin-top: 16px;
  font-weight: 600;
  text-decoration: none;
}

.lab-link:hover {
  text-decoration: underline;
}

/* The link to the next skill at the end of a lesson */
.lab-next {
  display: inline-block;
  margin: 1.5rem 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
}

.lab-next:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------- answers and buttons */

.lab-label {
  display: block;
  margin-bottom: 8px;
  color: var(--lab-muted);
  font-size: 0.95rem;
}

.lab-answer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.lab-input {
  width: 10rem;
  padding: 9px 12px;
  border: 1px solid var(--lab-frame);
  border-radius: 6px;
  background: #ffffff;
  color: var(--lab-ink);
  font-size: 1.1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lab-input:focus {
  outline: none;
  border-color: var(--lab-teal);
  box-shadow: 0 0 0 3px rgba(23, 134, 138, 0.2);
}

/* The fields of the form to report a problem, as wide as the text */
.lab-report-field {
  width: 100%;
  max-width: 40rem;
  font-size: 1rem;
  font-family: inherit;
}

.lab-btn {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--lab-teal-button);
  border-radius: 6px;
  background: var(--lab-teal-button);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.lab-btn:hover {
  background: var(--lab-teal-dark);
  border-color: var(--lab-teal-dark);
  color: #ffffff;
}

.lab-btn:focus-visible {
  outline: 3px solid rgba(23, 134, 138, 0.35);
  outline-offset: 2px;
}

.lab-btn.secondary {
  background: transparent;
  color: var(--lab-teal-dark);
  border-color: rgba(23, 134, 138, 0.5);
}

.lab-btn.secondary:hover {
  background: var(--lab-teal-soft);
}

.lab-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.lab-btn-hero {
  padding: 11px 24px;
  font-size: 1.05rem;
}

.lab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.lab-feedback {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: 6px;
  line-height: 1.5;
  animation: lab-appear 0.3s ease;
}

.lab-feedback:empty {
  display: none;
}

.lab-feedback.is-correct {
  background: var(--lab-teal-soft);
  color: var(--lab-teal-dark);
  border: 1px solid rgba(23, 134, 138, 0.35);
}

.lab-feedback.is-correct::before {
  content: "\2713  ";
  font-weight: 700;
}

.lab-feedback.is-wrong {
  background: var(--lab-red-soft);
  color: var(--lab-red-dark);
  border: 1px solid rgba(192, 57, 43, 0.3);
}

.lab-feedback.is-invalid,
.lab-feedback.is-shown {
  background: #f1efea;
  color: var(--lab-muted);
  border: 1px solid var(--lab-rule);
}

.lab-feedback p {
  margin: 0;
}

.lab-feedback p + p {
  margin-top: 6px;
}

/* The formula reminder after a wrong answer, in the page's text colour, and "Try again" */
.lab-reminder {
  color: var(--lab-text);
}

.lab-try-again {
  font-weight: 700;
}

.lab-note {
  font-size: 0.95rem;
}

.lab-step + .lab-step {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--lab-rule);
}

@keyframes lab-appear {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- formulas */

/* A symbol in a formula, such as the S of S with subscript T, in an italic serif like printed
   mathematics */
.lab-symbol {
  margin-right: 0.08em;            /* room for the italic letter's slant */
  font-family: "Cambria Math", Cambria, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.08em;
}

.lab-symbol-sub {
  margin-right: 0.15em;
  font-family: "Cambria Math", Cambria, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.72em;
}

/* A formula with the numbers put in, on its own line in a worked solution */
.lab-formula {
  margin: 6px 0 2px;
  padding: 6px 12px;
  background: #ffffff;
  border-left: 3px solid var(--lab-teal);
  border-radius: 0 6px 6px 0;
  color: var(--lab-navy);
  font-size: 1.04rem;
  font-weight: 400;
  overflow-x: auto;                /* a formula wider than a phone scrolls inside its box */
  overflow-y: hidden;
}

.lab-symbols {
  color: var(--lab-muted);
  font-size: 0.95rem;
}

/* The same symbols in a chart's legend */
.lab-svg-symbol {
  font-family: "Cambria Math", Cambria, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 14px;
}

.lab-svg-sub {
  font-family: "Cambria Math", Cambria, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 10px;
}

/* ---------------------------------------------------------------- charts, in the main site's chart style */

.lab-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.lab-slider-value {
  color: var(--lab-navy);
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lab-slider {
  width: 100%;
  margin: 6px 0 10px;
  accent-color: var(--lab-teal);
}

.lab-figure {
  background: var(--lab-cream);
  border-radius: 6px;
  padding: 6px 4px 0;
}

.lab-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

.lab-readout {
  margin: 10px 0 0;
  color: var(--lab-muted);
}

.lab-readout-line {
  display: block;
}

.lab-grid { stroke: var(--lab-rule); stroke-width: 1; }
.lab-zero { stroke: #a99a86; stroke-width: 1.4; }
.lab-tick { fill: #4a4a4a; font-size: 13px; font-family: var(--lab-body); }
.lab-axis-title { fill: #4a4a4a; font-size: 13px; font-family: var(--lab-body); }
.lab-legend { fill: var(--lab-ink); font-size: 13px; font-family: var(--lab-body); }
.lab-line-payoff { fill: none; stroke: var(--lab-teal); stroke-width: 3.5; stroke-linejoin: round; }
.lab-line-profit { fill: none; stroke: var(--lab-orange); stroke-width: 3.5; stroke-linejoin: round; }
.lab-line-expiry { fill: none; stroke: var(--lab-orange); stroke-width: 2.5; stroke-dasharray: 8 6; stroke-linejoin: round; }
.lab-normal-area { fill: var(--lab-teal-soft); stroke: none; }

/* The moving picture under each level's heading, on the start page and on the level's own page
   (lab-ui.js, levelSim) */
.lab-level-sim {
  position: relative;
  height: 110px;
  margin: 4px 0 14px;
  border-radius: 8px;
  background: var(--lab-cream);
  overflow: hidden;
}

.lab-level-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 575px) {
  .lab-level-sim { height: 84px; }
}
.lab-current { stroke: var(--lab-navy); stroke-width: 1.3; stroke-dasharray: 4 4; }
.lab-dot-payoff { fill: var(--lab-teal); stroke: #ffffff; stroke-width: 2; }
.lab-dot-profit { fill: var(--lab-orange); stroke: #ffffff; stroke-width: 2; }
.lab-value-payoff { fill: var(--lab-teal-dark); font-size: 15px; font-weight: 700; font-family: var(--lab-body); }
.lab-value-profit { fill: var(--lab-orange-dark); font-size: 15px; font-weight: 700; font-family: var(--lab-body); }
.lab-dot-breakeven { fill: #ffffff; stroke: var(--lab-navy); stroke-width: 2; }
.lab-breakeven-guide { stroke: var(--lab-navy); stroke-width: 1; stroke-dasharray: 2 3; }
.lab-label-breakeven { fill: var(--lab-navy); font-size: 13px; font-weight: 600; font-family: var(--lab-body); }

/* Buttons of which one is chosen, such as European and American, or a sold call and a sold put */
.lab-segmented {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 3px;
  background: #f1ebe1;
  border: 1px solid var(--lab-rule);
  border-radius: 8px;
}

.lab-segment {
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--lab-muted);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.lab-segment:hover {
  color: var(--lab-navy);
}

.lab-segment[aria-pressed="true"] {
  background: var(--lab-navy);
  color: #ffffff;
}

.lab-segment:focus-visible {
  outline: 3px solid rgba(23, 134, 138, 0.35);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------- the option calculator */

.lab-calc-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
}

.lab-calc-note {
  margin: 0 0 18px;
  color: var(--lab-muted);
  font-size: 0.98rem;
}

.lab-calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 24px;
  align-items: start;
}

.lab-calc-field {
  padding: 0 0 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f0e8dc;
}

.lab-calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.lab-calc-row .lab-label {
  margin: 0;
  color: var(--lab-ink);
  font-weight: 600;
}

.lab-calc-number {
  width: 6.5rem;
  padding: 5px 8px;
  font-size: 1.05rem;
  text-align: right;
}

.lab-calc-field .lab-slider {
  margin: 8px 0 2px;
}

.lab-calc-help {
  margin: 0;
  color: var(--lab-muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.lab-calc-label {
  margin: 0;
  color: var(--lab-teal-dark);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lab-calc-price {
  margin: 0 0 6px;
  color: var(--lab-navy);
  font-size: 2.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.lab-calc-part {
  margin: 0 0 4px;
  font-size: 0.98rem;
  line-height: 1.45;
}

.lab-calc-headline {
  margin-bottom: 14px;
}

.lab-calc-section {
  margin-top: 26px;
}

/* The Greeks, one to a row: the name, the value, and what the value means */
.lab-greeks {
  border-top: 1px solid var(--lab-rule);
}

.lab-greek {
  display: grid;
  grid-template-columns: 6rem 6rem minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 14px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--lab-rule);
}

.lab-greek-name {
  margin: 0;
  color: var(--lab-navy);
  font-family: var(--lab-heading);
  font-size: 1.1rem;
}

.lab-greek-value {
  margin: 0;
  color: var(--lab-teal-dark);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lab-greek-meaning {
  margin: 0;
  color: var(--lab-text);
  font-size: 0.98rem;
  line-height: 1.45;
}

.lab-calc-steps .lab-formula {
  overflow-x: auto;
}

.lab-calc-bar {
  display: none;
}

@media (max-width: 760px) {
  .lab-calc-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The price bar that stays at the top of the screen while the inputs scroll past, below the
     navbar while the navbar is shown (lab-ui.js sets --lab-navbar-shown) */
  .lab-calc-bar {
    display: block;
    position: sticky;
    top: var(--lab-navbar-shown, 0px);
    z-index: 5;
    margin: 0 -16px 14px;
    padding: 8px 16px;
    background: var(--lab-navy);
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
}

@media (max-width: 575px) {
  .lab-greek {
    grid-template-columns: 6rem minmax(0, 1fr);
  }

  .lab-greek-meaning {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------- the margin account, day by day */

.lab-table-scroll {
  overflow-x: auto;
}

.lab-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.lab-table th,
.lab-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--lab-rule);
  text-align: right;
  white-space: nowrap;
}

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

.lab-table th {
  color: var(--lab-muted);
  font-size: 0.88rem;
  font-weight: 600;
}

/* A day with a margin call */
.lab-table tr.is-call td {
  background: var(--lab-red-soft);
  color: var(--lab-red-dark);
}

/* ---------------------------------------------------------------- progress */

/* A level's progress on the start page: a thin bar and "2 of 5 mastered" */
.lab-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.lab-progress-bar {
  flex: 1 1 auto;
  max-width: 240px;
  height: 6px;
  background: #ece3d6;
  border-radius: 3px;
  overflow: hidden;
}

.lab-progress-fill {
  display: block;
  height: 100%;
  background: var(--lab-teal);
  transition: width 0.4s ease;
}

.lab-progress-text {
  color: var(--lab-muted);
  font-size: 0.9rem;
}

/* The link back to the last skill practised, under the hero's buttons */
.lab-continue {
  display: inline-block;
  margin-top: 18px;
  color: var(--lab-teal-light) !important;
  font-weight: 600;
  text-decoration: none;
}

.lab-continue:hover {
  text-decoration: underline;
}



.lab-mastery {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--lab-rule);
}

.lab-streak {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: var(--lab-muted);
}

.lab-pip {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--lab-teal);
  transition: background 0.3s ease;
}

.lab-pip.is-on {
  background: var(--lab-teal);
}

.lab-cases {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--lab-muted);
  font-size: 0.98rem;
}

.lab-cases li::before {
  content: "\25CB  ";
}

.lab-cases li.is-done {
  color: var(--lab-teal-dark);
}

.lab-cases li.is-done::before {
  content: "\2713  ";
}

.lab-goal,
.lab-mastered {
  margin: 12px 0 0;
  font-size: 0.98rem;
}

.lab-goal {
  color: var(--lab-muted);
}

.lab-mastered {
  color: var(--lab-teal-dark);
  font-weight: 700;
}

.lab-review {
  border-color: var(--lab-orange);
}

.lab-status-line {
  color: var(--lab-muted);
}

/* ---------------------------------------------------------------- the levels */

/* Each level is a section of the start page with its own heading, "Level 1: Payoffs and profit",
   so the contents list in the margin names every level; here each section is drawn as a card. Each
   level's own page (level-N/index.qmd) shows the same card under its title */
#levels section.level3,
.lab-level-page {
  margin: 0 0 14px;
  padding: 16px 20px;
  background: var(--lab-card);
  border: 1px solid var(--lab-rule);
  border-radius: 8px;
}

#levels h3 {
  margin: 0;
  font-size: 1.3rem;
}

#levels section.level3 p,
.lab-level-page p {
  margin: 4px 0 0;
  color: var(--lab-muted);
}

/* A link to a section of another page, such as "Back to the levels", opens the page with the
   navbar showing; the section stops below it, so its heading is not cut off */
main section[id] {
  scroll-margin-top: 32px;
}

/* A level that is not built yet: a plain background and a grey heading */
#levels section.level3.is-later {
  background: transparent;
}

#levels h3.is-later {
  color: var(--lab-muted);
}

.lab-skills {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.lab-skills li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 8px 0;
  border-top: 1px solid #f0e8dc;
}

.lab-skills a {
  font-weight: 600;
}

.lab-soon {
  color: var(--lab-muted);
  font-size: 0.92rem;
}

.lab-status {
  color: var(--lab-muted);
  font-size: 0.92rem;
}

.lab-status.is-started {
  color: var(--lab-orange-dark);
}

.lab-status.is-mastered {
  color: var(--lab-teal-dark);
  font-weight: 700;
}

/* ---------------------------------------------------------------- appearing as you scroll */

.lab-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.lab-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .lab-reveal { opacity: 1; transform: none; transition: none; }
  .lab-feedback, .lab-hint, .lab-solution { animation: none; }
}

/* ---------------------------------------------------------------- phones */

@media (max-width: 575px) {
  .lab-card {
    padding: 18px 16px;
  }

  .lab-hero {
    padding: 44px 0 44px;
  }

  .lab-hero-text {
    font-size: 1.05rem;
  }

  main h2 {
    font-size: 1.5rem;
  }

  /* Display formulas a little smaller, so the longest ones fit the width of a phone */
  mjx-container[display="true"] {
    font-size: 88% !important;
  }

  /* A formula cannot wrap, so one longer than a phone's width scrolls sideways on its own instead
     of widening the page: five lessons slid sideways by 21 to 287 pixels on a phone (2026-10-14) */
  main span.math.inline,
  main span.math.display {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    vertical-align: bottom;
    padding-bottom: 2px;
  }

  main span.math.display {
    display: block;
  }

  #levels section.level3,
  .lab-level-page {
    padding: 14px 16px;
  }
}

/* ---------------------------------------------------------------- the binomial tree, node by node */

.lab-tree-header {
  margin: 0.4rem 0 0.8rem;
}

.lab-tree-header .lab-formula {
  margin: 0.15rem 0;
}

.lab-tree-scroll {
  overflow-x: auto;
}

.lab-tree-figure svg {
  display: block;
  margin: 0 auto;
}

.lab-edge {
  stroke: var(--lab-frame);
  stroke-width: 1.5;
}

.lab-edge.is-active {
  stroke: var(--lab-teal);
  stroke-width: 3;
}

.lab-node rect {
  fill: var(--lab-card);
  stroke: var(--lab-frame);
  stroke-width: 1.5;
}

.lab-node.is-filled {
  cursor: pointer;
}

.lab-node.is-filled rect {
  stroke: var(--lab-navy);
}

.lab-node.is-early rect {
  stroke: var(--lab-orange);
  stroke-width: 2.5;
}

.lab-node.is-target rect {
  stroke: var(--lab-orange);
  stroke-width: 2;
  stroke-dasharray: 5 3;
}

.lab-node.is-selected rect {
  stroke: var(--lab-teal);
  stroke-width: 3;
  fill: var(--lab-teal-soft);
}

.lab-node:focus {
  outline: none;
}

.lab-node:focus-visible rect {
  stroke: var(--lab-teal);
  stroke-width: 3;
}

.lab-node text {
  font-family: var(--lab-body);
  font-size: 14px;
  fill: var(--lab-ink);
}

.lab-node .lab-node-value {
  fill: var(--lab-teal-dark);
  font-weight: 600;
}

.lab-node .lab-node-empty {
  fill: var(--lab-muted);
}

.lab-node-tag {
  font-family: var(--lab-body);
  font-size: 12px;
  font-weight: 600;
  fill: var(--lab-orange-dark);
  paint-order: stroke;
  stroke: var(--lab-card);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.lab-tree-time {
  font-family: var(--lab-body);
  font-size: 12px;
  fill: var(--lab-muted);
}

.lab-tree-status {
  margin: 0.6rem 0 0.2rem;
  font-weight: 600;
  color: var(--lab-navy);
}

.lab-tree-try .lab-question {
  margin-bottom: 0.3rem;
}

/* A power, such as the exponent of e: raised and smaller, without widening the line spacing */
.lab-power {
  font-size: 0.72em;
  line-height: 0;
  vertical-align: 0.55em;
}

.lab-svg-power {
  font-size: 0.75em;
}

.lab-tree-compact .lab-node text {
  font-size: 12.5px;
}

/* Math set by MathJax inside a widget's text: never broken inside, and the same colour as the
   text around it */
.lab-math {
  white-space: nowrap;
}

.lab-math mjx-container {
  margin: 0 !important;
}