/* ============================================================================= Colorblind mode — Okabe-Ito palette ============================================================================= Loaded on BOTH patient and staff surfaces. Activated by adding the `cb-mode` class to (the pre-paint script in each base.html reads localStorage `mhc_a11y_cb` and applies the class before first paint, so there's no flash of the default palette). Palette: Okabe-Ito ( https://jfly.uni-koeln.de/color/ ), the standard colorblind-safe scientific palette. Distinguishable across deuteranopia, protanopia, and tritanopia. bluish-green #009e73 → Optimal (replaces forest green) yellow #c69b00 → Borderline (darkened for AA contrast on cream) vermillion #d55e00 → Out-of-range (replaces terra red) Plus patterns on the category-bar segments and a thicker dashed stroke on abnormal status dots, so the elements remain distinguishable even when the user can't see color contrast at all. ============================================================================= */ html.cb-mode { --status-optimal: #009e73; --status-borderline: #c69b00; --status-out-of-range: #d55e00; --status-outofrange: #d55e00; } /* ---------- /labs category bar ---------- */ html.cb-mode .seg-optimal { background-color: #009e73; } html.cb-mode .seg-borderline { background: repeating-linear-gradient( -45deg, #e8c44a 0, #e8c44a 3px, #c69b00 3px, #c69b00 6px ); } html.cb-mode .seg-out { background: repeating-linear-gradient( 45deg, #d55e00 0, #d55e00 3px, #a04600 3px, #a04600 6px ); } /* ---------- Count pills on the category cards ---------- */ html.cb-mode .count-optimal { color: #006e51; background-color: rgba(0, 158, 115, 0.10); } html.cb-mode .count-optimal::before { background-color: #009e73; } html.cb-mode .count-borderline { color: #8a6c00; background-color: rgba(198, 155, 0, 0.10); } html.cb-mode .count-borderline::before { background-color: #c69b00; } html.cb-mode .count-out { color: #a04600; background-color: rgba(213, 94, 0, 0.10); } html.cb-mode .count-out::before { background-color: #d55e00; } /* ---------- Biomarker row left-border + status pill ---------- */ html.cb-mode .biomarker-info.status-optimal { border-left-color: #009e73; } html.cb-mode .biomarker-info.status-borderline { border-left-color: #c69b00; } html.cb-mode .biomarker-info.status-out-of-range { border-left-color: #d55e00; } html.cb-mode .status-optimal .status-pill { color: #006e51; } html.cb-mode .status-borderline .status-pill { color: #8a6c00; } html.cb-mode .status-out-of-range .status-pill { color: #a04600; } html.cb-mode .status-pill-optimal { background: rgba(0, 158, 115, 0.10); color: #006e51; } html.cb-mode .status-pill-out-of-range { background: rgba(213, 94, 0, 0.10); color: #a04600; } /* ---------- SVG range-bar zone fills ---------- */ /* Each zone is emitted with class="zone-fill zone-fill-" so we can repaint them via CSS in colorblind mode. */ html.cb-mode .zone-fill-green { fill: #009e73; } html.cb-mode .zone-fill-yellow-green { fill: #5cb35c; } html.cb-mode .zone-fill-yellow { fill: #c69b00; } html.cb-mode .zone-fill-orange { fill: #e69f00; } html.cb-mode .zone-fill-red { fill: #d55e00; } html.cb-mode .zone-fill-dark-red { fill: #b04600; } html.cb-mode .zone-fill-gray { fill: #9a9087; } /* ---------- Status-dot trend (binary / categorical biomarkers) ---------- */ /* Abnormal dots get a dashed thicker stroke so they read as a different SHAPE — helpful when the user can't distinguish the two colors. */ html.cb-mode .status-dot-normal { fill: #009e73; } html.cb-mode .status-dot-abnormal { fill: #d55e00; stroke-width: 3; stroke-dasharray: 2 2; } /* ---------- Recheck banners (Due / Waiting / Ready) ---------- */ html.cb-mode .recheck-tile.is-waiting { background: #fff4cf; border-color: #c69b00; } html.cb-mode .recheck-tile.is-ready { background: #e0f3eb; border-color: #009e73; } html.cb-mode .recheck-status-pill { background-color: #c69b00; } html.cb-mode .recheck-status-pill.is-ready { background-color: #009e73; } /* ---------- Staff-side: biomarker zone editor ---------- */ /* The zone editor renders colored swatches and a live preview bar using inline `background:` from JS. Each element gets a `swatch-` or `preview-zone-` class so we can override via CSS — but inline styles are higher specificity than external classes, so we need !important to win. */ html.cb-mode .swatch-green { background: #009e73 !important; } html.cb-mode .swatch-yellow-green { background: #5cb35c !important; } html.cb-mode .swatch-yellow { background: #c69b00 !important; } html.cb-mode .swatch-orange { background: #e69f00 !important; } html.cb-mode .swatch-red { background: #d55e00 !important; } html.cb-mode .swatch-dark-red { background: #b04600 !important; } html.cb-mode .swatch-gray { background: #9a9087 !important; } html.cb-mode .preview-zone-green { background: #009e73 !important; } html.cb-mode .preview-zone-yellow-green { background: #5cb35c !important; } html.cb-mode .preview-zone-yellow { background: #c69b00 !important; } html.cb-mode .preview-zone-orange { background: #e69f00 !important; } html.cb-mode .preview-zone-red { background: #d55e00 !important; } html.cb-mode .preview-zone-dark-red { background: #b04600 !important; } html.cb-mode .preview-zone-gray { background: #9a9087 !important; } /* ---------- Staff-side: editor diff sidebar ---------- */ /* The diff cards (worsened/improved/flipped) use inline backgrounds in the template, but the strong color word ("Newly abnormal" etc.) uses inline fg colors which we can't easily override here. Patient-side surfaces are the priority; staff get the palette swap on their patient detail labs section but the diff sidebar keeps its original colors. */ /* ---------- Sparkline: shape-encoding in CB mode ---------- */ /* The sparkline renders each historical lab as a colored dot. In normal mode color alone carries the in-range / out-of-range distinction. In colorblind mode we ALSO swap the SHAPE so non-optimal dots are visually distinct even when the swapped colors aren't easy to tell apart: circle = in range, diamond = borderline, square = out of range. The "in range" dot stays a circle in both modes (the range bar above it already communicates "you are in the green zone"). */ /* Default mode: hide the alt shape, show the circle. */ .spark-shape-cb { display: none; } /* CB mode: for dots whose status is borderline or out-of-range, hide the circle and show the alt shape that follows it in the SVG. */ html.cb-mode .spark-dot[data-status="borderline"] .spark-shape-default, html.cb-mode .spark-dot[data-status="out-of-range"] .spark-shape-default { display: none; } html.cb-mode .spark-dot[data-status="borderline"] .spark-shape-cb, html.cb-mode .spark-dot[data-status="out-of-range"] .spark-shape-cb { display: inline; }