/* Screen styles for the course module fragments (built from the PDF source).
   Everything is scoped to .module-body. Colours: navy and white only, plus a soft
   red/green tint on the weak/strong prompt boxes (the text calls it "the green box")
   and grey for code boxes. */

.module-body {
  --tint-grey: #F1F2F5;
  --tint-green: #EAF6EE;
  --tint-red: #FBEDED;
  --soft-line: 1px solid rgba(11, 31, 58, 0.18);
  font-size: 1.0625rem; line-height: 1.7; overflow-wrap: break-word;
}
.module-body section { margin: 0; padding: 0; } /* undo the sales page's section padding */

/* Heading block */
.module-body .tag {
  position: static; display: inline-block;
  background: var(--navy); color: var(--white);
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 12px;
}
.module-body h1 { font-size: clamp(2.5rem, 8vw, 3.75rem); font-weight: 500; margin: 20px 0 8px; }
.module-body .sub { font-family: var(--serif); font-size: clamp(1.25rem, 4vw, 1.625rem); margin: 0 0 16px; }
.module-body .meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; padding-bottom: 32px; border-bottom: var(--line); }
.module-body .meta span { border: var(--soft-line); padding: 2px 10px; font-size: 0.875rem; }

.module-body h2 { font-size: clamp(1.875rem, 5vw, 2.375rem); margin: 56px 0 12px; }
.module-body h3 { font-size: 1.5rem; margin: 32px 0 8px; }
.module-body p { margin: 0 0 16px; }
.module-body ul, .module-body ol { margin: 0 0 16px; padding-left: 24px; }
.module-body li { margin: 4px 0; }
.module-body a { text-underline-offset: 3px; }
.module-body i { font-style: italic; }

/* Code */
.module-body code {
  font-family: Consolas, "SFMono-Regular", Menlo, monospace; font-size: 0.9em;
  background: var(--tint-grey); padding: 1px 5px; overflow-wrap: anywhere;
}
.module-body pre {
  margin: 0; padding: 52px 18px 18px;
  font-family: Consolas, "SFMono-Regular", Menlo, monospace; font-size: 0.9375rem; line-height: 1.55;
  background: var(--tint-grey); color: var(--navy); border: var(--soft-line);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.module-body pre code { background: none; padding: 0; }
.module-body .prompt-box { position: relative; }
.module-body div.prompt-box:not(.strong) { margin: 16px 0 24px; }

/* Callout boxes */
.module-body .box { margin: 24px 0; padding: 18px 20px; background: var(--off-white); border: var(--line); }
.module-body .box.warn { border-left-width: 4px; }
.module-body .box.idea { background: var(--white); }
.module-body .box b.lbl, .module-body .ws .wsh {
  display: block; margin-bottom: 6px;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
}
.module-body .box > :last-child { margin-bottom: 0; }

/* Weak vs strong prompt */
.module-body .ws { margin: 28px 0; border: var(--line); }
.module-body .ws .wsh { margin: 0; padding: 10px 16px; background: var(--navy); color: var(--white); }
.module-body .ws .weak, .module-body .ws .strong { padding: 14px 16px; }
.module-body .ws .weak { background: var(--tint-red); border-bottom: var(--soft-line); }
.module-body .ws .strong { background: var(--tint-green); }
.module-body .ws .weak > b, .module-body .ws .strong > b {
  display: block; margin-bottom: 4px; padding-right: 140px; /* room for the copy button */
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
}
.module-body .ws .weak > b { padding-right: 0; }
.module-body .ws .why { padding: 12px 16px; border-top: var(--soft-line); font-size: 1rem; }

/* "Try it" */
.module-body .try { margin: 32px 0; padding: 24px; background: var(--navy); color: var(--white); }
.module-body .try h3 { margin-top: 0; color: var(--white); }
.module-body .try a { color: var(--white); }
.module-body .try code { background: rgba(255, 255, 255, 0.14); color: var(--white); }
.module-body .try > :last-child { margin-bottom: 0; }

/* Numbered steps and checklists */
.module-body .steps { list-style: none; padding-left: 0; counter-reset: s; }
.module-body .steps > li { counter-increment: s; position: relative; padding: 8px 0 8px 46px; border-top: var(--soft-line); }
.module-body .steps > li:last-child { border-bottom: var(--soft-line); }
.module-body .steps > li::before {
  content: counter(s); position: absolute; left: 0; top: 8px;
  width: 30px; height: 30px; line-height: 30px; text-align: center;
  background: var(--navy); color: var(--white); font-size: 0.875rem;
}
.module-body .check { list-style: none; padding-left: 0; }
.module-body .check li { padding-left: 30px; position: relative; }
.module-body .check li::before {
  content: ""; position: absolute; left: 0; top: 0.4em; width: 16px; height: 16px; border: var(--line);
}

/* Tables (members.js wraps each one in .table-scroll) */
.module-body .table-scroll { margin: 24px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: var(--line); border-bottom: var(--line); }
.module-body table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.module-body th, .module-body td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: var(--soft-line); min-width: 7rem; }
.module-body th { font-family: var(--sans); font-weight: 500; background: var(--off-white); border-bottom: var(--line); }
.module-body th:first-child { position: static; width: auto; box-shadow: none; }
.module-body tr:last-child td { border-bottom: 0; }
.module-body .cmp td, .module-body .cmp th { text-align: center; }
.module-body .cmp td:first-child, .module-body .cmp th:first-child { text-align: left; }
.module-body .cmp .mine { background: var(--navy); color: var(--white); }

/* Pictures, diagrams and placeholders */
.module-body img, .module-body svg { max-width: 100%; height: auto; }
.module-body .pic { margin: 28px 0; }
.module-body .pic img { display: block; margin: 0 auto; border: var(--soft-line); }
.module-body figcaption { margin-top: 8px; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.module-body .shot {
  margin: 24px 0; padding: 24px; text-align: center; font-size: 0.9375rem;
  border: 1px dashed var(--navy); background: var(--off-white);
}

/* Labels */
.module-body .tierref, .module-body .lockb, .module-body .pop {
  display: inline-block; padding: 0 8px; border: var(--line); white-space: nowrap;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.8; vertical-align: 0.1em;
}
.module-body .ph { border-bottom: 1px dashed var(--navy); }
.module-body .mono { font-family: Consolas, monospace; }

/* The PDF footer line */
.module-body .navbar { margin-top: 56px; padding-top: 12px; border-top: var(--soft-line); font-size: 0.8125rem; color: var(--muted); }

.module-body > :first-child { margin-top: 0; }