/* =============================================================
   components.css  –  shared component styles
   Auto-generated from inline <style> blocks shared across
   multiple pages. Each file that uses these classes links to
   this stylesheet; page-specific rules stay inline.
   =============================================================
   Pages that share each section are noted in the comment.
*/

/* -----------------------------------------------------------
   Shared by: ClinicalReasoning, DDx
   -----------------------------------------------------------
*/

.balance-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 3rem;
}

.balance-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.balance-list li {
  font-size: var(--fs-sm);
  padding: 0.55rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  line-height: 1.5;
  color: var(--primary);
}

.balance-side {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--bs-medium);
}

.balance-side-body {
  background: var(--paper);
  padding: 1.2rem 1.4rem;
}

.balance-side-head {
  padding: 1rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.balance-side-head h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-base);
}

.balance-side.against .balance-list li::before {
  content: "−";
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
}

.balance-side.for .balance-list li::before {
  content: "+";
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
}

.balance-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.balance-table-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.8rem;
}

.balance-table-wrap {
  background: var(--paper);
  padding: 1.4rem 1.8rem;
}

.bs-icon {
  font-size: var(--fs-xl);
  flex-shrink: 0;
}

.bs-tag {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-md);
  margin-left: auto;
}

.bt-col {
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--bs-medium);
}

.bt-col-body {
  background: var(--paper);
}

.bt-col-head {
  padding: 0.6rem 1rem;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bt-col.against-col .bt-col-head {
  background: var(--background);
  color: var(--primary);
  border-bottom: 1px solid var(--border);
}

.bt-col.against-col .bt-item::before {
  content: "−";
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
}

.bt-col.for-col .bt-col-head {
  background: var(--background);
  color: var(--primary);
  border-bottom: 1px solid var(--border-light);
}

.bt-col.for-col .bt-item::before {
  content: "+";
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
}

.bt-item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  padding: 0.6rem 1rem;
  line-height: 1.5;
}

.def-body {
  background: var(--paper);
  padding: 1.4rem 1.8rem;
}

.def-head small {
  font-family: "Source Sans Pro", sans-serif;
  display: block;
  margin-top: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--primary);
}

.def-note {
  background: var(--background);
  padding: 0.9rem 1.8rem;
  font-size: var(--fs-sm);
  color: var(--primary);
  line-height: 1.6;
}

.def-note strong {
  color: var(--primary);
  font-style: normal;
}

.def-obligation {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.def-obligation .do-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.2rem;
}

.definition-block .def-head::after {
  content: "" " ";
  position: absolute;
  right: 1rem;
  top: -1rem;
  font-family: var(--font-display);
  font-size: var(--fs-watermark);
  font-weight: 600;
  color: rgba(232, 200, 154, 0.08);
  pointer-events: none;
  line-height: 1;
}

.do-item {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  font-size: var(--fs-sm);
  padding: 0.6rem 0;
  line-height: 1.6;
}

.do-item::before {
  content: "→";
  color: var(--muted);
  flex-shrink: 0;
  font-size: var(--fs-sm);
}

.example-head .ex-num-pill {
  background: var(--primary);
  color: var(--paper);
  font-size: var(--fs-xs);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-md);
  letter-spacing: var(--ls-widest);
  flex-shrink: 0;
}

.example-verdict {
  background: var(--background);
  padding: 1rem 1.8rem;
  font-size: var(--fs-sm);
  color: var(--primary);
  line-height: 1.7;
}

.example-verdict .verd-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--primary);
  display: block;
  margin-bottom: 0.4rem;
}

.example-verdict strong {
  color: var(--primary);
}

/* ── Apple dark-section style for the bedside tool ── */
.four-q-block {
  background: var(--primary); /* near-black: Apple product-spotlight style */
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-5);
  margin-bottom: var(--space-6);
  color: var(--background);
  position: relative;
  overflow: hidden;
}

.four-q-block .fq-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.5rem;
  font-weight: 400;
}

.four-q-block .fq-subtitle {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.four-q-block h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-md);
  margin-bottom: 0.5rem;
  color: var(--paper);
}

.four-q-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.four-q-note {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
}

.four-q-note strong {
  color: var(--paper);
  font-weight: 600;
}

.fq-card {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
}

.fq-card .fq-num {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 300;
  color: var(--text-on-dark);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.fq-card h4 {
  font-size: var(--fs-base);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0.4rem;
  font-weight: 500;
}

.fq-card p {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
}

.pr-content h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-base);
  margin-bottom: 0.3rem;
}

.pr-content p {
  font-size: var(--fs-sm);
  color: var(--primary);
  line-height: 1.6;
}

.pr-content p strong {
  color: var(--primary);
}

.pr-rank {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 500;
  flex-shrink: 0;
  margin-top: 2px;
}

.pres-col {
  padding: 1.4rem 1.6rem;
}

.pres-col .pc-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: block;
}

.pres-col p {
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--primary);
  font-style: italic;
}

.pres-col:first-child .pc-label {
  color: var(--primary);
}

.pres-col:last-child .pc-label {
  color: var(--muted);
}

.pres-col:last-child p {
  color: var(--primary);
  font-style: normal;
}

.presentation-block {
  box-shadow: var(--bs-medium);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 3rem;
}

.presentation-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper);
}

.presentation-head {
  background: var(--background);
  padding: 1.2rem 1.8rem;
}

.presentation-head .ph-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.3rem;
}

.presentation-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-md);
}

.presentation-note {
  background: var(--background);
  padding: 0.9rem 1.8rem;
  font-size: var(--fs-sm);
  color: var(--primary);
  line-height: 1.6;
}

.presentation-note strong {
  color: var(--primary);
}

.priority-block {
  box-shadow: var(--bs-medium);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 3rem;
}

.priority-head {
  background: var(--background);
  padding: 1.2rem 1.8rem;
}

.priority-head .ph-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.3rem;
}

.priority-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-md);
}

.priority-note {
  background: var(--background);
  padding: 0.9rem 1.8rem;
  font-size: var(--fs-sm);
  color: var(--primary);
  line-height: 1.6;
}

.priority-note strong {
  color: var(--primary);
}

.priority-row {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.1rem 1.8rem;
  transition: background 0.15s;
}

.priority-row:hover {
  background: var(--background);
}

.priority-row:last-child {
  border-bottom: none;
}

.priority-row .pr-content h4 {
  color: var(--primary);
}

.priority-row .pr-rank {
  background: var(--background);
  color: var(--primary);
}

.priority-rows {
  background: var(--paper);
}

/* -----------------------------------------------------------
   Shared by: Questioning, Narration
   -----------------------------------------------------------
*/

.ba-col {
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.ba-col .ba-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  font-weight: 500;
  display: block;
  margin-bottom: 0.3rem;
}

.ba-col.after {
  background: var(--background);
  color: var(--primary);
  box-shadow: var(--bs-medium);
}

.ba-col.after .ba-label {
  color: var(--muted);
}

.ba-col.before {
  background: var(--background);
  box-shadow: var(--bs-medium);
  color: var(--primary);
  font-style: italic;
}

.ba-col.before .ba-label {
  color: var(--primary);
}

.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: 0.8rem;
}

.dist-divider {
  text-align: center;
  color: var(--primary);
  font-size: var(--fs-xl);
}

.dist-side .ds-type {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  display: block;
  font-weight: 600;
}

.dist-side h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-md);
  margin-bottom: 0.4rem;
}

.dist-side p {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  line-height: 1.6;
}

.dist-side:first-child .ds-type {
  color: var(--muted);
}

.dist-side:first-child h3 {
  color: var(--primary);
}

.dist-side:last-child .ds-type {
  color: var(--muted);
}

.dist-side:last-child h3 {
  color: var(--primary);
}

.distinction-block {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
  margin-bottom: 3rem;
  color: var(--paper);
  position: relative;
  overflow: hidden;
  box-shadow: var(--bs-medium);
}

.distinction-block .db-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-huge);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.distinction-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
}

.impact-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--bs-medium);
}

.impact-card-head {
  padding: 0.9rem 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.impact-card-head .ic-icon {
  font-size: var(--fs-base);
  flex-shrink: 0;
}

.impact-card-head h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-base);
}

.impact-card.good .impact-card-head {
  background: var(--background);
}

.impact-card.good .impact-card-head h4 {
  color: var(--primary);
}

.impact-card.good .impact-item::before {
  content: "✔";
  color: var(--primary);
  font-size: var(--fs-xs);
  flex-shrink: 0;
}

.impact-card.poor .impact-card-head {
  background: var(--background);
}

.impact-card.poor .impact-card-head h4 {
  color: var(--primary);
}

.impact-card.poor .impact-item::before {
  content: "✘";
  color: var(--primary);
  font-size: var(--fs-xs);
  flex-shrink: 0;
}

.impact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 3rem;
}

.impact-item {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.5rem 1.3rem;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.impact-item:last-child {
  border-bottom: none;
}

.impact-items {
  background: var(--paper);
  padding: 0.5rem 0;
}

.sr-content {
  padding: 1.1rem 1.4rem;
}

.sr-content .sc-example {
  font-size: var(--fs-xs);
  color: var(--primary);
  font-style: italic;
  border-left: 2px solid var(--border-light);
  padding-left: 0.6rem;
  margin-top: 0.4rem;
}

.sr-content p {
  font-size: var(--fs-sm);
  color: var(--primary);
  line-height: 1.65;
  margin-bottom: 0.3rem;
}

.sr-content p strong {
  color: var(--primary);
}

.sr-name {
  padding: 1.1rem 1rem;
}

.sr-name .sn-tag {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--primary);
}

.sr-name h4 {
  font-weight: 500;
  font-size: var(--fs-base);
  color: var(--primary);
  margin-bottom: 0.2rem;
}

.sr-num {
  padding: 1.1rem 0.8rem 1.1rem 1.2rem;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 300;
  color: var(--muted);
  line-height: 1;
  padding-top: 1.3rem;
}

.step-body {
  padding: 1.2rem 1.5rem;
}

.step-body p {
  font-size: var(--fs-sm);
  color: var(--primary);
  line-height: 1.75;
  margin-bottom: 0.8rem;
}

.step-body p strong {
  color: var(--primary);
}

.step-body p:last-child {
  margin-bottom: 0;
}

.step-circle {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 500;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  box-shadow: var(--bs-medium);
  color: var(--background);
}

.step-content {
  background: var(--paper);
  box-shadow: var(--bs-medium);
  border-radius: var(--radius-md);
  margin: 0.6rem 0 0.6rem 1rem;
  overflow: hidden;
}

.step-content:hover {
  box-shadow: var(--bs-heavy);
}

.step-head {
  padding: 1.1rem 1.5rem;
  background: var(--master);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.step-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-md);
}

.step-item {
  display: grid;
  grid-template-columns: 4.3rem 1fr;
  gap: 0;
  position: relative;
  z-index: 1;
}

.step-item .step-circle {
  background: var(--primary);
}

.step-item .step-tag {
  color: var(--muted);
}

.step-num-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.6rem;
}

.step-tag {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.steps-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 3rem;
  position: relative;
}

.steps-flow::before {
  content: "";
  position: absolute;
  left: 2.15rem;
  top: 3.5rem;
  bottom: 3.5rem;
  width: 2px;
  background: var(--border);
  z-index: 0;
}

.structure-block {
  box-shadow: var(--bs-medium);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 3rem;
}

.structure-head {
  background: var(--background);
  padding: 1.2rem 1.8rem;
}

.structure-head .sh-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.3rem;
}

.structure-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-md);
}

.structure-note {
  background: var(--background);
  padding: 0.9rem 1.8rem;
  font-size: var(--fs-sm);
  color: var(--primary);
  line-height: 1.6;
}

.structure-note strong {
  color: var(--primary);
}

.structure-rows {
  background: var(--paper);
}
.structure-row {
  display: grid;
  grid-template-columns: 3rem 1fr 2fr;
  align-items: start;
  transition: background 0.15s;
}

.structure-row:hover {
  background: var(--background);
}

.structure-row:last-child {
  border-bottom: none;
}

.structure-row h4 {
  color: var(--primary);
}

.trans-arrow-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.5rem;
}

.trans-arrow-col .ta-arrow {
  font-size: var(--fs-xl);
  color: var(--primary);
  display: block;
  margin-bottom: 0.3rem;
}

.trans-arrow-col .ta-inner {
  text-align: center;
}

.trans-arrow-col .ta-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--primary);
  display: block;
  line-height: 1.4;
}

.trans-col {
  padding: 1.8rem;
}

.trans-col .tc-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--border);
  display: block;
}

.trans-col .tc-role {
  font-size: var(--fs-sm);
  color: var(--primary);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.trans-col.clinical .tc-label {
  color: var(--muted);
}

.trans-col.clinical p {
  color: var(--primary);
  font-style: normal;
  background: var(--surface-subtle);
  border-color: var(--border-light);
}

.trans-col.raw .tc-label {
  color: var(--primary);
}

.trans-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  background: var(--paper);
}

.trans-head {
  background: var(--background);
  color: var(--paper);
  padding: 1.2rem 1.8rem;
  border-bottom: 1px solid rgba(232, 200, 154, 0.2);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.trans-head .tag-pill {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.trans-note {
  background: var(--background);
  padding: 1rem 1.8rem;
  font-size: var(--fs-sm);
  color: var(--primary);
  line-height: 1.6;
  text-align: center;
}

.trans-note strong {
  color: var(--primary);
}

.transformation-block {
  box-shadow: var(--bs-medium);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 3rem;
}

/* -----------------------------------------------------------
   Shared by: Uncertainty, VisitRevisit
   -----------------------------------------------------------
*/

.mc-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--bs-medium);
}

.mc-card-body {
  background: var(--paper);
  padding: 1.1rem 1.4rem;
}

.mc-card-head {
  padding: 1rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.mc-card-head h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-base);
}

.mc-card.right .mc-card-head {
  background: var(--background);
}

.mc-card.right .mc-card-head h4 {
  color: var(--primary);
}

.mc-card.wrong .mc-card-head {
  background: var(--background);
}

.mc-card.wrong .mc-card-head h4 {
  color: var(--primary);
}

.mc-icon {
  font-size: var(--fs-base);
  flex-shrink: 0;
}

.misconception-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 3rem;
}

/* -----------------------------------------------------------
   Shared by: ClinicalReasoning, DDx, ExaminationIsNotRitual
   -----------------------------------------------------------
*/

.example-block {
  box-shadow: var(--bs-medium);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.example-head {
  background: var(--background);
  padding: 1.2rem 1.8rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.example-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-md);
}

.example-scenario {
  background: var(--paper);
  padding: 1.2rem 1.8rem;
  font-size: var(--fs-sm);
  color: var(--primary);
  line-height: 1.7;
}

.example-scenario strong {
  color: var(--primary);
}

/* -----------------------------------------------------------
   Shared by: Adjectives, Summary
   -----------------------------------------------------------
*/

.ec-num {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 300;
  color: var(--primary);
  flex-shrink: 0;
}

.example-card {
  box-shadow: var(--bs-medium);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.example-three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--paper);
}

.examples-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
}

/* -----------------------------------------------------------
   Shared by: Examination as Hypothesis Testing, Investigations
   -----------------------------------------------------------
*/

.checklist-block .cb-subtitle {
  font-size: var(--fs-xs);
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  letter-spacing: var(--ls-wider);
}

.checklist-note {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(232, 200, 154, 0.15);
  font-size: var(--fs-xs);
  color: var(--text-primary);
  line-height: 1.7;
}

/* -----------------------------------------------------------
   Shared utility — inline-list (replaces repeated inline styles)
   -----------------------------------------------------------
*/

/* Indented body-text list used inside card bodies and callouts */
.module-list {
  font-size: var(--fs-sm);
  color: var(--primary);
  margin-left: 1.2rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* -----------------------------------------------------------
   Shared by: BeDefensible, ClinicalReasoning, DDx
   -----------------------------------------------------------
*/

.definition-block {
  box-shadow: var(--bs-medium);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 3rem;
}