/* doc-render.css — shared styles for rendering a Criteria/Guideline document
   (key points, tables, sections, pearls). Used by criteria.html + guidelines.html.
   Extracted verbatim from criteria.html (2026-09-26). */

.cc-body-inner {
    padding: 1.5rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* ── Section: key points ─────────────────────────────── */

.cc-section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-bottom: 0.75rem;
}

.cc-section-label svg {
    width: 13px;
    height: 13px;
    color: var(--teal);
}

.key-points-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.key-points-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.kp-item {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: 0.45rem;
    font-size: 0.88rem;
    color: var(--navy);
    line-height: 1.55;
}

.kp-item::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
}

/* ── Section: content sections ───────────────────────── */

.content-sections {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.content-section {
    background: var(--bg);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--teal);
    padding: 0.85rem 1rem;
}

.content-section-heading {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.45rem;
    line-height: 1.3;
}

.content-section-text {
    font-size: 0.9rem;
    color: var(--navy);
    line-height: 1.65;
    font-weight: 400;
}

.content-section-text p {
    margin: 0 0 0.7rem 0;
}

.content-section-text p:last-child {
    margin-bottom: 0;
}

/* Inline clinical pearl — visually distinct from the prose above.
   Teal accent strip matches the section-card treatment used
   elsewhere in the drug card system. */
.inline-pearl {
    margin-top: 0.9rem;
    padding: 0.75rem 0.95rem;
    background: var(--teal-bg);
    border-left: 3px solid var(--teal);
    border-radius: 0 8px 8px 0;
}

.inline-pearl-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--teal-dark);
    margin-bottom: 0.35rem;
}

.inline-pearl p {
    margin: 0 0 0.4rem 0;
    color: var(--navy);
    font-size: 0.88rem;
    line-height: 1.6;
}

.inline-pearl p:last-child {
    margin-bottom: 0;
}

/* Inline structured table inside a section.
   Same visual style as the top-level criteria-table but scoped
   to the in-section context so spacing feels inline. */
.criteria-inline-table-wrap {
    margin: 0.85rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
}

.criteria-inline-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.criteria-inline-table th {
    text-align: left;
    padding: 0.55rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--teal-dark);
    background: var(--teal-bg);
    border-bottom: 1px solid rgba(0, 168, 150, 0.25);
    vertical-align: top;
}

.criteria-inline-table td {
    padding: 0.55rem 0.75rem;
    color: var(--navy);
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
    line-height: 1.55;
}

.criteria-inline-table tr:last-child td {
    border-bottom: none;
}

/* First column tends to be the "key" (phenotype, stage, drug) —
   slight emphasis helps scanability. */
.criteria-inline-table td:first-child {
    font-weight: 600;
    color: var(--navy);
}

/* Last column often carries evidence-level tokens (Level A, COR 1,
   Strong) — use a muted teal tag so scanning for grade is easy. */
.criteria-inline-table td:last-child {
    color: var(--teal-dark);
    font-weight: 500;
    white-space: nowrap;
}

/* ── Section: tables ─────────────────────────────────── */

.criteria-tables {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.criteria-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-200);
}

.criteria-table-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--navy);
    padding: 0.6rem 0.85rem;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
}

.criteria-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.criteria-table th {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    padding: 0.55rem 0.85rem;
    text-align: left;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.criteria-table td {
    padding: 0.5rem 0.85rem;
    color: var(--gray-600);
    border-bottom: 1px solid var(--gray-100);
    line-height: 1.5;
    vertical-align: top;
}

.criteria-table tbody tr:last-child td {
    border-bottom: none;
}

.criteria-table tbody tr:nth-child(even) td {
    background: var(--bg);
}

.criteria-table tbody tr:hover td {
    background: var(--teal-bg);
}

/* ── Section: clinical pearls ────────────────────────── */

.clinical-pearls-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pearl-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    background: var(--amber-bg);
    border: 1px solid var(--amber-border);
    border-radius: var(--radius-sm);
}

.pearl-icon {
    flex-shrink: 0;
    font-size: 0.9rem;
    margin-top: 0.1em;
}

.pearl-text {
    font-size: 0.85rem;
    color: #7a5a00;
    line-height: 1.55;
}

/* Point-format content */
.crit-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.crit-points li { position: relative; padding-left: 1.15rem; font-size: 14px; line-height: 1.55; color: var(--ink-secondary); }
.crit-points li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }

@media (max-width: 600px) {
    .cc-body-inner { padding: 1.1rem 1rem 1rem; }
}
@media (max-width: 820px) {
    .criteria-inline-table, .criteria-table { min-width: 560px; }
}