:root{ --lp:#113a5c;--lp-d:#0b2a44;--lp-m:#1c5580;--lp-t:rgba(17,58,92,.07); --lo:#d64545;--lo-h:#b93636;--lo-l:rgba(214,69,69,.13);--lo-p:rgba(214,69,69,.06); --bg:#f3f6fa;--wh:#fff;--g100:#e8eef5;--g200:#d3dfeb;--g400:#8098b2;--g600:#4f6478; /* Pillar accents as TEXT. Names are derived from the pillar id in js/08 and must not be hand-typed here. Light values are identical to PILLARS[].accent so this theme is unchanged; the dark block redefines them. Ratios measured against dark --wh #132030, the surface the small 11-16px uses sit on. */ --pillar-text-framework:#6d28d9; /* 7.10 on --wh · 6.55 on --bg */ --pillar-text-care:#0e7490; /* 5.36 on --wh · 4.94 on --bg */ --pillar-text-leadership:#a16207; /* 4.92 on --wh · 4.54 on --bg */ --tx:#101c28;--txs:#3d5062;--txm:#566b80;--bdr:#d8e2ec;/* --txm darkened from #8098b2 to meet WCAG AA (~5.2:1) on --bg; dark mode overrides it below */ --ok:#16a34a;--ok-l:#dcfce7;--er:#dc2626;--er-l:#fee2e2; --wa:#d97706;--wa-l:#fef3c7;--inf:#2563eb;--inf-l:#dbeafe; /* Badge text. --ok/--wa/--er are tuned to read as icons and borders against the page, not as small text on their own tint: --wa on --wa-l is only 2.9:1. These are the same hues darkened to clear WCAG AA (4.5:1) for the 0.68rem bold text used on status pills. Overridden for dark mode, where the tints are .18 alpha. */ --ok-bt:#166534;--wa-bt:#92400e;--er-bt:#991b1b;--inf-bt:#1d4ed8; /* Violet joins them. It is not a status colour, which is exactly why it was missed: #7c3aed is a DATA colour — track2's accent, doubling as the supervisor role — and nobody audits a data colour as a status pill. On its own 12% tint it measures 5.44 light but 2.77 dark. */ --vi-bt:#6d28d9; /* --lo is the same story, one token later, and it was missed because it is a BRAND colour rather than a status one — nobody thinks of the accent as a status pill. It is used as small bold text in about thirty rules and clears 4.5:1 on none of the surfaces it lands on: 4.38 on white, 4.04 on --bg, 3.75 on --g100, and 3.18-3.67 once its own --lo-l tint is under it (the .rel-chip case, 969 elements). --lo itself is untouched — it is the accent, it drives The Flow, and it is correct as a fill and a border. --lo-btn / --lo-btn-tx are the solid crimson button: white on --lo is 4.38, and in high-contrast dark --lo becomes a pale salmon where white drops to 1.91 and the text has to go dark instead. */ --lo-bt:#b22727; /* 6.54 white · 6.03 --bg · 4.74 on --lo-l over --g100 */ --lo-btn:#d33939;--lo-btn-tx:#fff; /* white on the fill: 4.76 */ --ok-btn:#12843c; /* white on --ok itself is only 3.30 */ --fd:'Playfair Display',Georgia,serif;--fb:'Nunito',system-ui,sans-serif;--heading:var(--lp); --r:10px;--rs:6px;--rl:16px; --sh:0 2px 12px rgba(17,58,92,.09);--shm:0 4px 20px rgba(17,58,92,.13);--shl:0 8px 32px rgba(17,58,92,.17); /* Z-INDEX SCALE — single source of truth. Each layer leaves room above for related elements (e.g. a popover sitting on top of its modal). Use these custom properties for new components instead of raw numbers. */ --z-base:1; --z-sticky:1040; /* main nav, sticky tab bars */ --z-dropdown:1100; /* nav submenu */ --z-fab:2000; /* floating action elements */ --z-mob-nav:9000; /* bottom mobile nav */ --z-a11y:9998; /* a11y settings widget */ --z-toast:9999; /* toast notifications */ --z-modal:10000; /* modal overlays, level-up, search */ --z-modal-popover:10001; /* popovers/menus inside a modal */ --z-boot-error:99999; /* last-resort boot failure dialog */ } *,*::before,*::after{box-sizing:border-box} /* color-scheme tells the browser what mode native UI (form controls, scrollbars, the open dropdown list of for keyboard a11y; visual weight matches the chips above. */ .case-filter-select{ width:100%;border:1.5px solid var(--bdr);background-color:var(--wh); border-radius:2rem;padding:.42rem 2.1rem .42rem 1rem; font-family:var(--fb);font-size:.82rem;font-weight:600;color:var(--tx); cursor:pointer;transition:border-color .15s,box-shadow .15s; /* Tell the browser the closed control matches the page's color scheme, so the OPEN dropdown list (which is browser-native) renders with the same light/dark scheme as the rest of the page. Without this hint, Chrome/Edge sometimes pick the OS preference instead of the app's theme, causing the dropdown list to flash light when the page is dark (the bug that looked like "theme reverts after selection"). */ color-scheme:light; /* Custom dropdown chevron — single source so all selects look identical across browsers. Light-mode SVG (brand purple chevron); dark-mode override below uses a lighter version so it remains visible against the dark dropdown surface. */ appearance:none;-webkit-appearance:none;-moz-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right .7rem center;background-size:.85rem; } .case-filter-select:hover{border-color:var(--g400)} .case-filter-select:focus{outline:none;border-color:var(--lo);box-shadow:0 0 0 3px rgba(214,69,69,.15)} /* Visual hint when a select has been changed away from default — softer colored border so the eye picks out which filters are set without needing to read each value. */ .case-filter-select.is-active{border-color:var(--lo);background-color:var(--lo-p)} /* Dark-mode chevron + color-scheme. Without these, the open dropdown list inherits the system preference instead of the app's dark theme, producing the "theme flips on selection" perception. Explicit background-color + color overrides act as defense in depth in case any browser auto-dark-mode override is interfering. */ body.liq-dark .case-filter-select{ color-scheme:dark; background-color:var(--wh); color:var(--tx); border-color:var(--bdr); background-image:url("data:image/svg+xml;utf8,"); } /* Explicit