/* Bio Y11 Module 2 — Component Styles */

/* ── Hero with AI-generated background image ── */
.hero-has-image {
  position: relative;
  background-image: var(--hero-bg, none);
  background-size: cover;
  background-position: center right;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 10px 40px -10px rgba(5, 70, 64, 0.40);
}
.hero-has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(5, 46, 49, 0.93) 0%,
    rgba(5, 46, 49, 0.78) 35%,
    rgba(5, 46, 49, 0.22) 62%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
}
.hero-has-image .hero-top {
  position: relative;
  z-index: 2;
}
.hero-has-image h1 {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}
.hero-has-image .hero-desc {
  color: rgba(255, 255, 255, 0.9);
}
.hero-has-image .badge {
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.hero-has-image .hero-emoji { display: none; }
@media (max-width: 768px) {
  .hero-has-image { background-position: 70% center; }
  .hero-has-image::before {
    background: linear-gradient(
      90deg,
      rgba(5, 46, 49, 0.96) 0%,
      rgba(5, 46, 49, 0.88) 55%,
      rgba(5, 46, 49, 0.55) 100%
    );
  }
}

/* ── Patient File Component ── */
  .patient-file {
  background: #0f1117;
    border-radius: 10px;
    padding: 0;
    margin: 24px 0;
    overflow: hidden;
    font-family: 'DM Mono', monospace;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
.patient-file-header {
  background: #1a1f2e;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid #2a3050;
}
.patient-file-dot {
  width: 11px; height: 11px;
    border-radius: 50%;
}
.patient-file-dot.red {
  background: #ff5f57;
}
.patient-file-dot.amber {
  background: #febc2e;
}
.patient-file-dot.green {
  background: #28c840;
}
.patient-file-title {
  color: #8892a4;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-left: 4px;
}
.patient-file-body {
  padding: 22px 26px 26px;
    color: #c9d1e0;
    font-size: 13px;
    line-height: 1.9;
}
.patient-file-body .pf-label {
  color: #5b9bd5;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 16px;
    margin-bottom: 4px;
}
.patient-file-body .pf-value {
  color: #e2e8f4;
    font-size: 13.5px;
}
.patient-file-body .pf-highlight {
  color: #ff8c69;
    font-weight: 600;
}
.patient-file-body .pf-row {
  display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 4px;
}
.patient-file-body .pf-divider {
  border: none;
    border-top: 1px solid #2a3050;
    margin: 18px 0;
}
.patient-file-question {
  background: #1e2435;
    border-left: 3px solid #5b9bd5;
    padding: 14px 18px;
    margin-top: 18px;
    border-radius: 0 6px 6px 0;
    color: #a8b8d0;
    font-size: 13px;
    line-height: 1.7;
}
.patient-file-question strong {
  color: #5b9bd5;
}
/* ── Myth / Fact Grid ── */
  .myth-fact-grid {
  display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    margin: 20px 0;
    border: 1px solid var(--border);
}
.myth-fact-grid .mf-header {
  padding: 10px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.myth-fact-grid .mf-myth-header {
  background: #fee2e2;
    color: #991b1b;
    border-right: 1px solid #fca5a5;
}
.myth-fact-grid .mf-fact-header {
  background: #dcfce7;
    color: #166534;
}
.myth-fact-grid .mf-item {
  padding: 14px 18px;
    font-size: 13.5px;
    line-height: 1.7;
    border-top: 1px solid var(--border);
}
.myth-fact-grid .mf-myth-item {
  background: #fff5f5;
    color: #7f1d1d;
    border-right: 1px solid var(--border);
}
.myth-fact-grid .mf-fact-item {
  background: #f0fdf4;
    color: #14532d;
}
/* ── Digestion Stage Cards ── */
  .digestion-stage {
  display: grid;
    grid-template-columns: 52px 1fr;
    gap: 0 18px;
    margin: 18px 0;
    align-items: start;
}
.ds-icon {
  width: 52px; height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}
.ds-content h4 {
  font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
}
.ds-content p {
  font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}
.ds-content .ds-enzymes {
  display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.ds-enzyme-tag {
  font-size: 12px;
    font-family: 'DM Mono', monospace;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 500;
}
.tag-blue {
  background: #dbeafe; color: #1e40af;
}
.tag-green {
  background: #dcfce7; color: #166534;
}
.tag-amber {
  background: #fef3c7; color: #92400e;
}
.tag-purple {
  background: #f3e8ff; color: #6b21a8;
}
.tag-red {
  background: #fee2e2; color: #991b1b;
}
.ds-ph {
  font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    font-family: 'DM Mono', monospace;
}
.reveal-box {
  border: 2px dashed var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    margin: 16px 0;
    background: var(--surface-2);
}
.reveal-box .reveal-label {
  font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 8px;
}
.reveal-box p {
  font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}
/* ── Vertical Timeline ── */
  .vtl {
  position: relative;
    padding: 0 0 8px 0;
    margin: 24px 0;
}
.vtl::before {
  content: '';
    position: absolute;
    left: 28px;
    top: 16px;
    bottom: 16px;
    width: 3px;
    background: linear-gradient(to bottom, var(--primary), var(--success));
    border-radius: 3px;
}
.vtl-stop {
  display: grid;
    grid-template-columns: 60px 1fr;
    gap: 0 18px;
    margin-bottom: 32px;
    position: relative;
}
.vtl-stop:last-child {
  margin-bottom: 0;
}
.vtl-node {
  width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px var(--border), 0 2px 8px rgba(0,0,0,0.10);
    z-index: 1;
    position: relative;
    margin-top: 2px;
}
.vtl-body {
  padding-top: 6px;
    padding-bottom: 4px;
}
.vtl-body h4 {
  font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
}
.vtl-body p {
  font-size: 14px;
    color: var(--text-muted);
    line-height: 1.75;
    margin: 0 0 10px;
}
.vtl-body p:last-child {
  margin-bottom: 0;
}
.vtl-detail {
  background: var(--surface-2);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 10px;
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.7;
    border-left: 3px solid var(--border);
}
.vtl-detail strong {
  color: var(--text);
}
.vtl-tags {
  display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.vtl-tag {
  font-size: 11.5px;
    font-family: 'DM Mono', monospace;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 500;
}
.vtl-tag.blue {
  background: #dbeafe; color: #1e40af;
}
.vtl-tag.green {
  background: #dcfce7; color: #166534;
}
.vtl-tag.amber {
  background: #fef3c7; color: #92400e;
}
.vtl-tag.purple {
  background: #f3e8ff; color: #6b21a8;
}
.vtl-tag.red {
  background: #fee2e2; color: #991b1b;
}
.vtl-tag.slate {
  background: #f1f5f9; color: #475569;
}
/* ── Patient file (reused from L11 inline) ── */
  .patient-file {
  background: #0f1117;
    border-radius: 10px;
    padding: 0;
    margin: 24px 0;
    overflow: hidden;
    font-family: 'DM Mono', monospace;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
.pf-dot {
  width:11px; height:11px; border-radius:50%;
}
.pf-dot.red {
  background:#ff5f57;
}
.pf-dot.amber {
  background:#febc2e;
}
.pf-dot.green {
  background:#28c840;
}
.pf-title {
  color: #8892a4;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-left: 4px;
}
.pf-label {
  color: #5b9bd5;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 16px;
    margin-bottom: 4px;
}
.pf-value {
  color: #e2e8f4; font-size: 13.5px;
}
.pf-highlight {
  color: #28c840; font-weight: 600;
}
.pf-divider {
  border:none; border-top:1px solid #2a3050; margin:18px 0;
}
.pf-conclusion {
  background: #1a2e1a;
    border: 1px solid #28c840;
    border-radius: 6px;
    padding: 14px 18px;
    color: #86efac;
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.7;
}
/* ── Zoom-in structure box ── */
  .zoom-box {
  border: 2px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 18px 0;
    position: relative;
}
.zoom-box .zoom-label {
  position: absolute;
    top: -12px;
    left: 16px;
    background: white;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
}
.zoom-box-inner {
  border: 2px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 10px;
    position: relative;
}
.zoom-box-inner .zoom-label-inner {
  position: absolute;
    top: -11px;
    left: 14px;
    background: white;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--success);
}
.zoom-box-inner-2 {
  border: 2px solid var(--border);
    border-radius: 6px;
    padding: 12px 14px;
    margin-top: 10px;
    position: relative;
    background: var(--surface-2);
}
.zoom-box-inner-2 .zoom-label-inner-2 {
  position: absolute;
    top: -11px;
    left: 12px;
    background: var(--surface-2);
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.zoom-text {
  font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}
/* ── Split Panel ── */
  .split-panel {
  display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    margin: 22px 0;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.split-panel .sp-header {
  padding: 14px 20px 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sp-left-header {
  background: #1a3a2a; color: #86efac; border-right: 1px solid #2d5a3d;
}
.sp-right-header {
  background: #1a2a3a; color: #93c5fd;
}
.split-panel .sp-body {
  padding: 18px 20px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-muted);
}
.sp-left-body {
  background: #f0fdf4; border-right: 1px solid var(--border);
}
.sp-right-body {
  background: #eff6ff;
}
.sp-body ul {
  margin: 0; padding-left: 18px;
}
.sp-body ul li {
  margin-bottom: 6px;
}
.sp-body ul li:last-child {
  margin-bottom: 0;
}
.sp-body strong {
  color: var(--text);
}
.sp-left-cell {
  padding: 12px 20px;
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.7;
    background: #f0fdf4;
    border-right: 1px solid var(--border);
    border-top: 1px solid var(--border);
}
.sp-right-cell {
  padding: 12px 20px;
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.7;
    background: #eff6ff;
    border-top: 1px solid var(--border);
}
.sp-feature-label {
  grid-column: 1 / -1;
    padding: 8px 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}
.mf-myth-header {
  background: #fee2e2; color: #991b1b; border-right: 1px solid #fca5a5;
}
.mf-fact-header {
  background: #dcfce7; color: #166534;
}
.mf-myth-item {
  background: #fff5f5; color: #7f1d1d; border-right: 1px solid var(--border);
}
.mf-fact-item {
  background: #f0fdf4; color: #14532d;
}
/* ── Blood component cards ── */
  .blood-grid {
  display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 20px 0;
}
.blood-card {
  border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.blood-card-header {
  padding: 12px 16px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.blood-card-icon {
  font-size: 22px; line-height: 1;
}
.blood-card-header h4 {
  margin: 0; font-size: 15px; font-weight: 700;
}
.blood-card-header p {
  margin: 2px 0 0; font-size: 12px; opacity: 0.8;
}
.blood-card-body {
  padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-muted);
    background: var(--surface);
}
.blood-card-body ul {
  margin: 6px 0 0; padding-left: 18px;
}
.blood-card-body ul li {
  margin-bottom: 5px;
}
.bc-red   .blood-card-header {
  background: #fee2e2; color: #7f1d1d;
}
.bc-white .blood-card-header {
  background: #f1f5f9; color: #1e293b;
}
.bc-amber .blood-card-header {
  background: #fef3c7; color: #78350f;
}
.bc-blue  .blood-card-header {
  background: #dbeafe; color: #1e3a8a;
}
/* ── RBC Journey Timeline ── */
  .rbc-journey {
  position: relative;
    margin: 24px 0;
}
.rbc-journey::before {
  content: '';
    position: absolute;
    left: 30px;
    top: 20px;
    bottom: 20px;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(
      to bottom,
      #7f1d1d 0%, #7f1d1d 20%,
      #1e3a8a 20%, #1e3a8a 30%,
      #166534 30%, #166534 45%,
      #1e3a8a 45%, #1e3a8a 55%,
      #dc2626 55%, #dc2626 75%,
      #7f1d1d 75%, #7f1d1d 100%
    );
}
.rbc-stop {
  display: grid;
    grid-template-columns: 64px 1fr;
    gap: 0 16px;
    margin-bottom: 28px;
    position: relative;
}
.rbc-stop:last-child {
  margin-bottom: 0;
}
.rbc-node {
  width: 60px; height: 60px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
    border: 3px solid white;
    box-shadow: 0 0 0 3px var(--border), 0 2px 10px rgba(0,0,0,0.12);
    z-index: 1; position: relative; margin-top: 2px;
}
.rbc-node.deoxy {
  background: #7f1d1d;
}
.rbc-node.oxy {
  background: #dc2626;
}
.rbc-node.heart {
  background: #1e3a8a;
}
.rbc-node.lung {
  background: #166534;
}
.rbc-node.tissue {
  background: #78350f;
}
.rbc-body {
  padding-top: 8px;
}
.rbc-body h4 {
  font-size: 16px; font-weight: 700;
    color: var(--text);
    margin: 0 0 5px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.rbc-badge {
  font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 20px;
    font-family: 'DM Mono', monospace;
}
.badge-deoxy {
  background: #fee2e2; color: #991b1b;
}
.badge-oxy {
  background: #dcfce7; color: #166534;
}
.badge-heart {
  background: #dbeafe; color: #1e40af;
}
.badge-tissue {
  background: #fef3c7; color: #92400e;
}
.rbc-body p {
  font-size: 14px; color: var(--text-muted);
    line-height: 1.75; margin: 0 0 8px;
}
.rbc-body p:last-child {
  margin-bottom: 0;
}
.rbc-detail {
  background: var(--surface-2); border-radius: 8px;
    padding: 12px 16px; margin-top: 8px;
    font-size: 13.5px; color: var(--text-muted);
    line-height: 1.7; border-left: 3px solid var(--border);
}
.rbc-detail strong {
  color: var(--text);
}
/* ── Vessel Trio Cards ── */
  .vessel-trio {
  display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px; margin: 20px 0;
}
.vessel-card {
  border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border);
}
.vessel-card-header {
  padding: 14px 16px 12px; text-align: center;
}
.vessel-card-header .vc-icon {
  font-size: 28px; display: block; margin-bottom: 6px;
}
.vessel-card-header h4 {
  margin: 0; font-size: 15px; font-weight: 700;
}
.vessel-card-header p {
  margin: 4px 0 0; font-size: 12px; opacity: 0.8;
}
.vessel-card-body {
  padding: 14px 16px; background: var(--surface);
    font-size: 13.5px; color: var(--text-muted); line-height: 1.7;
}
.vessel-card-body ul {
  margin: 0; padding-left: 18px;
}
.vessel-card-body ul li {
  margin-bottom: 5px;
}
.vc-artery   .vessel-card-header {
  background: #fee2e2; color: #7f1d1d;
}
.vc-capillary .vessel-card-header {
  background: #fef3c7; color: #78350f;
}
.vc-vein     .vessel-card-header {
  background: #dbeafe; color: #1e40af;
}
/* ── Heart Diagram (text) ── */
  .heart-diagram {
  background: #0f1117; border-radius: 12px;
    padding: 24px; margin: 20px 0;
    font-family: 'DM Mono', monospace; font-size: 13px;
    line-height: 2; color: #c9d1e0; overflow-x: auto;
}
.heart-diagram .hd-title {
  color: #5b9bd5; font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px;
}
.hd-right {
  color: #93c5fd;
}
.hd-left {
  color: #86efac;
}
.hd-valve {
  color: #fcd34d;
}
.hd-sep {
  color: #475569;
}
/* ── Advantage Strip ── */
  .advantage-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; margin: 20px 0;
}
.adv-item {
  background: var(--surface-2); border-radius: 10px;
    padding: 16px; border-top: 3px solid var(--primary); text-align: center;
}
.adv-item .adv-icon {
  font-size: 26px; margin-bottom: 8px;
}
.adv-item h4 {
  font-size: 14px; font-weight: 700; margin: 0 0 6px; color: var(--text);
}
.adv-item p {
  font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.6;
}
/* ── Data-first inquiry components ── */
  .inquiry-prompt {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 12px;
    padding: 24px 28px;
    margin: 22px 0;
    color: #e2e8f4;
    border: 1px solid #334155;
}
.inquiry-prompt .iq-label {
  font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #60a5fa;
    font-family: 'DM Mono', monospace;
    margin-bottom: 10px;
}
.inquiry-prompt h3 {
  font-size: 18px;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 10px;
    font-family: 'DM Serif Display', serif;
}
.inquiry-prompt p {
  font-size: 14px;
    color: #94a3b8;
    line-height: 1.7;
    margin: 0;
}
.inquiry-prompt .iq-question {
  background: #1e3a5f;
    border-radius: 8px;
    padding: 14px 18px;
    margin-top: 16px;
    font-size: 14px;
    color: #93c5fd;
    line-height: 1.7;
    border-left: 3px solid #3b82f6;
}
.data-table {
  width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    font-family: 'DM Mono', monospace;
}
.data-table th {
  background: #1e293b;
    color: #93c5fd;
    padding: 10px 14px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid #334155;
}
.data-table td {
  padding: 10px 14px;
    text-align: center;
    border: 1px solid #e2e8f0;
    color: var(--text-muted);
}
.data-table tr:nth-child(even) td {
  background: var(--surface-2);
}
.data-table .highlight-high {
  color: #dc2626; font-weight: 700;
}
.data-table .highlight-low {
  color: #2563eb; font-weight: 700;
}
.data-table .location-col {
  font-weight: 600; color: var(--text); font-family: 'DM Sans', sans-serif;
}
/* ── Reveal section ── */
  .data-reveal {
  background: var(--surface-2);
    border-radius: 10px;
    border: 2px dashed var(--border);
    padding: 18px 20px;
    margin: 18px 0;
}
.data-reveal .dr-label {
  font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 8px;
    font-family: 'DM Mono', monospace;
}
.data-reveal p {
  font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}
/* ── Gradient bar for partial pressure ── */
  .gradient-bar-wrap {
  margin: 18px 0;
}
.gradient-bar-label {
  font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
}
.gradient-bar {
  height: 20px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.gradient-bar-track {
  position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 11px;
    font-family: 'DM Mono', monospace;
    color: white;
    font-weight: 600;
    justify-content: space-between;
}
.gb-o2 {
  background: linear-gradient(to right, #dc2626, #dc2626 40%, #7f1d1d);
}
.gb-co2 {
  background: linear-gradient(to right, #1e40af, #2563eb 60%, #3b82f6);
}
/* ── Stage-by-stage pathway cards ── */
  .pathway-steps {
  counter-reset: step;
    margin: 20px 0;
}
.pathway-step {
  display: grid;
    grid-template-columns: 44px 1fr;
    gap: 0 14px;
    margin-bottom: 20px;
    align-items: start;
}
.pathway-step:last-child {
  margin-bottom: 0;
}
.step-body h4 {
  font-size: 15px; font-weight: 700;
    color: var(--text); margin: 0 0 5px;
    padding-top: 10px;
}
.step-body p {
  font-size: 14px; color: var(--text-muted);
    line-height: 1.75; margin: 0;
}
/* ── Split Panel (reused pattern) ── */
  .split-panel {
  display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    margin: 22px 0;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.sp-header {
  padding: 14px 20px 12px;
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    display: flex; align-items: center; gap: 10px;
}
.sp-body {
  padding: 18px 20px; font-size: 14px;
    line-height: 1.75; color: var(--text-muted);
}
/* ── Vessel cross-section diagram ── */
  .vessel-diagram {
  background: #0f1117; border-radius: 12px;
    padding: 22px 26px; margin: 20px 0;
    font-family: 'DM Mono', monospace;
    font-size: 13px; color: #c9d1e0;
    overflow-x: auto;
}
.vessel-diagram .vd-title {
  color: #60a5fa; font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase;
    margin-bottom: 14px;
}
.vd-xylem {
  color: #86efac;
}
.vd-phloem {
  color: #fcd34d;
}
.vd-note {
  color: #94a3b8; font-size: 12px;
}
/* ── Pathway arrow steps ── */
  .water-pathway {
  display: flex; flex-direction: column; gap: 0;
    margin: 20px 0; position: relative;
}
.water-pathway::before {
  content: '';
    position: absolute;
    left: 22px; top: 30px; bottom: 30px;
    width: 3px; background: linear-gradient(to bottom, #0ea5e9, #10b981);
    border-radius: 3px;
}
.wp-step {
  display: grid; grid-template-columns: 48px 1fr;
    gap: 0 14px; margin-bottom: 0; position: relative;
}
.wp-arrow {
  width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 0 0 2px var(--border);
    z-index: 1; position: relative; margin: 2px 0;
}
.wp-content {
  padding: 10px 0 18px;
}
.wp-content h4 {
  font-size: 15px; font-weight: 700;
    color: var(--text); margin: 0 0 4px;
}
.wp-content p {
  font-size: 14px; color: var(--text-muted);
    line-height: 1.7; margin: 0;
}
.wp-tag {
  display: inline-block; font-size: 11px;
    font-family: 'DM Mono', monospace; font-weight: 600;
    padding: 2px 9px; border-radius: 20px; margin-top: 6px;
}
/* ── Source-sink diagram ── */
  .source-sink {
  display: grid; grid-template-columns: 1fr 60px 1fr;
    gap: 0; margin: 20px 0; align-items: stretch;
}
.ss-source, .ss-sink {
  border-radius: 10px; padding: 18px 16px;
    font-size: 13.5px; color: var(--text-muted); line-height: 1.7;
    border: 1px solid var(--border);
}
.ss-source {
  background: #f0fdf4; border-color: #86efac;
}
.ss-sink {
  background: #eff6ff; border-color: #93c5fd;
}
.ss-source h4 {
  color: #166534; font-size: 14px; font-weight: 700; margin: 0 0 8px;
}
.ss-sink   h4 {
  color: #1e40af; font-size: 14px; font-weight: 700; margin: 0 0 8px;
}
.ss-arrow {
  display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--text-muted); font-weight: 300;
}
/* ── Inquiry prompt ── */
  .inquiry-prompt {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 12px; padding: 24px 28px; margin: 22px 0;
    color: #e2e8f4; border: 1px solid #334155;
}
.data-table .row-label {
  font-weight: 700; color: var(--text); text-align: left; font-family: 'DM Sans', sans-serif;
}
.data-table .high {
  color: #dc2626; font-weight: 700;
}
.data-table .low {
  color: #2563eb; font-weight: 700;
}
/* ── Factor cards grid ── */
  .factor-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 14px; margin: 20px 0;
}
.factor-card {
  border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border);
}
.factor-card-header {
  padding: 12px 16px 10px;
    display: flex; align-items: center; gap: 12px;
}
.factor-icon {
  font-size: 24px;
}
.factor-card-header h4 {
  margin: 0; font-size: 15px; font-weight: 700;
}
.factor-card-header p {
  margin: 3px 0 0; font-size: 12px; opacity: 0.8;
}
.factor-card-body {
  padding: 14px 16px; background: var(--surface);
    font-size: 13.5px; color: var(--text-muted); line-height: 1.75;
}
.factor-card-body strong {
  color: var(--text);
}
.fc-temp   .factor-card-header {
  background: #fee2e2; color: #7f1d1d;
}
.fc-humid  .factor-card-header {
  background: #dbeafe; color: #1e40af;
}
.fc-wind   .factor-card-header {
  background: #f0fdf4; color: #166534;
}
.fc-light  .factor-card-header {
  background: #fef3c7; color: #78350f;
}
/* ── Potometer diagram ── */
  .potometer-diagram {
  background: #0f1117; border-radius: 12px; padding: 22px 26px;
    margin: 20px 0; font-family: 'DM Mono', monospace;
    font-size: 13px; color: #c9d1e0; overflow-x: auto;
}
.potometer-diagram .pd-title {
  color: #60a5fa; font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; margin-bottom: 14px;
}
.pd-plant {
  color: #86efac;
}
.pd-water {
  color: #93c5fd;
}
.pd-scale {
  color: #fcd34d;
}
.pd-note {
  color: #64748b; font-size: 12px;
}
/* ── Adaptation cards ── */
  .adaptation-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 14px; margin: 20px 0;
}
.adapt-card {
  border-radius: 10px; padding: 16px 18px;
    border: 1px solid var(--border); background: var(--surface-2);
}
.adapt-card h4 {
  font-size: 14px; font-weight: 700;
    color: var(--text); margin: 0 0 8px;
    display: flex; align-items: center; gap: 8px;
}
.adapt-card p {
  font-size: 13.5px; color: var(--text-muted);
    line-height: 1.7; margin: 0;
}
.adapt-card .adapt-effect {
  font-size: 12px; margin-top: 8px; padding: 6px 10px;
    border-radius: 6px; font-family: 'DM Mono', monospace;
}
.adapt-reduce {
  background: #dcfce7; color: #166534;
}
.adapt-increase {
  background: #fee2e2; color: #991b1b;
}
/* ── Split panel (consistent with L13, L14, L16) ── */
  .split-panel {
  display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    margin: 22px 0;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
/* ── Three-column split (for triple comparisons) ── */
  .triple-panel {
  display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    margin: 22px 0;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.tp-header {
  padding: 12px 16px 10px;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    text-align: center;
}
.tp-h1 {
  background: #1a3a2a; color: #86efac; border-right: 1px solid #2d5a3d;
}
.tp-h2 {
  background: #312a0a; color: #fcd34d; border-right: 1px solid #4a3f10;
}
.tp-h3 {
  background: #1a2438; color: #93c5fd;
}
.tp-cell {
  padding: 12px 16px; font-size: 13.5px;
    color: var(--text-muted); line-height: 1.7;
    border-top: 1px solid var(--border);
}
.tp-c1 {
  background: #f0fdf4; border-right: 1px solid var(--border);
}
.tp-c2 {
  background: #fefce8; border-right: 1px solid var(--border);
}
.tp-c3 {
  background: #eff6ff;
}
.tp-feature-label {
  grid-column: 1 / -1;
    padding: 8px 16px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted); background: var(--surface-2);
    border-top: 1px solid var(--border);
}
/* ── Similarity / difference cards ── */
  .sim-diff-grid {
  display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px; margin: 20px 0;
}
.sim-card, .diff-card {
  border-radius: 10px; padding: 18px 20px;
    border: 1px solid var(--border);
}
.sim-card {
  background: #f0fdf4; border-color: #86efac;
}
.diff-card {
  background: #fff7ed; border-color: #fed7aa;
}
.sim-card h4 {
  color: #166534; font-size: 14px; font-weight: 700; margin: 0 0 10px;
}
.diff-card h4 {
  color: #9a3412; font-size: 14px; font-weight: 700; margin: 0 0 10px;
}
.sim-card ul, .diff-card ul {
  margin: 0; padding-left: 18px;
    font-size: 13.5px; color: var(--text-muted); line-height: 1.8;
}
/* ── Zoom-in nested boxes (reused from L12) ── */
  .zoom-box {
  border-radius: 12px; overflow: hidden;
    margin: 20px 0; border: 2px solid var(--border);
}
.zoom-level {
  padding: 14px 20px; border-bottom: 1px solid var(--border);
    font-size: 14px; color: var(--text-muted); line-height: 1.7;
}
.zoom-level:last-child {
  border-bottom: none;
}
.zoom-level .zl-label {
  font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: 4px; font-family: 'DM Mono', monospace;
}
.zoom-level strong {
  color: var(--text);
}
/* ── Convergent evolution cards ── */
  .convergent-grid {
  display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px; margin: 20px 0;
}
.conv-card {
  border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border); text-align: center;
}
.conv-card-header {
  padding: 14px 12px 10px;
    font-size: 13px; font-weight: 700; color: white;
}
.conv-card-body {
  padding: 14px 14px; background: var(--surface);
    font-size: 13px; color: var(--text-muted); line-height: 1.7;
}
.conv-card-body strong {
  color: var(--text);
}
.cc-plant    .conv-card-header {
  background: #166534;
}
.cc-animal   .conv-card-header {
  background: #1e40af;
}
.cc-function .conv-card-header {
  background: #6b21a8;
}
.tl-content {
  padding-top: 8px;
}
.tl-content h4 {
  font-size: 15px; font-weight: 700;
    color: var(--text); margin: 0 0 5px;
}
.tl-content .tl-scientist {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--primary);
    font-family: 'DM Mono', monospace; margin-bottom: 6px;
}
.tl-content p {
  font-size: 14px; color: var(--text-muted);
    line-height: 1.75; margin: 0 0 8px;
}
.tl-revealed, .tl-limitation {
  background: var(--surface-2); border-radius: 8px;
    padding: 10px 14px; font-size: 13px;
    line-height: 1.65; margin-top: 6px;
}
.tl-revealed {
  border-left: 3px solid #166534; color: #166534;
}
.tl-limitation {
  border-left: 3px solid #dc2626; color: #991b1b;
}
.tl-revealed strong, .tl-limitation strong {
  display: block; font-size: 10px; letter-spacing: 0.08em;
    text-transform: uppercase; margin-bottom: 3px;
    font-family: 'DM Mono', monospace;
}
/* ── Source analysis box ── */
  .source-box {
  background: #fafafa;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    overflow: hidden;
    margin: 20px 0;
}
.source-box-header {
  background: #f3f4f6;
    padding: 10px 16px;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid #d1d5db;
}
.source-box-header .sb-type {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; font-family: 'DM Mono', monospace;
    color: var(--text-muted);
}
.source-box-header .sb-title {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.source-box-body {
  padding: 16px 18px;
    font-size: 14px; color: var(--text-muted);
    line-height: 1.8; font-style: italic;
    border-left: 4px solid #d1d5db;
    margin: 0;
}
.source-box-cite {
  padding: 8px 16px;
    font-size: 12px; color: var(--text-muted);
    font-family: 'DM Mono', monospace;
    background: #f9fafb; border-top: 1px solid #e5e7eb;
}
/* ── Model comparison ── */
  .model-evolution {
  display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; margin: 20px 0;
}
.model-card {
  border-radius: 10px; overflow: hidden; border: 1px solid var(--border);
}
.model-card-header {
  padding: 12px 14px 10px; text-align: center;
    font-size: 12px; font-weight: 700; color: white;
}
.model-card-body {
  padding: 14px 14px; background: var(--surface);
    font-size: 13px; color: var(--text-muted); line-height: 1.7;
}
.model-card-body strong {
  color: var(--text); font-size: 13.5px;
}
.mc-early  .model-card-header {
  background: #44403c;
}
.mc-mid    .model-card-header {
  background: #166534;
}
.mc-modern .model-card-header {
  background: #1e40af;
}
/* ── Evaluate claim strips ── */
  .claim-strip {
  background: #fef9c3; border: 1px solid #fde047;
    border-radius: 10px; padding: 16px 20px; margin: 16px 0;
}
.claim-strip .cs-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: #78350f;
    font-family: 'DM Mono', monospace; margin-bottom: 6px;
}
.claim-strip p {
  font-size: 14px; color: #451a03;
    line-height: 1.7; margin: 0; font-style: italic;
}
/* ── Split panel ── */
  .split-panel {
  display: grid; grid-template-columns: 1fr 1fr;
    gap: 0; border-radius: 12px; overflow: hidden;
    margin: 22px 0; border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
/* ── Synthesis flow diagram ── */
  .synthesis-flow {
  display: flex; flex-direction: column; gap: 0;
    margin: 20px 0; position: relative;
}
.sf-node {
  display: grid; grid-template-columns: 48px 1fr;
    gap: 0 14px; position: relative; margin-bottom: 8px;
}
.sf-icon {
  width: 46px; height: 46px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}
.sf-content {
  background: var(--surface-2); border-radius: 10px;
    padding: 12px 16px; border: 1px solid var(--border);
}
.sf-content h4 {
  font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 4px;
}
.sf-content p {
  font-size: 13.5px; color: var(--text-muted); line-height: 1.7; margin: 0;
}
/* ── IQ summary blocks ── */
  .iq-block {
  border-radius: 12px; padding: 20px 22px; margin: 16px 0;
    border: 1px solid var(--border);
}
.iq-block h3 {
  font-size: 16px; font-weight: 700; margin: 0 0 10px;
    display: flex; align-items: center; gap: 10px;
}
.iq-block p {
  font-size: 14px; color: var(--text-muted); line-height: 1.75; margin: 0;
}
.iq-block ul {
  margin: 8px 0 0; padding-left: 20px; font-size: 14px; color: var(--text-muted); line-height: 1.9;
}
.iq1 {
  background: #f5f3ff; border-color: #c4b5fd;
}
.iq1 h3 {
  color: #6d28d9;
}
.iq2 {
  background: #f0fdf4; border-color: #86efac;
}
.iq2 h3 {
  color: #166534;
}
.iq3 {
  background: #eff6ff; border-color: #93c5fd;
}
.iq3 h3 {
  color: #1e40af;
}
/* ── Extended response scaffold ── */
  .er-scaffold {
  background: #0f172a; border-radius: 12px; padding: 22px 26px;
    margin: 20px 0; font-family: 'DM Mono', monospace; font-size: 13px;
    color: #c9d1e0; border: 1px solid #334155;
}
.er-scaffold .ers-label {
  color: #60a5fa; font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; margin-bottom: 14px;
}
.er-scaffold .ers-step {
  margin-bottom: 12px; padding-left: 14px;
    border-left: 2px solid #334155; line-height: 1.8;
}
.er-scaffold .ers-step strong {
  color: #f1f5f9;
}
.er-scaffold .ers-marks {
  color: #fcd34d;
}
/* ── Concept map grid ── */
  .concept-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 14px; margin: 20px 0;
}
.concept-card {
  border-radius: 10px; padding: 16px 18px;
    border: 1px solid var(--border); background: var(--surface-2);
}
.concept-card h4 {
  font-size: 13px; font-weight: 700; margin: 0 0 8px;
    display: flex; align-items: center; gap: 8px;
}
.concept-card ul {
  margin: 0; padding-left: 16px;
    font-size: 12.5px; color: var(--text-muted); line-height: 1.8;
}
.cc-iq1 {
  border-left: 3px solid #7c3aed;
}
.cc-iq1 h4 {
  color: #6d28d9;
}
.cc-iq2 {
  border-left: 3px solid #166534;
}
.cc-iq2 h4 {
  color: #166534;
}
.cc-iq3 {
  border-left: 3px solid #1e40af;
}
.cc-iq3 h4 {
  color: #1e40af;
}
/* ── Glossary ── */
  .glossary-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 0; margin: 20px 0;
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.glossary-item {
  padding: 10px 16px; border-bottom: 1px solid var(--border);
    font-size: 13.5px;
}
.glossary-item:nth-child(even) {
  border-left: 1px solid var(--border);
}
.glossary-item strong {
  color: var(--text); display: block; font-size: 13px; margin-bottom: 2px;
}
.glossary-item span {
  color: var(--text-muted); line-height: 1.6; display: block;
}
/* ── Exam trap cards ── */
  .trap-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 14px; margin: 20px 0;
}
.trap-card {
  border-radius: 10px; overflow: hidden; border: 1px solid var(--border);
}
.trap-card-header {
  padding: 10px 14px; background: #7f1d1d; color: #fca5a5;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    font-family: 'DM Mono', monospace;
}
.trap-card-body {
  padding: 14px 14px; background: #fff5f5; border-top: none;
}
.trap-card-body .tc-wrong {
  font-size: 13px; color: #dc2626; margin: 0 0 8px;
    padding: 8px 12px; background: #fee2e2; border-radius: 6px; line-height: 1.6;
}
.trap-card-body .tc-right {
  font-size: 13px; color: #166534; margin: 0;
    padding: 8px 12px; background: #dcfce7; border-radius: 6px; line-height: 1.6;
}
.tc-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-family: 'DM Mono', monospace; display: block; margin-bottom: 3px;
}
/* ── Past paper question block ── */
  .past-q {
  background: #f8faff; border: 1px solid #bfdbfe;
    border-radius: 10px; padding: 16px 20px; margin: 14px 0;
}
.past-q .pq-source {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: #1e40af;
    font-family: 'DM Mono', monospace; margin-bottom: 6px;
}
.past-q p {
  font-size: 14px; color: var(--text); line-height: 1.75; margin: 0 0 6px;
}
.past-q .pq-marks {
  font-size: 12px; color: var(--text-muted); font-family: 'DM Mono', monospace;
}