/* EWER 2.0 CMS — AI Predictive Hotspot Analytics V4
   Isolated presentation layer. Does not style or replace the Zambia map. */
.ewer-ai4-shell {
    position: relative;
    margin-bottom: 1.5rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 16%, var(--border-color, #e5e7eb));
    border-radius: 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--card-bg, #fff) 96%, #eef2ff), var(--card-bg, #fff));
    box-shadow: 0 18px 48px rgba(46, 54, 106, 0.09);
}
.ewer-ai4-shell::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 96px;
    pointer-events: none;
    background:
        radial-gradient(circle at 17% 0%, rgba(99,102,241,.14), transparent 36%),
        radial-gradient(circle at 83% 0%, rgba(14,165,233,.1), transparent 40%);
}
.ewer-ai4-shell .ewer-ai4-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.ewer-ai4-heading { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.ewer-ai4-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, #4f46e5, #7c3aed 58%, #2563eb);
    box-shadow: 0 10px 24px rgba(79,70,229,.28);
}
.ewer-ai4-icon::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(99,102,241,.28);
    border-radius: 17px;
    animation: ai4-ring 2.8s ease-in-out infinite;
}
.ewer-ai4-icon i { font-size: 1.15rem; }
.ewer-ai4-title { margin: 0; color: var(--text-primary, #172033); font-size: 1.15rem; line-height: 1.2; }
.ewer-ai4-subtitle { margin: .25rem 0 0; color: var(--text-secondary, #64748b); font-size: .72rem; }
.ewer-ai4-live {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 34px;
    padding: .45rem .8rem;
    border: 1px solid rgba(59,130,246,.2);
    border-radius: 10px;
    background: rgba(239,246,255,.86);
    color: #2563eb;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
}
.ewer-ai4-live i { width: 8px; height: 8px; border-radius: 999px; background: #10b981; animation: ai4-live 1.7s ease-out infinite; }
.ewer-ai4-body { position: relative; padding: 1rem 1.2rem 1.2rem; }
.ewer-ai4-method {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .9rem;
    padding: .55rem .75rem;
    border: 1px solid rgba(99,102,241,.12);
    border-radius: 10px;
    background: rgba(238,242,255,.55);
    color: var(--text-secondary, #64748b);
    font-size: .64rem;
}
.ewer-ai4-method i { color: #6366f1; }
.ewer-ai4-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: .85rem !important;
}
.ai4-province-card {
    --ai4-accent: #6366f1;
    --ai4-soft: rgba(99,102,241,.09);
    position: relative;
    min-width: 0;
    padding: .95rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ai4-accent) 18%, var(--border-color, #e5e7eb));
    border-radius: 15px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg, #fff) 98%, var(--ai4-accent)), var(--card-bg, #fff));
    box-shadow: 0 9px 22px rgba(15,23,42,.055);
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    animation: ai4-card-in .45s cubic-bezier(.2,.75,.3,1) forwards;
    animation-delay: var(--ai4-delay, 0ms);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ai4-province-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, transparent, var(--ai4-accent), transparent); opacity: .9; }
.ai4-province-card:hover, .ai4-province-card:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ai4-accent) 52%, #fff); box-shadow: 0 16px 30px color-mix(in srgb, var(--ai4-accent) 16%, transparent); outline: none; }
.ai4-theme-rising-rapidly { --ai4-accent: #ef4444; --ai4-soft: rgba(239,68,68,.09); }
.ai4-theme-rising { --ai4-accent: #f97316; --ai4-soft: rgba(249,115,22,.09); }
.ai4-theme-stable { --ai4-accent: #0ea5e9; --ai4-soft: rgba(14,165,233,.09); }
.ai4-theme-declining { --ai4-accent: #10b981; --ai4-soft: rgba(16,185,129,.09); }
.ai4-card-top { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
.ai4-card-top h3 { margin: 0; color: var(--text-primary, #172033); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai4-trend { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .5rem; border-radius: 999px; background: var(--ai4-soft); color: var(--ai4-accent); font-size: .54rem; font-weight: 850; white-space: nowrap; }
.ai4-trend i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent); }
.ai4-sparkline { height: 52px; margin: .55rem 0 .45rem; color: var(--ai4-accent); }
.ai4-sparkline svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ai4-spark-line { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 360; stroke-dashoffset: 360; animation: ai4-draw 1.1s ease forwards; }
.ai4-spark-area { fill: color-mix(in srgb, currentColor 13%, transparent); }
.ai4-spark-pulse { fill: #fff; stroke: currentColor; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: ai4-point 1.8s ease-in-out infinite; }
.ai4-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.ai4-metric { min-width: 0; min-height: 64px; padding: .55rem .58rem; border: 1px solid color-mix(in srgb, var(--border-color, #e5e7eb) 82%, var(--ai4-accent)); border-radius: 10px; background: color-mix(in srgb, var(--bg-main, #f8fafc) 92%, var(--ai4-soft)); }
.ai4-metric-label { display: flex; align-items: center; justify-content: space-between; gap: .35rem; color: var(--text-muted, #94a3b8); font-size: .51rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; }
.ai4-metric-label i { color: var(--ai4-accent); opacity: .82; }
.ai4-metric-value { display: flex; align-items: baseline; justify-content: space-between; gap: .3rem; margin-top: .3rem; }
.ai4-metric-value strong { color: var(--text-primary, #172033); font-size: 1rem; }
.ai4-metric-value span { color: var(--ai4-accent); font-size: .48rem; font-weight: 800; }
.ai4-narrative { display: flex; gap: .45rem; min-height: 60px; margin: .65rem 0; color: var(--text-secondary, #64748b); font-size: .6rem; line-height: 1.48; }
.ai4-narrative i { margin-top: .12rem; color: var(--ai4-accent); }
.ai4-card-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .45rem; padding-top: .6rem; border-top: 1px solid var(--border-color, #e5e7eb); }
.ai4-card-footer > div:first-child { display: flex; align-items: baseline; gap: .25rem; }
.ai4-card-footer span { color: var(--text-muted, #94a3b8); font-size: .48rem; text-transform: uppercase; }
.ai4-card-footer strong, .ai4-card-footer b { color: var(--text-primary, #172033); font-size: .57rem; }
.ai4-confidence { height: 5px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--border-color, #e5e7eb) 70%, transparent); }
.ai4-confidence span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ai4-accent), color-mix(in srgb, var(--ai4-accent) 55%, #8b5cf6)); animation: ai4-confidence .9s .35s ease forwards; animation-delay: calc(var(--ai4-delay, 0ms) + 300ms); }
.ai4-national-summary { display: grid; grid-template-columns: 1.55fr .9fr 1.1fr; gap: .85rem; margin-top: 1rem; }
.ai4-summary-group, .ai4-risk-overview, .ai4-summary-insight { min-width: 0; padding: .8rem; border: 1px solid var(--border-color, #e5e7eb); border-radius: 13px; background: color-mix(in srgb, var(--card-bg, #fff) 97%, #eef2ff); }
.ai4-summary-group { display: grid; grid-template-columns: auto repeat(4, 1fr); align-items: center; gap: .75rem; }
.ai4-summary-ai { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #fff; background: linear-gradient(145deg,#4f46e5,#8b5cf6); box-shadow: 0 8px 20px rgba(79,70,229,.25); }
.ai4-summary-stat span { display: block; color: var(--text-muted, #94a3b8); font-size: .49rem; text-transform: uppercase; }
.ai4-summary-stat strong { display: block; margin-top: .25rem; color: var(--text-primary, #172033); font-size: 1.05rem; }
.ai4-risk-overview h4, .ai4-summary-insight h4 { margin: 0 0 .55rem; color: var(--text-primary, #172033); font-size: .65rem; text-transform: uppercase; }
.ai4-risk-bar { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; height: 7px; margin-bottom: .55rem; }
.ai4-risk-bar i { border-radius: 999px; }
.ai4-risk-bar .high { background:#ef4444; }.ai4-risk-bar .medium { background:#f59e0b; }.ai4-risk-bar .low { background:#10b981; }
.ai4-risk-overview > div:last-child { display:flex; justify-content:space-between; gap:.5rem; color:var(--text-secondary,#64748b); font-size:.52rem; }
.ai4-summary-insight { position:relative; overflow:hidden; background:linear-gradient(135deg,rgba(238,242,255,.95),rgba(245,243,255,.9)); }
.ai4-summary-insight::after { content:'AI'; position:absolute; right:-8px; bottom:-22px; color:rgba(99,102,241,.07); font-size:5rem; font-weight:900; }
.ai4-summary-insight h4 i { color:#7c3aed; margin-right:.3rem; }
.ai4-summary-insight p { position:relative; z-index:1; margin:0; color:var(--text-secondary,#64748b); font-size:.57rem; line-height:1.5; }
.ai4-summary-insight small { position:relative; z-index:1; display:block; margin-top:.45rem; color:#7c3aed; font-size:.48rem; }
.ai4-state { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem; min-height:180px; padding:1.5rem; border:1px dashed var(--border-color,#e5e7eb); border-radius:14px; color:var(--text-secondary,#64748b); text-align:center; }
.ai4-state i { color:#6366f1; font-size:1.25rem; }.ai4-state strong { color:var(--text-primary,#172033); }.ai4-state span { font-size:.68rem; }.ai4-state-error i { color:#ef4444; }.ai4-state-stable i { color:#10b981; }
@keyframes ai4-ring { 0%,100%{transform:scale(.96);opacity:.45}50%{transform:scale(1.08);opacity:.95} }
@keyframes ai4-live { 0%{box-shadow:0 0 0 0 rgba(16,185,129,.45)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent} }
@keyframes ai4-card-in { to{opacity:1;transform:translateY(0)} }
@keyframes ai4-draw { to{stroke-dashoffset:0} }
@keyframes ai4-point { 0%,100%{transform:scale(.8);opacity:.7}50%{transform:scale(1.25);opacity:1} }
@keyframes ai4-confidence { to{width:var(--ai4-confidence,0%)} }
@media (max-width: 1600px) { .ewer-ai4-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; } }
@media (max-width: 1280px) { .ewer-ai4-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } .ai4-national-summary{grid-template-columns:1fr 1fr}.ai4-summary-insight{grid-column:1/-1} }
@media (max-width: 900px) { .ewer-ai4-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .ai4-national-summary{grid-template-columns:1fr}.ai4-summary-group{grid-template-columns:auto 1fr 1fr}.ai4-summary-stat:nth-last-child(-n+2){grid-column:auto} }
@media (max-width: 620px) { .ewer-ai4-shell .ewer-ai4-header{align-items:flex-start;padding:1rem}.ewer-ai4-body{padding:.8rem}.ewer-ai4-grid{grid-template-columns:1fr !important}.ewer-ai4-live{font-size:.6rem}.ewer-ai4-title{font-size:1rem}.ai4-summary-group{grid-template-columns:auto 1fr 1fr}.ai4-summary-ai{grid-row:span 2} }
@media (prefers-reduced-motion: reduce) { .ewer-ai4-icon::after,.ewer-ai4-live i,.ai4-province-card,.ai4-spark-line,.ai4-spark-pulse,.ai4-confidence span{animation:none!important}.ai4-province-card{opacity:1;transform:none}.ai4-confidence span{width:var(--ai4-confidence,0%)} }

/* EWER AI HOTSPOT ALL PROVINCES CLEAN CARDS V6.2 */
.ai4-province-card.ai4-risk-high {
    --ai4-accent: #dc2626 !important;
    --ai4-soft: rgba(220, 38, 38, .09) !important;
    border-color: rgba(220, 38, 38, .42) !important;
    background: linear-gradient(180deg, rgba(254, 242, 242, .98), var(--card-bg, #fff) 48%) !important;
}
.ai4-province-card.ai4-risk-medium {
    --ai4-accent: #d97706 !important;
    --ai4-soft: rgba(217, 119, 6, .10) !important;
    border-color: rgba(217, 119, 6, .42) !important;
    background: linear-gradient(180deg, rgba(255, 251, 235, .98), var(--card-bg, #fff) 48%) !important;
}
.ai4-province-card.ai4-risk-low {
    --ai4-accent: #059669 !important;
    --ai4-soft: rgba(5, 150, 105, .09) !important;
    border-color: rgba(5, 150, 105, .38) !important;
    background: linear-gradient(180deg, rgba(236, 253, 245, .98), var(--card-bg, #fff) 48%) !important;
}
.ai4-province-card::before {
    height: 4px !important;
    background: var(--ai4-accent) !important;
    opacity: 1 !important;
}
.ewer-ai4-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    align-items: stretch !important;
}
.ai4-province-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 285px;
    padding: 1rem !important;
}
.ai4-card-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .55rem !important;
}
.ai4-card-top h3 {
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    color: var(--text-primary, #172033) !important;
    font-size: .98rem !important;
    line-height: 1.3 !important;
}
.ai4-card-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: .4rem !important;
}
.ai4-risk-badge {
    order: -1;
    border-color: color-mix(in srgb, var(--ai4-accent) 42%, transparent) !important;
    background: var(--ai4-soft) !important;
    color: var(--ai4-accent) !important;
    font-size: .55rem !important;
}
.ai4-trend {
    color: var(--ai4-trend-accent, #2563eb) !important;
    background: var(--ai4-trend-soft, rgba(37,99,235,.09)) !important;
}
.ai4-trend b { font-size: .49rem; font-weight: 850; }
.ai4-theme-rising-rapidly { --ai4-trend-accent: #dc2626; --ai4-trend-soft: rgba(220,38,38,.10); }
.ai4-theme-rising { --ai4-trend-accent: #ea580c; --ai4-trend-soft: rgba(234,88,12,.10); }
.ai4-theme-stable { --ai4-trend-accent: #0284c7; --ai4-trend-soft: rgba(2,132,199,.10); }
.ai4-theme-declining { --ai4-trend-accent: #059669; --ai4-trend-soft: rgba(5,150,105,.10); }
.ai4-metric-grid,
.ai4-period-comparison,
.ai4-risk-evidence { display: none !important; }
.ai4-spark-origin { fill: #fff; stroke: currentColor; stroke-width: 2.5; }
.ai4-sparkline { margin: .7rem 0 .55rem !important; }
.ai4-narrative {
    flex: 1 1 auto;
    min-height: 0 !important;
    margin: .55rem 0 .75rem !important;
    font-size: .63rem !important;
    line-height: 1.5 !important;
}
.ai4-card-footer { margin-top: auto; }
html.dark .ai4-province-card.ai4-risk-high,
html.dark .ai4-province-card.ai4-risk-medium,
html.dark .ai4-province-card.ai4-risk-low {
    background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg, #111827) 90%, var(--ai4-soft)), var(--card-bg, #111827) 50%) !important;
}
@media (max-width: 1180px) {
    .ewer-ai4-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
    .ewer-ai4-grid { grid-template-columns: 1fr !important; }
    .ai4-province-card { min-height: 0; }
}

/* EWER AI HOTSPOT FIVE PER ROW V6.3.1 */
.ewer-ai4-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: .72rem !important;
    align-items: stretch !important;
}

.ai4-province-card {
    min-width: 0 !important;
    min-height: 264px !important;
    padding: .78rem !important;
}

.ai4-card-top {
    gap: .42rem !important;
}

.ai4-card-top h3 {
    min-width: 0 !important;
    font-size: .88rem !important;
    line-height: 1.22 !important;
    overflow-wrap: anywhere !important;
}

.ai4-card-badges {
    gap: .28rem !important;
}

.ai4-risk-badge,
.ai4-trend {
    max-width: 100% !important;
    padding: .25rem .38rem !important;
    font-size: .49rem !important;
    line-height: 1.15 !important;
}

.ai4-trend b {
    font-size: .46rem !important;
}

.ai4-sparkline {
    margin: .46rem 0 .38rem !important;
}

.ai4-narrative {
    margin: .38rem 0 .55rem !important;
    font-size: .57rem !important;
    line-height: 1.42 !important;
}

.ai4-card-footer {
    gap: .3rem !important;
}

.ai4-card-footer span,
.ai4-card-footer strong,
.ai4-card-footer b {
    font-size: .53rem !important;
}

/* Keep five cards across on normal government desktop workstations. */
@media (max-width: 1280px) {
    .ewer-ai4-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1080px) {
    .ewer-ai4-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 820px) {
    .ewer-ai4-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .ewer-ai4-grid {
        grid-template-columns: 1fr !important;
    }

    .ai4-province-card {
        min-height: 0 !important;
    }
}

/* EWER AI HOTSPOT REMOVE REPEATED NARRATIVE V6.4 */
.ai4-narrative {
    display: none !important;
}

.ai4-province-card {
    min-height: 190px !important;
}

.ai4-card-footer {
    margin-top: auto !important;
}

@media (max-width: 560px) {
    .ai4-province-card {
        min-height: 0 !important;
    }
}

/* EWER AI HOTSPOT COMPACT HISTOGRAMS V6.5.1 */
.ewer-ai4-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: .8rem !important;
    align-items: stretch !important;
}

.ai4-province-card {
    display: grid !important;
    grid-template-rows: auto 62px auto !important;
    align-content: start !important;
    row-gap: .46rem !important;
    height: 178px !important;
    min-height: 178px !important;
    padding: .72rem !important;
    overflow: hidden !important;
}

.ai4-card-top {
    min-height: 0 !important;
    gap: .38rem !important;
}

.ai4-card-top h3 {
    font-size: .91rem !important;
    line-height: 1.2 !important;
}

.ai4-card-badges {
    gap: .3rem !important;
}

.ai4-risk-badge,
.ai4-trend {
    font-size: .51rem !important;
}

.ai4-sparkline {
    align-self: stretch !important;
    width: 100% !important;
    height: 62px !important;
    min-height: 62px !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.ai4-sparkline svg.ai4-histogram {
    display: block !important;
    width: 100% !important;
    height: 62px !important;
    min-height: 62px !important;
    overflow: hidden !important;
}

.ai4-hist-grid {
    stroke: color-mix(in srgb, var(--ai4-accent) 13%, transparent) !important;
    stroke-width: .75 !important;
    stroke-dasharray: 2 4 !important;
}

.ai4-hist-axis {
    stroke: color-mix(in srgb, var(--ai4-accent) 30%, transparent) !important;
    stroke-width: 1 !important;
}

.ai4-hist-bar {
    fill: var(--ai4-accent) !important;
    opacity: .9 !important;
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: ai4HistogramRise 620ms cubic-bezier(.2,.72,.25,1) both;
}

.ai4-hist-bar:nth-of-type(2) { animation-delay: 45ms; }
.ai4-hist-bar:nth-of-type(3) { animation-delay: 90ms; }
.ai4-hist-bar:nth-of-type(4) { animation-delay: 135ms; }
.ai4-hist-bar:nth-of-type(5) { animation-delay: 180ms; }
.ai4-hist-bar:nth-of-type(6) { animation-delay: 225ms; }
.ai4-hist-bar.is-zero { opacity: .22 !important; }

.ai4-narrative {
    display: none !important;
}

.ai4-card-footer {
    align-self: end !important;
    margin: 0 !important;
    padding-top: .38rem !important;
    border-top: 1px solid color-mix(in srgb, var(--ai4-accent) 14%, transparent) !important;
}

@keyframes ai4HistogramRise {
    from { transform: scaleY(.08); opacity: .25; }
    to { transform: scaleY(1); opacity: .9; }
}

@media (max-width: 1399px) {
    .ewer-ai4-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (max-width: 1120px) {
    .ewer-ai4-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 820px) {
    .ewer-ai4-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 560px) {
    .ewer-ai4-grid { grid-template-columns: 1fr !important; }
    .ai4-province-card {
        height: 172px !important;
        min-height: 172px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai4-hist-bar { animation: none !important; }
}