/* Bio Y12 Module 7 — Component Styles */

.figma-link {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 8px 16px; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 700; color: #334155; text-decoration: none; margin: 10px 0; transition: background 0.15s;
}
.figma-link:hover {
  background: #f8fafc;
}
/* Adaptation cards */
    .adapt-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin: 14px 0;
}
.adapt-card {
  border-radius: 10px; padding: 18px 20px; border: 1px solid var(--tf-border); background: var(--tf-bg);
}
.adapt-card h5 {
  font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 800; color: var(--tf-head); margin-bottom: 10px;
}
.adapt-card ul {
  margin-left: 16px;
}
.adapt-card li {
  font-size: 13px; color: #555; line-height: 1.65; margin-bottom: 4px;
}
/* Error-spotting box */
    .error-box {
  background: #fff7ed; border: 2px solid #fed7aa; border-radius: 12px; padding: 20px 24px; margin: 14px 0;
}
.error-box h4 {
  font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #7c2d12; margin-bottom: 12px;
}
.error-box p, .error-box li {
  font-size: 14px; color: #555; line-height: 1.65;
}
.error-box ul {
  margin-left: 18px; margin-top: 6px;
}
.adapt-grid {
  grid-template-columns: 1fr;
}
.tl-dot {
  width: 40px; height: 40px; border-radius: 50%; background: var(--tf-bg); border: 3px solid var(--accent); display: flex; align-items: center; justify-content: center; font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 800; color: var(--tf-head); flex-shrink: 0;
}
.tl-content {
  flex: 1;
}
.tl-content h4 {
  font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 800; color: var(--h2-color); margin-bottom: 5px;
}
.tl-content p {
  font-size: 14px; color: #555; line-height: 1.6; margin: 0;
}
/* Postulates step boxes */
    .postulates {
  display: flex; flex-direction: column; gap: 10px; margin: 14px 0;
}
.postulate-step {
  display: flex; gap: 16px; align-items: flex-start; background: var(--tf-bg); border-radius: 10px; padding: 14px 18px; border-left: 4px solid var(--accent);
}
.step-body h5 {
  font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 800; color: var(--tf-head); margin-bottom: 4px;
}
.step-body p {
  font-size: 13px; color: #555; line-height: 1.55; margin: 0;
}
/* Transmission mode cards */
    .mode-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 14px 0;
}
.mode-card {
  border-radius: 10px; padding: 18px 20px;
}
.mode-card h5 {
  font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 800; margin-bottom: 10px;
}
.mode-card p {
  font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 6px;
}
.mode-card ul {
  margin-left: 14px; margin-top: 6px;
}
.mode-card li {
  font-size: 13px; color: #555; line-height: 1.65; margin-bottom: 3px;
}
/* Epidemic curve SVG */
    .epi-wrap {
  background: #fff; border: 1.5px solid var(--tf-border); border-radius: 12px; padding: 20px; margin: 14px 0; overflow-x: auto;
}
.epi-caption {
  font-size: 12px; color: #888; text-align: center; margin-top: 8px; font-style: italic;
}
.mode-grid {
  grid-template-columns: 1fr;
}
/* Method steps */
    .method-steps {
  display: flex; flex-direction: column; gap: 10px; margin: 14px 0;
}
.method-step {
  display: flex; gap: 16px; align-items: flex-start; background: var(--tf-bg); border-radius: 10px; padding: 14px 18px; border-left: 4px solid var(--accent);
}
/* Safety / risk table highlight */
    .risk-low {
  color: #064e3b; font-weight: 600;
}
.risk-med {
  color: #78350f; font-weight: 600;
}
/* Error box */
    .error-box {
  background: #fff7ed; border: 2px solid #fed7aa; border-radius: 12px; padding: 20px 24px; margin: 14px 0;
}
.error-box ul, .error-box ol {
  margin-left: 18px; margin-top: 6px;
}
.disease-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 14px 0;
}
.disease-card {
  border-radius: 10px; padding: 16px 18px;
}
.disease-card h5 {
  font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 800; margin-bottom: 8px;
}
.disease-card p {
  font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 5px;
}
.disease-card p:last-child {
  margin-bottom: 0;
}
.case-box {
  background: var(--tf-bg); border: 1.5px solid var(--tf-border); border-radius: 12px; padding: 20px 24px; margin: 14px 0;
}
.case-box h4 {
  font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 800; color: var(--tf-head); margin-bottom: 12px; letter-spacing: 0.06em; text-transform: uppercase;
}
.case-box p, .case-box li {
  font-size: 14px; color: #444; line-height: 1.7;
}
.case-box ul {
  margin-left: 18px; margin-top: 6px;
}
.response-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0;
}
.response-card {
  border-radius: 10px; padding: 18px 20px;
}
.response-card h5 {
  font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 800; margin-bottom: 10px;
}
.response-card ul {
  margin-left: 16px;
}
.response-card li {
  font-size: 13px; color: #555; line-height: 1.65; margin-bottom: 4px;
}
.error-box {
  background: #fff7ed; border: 2px solid #fed7aa; border-radius: 12px; padding: 20px 24px; margin: 14px 0;
}
.svg-wrap {
  background: #fff; border-radius: 12px; padding: 20px; margin: 14px 0; box-shadow: 0 1px 5px rgba(0,0,0,0.06); overflow-x: auto;
}
.error-box p {
  font-size: 14px; color: #444; line-height: 1.7;
}
.hist-block {
  background: var(--tf-bg); border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; padding: 18px 22px; margin: 14px 0;
}
.hist-block h4 {
  font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tf-head); margin-bottom: 8px;
}
.hist-block p {
  font-size: 14px; color: #444; line-height: 1.7;
}
.compare-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0;
}
.compare-card {
  border-radius: 10px; padding: 18px 20px;
}
.compare-card h4 {
  font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 800; margin-bottom: 10px;
}
.compare-card ul {
  margin-left: 16px;
}
.compare-card li {
  font-size: 13px; color: #555; line-height: 1.65; margin-bottom: 4px;
}
.mark-guide {
  font-size: 12px; color: #888; margin-bottom: 10px; padding: 8px 12px; background: #f9fafb; border-radius: 6px; border-left: 3px solid var(--tf-border);
}