/**
 * predictive.css — VBI-4-U
 *
 * Styles for ShapNarrative, LowConfidenceBadge, CI band overlay,
 * and the aml-not-ready degrade notice.
 *
 * Mobile-first: all rules are single-column, no fixed widths.
 * No horizontal overflow at 360px — all containers use box-sizing:border-box,
 * max-width:100%, and word-break:break-word where needed.
 */

/* ── SHAP Narrative block ─────────────────────────────────────── */

.shap-narrative {
    background:   rgba(30,28,60,0.55);
    border-left:  3px solid var(--color-teal, #2dd4bf);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding:      var(--space-2) var(--space-3);
    margin:       var(--space-2) 0 var(--space-1);
    font-size:    var(--text-xs);
    line-height:  1.55;
    box-sizing:   border-box;
    max-width:    100%;
    word-break:   break-word;
    color:        var(--text-secondary);
}

.shap-narrative__sentence {
    margin:     0 0 4px;
    padding:    0;
    font-style: italic;
    color:      var(--text-secondary);
}

/* Model version disclosure */
.shap-narrative .model-version,
.shap-narrative__model-version {
    display:        block;
    font-size:      0.65rem;
    color:          var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top:     4px;
}

/* Low-confidence inline note */
.shap-narrative .low-confidence-note,
.shap-narrative__low-confidence-note {
    color:       var(--color-amber, #f59e0b);
    font-weight: 700;
    font-size:   var(--text-xs);
    margin:      4px 0;
}

/* ── Low-Confidence Pill Badge ────────────────────────────────── */

.low-confidence-badge {
    display:        inline-block;
    background:     var(--color-amber-glow, rgba(245,158,11,0.15));
    color:          var(--color-amber, #f59e0b);
    border:         1px solid var(--color-amber, #f59e0b);
    border-radius:  9999px;
    padding:        1px var(--space-2);
    font-size:      0.7rem;
    font-weight:    600;
    line-height:    1.4;
    vertical-align: middle;
    white-space:    nowrap;
    max-width:      100%;
    box-sizing:     border-box;
}

/* ── Confidence-Interval Band (ChartTile SVG overlay) ─────────── */

.ci-band {
    fill:         var(--color-teal, #2dd4bf);
    fill-opacity: 0.12;
    stroke:       none;
}

/* ── AML-Not-Ready Degrade Notice ─────────────────────────────── */

.aml-not-ready-notice {
    display:       flex;
    align-items:   center;
    justify-content: center;
    min-height:    80px;
    padding:       var(--space-3);
    border:        1.5px dashed rgba(237,232,219,0.20);
    border-radius: var(--radius-sm);
    color:         var(--text-muted);
    font-style:    italic;
    font-size:     var(--text-sm);
    text-align:    center;
    box-sizing:    border-box;
    max-width:     100%;
    word-break:    break-word;
}

/* ── Responsive adjustments ───────────────────────────────────── */
/* MR-063: canonical breakpoints — 375px mobile, 768px tablet, 1024px desktop.
   min-width: 376px is the min-width equivalent of max-width: 375px. */

@media (min-width: 376px) {
    /* MR-063: was min-width: 481px — canonical tablet+ starts at 376px (above mobile) */
    .shap-narrative {
        font-size: var(--text-xs);
        padding:   var(--space-2) var(--space-3);
    }
}

@media (min-width: 769px) {
    /* MR-063: 769px is the min-width complement of 768px max-width boundary — acceptable */
    .aml-not-ready-notice { min-height: 100px; }
}