/* Generated by scripts/build_public_css.py from: css/clinical-index.css, css/orbs.css, css/quick-read-pro.css. Do not edit; edit the sources and rebuild. */
/* ---- css/clinical-index.css ---- */
/* 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;
}

/* Reviewer byline (name once, with credentials): a full row of its own, wrapped text, start-aligned. */
.ci-meta-strip { text-align: start; column-gap: 1.75rem; }
.ci-meta-item--reviewer { flex: 1 1 100%; }
.ci-meta-value--byline { line-height: 1.45; font-weight: 600; }

/* 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;
}

/* Wide tables scroll inside their own region (the detail template wraps every table): the page never scrolls
   sideways and no column is cut off at the screen edge (web QA 2026-10-24, H1). */
.mh-clinical-content .mh-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 2rem;
  border-radius: 0.75rem;
}
/* Edge fade (web QA 2026-10-25, QA-10): js/table-scroll.js marks the side(s) that still hide columns; a mask fades that
   edge, so the cut-off column reads as "more this way". No colour is assumed: the mask works on any background. */
.mh-clinical-content .mh-table-scroll.has-more-right:not(.has-more-left) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
.mh-clinical-content .mh-table-scroll.has-more-left:not(.has-more-right) {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
}
.mh-clinical-content .mh-table-scroll.has-more-left.has-more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}
.mh-clinical-content .mh-table-scroll:focus-visible {
  outline: 2px solid var(--mh-accent, #00d9ff);
  outline-offset: 2px;
}
.mh-clinical-content .mh-table-scroll > table {
  display: table;
  margin-bottom: 0;
  overflow: visible;
}
@media (max-width: 639px) {
  /* Columns keep a readable width and the region scrolls, instead of squeezing words to one per line. */
  .mh-clinical-content .mh-table-scroll :is(th, td) { min-width: 8.5rem; }
}

.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.78 !important; }  /* 0.55 was 3.8:1 on light chips (live QC) */
.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); }
/* ---- css/orbs.css ---- */
/* The app's glowing orbs (signed-out redesign: calmer, no purple, no dot grid; DESIGN.md 3) behind the signed-out marketing pages (Home/_orbs.html in block page_backdrop:
 * the layer is fixed and pointer-events: none). Theme-aware; the slow drift stops with reduced motion. */
.hm-orbs { position: absolute; inset: 0; overflow: hidden; }
.hm-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; will-change: transform; }
.hm-orb--a { width: 46vmax; height: 46vmax; top: -18vmax; inset-inline-end: -12vmax; background: radial-gradient(circle, rgba(0, 217, 255, .55), rgba(0, 217, 255, 0) 68%); animation: hm-drift-a 28s ease-in-out infinite alternate; }
.hm-orb--b { width: 38vmax; height: 38vmax; top: 30vh; inset-inline-start: -16vmax; background: radial-gradient(circle, rgba(33, 230, 193, .42), rgba(33, 230, 193, 0) 68%); animation: hm-drift-b 34s ease-in-out infinite alternate; }
.hm-orb--c { width: 30vmax; height: 30vmax; bottom: -12vmax; inset-inline-end: 8vw; background: radial-gradient(circle, rgba(0, 150, 220, .32), rgba(0, 150, 220, 0) 68%); animation: hm-drift-c 40s ease-in-out infinite alternate; }
.hm-orb--d { width: 22vmax; height: 22vmax; top: 8vh; inset-inline-start: 34vw; background: radial-gradient(circle, rgba(0, 140, 255, .3), rgba(0, 140, 255, 0) 70%); animation: hm-drift-b 46s ease-in-out infinite alternate-reverse; }
.hm-orbs__grid { display: none; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgba(160, 214, 255, .16) 1px, transparent 1.4px); background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 85%); }
:root[data-theme="light"] .hm-orb { opacity: .35; filter: blur(90px); }
:root[data-theme="light"] .hm-orb--a { background: radial-gradient(circle, rgba(0, 190, 240, .45), rgba(0, 190, 240, 0) 68%); }
:root[data-theme="light"] .hm-orb--b { background: radial-gradient(circle, rgba(20, 200, 170, .32), rgba(20, 200, 170, 0) 68%); }
:root[data-theme="light"] .hm-orb--c { background: radial-gradient(circle, rgba(0, 150, 220, .22), rgba(0, 150, 220, 0) 68%); }
:root[data-theme="light"] .hm-orbs__grid { background-image: radial-gradient(rgba(24, 60, 92, .14) 1px, transparent 1.4px); }
@keyframes hm-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6vw, 8vh, 0) scale(1.12); } }
@keyframes hm-drift-b { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(7vw, -6vh, 0) scale(.9); } }
@keyframes hm-drift-c { from { transform: translate3d(0, 0, 0) scale(.95); } to { transform: translate3d(-5vw, -9vh, 0) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .hm-orb { animation: none; } }
/* ---- css/quick-read-pro.css ---- */
/* Quick Read hub (/index/) and articles (/index/<slug>/) on the public design system (DESIGN.md).
 * Loaded after clinical-index.css; remaps its tokens to pro.css, calms the surfaces, sentence-case labels,
 * phone/tablet layout. Content, links and structured data are untouched (Quick Read stays fully public). */
.ci-list-page, .ci-detail-main, .ci-detail-hero {
  --mh-text: var(--pr-ink);
  --mh-muted: var(--pr-ink-2);
  --mh-muted-strong: var(--pr-ink-2);
  --mh-accent: var(--pr-accent);
  --mh-accent-ink: var(--pr-link);
  --mh-card-border: var(--pr-line);
  position: relative; z-index: 1;
}
:is(.ci-list-page, .ci-detail-main, .ci-detail-hero) .uppercase { text-transform: none; }
:is(.ci-list-page, .ci-detail-main, .ci-detail-hero) :is(.tracking-widest, .tracking-wider, .tracking-wide) { letter-spacing: 0; }
:is(.ci-list-page, .ci-detail-main, .ci-detail-hero) .mh-eyebrow { font-size: var(--pr-t-small); }
:is(.ci-list-page, .ci-detail-main, .ci-detail-hero) .ci-text-strong { color: var(--pr-ink); }
:is(.ci-list-page, .ci-detail-main, .ci-detail-hero) :is(.ci-hero__orb, .ci-detail-cta__orb, .ci-feat-card__hover, .ci-rel-card__hover) { display: none; }

/* ---------------------------------------------------------------- hub */
.ci-list-page { padding-bottom: var(--pr-section) !important; }
.ci-list-page .ci-hero { padding-top: 48px; padding-bottom: 8px; background: none; overflow: visible; }
.ci-list-page .ci-hero .mh-section-title { font-size: var(--pr-t-display); line-height: var(--pr-lh-display); letter-spacing: var(--pr-track-display); font-weight: 600; color: var(--pr-ink); }
:root[dir="rtl"] .ci-list-page .ci-hero .mh-section-title { font-weight: 700; }
.ci-list-page .ci-trust-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--pr-line); background: var(--pr-glass); color: var(--pr-ink-2); font-size: var(--pr-t-caption); box-shadow: none;
}
.ci-list-page .ci-search-lg {
  min-height: 52px; border-radius: 14px; border: 1px solid var(--pr-line-2); background: var(--pr-raised); color: var(--pr-ink);
  font-size: 1rem; box-shadow: none;
}
.ci-list-page .ci-search-lg:focus { border-color: var(--pr-accent); box-shadow: var(--pr-focus); outline: none; }
.ci-list-page :is(.ci-feat-card, .ci-eeat-card, .ci-cta-box, .ci-rel-card),
.ci-list-page .index-list > * > a, .ci-list-page .index-list > a {
  border-radius: 20px; border: 1px solid var(--pr-line); background: var(--pr-raised); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root[data-theme="dark"] .ci-list-page :is(.ci-feat-card, .ci-eeat-card) { background: color-mix(in srgb, var(--pr-raised) 88%, transparent); }
.ci-list-page .ci-feat-card { transition: transform .35s var(--pr-ease), border-color .35s var(--pr-ease); }
@media (hover: hover) { .ci-list-page .ci-feat-card:hover { transform: translateY(-4px); border-color: var(--pr-line-2); } }
.ci-list-page :is(.ci-feat-badge, .ci-featured-badge-sm, .ci-sect-badge) { border-radius: 8px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.ci-list-page .mh-utility-chip { border-radius: 10px; min-height: 40px; }
.ci-list-page .mh-utility-chip.is-active { background: var(--pr-ink); color: var(--pr-bg); border-color: var(--pr-ink); }
.ci-list-page .ci-browse-section > .grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .ci-list-page .ci-browse-section > .grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
.ci-list-page .ci-cta-box {
  border-radius: 32px; border: 1px solid var(--pr-line);
  background: radial-gradient(60% 90% at 100% 0%, rgba(0, 217, 255, .2), transparent 70%), radial-gradient(50% 80% at 0% 100%, rgba(33, 230, 193, .14), transparent 70%), var(--pr-raised);
}
.ci-list-page .ci-cta-box h2 { font-weight: 600; letter-spacing: -.02em; }

/* ---------------------------------------------------------------- article */
.ci-detail-main { padding-top: 32px; padding-bottom: var(--pr-section); }
.ci-detail-hero h1 { font-size: clamp(2.125rem, 1.4rem + 2.8vw, 3.25rem) !important; line-height: 1.08; letter-spacing: -.03em; font-weight: 600 !important; color: var(--pr-ink); }
:root[dir="rtl"] .ci-detail-hero h1 { letter-spacing: 0; line-height: 1.3; font-weight: 700 !important; }
.ci-detail-main .mh-clinical-content { font-size: var(--pr-t-body); line-height: var(--pr-lh-body); color: var(--pr-ink-2); }
.ci-detail-main .mh-clinical-content :is(h2, h3) { color: var(--pr-ink); font-weight: 600; letter-spacing: -.01em; }
.ci-detail-main .ci-detail-lead { color: var(--pr-ink-2); border-color: var(--pr-line) !important; }
.ci-detail-main :is(.ci-detail-disclaimer-surface, .ci-detail-disclaimer) {
  border-radius: 20px !important; border: 1px solid var(--pr-line); background: var(--pr-bg-2); box-shadow: none;
}
.ci-detail-main .ci-detail-disclaimer::before, .ci-detail-main .ci-detail-disclaimer::after { display: none; }
.ci-detail-main .ci-rel-card { border-radius: 18px; border: 1px solid var(--pr-line); background: var(--pr-raised); box-shadow: none; }
.ci-detail-main [class*="ci-detail-cta"] { border-radius: 28px; }
.ci-detail-main .ci-detail-drugs__list a { border-radius: 10px; }

/* ---------------------------------------------------------------- phones and tablets */
@media (max-width: 1023px) {
  .ci-list-page .ci-feat-section > .flex, .ci-list-page .ci-recent-section > .flex { justify-content: center; text-align: center; }
  .ci-list-page .ci-topic-tabs { justify-content: center; }
}
@media (max-width: 767px) {
  .ci-list-page .ci-hero { padding-top: 20px; }
  .ci-list-page .ci-hero .mh-section-title { font-size: clamp(2.125rem, 1.1rem + 5vw, 2.75rem); }
  .ci-list-page :is(.ci-feat-section, .ci-browse-section, .ci-recent-section, .ci-eeat-section, .ci-cta-section) { padding-top: 32px !important; padding-bottom: 8px !important; }
  .ci-list-page .ci-eeat-section .grid { grid-auto-flow: column; grid-auto-columns: 80%; grid-template-columns: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y pinch-zoom; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 0 16px 8px; scrollbar-width: none; }
  .ci-list-page .ci-eeat-card { scroll-snap-align: start; }
  .ci-list-page .ci-cta-box { padding: 32px 20px !important; border-radius: 24px; }
  .ci-detail-main { padding-top: 16px; }
  .ci-detail-main nav { justify-content: center; }
}

.ci-detail-hero .ci-detail-topic-glow { display: none; }
.ci-detail-hero { padding-top: 32px; }
@media (max-width: 767px) { .ci-detail-hero { padding-top: 12px; } .ci-detail-hero nav { justify-content: center; } .ci-detail-hero .max-w-3xl { text-align: center; } .ci-detail-hero .max-w-3xl > .flex { justify-content: center; } }

/* RTL-safe corner badge and search icon (logical properties; clinical-index.css pins them to the physical right/left). */
:is(.ci-list-page, .ci-detail-main) .ci-feat-badge { right: auto; inset-inline-end: 1.25rem; }
:is(.ci-list-page, .ci-detail-main) .ci-feat-card h3.pr-16 { padding-right: 0; padding-inline-end: 4rem; }
:is(.ci-list-page, .ci-detail-main) .ci-search-icon { left: auto; inset-inline-start: 1rem; }
:is(.ci-list-page, .ci-detail-main) .ci-search-icon--sm { left: auto; inset-inline-start: .875rem; }
:is(.ci-list-page, .ci-detail-main) .ml-1 { margin-left: 0; margin-inline-start: .25rem; }
:is(.ci-list-page, .ci-detail-main) .ci-search-lg { padding-inline: 3rem 1.25rem; }
:is(.ci-list-page, .ci-detail-main) .ci-search-sm { padding-inline: 2.4rem 1.25rem; }
/* Topic tabs: wrap on phones, and centring never pushes a tab out of reach (safe center). */
.ci-list-page .ci-topic-tabs { justify-content: safe center; }
@media (max-width: 767px) { .ci-list-page .ci-topic-tabs { flex-wrap: wrap; overflow: visible; } }

/* ---------------------------------------------------------------- text contrast (QC 2026-10-20, WCAG AA 1.4.3)
   Faded meta labels (opacity .6), amber "Featured" badges, pink condition badge and cyan text links measured
   1.9 to 2.9 : 1 on the light ground (meta labels 3.96 : 1 on dark). Same hues, darker light-theme values. */
:is(.ci-list-page, .ci-detail-main, .ci-detail-hero) :is(.ci-meta-label, .ci-muted-soft) { opacity: 1 !important; color: var(--pr-ink-2); }
:root[data-theme="light"] :is(.ci-list-page, .ci-detail-main, .ci-detail-hero) :is(.ci-feat-badge, .ci-featured-badge-sm, .ci-detail-featured-badge) { color: var(--pr-warn) !important; }
:root[data-theme="light"] :is(.ci-list-page, .ci-detail-main, .ci-detail-hero) .ci-detail-type-badge--condition { color: #b0256f !important; }
:root[data-theme="light"] :is(.ci-list-page, .ci-detail-main, .ci-detail-hero) :is(.ci-read-more, a:not([class])) { color: var(--pr-link); }