/* ── Assay detail page ── */

/* ═══════════════════════════════════════════════════
   1. PAGE SHELL
   ═══════════════════════════════════════════════════ */
.asy-page { max-width: var(--container-max); margin: 0 auto; padding: 2rem 1.5rem; }
.asy-page,
.asy-page .grid-2col,
.asy-page .info-hero-main,
.asy-page .info-hero-panel,
.asy-page .info-callout {
    min-width: 0;
}


/* ═══════════════════════════════════════════════════
   2. ASSAY TYPE BADGES
   .asy-badge → .pill-type (components.css §19)
   ═══════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════
   3. LAYOUT GRID  →  .grid-2col (components.css §19)
   ═══════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════
   4. SECTION CARD
   .asy-section → .card (components.css §19)
   ═══════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════
   5. LINKS  (target link, external links)
   ═══════════════════════════════════════════════════ */
/* .asy-target-link → .asy-ext-link (components.css §20) */
/* .asy-ext-link    → components.css §20 */
.asy-ext-links { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; min-width: 0; }


/* ═══════════════════════════════════════════════════
   6. DOC CARD
   .asy-doc-card → .card-sm (components.css §19)
   ═══════════════════════════════════════════════════ */
.asy-doc-title { font-weight: 600; margin-bottom: 0.5rem; }
.asy-doc-meta  { font-size: 0.8125rem; color: var(--color-text-secondary); }
.asy-doc-meta a       { color: var(--color-primary); text-decoration: none; }
.asy-doc-meta a:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════
   7. CONFIDENCE BADGE
   ═══════════════════════════════════════════════════ */
.asy-confidence {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.25rem 0.75rem; border-radius: var(--radius-sm);
    font-size: 0.8125rem; font-weight: 600;
    background: var(--color-info-soft); color: var(--color-info-strong);
}


/* ═══════════════════════════════════════════════════
   8. INLINE STYLE REPLACEMENTS
   ═══════════════════════════════════════════════════ */
.asy-page .alert                                   { margin-bottom: 1rem; }
.asy-page .info-hero-panel .info-callout           { margin: 0; }
.asy-page .info-hero-panel .info-callout > strong  { display: block; margin-bottom: 0.25rem; }
.asy-page .info-callout,
.asy-page .page-desc                              { overflow-wrap: anywhere; }
.asy-page .asy-ext-link                           { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.asy-page .asy-ext-link > span                     { font-size: 0.75rem; color: var(--color-text-secondary); }
.asy-info-table                                    { margin-top: 0.75rem; }
.asy-page .card > div:has(> .asy-table)            { overflow-x: auto; }
.asy-page .card > .asy-table tbody td:first-child  { font-weight: 600; }