/* Clinical Index (Quick Read) list + detail pages.
   Moved from the <style> blocks of clinical_index/list.html and clinical_index/detail.html (strict CSP).
   Both blocks are kept verbatim and in order; they only overlap on .line-clamp-2 (identical declarations).
   `main svg` (list only) is scoped to the list page via :where(), keeping its 0,0,2 specificity. */

/* ══ From clinical_index/list.html ══ */
/* ── Line clamp ── */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Section spacing (all padding self-contained — NOT relying on compiled Tailwind) ── */
.ci-hero-container  { padding-top: 3rem;   padding-bottom: 1.5rem; }
.ci-feat-section    { padding-top: 4rem;   padding-bottom: 1.5rem; }
.ci-browse-section  { padding-top: 2.5rem; padding-bottom: 3rem;   }
.ci-recent-section  { padding-top: 3rem;   padding-bottom: 3rem;   }
.ci-eeat-section    { padding-top: 1rem;   padding-bottom: 3rem;   }
.ci-cta-section     { padding-top: 2.5rem; padding-bottom: 4.5rem; }
.ci-topic-tabs      { margin-bottom: 2.5rem; }
.ci-topic-tabs .mh-utility-chip { flex: none; white-space: nowrap; }
@media (min-width: 640px) {
  .ci-hero-container  { padding-top: 4rem;   padding-bottom: 2rem; }
  .ci-feat-section    { padding-top: 5.5rem; padding-bottom: 2.5rem; }
  .ci-browse-section  { padding-top: 3rem;   padding-bottom: 4rem; }
  .ci-recent-section  { padding-top: 4rem;   padding-bottom: 4rem; }
  .ci-eeat-section    { padding-top: 1.5rem; padding-bottom: 4rem; }
  .ci-cta-section     { padding-top: 3rem;   padding-bottom: 5.5rem; }
  .ci-topic-tabs      { margin-bottom: 3rem; }
}
@media (min-width: 1024px) {
  .ci-hero-container  { padding-top: 5rem;   padding-bottom: 2.5rem; }
}

/* ── Hero ── */
.ci-hero { position: relative; overflow: hidden; isolation: isolate; }
.ci-hero__orb { position: absolute; border-radius: 9999px; pointer-events: none; }
.ci-hero__orb--1 { top: -2rem; left: 25%; width: 44rem; height: 44rem; background: radial-gradient(circle, rgba(0,217,255,0.13), transparent 60%); filter: blur(3rem); opacity: 0.5; z-index: -1; }
.ci-hero__orb--2 { bottom: -3rem; right: 0; width: 38rem; height: 38rem; background: radial-gradient(circle, rgba(124,58,237,0.15), transparent 60%); filter: blur(3rem); opacity: 0.4; z-index: -1; }

/* ── Reveal animation ── */
.ci-reveal { opacity: 0; transform: translateY(20px); animation: ciReveal 0.6s ease forwards; }
.ci-reveal--delay { animation-delay: 0.1s; }
@keyframes ciReveal { to { opacity: 1; transform: none; } }

/* ── Accent text/icon ── */
.ci-accent-icon { color: var(--mh-accent); flex-shrink: 0; }

/* ── Trust strip pills ── */
.ci-trust-pill {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.4rem 0.875rem; border-radius: 9999px; font-size: 0.72rem;
  background: var(--mh-surface-soft); border: 1px solid var(--mh-card-border);
  color: var(--mh-muted);
}

/* ── Search inputs ── */
.ci-search-icon {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--mh-muted);
}
.ci-search-icon--sm { left: 0.875rem; }
.ci-search-lg {
  width: 100%; background: var(--mh-surface-soft); border: 1px solid var(--mh-card-border);
  color: var(--mh-text); border-radius: 1rem; padding: 0.9rem 1.25rem 0.9rem 3rem;
  font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s;
}
.ci-search-lg:focus { outline: none; border-color: var(--mh-accent); box-shadow: 0 0 0 3px rgba(0,217,255,0.12); }
.ci-search-lg::placeholder { color: var(--mh-muted); opacity: 0.55; }
.ci-search-sm {
  width: 100%; background: var(--mh-surface-soft); border: 1px solid var(--mh-card-border);
  color: var(--mh-text); border-radius: 9999px; padding: 0.5rem 1.25rem 0.5rem 2.4rem;
  font-size: 0.875rem; transition: border-color 0.2s, box-shadow 0.2s;
}
.ci-search-sm:focus { outline: none; border-color: var(--mh-accent); box-shadow: 0 0 0 2px rgba(0,217,255,0.15); }
.ci-search-sm::placeholder { color: var(--mh-muted); opacity: 0.55; }

/* ── Section badge ── */
.ci-sect-badge {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
  background: var(--mh-surface-soft); border: 1px solid var(--mh-card-border);
  color: var(--mh-muted); padding: 0.2rem 0.65rem; border-radius: 0.5rem;
  white-space: nowrap;
}

/* ── Icon containers ── */
.ci-icon {
  width: 2.5rem; height: 2.5rem; min-width: 2.5rem; min-height: 2.5rem;
  border-radius: 0.75rem; display: flex; align-items: center; justify-content: center;
}
.ci-icon--accent { background: rgba(0,217,255,0.1); color: var(--mh-accent); }
.ci-icon--pink  { background: rgba(236,72,153,0.1); color: #ec4899; }
.ci-icon--indigo{ background: rgba(99,102,241,0.1); color: #818cf8; }

.ci-icon-lg {
  width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem;
  border-radius: 0.875rem; display: flex; align-items: center; justify-content: center;
}
.ci-icon-lg--accent { background: rgba(0,217,255,0.1); color: var(--mh-accent); }
.ci-icon-lg--pink  { background: rgba(236,72,153,0.1); color: #ec4899; }
.ci-icon-lg--indigo{ background: rgba(99,102,241,0.1); color: #818cf8; }

/* ── Featured cards ── */
.ci-feat-card {
  display: block; padding: 1.75rem; border-radius: 1.5rem; text-decoration: none;
  background: var(--mh-surface-soft); border: 1px solid var(--mh-card-border);
  position: relative; overflow: hidden; transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.ci-feat-card:hover { background: var(--mh-surface-strong); border-color: var(--mh-accent); transform: translateY(-2px); }
.ci-feat-card__hover {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.2s;
  background: radial-gradient(circle at top right, rgba(0,217,255,0.07), transparent 60%);
}
.ci-feat-card:hover .ci-feat-card__hover { opacity: 1; }
.ci-feat-badge {
  position: absolute; top: 1.25rem; right: 1.25rem;
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #f59e0b; background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2);
  padding: 0.2rem 0.5rem; border-radius: 9999px;
}
.ci-read-more { color: var(--mh-accent); }

/* ── List items ── */
.ci-item {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.25rem;
  border-radius: 1rem; text-decoration: none;
  background: var(--mh-surface-soft); border: 1px solid var(--mh-card-border);
  position: relative; overflow: hidden; transition: background 0.2s, border-color 0.2s;
}
.ci-item:hover { background: var(--mh-surface-strong); }
.ci-item--drug:hover { border-color: var(--mh-accent); }
.ci-item--cond:hover { border-color: #ec4899; }
.ci-item__hover {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.2s;
  background: radial-gradient(circle at right, rgba(0,217,255,0.05), transparent 60%);
}
.ci-item__hover--cond { background: radial-gradient(circle at right, rgba(236,72,153,0.05), transparent 60%); }
.ci-item:hover .ci-item__hover { opacity: 1; }
.ci-item__title { color: var(--mh-text); transition: color 0.2s; }
.ci-item--drug:hover .ci-item__title--drug { color: var(--mh-accent); }
.ci-item--cond:hover .ci-item__title--cond { color: #ec4899; }
.ci-chevron { color: var(--mh-muted); opacity: 0.4; transition: color 0.2s, transform 0.2s; }
.ci-item--drug:hover .ci-chevron--drug { color: var(--mh-accent); opacity: 1; transform: translateX(2px); }
.ci-item--cond:hover .ci-chevron--cond { color: #ec4899; opacity: 1; transform: translateX(2px); }

/* ── Featured badge (small, inline) ── */
.ci-featured-badge-sm {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #f59e0b; background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2);
  padding: 0.15rem 0.45rem; border-radius: 9999px; white-space: nowrap;
}

/* ── Empty states ── */
.ci-empty {
  padding: 2.5rem; text-align: center; border-radius: 1.25rem;
  border: 1px dashed var(--mh-card-border);
}
.ci-empty-icon {
  width: 3rem; height: 3rem; min-width: 3rem; min-height: 3rem;
  border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
}
.ci-empty-icon--accent { background: rgba(0,217,255,0.08); color: var(--mh-accent); opacity: 0.7; }
.ci-empty-icon--pink   { background: rgba(236,72,153,0.08); color: #ec4899; opacity: 0.7; }

/* ── E-E-A-T cards ── */
.ci-eeat-card {
  padding: 1.75rem; border-radius: 1.25rem;
  background: var(--mh-surface-soft); border: 1px solid var(--mh-card-border);
}

/* ── Recently updated cards ── */
.ci-recent-card {
  display: block; padding: 1.1rem 1.25rem; border-radius: 1rem; text-decoration: none;
  background: var(--mh-surface-soft); border: 1px solid var(--mh-card-border);
  transition: background 0.2s, border-color 0.2s;
}
.ci-recent-card:hover { background: var(--mh-surface-strong); border-color: var(--mh-accent); }

/* ── App CTA box ── */
.ci-cta-box {
  position: relative; overflow: hidden; border-radius: 1.5rem; text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(0,217,255,0.08));
  border: 1px solid var(--mh-card-border);
}
.ci-cta-box__orb {
  position: absolute !important; border-radius: 9999px; pointer-events: none;
  filter: blur(2.5rem); z-index: 0;
}
.ci-cta-box__orb--1 { top: -4rem; left: 25%; width: 16rem; height: 16rem; background: radial-gradient(circle, rgba(124,58,237,0.25), transparent 70%); opacity: 0.5; }
.ci-cta-box__orb--2 { bottom: -4rem; right: 20%; width: 16rem; height: 16rem; background: radial-gradient(circle, rgba(0,217,255,0.2), transparent 70%); opacity: 0.4; }
.ci-cta-box h3, .ci-cta-box p, .ci-cta-box a { position: relative; z-index: 1; }

/* ── prevent main SVGs from blowing up ── */
main:where(.ci-list-page) svg { max-width: 100%; }

/* ══ From clinical_index/detail.html ══ */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Meta strip (Reviewed by · Last Updated · Read) ── */
.ci-meta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--mh-card-border);
  border-bottom: 1px solid var(--mh-card-border);
  margin-bottom: 2.5rem;
}

.ci-meta-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.5rem 0;
}

.ci-meta-separator {
  width: 1px;
  height: 2rem;
  background: var(--mh-card-border);
  margin: 0 2rem;
  flex-shrink: 0;
}

.ci-meta-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mh-surface-soft);
  flex-shrink: 0;
  color: var(--mh-muted);
}

.ci-meta-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 0.375rem;
  color: var(--mh-muted);
  opacity: 0.6;
}

.ci-meta-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mh-text);
  line-height: 1;
}

/* On mobile, stack meta items vertically */
@media (max-width: 639px) {
  .ci-meta-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 0;
  }

  .ci-meta-separator {
    width: 100%;
    height: 1px;
    margin: 0;
  }
}

@media (min-width: 640px) {
  .ci-meta-strip {
    padding: 1.75rem 0;
  }

  .ci-meta-separator {
    margin: 0 2.5rem;
  }
}

/* ── Section spacing (Tailwind pt-12+, pb-24+, mt-16+ not in compiled CSS) ── */
/* body.mh-shell already pads for the fixed header */
.ci-detail-header {
  padding-top: 2.5rem;
  padding-bottom: 0.5rem;
}

.ci-detail-main {
  padding-top: 2rem;
  padding-bottom: 5rem;
}

.ci-detail-disclaimer {
  margin-top: 4rem;
}

.ci-detail-related {
  margin-top: 4rem;
  padding-top: 3rem;
}

.ci-detail-cta-wrap {
  margin-top: 4rem;
}

@media (min-width: 640px) {
  .ci-detail-header {
    padding-top: 4rem;
    padding-bottom: 0.5rem;
  }

  .ci-detail-main {
    padding-top: 2.5rem;
    padding-bottom: 6.5rem;
  }

  .ci-detail-disclaimer {
    margin-top: 5rem;
  }

  .ci-detail-related {
    margin-top: 5rem;
  }

  .ci-detail-cta-wrap {
    margin-top: 5rem;
  }
}

@media (min-width: 1024px) {
  .ci-detail-header {
    padding-top: 11rem;
  }
}

/* ── Related posts cards ── */
.ci-rel-card {
  display: block;
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  text-decoration: none;
  background: var(--mh-surface-soft);
  border: 1px solid var(--mh-card-border);
  position: relative;
  overflow: hidden;
  transition: background 0.2s, border-color 0.2s;
}

.ci-rel-card:hover {
  background: var(--mh-surface-strong);
  border-color: var(--mh-accent);
}

.ci-rel-card__hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  background: radial-gradient(circle at top right, rgba(0, 217, 255, 0.06), transparent 60%);
}

.ci-rel-card:hover .ci-rel-card__hover {
  opacity: 1;
}

.ci-rel-card__title {
  color: var(--mh-text);
  transition: color 0.2s;
}

.ci-rel-card:hover .ci-rel-card__title {
  color: var(--mh-accent-ink, var(--mh-accent));
}

.ci-rel-card__chevron {
  color: var(--mh-muted);
  opacity: 0.4;
  transition: color 0.2s, transform 0.2s;
}

.ci-rel-card:hover .ci-rel-card__chevron {
  color: var(--mh-accent);
  opacity: 1;
  transform: translateX(2px);
}

/* ── Detail app CTA ── */
.ci-detail-cta {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(0, 217, 255, 0.08));
  border: 1px solid var(--mh-card-border);
}

.ci-detail-cta__orb {
  position: absolute !important;
  border-radius: 9999px;
  pointer-events: none;
  filter: blur(2.5rem);
  z-index: 0;
}

.ci-detail-cta__orb--1 {
  top: -3rem;
  left: 30%;
  width: 12rem;
  height: 12rem;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.3), transparent 70%);
  opacity: 0.5;
}

.ci-detail-cta__orb--2 {
  bottom: -3rem;
  right: 30%;
  width: 12rem;
  height: 12rem;
  background: radial-gradient(circle, rgba(0, 217, 255, 0.25), transparent 70%);
  opacity: 0.4;
}

.ci-detail-cta h3,
.ci-detail-cta p,
.ci-detail-cta a {
  position: relative;
  z-index: 1;
}

/* ── Article typography ── */
.mh-clinical-content {
  font-size: 1.0625rem;
  line-height: 1.85;
}

.mh-clinical-content h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1.25rem;
  color: var(--mh-text);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--mh-card-border);
}

.mh-clinical-content h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  color: var(--mh-text);
}

.mh-clinical-content h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  color: var(--mh-text);
}

.mh-clinical-content p {
  color: var(--mh-muted);
  line-height: 1.85;
  margin-bottom: 1.5rem;
  transition: color 0.3s ease;
}

/* Theme-specific Typography Contrast */
[data-theme='light'] .mh-clinical-content p {
  color: var(--mh-text);
  font-weight: 400;
}

[data-theme='dark'] .mh-clinical-content p {
  color: var(--mh-muted-strong);
  font-weight: 400;
}

/* Ensuring lists also match the theme contrast */
[data-theme='light'] .mh-clinical-content li {
  color: var(--mh-text);
}

[data-theme='dark'] .mh-clinical-content li {
  color: var(--mh-muted-strong);
  font-weight: 400;
}

.mh-clinical-content ul,
.mh-clinical-content ol {
  padding-left: 0;
  margin-bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mh-clinical-content ul {
  list-style: none;
}

.mh-clinical-content li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--mh-muted);
  line-height: 1.7;
  transition: color 0.3s ease;
}

.mh-clinical-content ul li::before {
  content: '';
  position: absolute;
  left: 0.4rem;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mh-accent, #00d9ff);
}

.mh-clinical-content ol {
  list-style: decimal;
  padding-left: 1.5rem;
}

.mh-clinical-content ol li {
  padding-left: 0.5rem;
}

.mh-clinical-content strong {
  color: var(--mh-text);
  font-weight: 700;
}

[data-theme='dark'] .mh-clinical-content strong {
  color: #fff;
}

.mh-clinical-content em {
  font-style: italic;
}

.mh-clinical-content blockquote {
  border-left: 3px solid var(--mh-accent, #00d9ff);
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background: var(--mh-surface-soft);
  border-radius: 0 0.75rem 0.75rem 0;
  color: var(--mh-muted);
}

.mh-clinical-content a {
  color: var(--mh-accent, #00d9ff);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mh-clinical-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  font-size: 0.9rem;
  overflow-x: auto;
  display: block;
}

.mh-clinical-content th {
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--mh-surface-soft);
  border-bottom: 1px solid var(--mh-card-border);
  font-weight: 700;
  color: var(--mh-text);
}

.mh-clinical-content td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--mh-card-border);
  color: var(--mh-muted);
}

/* ── RTL overrides ── */
[dir="rtl"] .mh-clinical-content li {
  padding-left: 0;
  padding-right: 1.75rem;
}

[dir="rtl"] .mh-clinical-content ul li::before {
  left: auto;
  right: 0.4rem;
}

[dir="rtl"] .mh-clinical-content blockquote {
  border-left: none;
  border-right: 3px solid var(--mh-accent, #00d9ff);
  border-radius: 0.75rem 0 0 0.75rem;
}

/* ── Former inline styles: clinical_index/templates/clinical_index/list.html, clinical_index/templates/clinical_index/detail.html (strict CSP) ── */

/* Shared: headings that used style="color: var(--mh-text);" */
.ci-text-strong { color: var(--mh-text) !important; }

/* list.html */
.ci-count-dim { opacity: 0.55 !important; }
.ci-muted-soft { opacity: 0.6 !important; }
.ci-empty-search-icon { opacity: 0.4 !important; }

/* detail.html */
.ci-detail-hero { background: linear-gradient(180deg, rgba(124,58,237,0.06) 0%, transparent 100%) !important; }
.ci-detail-type-badge--drug {
  background: rgba(0,217,255,0.1) !important;
  color: var(--mh-accent-ink, var(--mh-accent)) !important;
  border: 1px solid rgba(0,217,255,0.2) !important;
}
.ci-detail-type-badge--condition {
  background: rgba(236,72,153,0.1) !important;
  color: #ec4899 !important;
  border: 1px solid rgba(236,72,153,0.2) !important;
}
.ci-detail-featured-badge {
  color: #f59e0b !important;
  background: rgba(245,158,11,0.1) !important;
  border: 1px solid rgba(245,158,11,0.2) !important;
}
.ci-detail-hero-img {
  width: 100% !important;
  height: auto !important;
  border-radius: 1rem !important;
  margin-bottom: 2rem !important;
}
.ci-detail-lead { border-bottom: 1px solid var(--mh-card-border) !important; }
.ci-detail-disclaimer-surface {
  background: var(--mh-surface-soft) !important;
  border: 1px solid var(--mh-card-border) !important;
}
.ci-detail-disclaimer-bar { background: linear-gradient(180deg, rgba(0,217,255,0.6), rgba(124,58,237,0.6)) !important; }
.ci-detail-disclaimer-icon {
  background: rgba(0,217,255,0.1) !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
}
.ci-detail-related-border { border-top: 1px solid var(--mh-card-border) !important; }
.ci-rel-type--drug { color: var(--mh-accent-ink, var(--mh-accent)) !important; }
.ci-rel-type--condition { color: #ec4899 !important; }

/* Workstream B (SEO2): "Drugs in this article" links to the public drug pages. */
.ci-detail-drugs { margin-block: 1.5rem; }
.ci-detail-drugs__list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.ci-detail-drugs__list a { display: inline-flex; padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--mh-card-border); color: var(--mh-accent); font-size: .9rem; }
.ci-detail-drugs__list a:hover { border-color: var(--mh-accent); }