/*
 * Transfusion Reaction Guide — independent safety, clinical, and surveillance outputs.
 * Custom components layered on base.html design tokens (dark-mode aware via those vars).
 * Advisory / educational only.
 */

/* ---------- layout ---------- */
.rg-disclaimer {
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
}
.rg-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}
.rg-panel h6 {
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

/* ---------- two-question framing + output regions ---------- */
.rg-two-questions {
    background: var(--card-bg);
    border: 2px solid var(--primary-600);
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-600) 12%, transparent);
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding: 1rem;
}
.rg-two-questions-title {
    color: var(--primary-700, var(--primary-600));
    font-size: 1rem;
    font-weight: 750;
    margin-bottom: 0.35rem;
}
.rg-two-questions > p {
    font-size: 0.84rem;
    margin: 0 0 0.8rem;
}
.rg-question-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rg-question-grid > div {
    align-items: start;
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    display: grid;
    font-size: 0.78rem;
    gap: 0.05rem 0.55rem;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 0.65rem;
}
.rg-question-grid strong,
.rg-question-grid span:not(.rg-question-number) { grid-column: 2; }
.rg-question-grid > div > span:last-child { color: var(--text-secondary, #6b7280); }
.rg-question-number {
    align-items: center;
    background: var(--primary-600);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.7rem;
    font-weight: 700;
    grid-row: 1 / span 2;
    height: 1.35rem;
    justify-content: center;
    width: 1.35rem;
}
.rg-output {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    overflow: hidden;
    padding: 1rem;
}
.rg-output-safety { border-left: 5px solid var(--danger-500); }
.rg-output-clinical { border-top: 4px solid var(--primary-600); }
.rg-output-surveillance { border-top: 4px solid #7c3aed; }
.rg-output-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin: -0.2rem 0 0.85rem;
    padding-bottom: 0.75rem;
}
.rg-output-header h5 {
    color: var(--text-primary);
    font-size: 1rem;
    margin: 0.05rem 0 0;
}
.rg-output-header p {
    color: var(--text-secondary, #6b7280);
    font-size: 0.76rem;
    margin: 0.2rem 0 0;
}
.rg-output-kicker {
    color: var(--text-secondary, #6b7280);
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.rg-independent-label,
.rg-not-diagnosis {
    border: 1px solid currentColor;
    border-radius: 999px;
    flex: 0 0 auto;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.48rem;
    text-transform: uppercase;
}
.rg-independent-label { color: var(--danger-700, #b91c1c); }
.rg-not-diagnosis { color: #6d28d9; }
.rg-not-diagnosis-inline {
    display: inline-block;
    margin-top: 0.55rem;
}
.rg-model-explainer,
.rg-output-warning,
.rg-discordance,
.rg-surveillance-warning {
    border-radius: var(--radius);
    font-size: 0.78rem;
    margin-bottom: 0.75rem;
    padding: 0.65rem 0.75rem;
}
.rg-model-explainer {
    background: var(--primary-50, #eff6ff);
    border-left: 3px solid var(--primary-600);
    color: var(--text-primary);
}
.rg-output-warning,
.rg-surveillance-warning {
    background: #fffbeb;
    border: 1px solid #d97706;
    color: #78350f;
}
.rg-discordance {
    background: #fff7ed;
    border: 1px solid #ea580c;
    color: #7c2d12;
}
.rg-safety-statement {
    color: var(--text-primary);
    font-size: 0.84rem;
    margin: 0 0 0.75rem;
}
.rg-action-box h6 { font-size: 0.84rem; margin-bottom: 0.45rem; }
.rg-action-list {
    font-size: 0.84rem;
    margin: 0;
    padding-left: 1.25rem;
}
.rg-action-list li + li { margin-top: 0.3rem; }
.rg-result-disclaimer { margin: 0.85rem 0 0; }

/* ---------- timing selector ---------- */
.rg-timing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
}
.rg-timing button {
    border: 1px solid var(--border-color-strong);
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: var(--radius);
    padding: 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.12s ease;
}
.rg-timing button:hover { border-color: var(--primary-600); }
.rg-timing button.active {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
}

/* ---------- symptom + findings inputs ---------- */
.rg-symptom-category { margin-bottom: 0.75rem; }
.rg-symptom-category > .rg-cat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 0.35rem;
}
.rg-symptom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.35rem;
}
.rg-chk {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    padding: 0.3rem 0.4rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.rg-chk:hover { background: var(--bg-tertiary); }
.rg-chk.rg-redflag-symptom { border-left: 3px solid var(--danger-500); }
.rg-finding-row { margin-bottom: 0.6rem; }
.rg-finding-row label { font-size: 0.85rem; font-weight: 500; display: block; margin-bottom: 0.15rem; }
.rg-finding-row .rg-help { font-size: 0.72rem; color: var(--text-secondary, #6b7280); }

/* ---------- results: ranked differential ---------- */
.rg-results-empty { color: var(--text-secondary, #6b7280); text-align: center; padding: 2rem 1rem; }
.rg-results-empty-compact { padding: 0.65rem; }
.rg-results-error { color: var(--danger-700, #b91c1c); }

.rg-redflag-banner {
    background: var(--danger-50, #fef2f2);
    border: 1px solid var(--danger-500);
    border-left-width: 4px;
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    color: var(--danger-700, #b91c1c);
    font-size: 0.85rem;
}
.rg-redflag-banner strong { display: block; margin-bottom: 0.25rem; }

.rg-reaction {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 0.6rem;
    background: var(--card-bg);
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}
.rg-reaction.rg-top { border-color: var(--primary-600); box-shadow: 0 0 0 1px var(--primary-600); }
.rg-reaction.rg-redflagged { border-left: 4px solid var(--danger-500); }
.rg-reaction-head {
    display: grid;
    align-items: center;
    gap: 0.6rem;
    grid-template-columns: minmax(150px, 1fr) auto minmax(104px, auto);
    padding: 0.6rem 0.8rem;
}
.rg-reaction-identity { min-width: 0; }
.rg-rank-label {
    color: var(--text-secondary, #6b7280);
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.12rem;
    text-transform: uppercase;
}
.rg-reaction-name { font-weight: 600; font-size: 0.92rem; color: var(--text-primary); }
.rg-reaction-sub { font-size: 0.72rem; color: var(--text-secondary, #6b7280); }
.rg-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-end;
}
.rg-weight {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    text-align: right;
}
.rg-weight-number {
    color: var(--text-primary);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    line-height: 1.1;
}
.rg-weight-label {
    color: var(--text-secondary, #6b7280);
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.15;
}

.rg-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 0.8rem 0.6rem;
}
.rg-bar > span { display: block; height: 100%; background: var(--primary-600); border-radius: 3px; }
.rg-reaction.rg-redflagged .rg-bar > span { background: var(--danger-500); }
.rg-weight-help {
    color: var(--text-secondary, #6b7280);
    font-size: 0.67rem;
    margin: -0.25rem 0.8rem 0.45rem;
}
.rg-why-toggle {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--primary-600);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 650;
    margin: 0 0.55rem 0.45rem;
    padding: 0.25rem;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.18rem;
}
.rg-why-toggle::after { content: "▾"; margin-left: 0.32rem; text-decoration: none; }
.rg-why-toggle[aria-expanded="true"]::after { content: "▴"; }
.rg-why-toggle:focus-visible,
.rg-standard-source:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary-600) 35%, transparent);
    outline-offset: 2px;
}

/* provenance (expandable) */
.rg-prov {
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    font-size: 0.8rem;
    padding: 0.55rem 0.8rem 0.7rem;
}
.rg-prov[hidden] { display: none; }
.rg-lr-row {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.25rem 0;
    border-top: 1px dashed var(--border-color);
}
.rg-lr-finding { flex: 0 0 auto; color: var(--text-primary); }
.rg-lr-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.rg-lr-val.up { color: var(--success-600, #059669); }
.rg-lr-val.down { color: var(--danger-500); }
.rg-cite {
    font-size: 0.7rem;
    color: var(--primary-600);
    text-decoration: none;
    border-bottom: 1px dotted var(--primary-600);
}
.rg-cite:hover { opacity: 0.8; }

/* ---------- surveillance output (categorical only) ---------- */
.rg-standard {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 0.8rem;
    padding: 0.75rem;
}
.rg-standard-heading {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
}
.rg-standard-heading strong { color: var(--text-primary); font-size: 0.84rem; }
.rg-standard-heading span { color: var(--text-secondary, #6b7280); font-size: 0.7rem; }
.rg-standard-source {
    display: inline-block;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}
.rg-standard p {
    color: var(--text-secondary, #6b7280);
    font-size: 0.76rem;
    margin: 0.45rem 0 0;
}
.rg-surveillance-warning { margin: 0.55rem 0 0; }
.rg-surveillance-card {
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--gray-500, #6b7280);
    border-radius: var(--radius);
    margin-bottom: 0.65rem;
    padding: 0.75rem;
}
.rg-surveillance-card.rg-status-meets { border-left-color: var(--success-600, #059669); }
.rg-surveillance-card.rg-status-not_met { border-left-color: var(--danger-500); }
.rg-surveillance-card.rg-status-insufficient { border-left-color: #d97706; }
.rg-surveillance-card-head {
    align-items: flex-start;
    display: flex;
    gap: 0.65rem;
    justify-content: space-between;
}
.rg-surveillance-card-head h6 {
    color: var(--text-primary);
    font-size: 0.88rem;
    margin: 0;
}
.rg-related-clinical {
    color: var(--text-secondary, #6b7280);
    font-size: 0.68rem;
    margin-top: 0.2rem;
}
.rg-surveillance-status,
.rg-criterion-status {
    border: 1px solid currentColor;
    border-radius: 999px;
    flex: 0 0 auto;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.2rem 0.45rem;
}
.rg-status-meets > .rg-surveillance-card-head .rg-surveillance-status,
.rg-criterion.rg-status-meets .rg-criterion-status { color: var(--success-600, #047857); }
.rg-status-not_met > .rg-surveillance-card-head .rg-surveillance-status,
.rg-criterion.rg-status-not_met .rg-criterion-status { color: var(--danger-700, #b91c1c); }
.rg-status-insufficient > .rg-surveillance-card-head .rg-surveillance-status,
.rg-criterion.rg-status-insufficient .rg-criterion-status { color: #b45309; }
.rg-status-not_evaluated > .rg-surveillance-card-head .rg-surveillance-status,
.rg-criterion.rg-status-not_evaluated .rg-criterion-status { color: var(--text-secondary, #6b7280); }
.rg-surveillance-summary {
    color: var(--text-primary);
    font-size: 0.76rem;
    margin: 0.55rem 0 0;
}
.rg-criteria-heading {
    color: var(--text-primary);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    margin: 0.7rem 0 0.35rem;
    text-transform: uppercase;
}
.rg-criteria-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rg-criterion {
    align-items: flex-start;
    border-top: 1px dashed var(--border-color);
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
    padding: 0.48rem 0;
}
.rg-criterion-status {
    justify-self: start;
    text-align: center;
}
.rg-criterion-detail { color: var(--text-primary); font-size: 0.75rem; }
.rg-criterion-meta {
    color: var(--text-secondary, #6b7280);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.68rem;
    gap: 0.2rem 0.8rem;
    margin-top: 0.15rem;
}
.rg-previously-used {
    border-top: 2px dashed var(--border-color-strong);
    margin-top: 1rem;
    padding-top: 0.8rem;
}
.rg-previously-used > h6 { font-size: 0.84rem; margin-bottom: 0.2rem; }
.rg-previously-used > p {
    color: var(--text-secondary, #6b7280);
    font-size: 0.74rem;
    margin-bottom: 0.6rem;
}
.rg-surveillance-previous {
    background: var(--bg-tertiary);
    border-style: dashed;
    opacity: 0.92;
}

/* ---------- badges ---------- */
.rg-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    white-space: nowrap;
}
.rg-badge-cited   { background: #e0edff; color: #1e40af; }
.rg-badge-pattern { background: var(--gray-100); color: var(--gray-600, #4b5563); }
.rg-badge-redflag { background: #fee2e2; color: #b91c1c; }
.rg-badge-confirm { background: #dcfce7; color: #166534; }
.rg-badge-gated   { background: var(--gray-100); color: var(--gray-500, #6b7280); }
.rg-grade { font-size: 0.6rem; padding: 0.05rem 0.3rem; border-radius: var(--radius-sm); font-weight: 600; }
.rg-grade-high      { background: #dcfce7; color: #166534; }
.rg-grade-moderate  { background: #dbeafe; color: #1e40af; }
.rg-grade-low       { background: #fef3c7; color: #92400e; }
.rg-grade-very_low  { background: #fee2e2; color: #991b1b; }
.rg-grade-modeled   { background: var(--gray-100); color: var(--gray-600, #4b5563); font-style: italic; }

[data-theme="dark"] .rg-badge-cited   { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .rg-badge-redflag { background: #4a1414; color: #fca5a5; }
[data-theme="dark"] .rg-badge-confirm { background: #14351f; color: #86efac; }
[data-theme="dark"] .rg-grade-high     { background: #14351f; color: #86efac; }
[data-theme="dark"] .rg-grade-moderate { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .rg-grade-low      { background: #422006; color: #fcd34d; }
[data-theme="dark"] .rg-grade-very_low { background: #4a1414; color: #fca5a5; }
[data-theme="dark"] .rg-redflag-banner { background: #2a1414; color: #fca5a5; }
[data-theme="dark"] .rg-two-questions-title { color: #93c5fd; }
[data-theme="dark"] .rg-model-explainer { background: #14263d; }
[data-theme="dark"] .rg-output-warning,
[data-theme="dark"] .rg-surveillance-warning { background: #352807; color: #fcd34d; }
[data-theme="dark"] .rg-discordance { background: #3b1f0d; color: #fdba74; }
[data-theme="dark"] .rg-not-diagnosis { color: #c4b5fd; }
[data-theme="dark"] .rg-status-meets > .rg-surveillance-card-head .rg-surveillance-status,
[data-theme="dark"] .rg-criterion.rg-status-meets .rg-criterion-status { color: #6ee7b7; }
[data-theme="dark"] .rg-status-not_met > .rg-surveillance-card-head .rg-surveillance-status,
[data-theme="dark"] .rg-criterion.rg-status-not_met .rg-criterion-status { color: #fca5a5; }
[data-theme="dark"] .rg-status-insufficient > .rg-surveillance-card-head .rg-surveillance-status,
[data-theme="dark"] .rg-criterion.rg-status-insufficient .rg-criterion-status { color: #fcd34d; }

/* live-recompute refresh pulse (mirrors interp) */
@keyframes rgRefresh { from { opacity: 0.35; } to { opacity: 1; } }
.rg-refreshed { animation: rgRefresh 0.28s ease; }

.rg-loading { font-size: 0.8rem; color: var(--text-secondary, #6b7280); }

@media (max-width: 767.98px) {
    .rg-question-grid { grid-template-columns: 1fr; }
    .rg-output { padding: 0.8rem; }
    .rg-output-header { align-items: flex-start; flex-direction: column; }
    .rg-independent-label,
    .rg-not-diagnosis { align-self: flex-start; }
    .rg-reaction-head {
        align-items: start;
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .rg-reaction-identity { grid-column: 1; }
    .rg-weight { grid-column: 2; grid-row: 1; }
    .rg-badges { grid-column: 1 / -1; justify-content: flex-start; }
    .rg-surveillance-card-head { flex-direction: column; }
    .rg-surveillance-status { align-self: flex-start; }
    .rg-lr-row { align-items: flex-start; flex-wrap: wrap; }
}

@media (max-width: 420px) {
    .rg-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .rg-tabs .nav-item,
    .rg-tabs .nav-link { width: 100%; }
    .rg-tabs .nav-link {
        align-items: center;
        display: flex;
        font-size: 0.75rem;
        justify-content: center;
        line-height: 1.15;
        min-height: 3rem;
        padding-inline: 0.35rem;
        text-align: center;
    }
    .rg-two-questions { padding: 0.8rem; }
    .rg-reaction-head { grid-template-columns: 1fr; }
    .rg-weight {
        align-items: flex-start;
        grid-column: 1;
        grid-row: auto;
        text-align: left;
    }
    .rg-badges { grid-column: 1; }
    .rg-criterion { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .rg-refreshed { animation: none; }
}