/* MC-utforskaren — kontroller + CSP-ren SVG-viz.
   Färger = data-viz-lagret (Wong 2011 colorblind-safe), inte B&W-brand. */

.uf-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4, 1rem);
    align-items: flex-end;
    margin: var(--s-4, 1rem) 0;
    padding: var(--s-3, 0.75rem);
    border: 1px solid var(--light-grey, #ddd);
}
.uf-control {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    min-width: 12rem;
}
.uf-control label { font-weight: 600; }
.uf-control select,
.uf-control input[type="range"] { width: 100%; }
.uf-control .muted { font-size: 0.75rem; }
#uf-run {
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
}
.uf-status { font-size: 0.875rem; color: var(--medium-grey, #666); min-height: 1.2rem; }

/* SVG-axlar och etiketter (B&W) */
.uf-axis-box { fill: #fff; stroke: #000; stroke-width: 1px; }
.uf-axis-zero { stroke: #999; stroke-width: 1px; stroke-dasharray: 4 3; }
.uf-grid { stroke: #e5e5e5; stroke-width: 1px; }
.uf-tick { font-size: 0.7rem; fill: #333; text-anchor: middle; }
.uf-tick--y { text-anchor: end; }
.uf-axis-label { font-size: 0.8rem; fill: #000; text-anchor: middle; font-weight: 600; }
.uf-bar-val { font-size: 0.7rem; fill: #000; text-anchor: middle; }
.uf-bar-label { font-size: 0.7rem; fill: #333; text-anchor: start; }

/* Punkter + staplar: färg per utfallsklass (Wong 2011) */
.uf-pt { stroke: #fff; stroke-width: 0.5px; opacity: 0.85; }
.uf-bar { stroke: #fff; stroke-width: 0.5px; }
.uf-pt--REALISERAD { fill: #009E73; }
.uf-pt--FRAMVAXANDE { fill: #56B4E9; }
.uf-pt--DELVIS_REALISERAD { fill: #F0E442; }
.uf-pt--FORSKJUTEN { fill: #E69F00; }
.uf-pt--NEDLAGD { fill: #D55E00; }
.uf-pt--AVBRUTEN { fill: #000000; }