/* Self-hosted fonts (latin subset, variable axis where applicable).
   Source: Google Fonts (Inter, Source Serif 4: OFL; JetBrains Mono: OFL). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/inter-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('./fonts/source-serif-4-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('./fonts/jetbrains-mono-latin-var.woff2') format('woff2');
}
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:JetBrains Mono,ui-monospace,SFMono-Regular,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where(:not([type])),input:where([type=date]),input:where([type=datetime-local]),input:where([type=email]),input:where([type=month]),input:where([type=number]),input:where([type=password]),input:where([type=search]),input:where([type=tel]),input:where([type=text]),input:where([type=time]),input:where([type=url]),input:where([type=week]),select,select:where([multiple]),textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}input:where(:not([type])):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=email]):focus,input:where([type=month]):focus,input:where([type=number]):focus,input:where([type=password]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=text]):focus,input:where([type=time]):focus,input:where([type=url]):focus,input:where([type=week]):focus,select:focus,select:where([multiple]):focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}select:where([multiple]),select:where([size]:not([size="1"])){background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}input:where([type=checkbox]),input:where([type=radio]){-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow:0 0 #0000}input:where([type=checkbox]){border-radius:0}input:where([type=radio]){border-radius:100%}input:where([type=checkbox]):focus,input:where([type=radio]):focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}input:where([type=checkbox]):checked,input:where([type=radio]):checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}input:where([type=checkbox]):checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E")}@media (forced-colors:active) {input:where([type=checkbox]):checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=radio]):checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}@media (forced-colors:active) {input:where([type=radio]):checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=checkbox]):checked:focus,input:where([type=checkbox]):checked:hover,input:where([type=radio]):checked:focus,input:where([type=radio]):checked:hover{border-color:transparent;background-color:currentColor}input:where([type=checkbox]):indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}@media (forced-colors:active) {input:where([type=checkbox]):indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=checkbox]):indeterminate:focus,input:where([type=checkbox]):indeterminate:hover{border-color:transparent;background-color:currentColor}input:where([type=file]){background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}input:where([type=file]):focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows);font-size:.875em;border-radius:.3125rem;padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;padding-inline-start:.375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding-top:.8571429em;padding-inline-end:1.1428571em;padding-bottom:.8571429em;padding-inline-start:1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-kbd:#111827;--tw-prose-kbd-shadows:rgba(17,24,39,.1);--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:hsla(0,0%,100%,.1);--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.5714286em;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose-sm{font-size:.875rem;line-height:1.7142857}.prose-sm :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em}.prose-sm :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.2857143em;line-height:1.5555556;margin-top:.8888889em;margin-bottom:.8888889em}.prose-sm :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em;margin-bottom:1.3333333em;padding-inline-start:1.1111111em}.prose-sm :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:2.1428571em;margin-top:0;margin-bottom:.8em;line-height:1.2}.prose-sm :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.4285714em;margin-top:1.6em;margin-bottom:.8em;line-height:1.4}.prose-sm :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.2857143em;margin-top:1.5555556em;margin-bottom:.4444444em;line-height:1.5555556}.prose-sm :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.4285714em;margin-bottom:.5714286em;line-height:1.4285714}.prose-sm :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose-sm :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;border-radius:.3125rem;padding-top:.1428571em;padding-inline-end:.3571429em;padding-bottom:.1428571em;padding-inline-start:.3571429em}.prose-sm :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em}.prose-sm :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.9em}.prose-sm :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8888889em}.prose-sm :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;line-height:1.6666667;margin-top:1.6666667em;margin-bottom:1.6666667em;border-radius:.25rem;padding-top:.6666667em;padding-inline-end:1em;padding-bottom:.6666667em;padding-inline-start:1em}.prose-sm :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em;padding-inline-start:1.5714286em}.prose-sm :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em;padding-inline-start:1.5714286em}.prose-sm :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.2857143em;margin-bottom:.2857143em}.prose-sm :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.4285714em}.prose-sm :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.4285714em}.prose-sm :where(.prose-sm>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5714286em;margin-bottom:.5714286em}.prose-sm :where(.prose-sm>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose-sm>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(.prose-sm>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose-sm>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5714286em;margin-bottom:.5714286em}.prose-sm :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em}.prose-sm :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.2857143em;padding-inline-start:1.5714286em}.prose-sm :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2.8571429em;margin-bottom:2.8571429em}.prose-sm :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;line-height:1.5}.prose-sm :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:1em;padding-bottom:.6666667em;padding-inline-start:1em}.prose-sm :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose-sm :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose-sm :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.6666667em;padding-inline-end:1em;padding-bottom:.6666667em;padding-inline-start:1em}.prose-sm :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose-sm :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose-sm :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose-sm :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;line-height:1.3333333;margin-top:.6666667em}.prose-sm :where(.prose-sm>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(.prose-sm>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose-invert{--tw-prose-body:var(--tw-prose-invert-body);--tw-prose-headings:var(--tw-prose-invert-headings);--tw-prose-lead:var(--tw-prose-invert-lead);--tw-prose-links:var(--tw-prose-invert-links);--tw-prose-bold:var(--tw-prose-invert-bold);--tw-prose-counters:var(--tw-prose-invert-counters);--tw-prose-bullets:var(--tw-prose-invert-bullets);--tw-prose-hr:var(--tw-prose-invert-hr);--tw-prose-quotes:var(--tw-prose-invert-quotes);--tw-prose-quote-borders:var(--tw-prose-invert-quote-borders);--tw-prose-captions:var(--tw-prose-invert-captions);--tw-prose-kbd:var(--tw-prose-invert-kbd);--tw-prose-kbd-shadows:var(--tw-prose-invert-kbd-shadows);--tw-prose-code:var(--tw-prose-invert-code);--tw-prose-pre-code:var(--tw-prose-invert-pre-code);--tw-prose-pre-bg:var(--tw-prose-invert-pre-bg);--tw-prose-th-borders:var(--tw-prose-invert-th-borders);--tw-prose-td-borders:var(--tw-prose-invert-td-borders)}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.bottom-0\.5{bottom:.125rem}.bottom-2{bottom:.5rem}.bottom-3{bottom:.75rem}.left-0{left:0}.left-1{left:.25rem}.left-2{left:.5rem}.left-3{left:.75rem}.right-0{right:0}.top-0{top:0}.top-0\.5{top:.125rem}.z-20{z-index:20}.z-50{z-index:50}.order-1{order:1}.order-10{order:10}.order-2{order:2}.order-3{order:3}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.col-span-12{grid-column:span 12/span 12}.m-4{margin:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-6{margin-bottom:1.5rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-20{height:5rem}.h-3{height:.75rem}.h-9{height:2.25rem}.h-\[180px\]{height:180px}.h-\[220px\]{height:220px}.h-\[230px\]{height:230px}.h-\[720px\]{height:720px}.h-full{height:100%}.h-px{height:1px}.max-h-48{max-height:12rem}.max-h-\[170px\]{max-height:170px}.max-h-\[75vh\]{max-height:75vh}.min-h-screen{min-height:100vh}.w-12{width:3rem}.w-14{width:3.5rem}.w-2\.5{width:.625rem}.w-20{width:5rem}.w-3{width:.75rem}.w-9{width:2.25rem}.w-\[190px\]{width:190px}.w-\[42px\]{width:42px}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[126px\]{min-width:126px}.min-w-\[640px\]{min-width:640px}.max-w-3xl{max-width:48rem}.max-w-\[1600px\]{max-width:1600px}.max-w-\[260px\]{max-width:260px}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-not-allowed{cursor:not-allowed}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-8{gap:2rem}.gap-\[3px\]{gap:3px}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-0\.5{row-gap:.125rem}.gap-y-1{row-gap:.25rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-ink-700\/80>:not([hidden])~:not([hidden]){border-color:rgba(219,230,232,.8)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.rounded-r-lg{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l-2{border-left-width:2px}.border-t{border-top-width:1px}.border-amber-500\/30{border-color:rgba(245,158,11,.3)}.border-flood-300{--tw-border-opacity:1;border-color:rgb(168 193 132/var(--tw-border-opacity,1))}.border-flood-600\/30{border-color:rgba(75,106,58,.3)}.border-flood-600\/40{border-color:rgba(75,106,58,.4)}.border-flood-600\/50{border-color:rgba(75,106,58,.5)}.border-ink-600{--tw-border-opacity:1;border-color:rgb(185 205 208/var(--tw-border-opacity,1))}.border-ink-600\/40{border-color:rgba(185,205,208,.4)}.border-ink-600\/50{border-color:rgba(185,205,208,.5)}.border-ink-600\/60{border-color:rgba(185,205,208,.6)}.border-ink-700{--tw-border-opacity:1;border-color:rgb(219 230 232/var(--tw-border-opacity,1))}.border-ink-700\/50{border-color:rgba(219,230,232,.5)}.border-ink-700\/60{border-color:rgba(219,230,232,.6)}.border-ink-700\/70{border-color:rgba(219,230,232,.7)}.border-ink-800{--tw-border-opacity:1;border-color:rgb(241 245 246/var(--tw-border-opacity,1))}.border-mekong-400\/50{border-color:rgba(47,138,149,.5)}.border-mekong-400\/60{border-color:rgba(47,138,149,.6)}.border-mekong-500\/30{border-color:rgba(18,118,132,.3)}.border-mekong-500\/40{border-color:rgba(18,118,132,.4)}.border-mekong-600\/40{border-color:rgba(13,100,115,.4)}.border-mekong-600\/50{border-color:rgba(13,100,115,.5)}.border-mekong-600\/60{border-color:rgba(13,100,115,.6)}.border-mekong-700\/40{border-color:rgba(10,79,93,.4)}.border-mekong-700\/50{border-color:rgba(10,79,93,.5)}.border-sediment-300{--tw-border-opacity:1;border-color:rgb(224 179 120/var(--tw-border-opacity,1))}.border-sediment-500\/30{border-color:rgba(184,115,40,.3)}.border-sediment-500\/40{border-color:rgba(184,115,40,.4)}.border-sediment-500\/50{border-color:rgba(184,115,40,.5)}.bg-amber-500\/10{background-color:rgba(245,158,11,.1)}.bg-black\/70{background-color:rgba(0,0,0,.7)}.bg-flood-300{--tw-bg-opacity:1;background-color:rgb(168 193 132/var(--tw-bg-opacity,1))}.bg-flood-500{--tw-bg-opacity:1;background-color:rgb(95 124 69/var(--tw-bg-opacity,1))}.bg-flood-600\/10{background-color:rgba(75,106,58,.1)}.bg-flood-600\/30{background-color:rgba(75,106,58,.3)}.bg-flood-600\/60{background-color:rgba(75,106,58,.6)}.bg-flood-700\/10{background-color:rgba(59,85,48,.1)}.bg-flood-700\/15{background-color:rgba(59,85,48,.15)}.bg-flood-700\/20{background-color:rgba(59,85,48,.2)}.bg-flood-700\/25{background-color:rgba(59,85,48,.25)}.bg-flood-700\/30{background-color:rgba(59,85,48,.3)}.bg-ink-700{--tw-bg-opacity:1;background-color:rgb(219 230 232/var(--tw-bg-opacity,1))}.bg-ink-700\/50{background-color:rgba(219,230,232,.5)}.bg-ink-700\/60{background-color:rgba(219,230,232,.6)}.bg-ink-700\/70{background-color:rgba(219,230,232,.7)}.bg-ink-800{--tw-bg-opacity:1;background-color:rgb(241 245 246/var(--tw-bg-opacity,1))}.bg-ink-800\/40{background-color:rgba(241,245,246,.4)}.bg-ink-800\/70{background-color:rgba(241,245,246,.7)}.bg-ink-900{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-ink-900\/40{background-color:hsla(0,0%,100%,.4)}.bg-ink-900\/45{background-color:hsla(0,0%,100%,.45)}.bg-ink-900\/55{background-color:hsla(0,0%,100%,.55)}.bg-ink-900\/60{background-color:hsla(0,0%,100%,.6)}.bg-ink-900\/70{background-color:hsla(0,0%,100%,.7)}.bg-ink-900\/80{background-color:hsla(0,0%,100%,.8)}.bg-ink-950{--tw-bg-opacity:1;background-color:rgb(245 242 236/var(--tw-bg-opacity,1))}.bg-ink-950\/40{background-color:hsla(40,31%,94%,.4)}.bg-ink-950\/50{background-color:hsla(40,31%,94%,.5)}.bg-ink-950\/55{background-color:hsla(40,31%,94%,.55)}.bg-ink-950\/60{background-color:hsla(40,31%,94%,.6)}.bg-ink-950\/75{background-color:hsla(40,31%,94%,.75)}.bg-ink-950\/80{background-color:hsla(40,31%,94%,.8)}.bg-ink-950\/85{background-color:hsla(40,31%,94%,.85)}.bg-ink-950\/95{background-color:hsla(40,31%,94%,.95)}.bg-mekong-400{--tw-bg-opacity:1;background-color:rgb(47 138 149/var(--tw-bg-opacity,1))}.bg-mekong-500\/10{background-color:rgba(18,118,132,.1)}.bg-mekong-500\/75{background-color:rgba(18,118,132,.75)}.bg-mekong-600\/30{background-color:rgba(13,100,115,.3)}.bg-mekong-700{--tw-bg-opacity:1;background-color:rgb(10 79 93/var(--tw-bg-opacity,1))}.bg-mekong-700\/15{background-color:rgba(10,79,93,.15)}.bg-mekong-700\/20{background-color:rgba(10,79,93,.2)}.bg-mekong-700\/25{background-color:rgba(10,79,93,.25)}.bg-mekong-700\/30{background-color:rgba(10,79,93,.3)}.bg-mekong-700\/60{background-color:rgba(10,79,93,.6)}.bg-mekong-900\/30{background-color:rgba(6,58,69,.3)}.bg-sediment-500{--tw-bg-opacity:1;background-color:rgb(184 115 40/var(--tw-bg-opacity,1))}.bg-sediment-500\/10{background-color:rgba(184,115,40,.1)}.bg-sediment-500\/15{background-color:rgba(184,115,40,.15)}.bg-sediment-500\/30{background-color:rgba(184,115,40,.3)}.bg-sediment-500\/5{background-color:rgba(184,115,40,.05)}.bg-slate-400{--tw-bg-opacity:1;background-color:rgb(62 111 120/var(--tw-bg-opacity,1))}.bg-slate-500{--tw-bg-opacity:1;background-color:rgb(91 129 138/var(--tw-bg-opacity,1))}.bg-slate-600{--tw-bg-opacity:1;background-color:rgb(122 154 161/var(--tw-bg-opacity,1))}.bg-\[linear-gradient\(to_bottom\2c rgba\(6\2c 12\2c 18\2c 0\.04\)\2c rgba\(6\2c 12\2c 18\2c 0\.42\)\)\]{background-image:linear-gradient(180deg,rgba(6,12,18,.04),rgba(6,12,18,.42))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-flood-600\/40{--tw-gradient-from:rgba(75,106,58,.4) var(--tw-gradient-from-position);--tw-gradient-to:rgba(75,106,58,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-ink-700\/60{--tw-gradient-from:rgba(219,230,232,.6) var(--tw-gradient-from-position);--tw-gradient-to:rgba(219,230,232,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-ink-900\/80{--tw-gradient-from:hsla(0,0%,100%,.8) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-mekong-500\/40{--tw-gradient-from:rgba(18,118,132,.4) var(--tw-gradient-from-position);--tw-gradient-to:rgba(18,118,132,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-mekong-900\/40{--tw-gradient-from:rgba(6,58,69,.4) var(--tw-gradient-from-position);--tw-gradient-to:rgba(6,58,69,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-sediment-400\/35{--tw-gradient-from:rgba(210,147,73,.35) var(--tw-gradient-from-position);--tw-gradient-to:rgba(210,147,73,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-sediment-500\/45{--tw-gradient-from:rgba(184,115,40,.45) var(--tw-gradient-from-position);--tw-gradient-to:rgba(184,115,40,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-sediment-600\/60{--tw-gradient-from:rgba(150,88,24,.6) var(--tw-gradient-from-position);--tw-gradient-to:rgba(150,88,24,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-ink-900\/70{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),hsla(0,0%,100%,.7) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-flood-700\/60{--tw-gradient-to:rgba(59,85,48,.6) var(--tw-gradient-to-position)}.to-ink-800\/70{--tw-gradient-to:rgba(241,245,246,.7) var(--tw-gradient-to-position)}.to-ink-800\/80{--tw-gradient-to:rgba(241,245,246,.8) var(--tw-gradient-to-position)}.to-ink-900\/60{--tw-gradient-to:hsla(0,0%,100%,.6) var(--tw-gradient-to-position)}.to-mekong-700\/60{--tw-gradient-to:rgba(10,79,93,.6) var(--tw-gradient-to-position)}.to-mekong-900\/40{--tw-gradient-to:rgba(6,58,69,.4) var(--tw-gradient-to-position)}.to-sediment-600\/55{--tw-gradient-to:rgba(150,88,24,.55) var(--tw-gradient-to-position)}.to-sediment-600\/70{--tw-gradient-to:rgba(150,88,24,.7) var(--tw-gradient-to-position)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0\.5{padding:.125rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-\[1px\]{padding-top:1px;padding-bottom:1px}.pl-5{padding-left:1.25rem}.pr-1{padding-right:.25rem}.pr-3{padding-right:.75rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.font-mono{font-family:JetBrains Mono,ui-monospace,SFMono-Regular,monospace}.font-sans{font-family:Inter,ui-sans-serif,system-ui,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[28px\]{font-size:28px}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.normal-case{text-transform:none}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[0\.14em\]{letter-spacing:.14em}.tracking-\[0\.15em\]{letter-spacing:.15em}.tracking-\[0\.16em\]{letter-spacing:.16em}.tracking-\[0\.18em\]{letter-spacing:.18em}.tracking-\[0\.22em\]{letter-spacing:.22em}.tracking-normal{letter-spacing:0}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-100{--tw-text-opacity:1;color:rgb(254 243 199/var(--tw-text-opacity,1))}.text-amber-100\/90{color:hsla(48,96%,89%,.9)}.text-amber-200{--tw-text-opacity:1;color:rgb(253 230 138/var(--tw-text-opacity,1))}.text-amber-200\/80{color:hsla(48,97%,77%,.8)}.text-flood-200{--tw-text-opacity:1;color:rgb(207 220 177/var(--tw-text-opacity,1))}.text-flood-400{--tw-text-opacity:1;color:rgb(126 145 98/var(--tw-text-opacity,1))}.text-mekong-100{--tw-text-opacity:1;color:rgb(194 224 227/var(--tw-text-opacity,1))}.text-mekong-300{--tw-text-opacity:1;color:rgb(95 167 175/var(--tw-text-opacity,1))}.text-mekong-300\/80{color:rgba(95,167,175,.8)}.text-mekong-400\/80{color:rgba(47,138,149,.8)}.text-mekong-50{--tw-text-opacity:1;color:rgb(230 243 244/var(--tw-text-opacity,1))}.text-sediment-100{--tw-text-opacity:1;color:rgb(251 231 200/var(--tw-text-opacity,1))}.text-sediment-200{--tw-text-opacity:1;color:rgb(240 201 139/var(--tw-text-opacity,1))}.text-sediment-300{--tw-text-opacity:1;color:rgb(224 179 120/var(--tw-text-opacity,1))}.text-slate-100{--tw-text-opacity:1;color:rgb(11 53 64/var(--tw-text-opacity,1))}.text-slate-200{--tw-text-opacity:1;color:rgb(20 58 69/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(30 79 92/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(62 111 120/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(91 129 138/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(122 154 161/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/85{color:hsla(0,0%,100%,.85)}.text-white\/90{color:hsla(0,0%,100%,.9)}.underline-offset-2{text-underline-offset:2px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.accent-flood-300{accent-color:#a8c184}.accent-mekong-400{accent-color:#2f8a95}.accent-sediment-400{accent-color:#d29349}.opacity-90{opacity:.9}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-\[0_0_0_1px_rgba\(240\2c 173\2c 88\2c 0\.25\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_0_1px_rgba\(240\2c 173\2c 88\2c 0\.25\)\]{--tw-shadow:0 0 0 1px rgba(240,173,88,.25);--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline{outline-style:solid}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-flood-200{--tw-ring-opacity:1;--tw-ring-color:rgb(207 220 177/var(--tw-ring-opacity,1))}.blur{--tw-blur:blur(8px)}.blur,.grayscale{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale:grayscale(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px)}.backdrop-blur,.backdrop-blur-sm{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.last\:mb-0:last-child{margin-bottom:0}.hover\:border-mekong-300:hover{--tw-border-opacity:1;border-color:rgb(95 167 175/var(--tw-border-opacity,1))}.hover\:border-mekong-300\/80:hover{border-color:rgba(95,167,175,.8)}.hover\:border-mekong-500\/50:hover{border-color:rgba(18,118,132,.5)}.hover\:border-mekong-500\/60:hover{border-color:rgba(18,118,132,.6)}.hover\:border-sediment-400\/60:hover{border-color:rgba(210,147,73,.6)}.hover\:bg-ink-700:hover{--tw-bg-opacity:1;background-color:rgb(219 230 232/var(--tw-bg-opacity,1))}.hover\:bg-ink-800:hover{--tw-bg-opacity:1;background-color:rgb(241 245 246/var(--tw-bg-opacity,1))}.hover\:bg-ink-800\/60:hover{background-color:rgba(241,245,246,.6)}.hover\:bg-ink-800\/70:hover{background-color:rgba(241,245,246,.7)}.hover\:bg-mekong-500\/20:hover{background-color:rgba(18,118,132,.2)}.hover\:bg-mekong-500\/50:hover{background-color:rgba(18,118,132,.5)}.hover\:bg-mekong-600\/30:hover{background-color:rgba(13,100,115,.3)}.hover\:text-mekong-100:hover{--tw-text-opacity:1;color:rgb(194 224 227/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-1:focus,.focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-mekong-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(95 167 175/var(--tw-ring-opacity,1))}.focus\:ring-mekong-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(47 138 149/var(--tw-ring-opacity,1))}.group:hover .group-hover\:text-slate-200{--tw-text-opacity:1;color:rgb(20 58 69/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:inline{display:inline}.sm\:h-24{height:6rem}.sm\:w-24{width:6rem}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:p-5{padding:1.25rem}.sm\:p-6{padding:1.5rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-5{grid-column:span 5/span 5}.md\:col-span-7{grid-column:span 7/span 7}.md\:flex{display:flex}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:1024px){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:col-span-8{grid-column:span 8/span 8}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (min-width:1280px){.xl\:col-span-3{grid-column:span 3/span 3}.xl\:col-span-4{grid-column:span 4/span 4}.xl\:col-span-5{grid-column:span 5/span 5}.xl\:col-span-7{grid-column:span 7/span 7}.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xl\:grid-cols-\[1fr_auto_1fr\]{grid-template-columns:1fr auto 1fr}}      :root {
        --fitz-teal-900: #063a45;
        --fitz-teal-800: #0a4f5d;
        --fitz-teal-700: #0d6473;
        --fitz-teal-600: #127684;
        --fitz-teal-500: #2f8a95;
        --fitz-teal-300: #5fa7af;
        --fitz-cream:    #f5f2ec;
        --fitz-white:    #ffffff;
        --fitz-ink:      #0b2a33;
        --fitz-muted:    #5b818a;
        --fitz-border:   #dbe6e8;
        --fitz-amber:    #b87328;
        --fitz-green:    #5f7c45;

        /* -----------------------------------------------------------------
           Health-grade pastel palette (health-grade-scale-2026-05-19).
           A: pastel dark green   → white text
           B: pastel light green  → dark text
           C: pastel orange       → dark text
           D: pastel light orange → dark text
           E: pastel (muted) red  → white text
           N: pastel grey         → dark text
           Mirrors HEALTH_GRADE_PALETTE in the JS bundle. Used by the
           .health-grade-circle and .health-grade-pill classes (see bottom
           of file) so DOM badges can be styled by data-grade alone.
           ----------------------------------------------------------------- */
        --grade-bg-A: #4d7a40;  --grade-fg-A: #ffffff;
        --grade-bg-B: #b8d8a8;  --grade-fg-B: #143a14;
        --grade-bg-C: #f0a85c;  --grade-fg-C: #3a2410;
        --grade-bg-D: #fcd9b0;  --grade-fg-D: #3a2410;
        --grade-bg-E: #b84848;  --grade-fg-E: #ffffff;
        --grade-bg-N: #c9d2d4;  --grade-fg-N: #0b2a33;
      }
      html, body {
        background: var(--fitz-cream);
        color: var(--fitz-ink);
      }
      body {
        font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      .tnum { font-variant-numeric: tabular-nums lining-nums; }
      .num  { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
      .chip { font-feature-settings: "ss01" 1, "tnum" 1; }
      ::selection { background: var(--fitz-teal-700); color: #fff; }

      /* ---- Fitzroy structural elements (added in JSX) ---- */
      .fitzroy-app { background: var(--fitz-cream); }
      .fitzroy-topstrip {
        background: var(--fitz-teal-700);
        color: #ecfafe;
        border-bottom: 1px solid rgba(255,255,255,0.08);
      }
      .fitzroy-header {
        background: var(--fitz-white);
        border-bottom: 1px solid var(--fitz-border);
        box-shadow: 0 1px 0 rgba(13,100,115,0.04);
      }
      .fitzroy-brand-title {
        font-family: 'Source Serif 4', Georgia, serif;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--fitz-teal-800);
        letter-spacing: -0.01em;
        line-height: 1.15;
      }
      .fitzroy-brand-sub {
        margin-top: 2px;
        font-size: 11.5px;
        color: var(--fitz-muted);
        letter-spacing: 0.01em;
      }
      .fitzroy-nav { margin: 0 auto; }
      .fitzroy-nav-link {
        position: relative;
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 600;
        color: #244752;
        text-decoration: none;
        transition: color 0.15s ease;
      }
      .fitzroy-nav-link:hover { color: var(--fitz-teal-700); }
      .fitzroy-nav-link.is-active { color: var(--fitz-teal-700); }
      .fitzroy-nav-link.is-active::after {
        content: '';
        position: absolute; left: 8px; right: 8px; bottom: -1px;
        height: 3px; background: var(--fitz-teal-500); border-radius: 2px;
      }
      .fitzroy-btn-cta {
        background: var(--fitz-teal-700);
        color: #ffffff;
        border: 1px solid var(--fitz-teal-800);
        border-radius: 6px;
        padding: 7px 14px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.01em;
        transition: background 0.15s ease;
      }
      .fitzroy-btn-cta:hover { background: var(--fitz-teal-800); }

      .fitzroy-hero {
        position: relative;
        background:
          linear-gradient(180deg, rgba(6,58,69,0.05) 0%, rgba(6,58,69,0) 70%),
          linear-gradient(120deg, #0a4f5d 0%, #127684 45%, #2f8a95 100%);
        color: #ffffff;
        border-bottom: 1px solid #08384c;
        overflow: hidden;
      }
      .fitzroy-hero::before {
        content: "";
        position: absolute; inset: 0;
        background-image:
          radial-gradient(ellipse at 20% 90%, rgba(255,255,255,0.10), transparent 55%),
          radial-gradient(ellipse at 80% 10%, rgba(255,255,255,0.08), transparent 50%),
          repeating-linear-gradient(115deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 14px);
        pointer-events: none;
      }
      .fitzroy-hero-overlay { position: relative; }
      .fitzroy-hero-title {
        font-family: 'Source Serif 4', Georgia, serif;
        font-size: clamp(1.8rem, 3vw + 1rem, 3rem);
        font-weight: 700;
        line-height: 1.08;
        letter-spacing: -0.015em;
        margin-top: 8px;
        color: #ffffff;
      }
      .fitzroy-hero-lead {
        margin-top: 12px;
        max-width: 760px;
        font-size: 15.5px;
        line-height: 1.55;
        color: #e3f1f2;
      }

      /* Verified metric strip inside hero — Fitzroy report-card numeric blocks. */
      .fitzroy-metric-strip {
        margin-top: 28px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        max-width: 880px;
      }
      @media (min-width: 640px) {
        .fitzroy-metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      }
      @media (min-width: 1024px) {
        .fitzroy-metric-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
      }
      .fitzroy-metric {
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 10px;
        padding: 12px 12px 11px;
        backdrop-filter: blur(2px);
      }
      .fitzroy-metric-value {
        font-family: 'Source Serif 4', Georgia, serif;
        font-size: clamp(1.5rem, 1.3vw + 0.9rem, 2rem);
        font-weight: 700;
        line-height: 1;
        color: #ffffff;
        letter-spacing: -0.01em;
      }
      .fitzroy-metric-label {
        margin-top: 6px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #d6ecef;
      }
      .fitzroy-metric-sub {
        margin-top: 3px;
        font-size: 10.5px;
        line-height: 1.35;
        color: rgba(255,255,255,0.72);
      }

      /* Hero image card — portrait NASA Earth Observatory MODIS imagery. */
      .fitzroy-hero-imgcard { align-self: start; }
      .fitzroy-hero-figure {
        margin: 0;
        background: rgba(8,40,50,0.55);
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 30px -12px rgba(0,0,0,0.45);
      }
      .fitzroy-hero-img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 360px;
        object-fit: cover;
        object-position: center;
      }
      @media (min-width: 1024px) {
        .fitzroy-hero-img { max-height: 460px; }
      }
      .fitzroy-hero-figcaption {
        padding: 10px 12px 11px;
        background: rgba(6,58,69,0.55);
        border-top: 1px solid rgba(255,255,255,0.10);
      }
      .fitzroy-hero-figtitle {
        font-size: 12.5px;
        font-weight: 600;
        color: #ffffff;
        letter-spacing: 0.01em;
      }
      .fitzroy-hero-figcredit {
        margin-top: 3px;
        font-size: 10.5px;
        line-height: 1.4;
        color: rgba(255,255,255,0.72);
      }

      .fitzroy-report-card {
        background: var(--fitz-white) !important;
        background-image: none !important;
        border: 1px solid var(--fitz-border) !important;
        box-shadow: 0 1px 2px rgba(13,100,115,0.04), 0 8px 24px -12px rgba(13,100,115,0.15);
      }
      .fitzroy-eyebrow {
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--fitz-teal-700);
      }
      .fitzroy-report-title {
        margin-top: 6px;
        font-family: 'Source Serif 4', Georgia, serif;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.15;
        color: var(--fitz-teal-900);
        letter-spacing: -0.01em;
      }
      .fitzroy-report-sub {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.45;
        color: var(--fitz-muted);
        max-width: 56ch;
      }

      /* ---- Section headings used in the bundle ---- */
      h1, h2, h3 { color: var(--fitz-teal-900); }
      h2.text-base, h2.text-lg, .text-base.font-semibold, .text-sm.font-semibold {
        font-family: 'Source Serif 4', Georgia, serif;
      }

      /* ---- Force readable colors on cards (overrides the dark-theme
              transparencies that are pervasive in the bundle). ---- */
      [data-testid^="card-"], [data-testid^="panel-"], [data-testid^="vitrine-"], [data-testid^="chart-"], [data-testid^="kpi-"] {
        color: var(--fitz-ink);
      }
      /* Cards: white surface, teal-tinged borders, no dark backdrop blur look. */
      .bg-ink-900\/60, .bg-ink-900\/55, .bg-ink-900\/45, .bg-ink-900\/70, .bg-ink-900\/80, .bg-ink-900\/85,
      .bg-ink-950\/85, .bg-ink-950\/95, .bg-ink-900\/40 {
        background-color: var(--fitz-white) !important;
        backdrop-filter: none !important;
      }
      .bg-ink-950, .bg-ink-950\/40, .bg-ink-950\/50, .bg-ink-950\/55, .bg-ink-950\/60, .bg-ink-950\/75, .bg-ink-950\/80 {
        background-color: #f8fbfb !important;
      }
      .bg-ink-800, .bg-ink-800\/40, .bg-ink-800\/60, .bg-ink-800\/70, .bg-ink-700\/60 {
        background-color: #eef4f5 !important;
      }
      .bg-ink-700, .bg-ink-700\/70 { background-color: #e3edee !important; }

      /* Borders */
      .border-ink-700, .border-ink-700\/70, .border-ink-700\/50, .border-ink-600, .border-ink-600\/40, .border-ink-600\/50, .border-ink-600\/60 {
        border-color: var(--fitz-border) !important;
      }

      /* Text remaps so light backgrounds remain readable. */
      .text-slate-100, .text-slate-200 { color: var(--fitz-ink) !important; }
      .text-slate-300 { color: #244752 !important; }
      .text-slate-400 { color: #4b6a72 !important; }
      .text-slate-500 { color: var(--fitz-muted) !important; }
      .text-mekong-50, .text-mekong-100 { color: var(--fitz-teal-800) !important; }
      .text-mekong-200, .text-mekong-300 { color: var(--fitz-teal-700) !important; }
      .text-sediment-100, .text-sediment-200, .text-sediment-300 { color: var(--fitz-amber) !important; }

      /* The grid-bg pattern under the map: keep a darker deep-teal canvas
         since the SVG inside relies on it for boxed-label legibility. */
      .gridbg {
        background-color: #0a2a33 !important;
        background-image:
          linear-gradient(rgba(95,167,175,0.08) 1px, transparent 1px),
          linear-gradient(90deg, rgba(95,167,175,0.08) 1px, transparent 1px) !important;
        background-size: 32px 32px !important;
      }
      /* Map and comparison map panels keep a deep teal field. */
      [data-testid="panel-map"], [data-testid="panel-comparison-map"] {
        background-color: #0a2a33 !important;
        color: #e3eef0 !important;
        border-color: #0a4f5d !important;
      }
      [data-testid="panel-map"] .text-slate-300,
      [data-testid="panel-map"] .text-slate-200,
      [data-testid="panel-map"] .text-slate-100,
      [data-testid="panel-comparison-map"] .text-slate-300,
      [data-testid="panel-comparison-map"] .text-slate-200,
      [data-testid="panel-comparison-map"] .text-slate-100 {
        color: #e6eff0 !important;
      }
      /* Optical/radar/SWOT thumbnail dark panels: keep a darker frame so the
         imagery doesn't sit on cream cards. */
      [data-testid^="panel-optical-image-"],
      [data-testid^="panel-radar-context-"],
      [data-testid^="panel-swot-context-"],
      [data-testid="panel-sentinel-mask-visual"] {
        background-color: #07242d !important;
        border-color: #0a4f5d !important;
      }

      /* Make the report-card grade circle look more like the Fitzroy plate. */
      [data-testid="badge-report-card-grade"] {
        background-image: linear-gradient(160deg, var(--fitz-teal-700), var(--fitz-teal-900)) !important;
        color: #ffffff !important;
      }
      [data-testid="badge-report-card-grade"] * { color: #ffffff !important; }

      /* Pills used in header */
      [data-testid^="pill-"] {
        background: #eef6f7 !important;
        border-color: var(--fitz-border) !important;
        color: var(--fitz-teal-800) !important;
      }

      /* Scrollbar (light) */
      .scrollbar-thin::-webkit-scrollbar { height: 6px; width: 6px; }
      .scrollbar-thin::-webkit-scrollbar-thumb { background: #b9cdd0; border-radius: 3px; }

      /* Recharts axes / grid: tint to teal-on-cream */
      .recharts-cartesian-grid line { stroke: #e1eaec !important; }
      .recharts-text { fill: #244752 !important; }

      /* Footer */
      footer { color: var(--fitz-muted) !important; }

      /* Buttons (generic) */
      button.rounded-md.border, .inline-flex.rounded-md.border {
        color: #1e4f5c;
      }

      /* Active layer tab */
      .bg-mekong-700\/60 {
        background-color: var(--fitz-teal-700) !important;
        color: #ffffff !important;
      }

      /* Make focus rings teal */
      :focus-visible { outline: 2px solid var(--fitz-teal-500); outline-offset: 2px; }

      /* Print: keep readable; revert dark-mode print rules that targeted the
         old dark theme. The page is already light. */
      @media print {
        html.printing-methodology body * { visibility: hidden !important; }
        html.printing-methodology body [data-testid="section-health-index-methodology-print"],
        html.printing-methodology body [data-testid="section-health-index-methodology-print"] * {
          visibility: visible !important;
        }
        html.printing-methodology body [data-testid="section-health-index-methodology-print"] {
          position: absolute; left: 0; top: 0; width: 100%;
          background: #ffffff !important; color: #0b141c !important;
          padding: 24px !important; max-height: none !important; overflow: visible !important;
        }
        html.printing-methodology body [data-testid="section-health-index-methodology-print"] * {
          color: #0b141c !important; background: transparent !important;
          border-color: #cbd5e1 !important;
        }
        html.printing-methodology [data-testid="health-index-methodology-export-controls"],
        html.printing-methodology [data-testid="button-close-health-index-methodology"] {
          display: none !important;
        }
        html:not(.printing-methodology) [data-testid="card-tonle-sap-report-card"] {
          background: #ffffff !important; color: #0b141c !important;
          border-color: #94a3b8 !important; page-break-inside: avoid;
        }
        html:not(.printing-methodology) [data-testid="card-tonle-sap-report-card"] svg text {
          fill: #0b141c !important;
        }
        .fitzroy-topstrip, .fitzroy-hero { display: none !important; }
      }

      /* Narrative River Health Summary — plain-English landing layer */
      .river-narrative-card { box-shadow: 0 12px 36px -22px rgba(11,42,51,0.35); }
      .river-narrative-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
      .river-narrative-headline-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
      .river-narrative-emblem {
        flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
        width: 52px; height: 52px; border-radius: 999px;
        box-shadow: 0 6px 18px -8px rgba(11,42,51,0.6);
      }
      .river-narrative-title {
        font-family: 'Source Serif 4', ui-serif, Georgia, serif;
        font-size: 1.4rem; line-height: 1.2; font-weight: 700;
        color: var(--fitz-ink, #0b2a33); letter-spacing: -0.01em; margin-top: 2px;
      }
      @media (min-width: 640px) { .river-narrative-title { font-size: 1.65rem; } }
      .river-narrative-condition { margin-top: 4px; font-size: 13px; line-height: 1.35; font-weight: 600; }
      .river-narrative-condition-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 800; }
      .river-narrative-condition-sep { margin: 0 6px; opacity: 0.55; }
      .river-narrative-condition-sub { font-weight: 500; color: var(--fitz-ink, #0b2a33); font-size: 13px; }
      .river-narrative-info-btn {
        align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 10px; font-size: 12px; font-weight: 600;
        color: var(--fitz-teal-700, #0d6473);
        background: rgba(255,255,255,0.7);
        border: 1px solid rgba(13,100,115,0.35); border-radius: 999px; cursor: pointer;
        transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
      }
      .river-narrative-info-btn:hover { background: rgba(13,100,115,0.12); border-color: rgba(13,100,115,0.6); color: var(--fitz-teal-800, #0a4f5d); }
      .river-narrative-info-btn:focus-visible { outline: 2px solid var(--fitz-teal-500, #2f8a95); outline-offset: 2px; }
      .river-narrative-info-btn-label { line-height: 1; }
      .river-narrative-info-btn--ghost { background: transparent; }

      .river-narrative-body {
        margin-top: 14px;
        font-family: 'Source Serif 4', ui-serif, Georgia, serif;
        color: var(--fitz-ink, #0b2a33);
        max-width: 70ch;
      }
      .river-narrative-headline { font-size: 1.15rem; line-height: 1.4; font-weight: 600; margin: 0 0 6px 0; }
      @media (min-width: 640px) { .river-narrative-headline { font-size: 1.25rem; } }
      .river-narrative-second, .river-narrative-third { font-size: 1rem; line-height: 1.55; margin: 0 0 4px 0; color: rgba(11,42,51,0.88); }

      .river-status-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: 10px; }
      @media (min-width: 480px) { .river-status-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
      @media (min-width: 768px) { .river-status-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
      @media (min-width: 1280px) { .river-status-grid { grid-template-columns: repeat(6, minmax(0,1fr)); } }

      .river-status-card { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-width: 1px; border-style: solid; border-radius: 12px; min-height: 64px; }
      .river-status-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,0.7); border: 1px solid currentColor; display: inline-flex; align-items: center; justify-content: center; }
      .river-status-text { min-width: 0; }
      .river-status-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: rgba(11,42,51,0.75); }
      .river-status-state { font-size: 14px; font-weight: 700; margin-top: 1px; line-height: 1.2; }
      .river-status-plain { margin-top: 2px; font-size: 11px; line-height: 1.35; color: rgba(11,42,51,0.68); }

      .river-narrative-caveats { margin-top: 16px; display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: 6px; font-size: 11.5px; line-height: 1.5; color: rgba(11,42,51,0.7); }
      @media (min-width: 768px) { .river-narrative-caveats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
      .river-narrative-honesty { font-weight: 600; color: var(--fitz-teal-800, #0a4f5d); }

      .report-card-technical-details { border-top: 1px dashed rgba(91,129,138,0.5); padding-top: 6px; }
      .report-card-technical-summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--fitz-teal-700, #0d6473); list-style: none; padding: 4px 0; }
      .report-card-technical-summary::-webkit-details-marker { display: none; }
      .report-card-technical-summary:hover { color: var(--fitz-teal-800, #0a4f5d); }
      .report-card-technical-icon { display: inline-flex; color: var(--fitz-teal-700, #0d6473); }
      .report-card-technical-body { margin-top: 6px; font-size: 11px; line-height: 1.55; color: rgba(91,129,138,1); }

      /* Narrative card — dynamic "what changed since last month" line. */
      .river-narrative-whatchanged {
        font-size: 0.95rem; line-height: 1.5; margin: 6px 0 0 0;
        color: var(--fitz-teal-800, #0a4f5d); font-weight: 600;
      }

      /* Narrative card — short public hint. */
      .river-narrative-hint {
        margin-top: 14px; font-size: 12px; line-height: 1.5;
        color: var(--fitz-muted, #5b818a); font-style: italic;
      }

      /* Friendly methodology details — collapsible "How to read this". */
      .river-methodology-friendly {
        margin-top: 10px; border-top: 1px dashed rgba(91,129,138,0.45); padding-top: 8px;
      }
      .river-methodology-friendly-summary {
        cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
        font-size: 12px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.14em;
        color: var(--fitz-teal-700, #0d6473);
        list-style: none; padding: 4px 0;
      }
      .river-methodology-friendly-summary::-webkit-details-marker { display: none; }
      .river-methodology-friendly-summary:hover { color: var(--fitz-teal-800, #0a4f5d); }
      .river-methodology-friendly-icon { display: inline-flex; color: var(--fitz-teal-700, #0d6473); }
      .river-methodology-friendly-body { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: rgba(11,42,51,0.82); }
      .river-methodology-bullets { list-style: disc; padding-left: 18px; margin: 0; }
      .river-methodology-bullets li { margin-bottom: 4px; }
      .river-methodology-term { font-weight: 700; color: var(--fitz-ink, #0b2a33); }
      .river-methodology-current {
        margin-top: 10px; padding: 8px 10px;
        border: 1px solid var(--fitz-border, #dbe6e8); border-radius: 8px;
        background: rgba(255,255,255,0.5);
        display: grid; gap: 4px; font-size: 12px; color: var(--fitz-ink, #0b2a33);
      }
      .river-methodology-friendly-cta {
        margin-top: 10px; display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 10px; font-size: 12px; font-weight: 600;
        color: var(--fitz-teal-700, #0d6473);
        background: rgba(255,255,255,0.7);
        border: 1px solid rgba(13,100,115,0.35); border-radius: 999px;
        cursor: pointer;
      }
      .river-methodology-friendly-cta:hover {
        background: rgba(13,100,115,0.12);
        border-color: rgba(13,100,115,0.6);
        color: var(--fitz-teal-800, #0a4f5d);
      }

      /* Heading contrast fix — make collapsed satellite/radar/SWOT/sentinel
         card headings forced black + bold even on light backgrounds. The
         dark-theme bundle uses .text-slate-100 / .font-semibold which the
         light remap softened. Override only for these specific cards. */
      [data-testid="section-radar-context"] .text-slate-100,
      [data-testid="section-swot-context"] .text-slate-100,
      [data-testid="section-sentinel-mask-comparison"] .text-slate-100,
      [data-testid="card-sentinel-mask-comparison"] .text-slate-100 {
        color: #0a141a !important;
        font-weight: 800 !important;
      }
      [data-testid="section-radar-context"] > button .text-xs,
      [data-testid="section-swot-context"] > button .text-xs,
      [data-testid="section-sentinel-mask-comparison"] > button .text-xs {
        font-size: 13px;
      }

      /* Mini sticky status bar — follows the user below the fold. */
      .mini-status-bar {
        position: sticky; top: 56px; z-index: 19;
        background: rgba(255,255,255,0.96);
        backdrop-filter: saturate(140%) blur(6px);
        -webkit-backdrop-filter: saturate(140%) blur(6px);
        border-bottom: 1px solid var(--fitz-border, #dbe6e8);
        box-shadow: 0 6px 18px -16px rgba(11,42,51,0.4);
      }
      .mini-status-bar-inner {
        max-width: 1600px; margin: 0 auto; padding: 6px 12px;
        display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      }
      .mini-status-grade {
        flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
        color: #fff; border-radius: 999px;
        padding: 3px 10px; font-weight: 800; line-height: 1.1;
      }
      .mini-status-grade-letter { font-size: 14px; }
      .mini-status-grade-score { font-size: 12px; opacity: 0.92; }
      .mini-status-condition { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
      .mini-status-condition-label {
        font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
        color: var(--fitz-muted, #5b818a); font-weight: 700;
      }
      .mini-status-condition-state { font-size: 13px; font-weight: 800; }
      .mini-status-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; flex: 1 1 auto; min-width: 0; }
      .mini-status-chip {
        font-size: 11px; line-height: 1.2; padding: 2px 8px;
        border-radius: 999px; border: 1px solid currentColor; font-weight: 600;
        background: rgba(255,255,255,0.65); white-space: nowrap;
      }
      .mini-status-dismiss {
        flex-shrink: 0; width: 24px; height: 24px; border-radius: 999px;
        border: 1px solid var(--fitz-border, #dbe6e8);
        background: #fff; color: var(--fitz-muted, #5b818a);
        font-size: 12px; line-height: 1; cursor: pointer;
      }
      .mini-status-dismiss:hover { color: var(--fitz-teal-800, #0a4f5d); border-color: var(--fitz-teal-500, #2f8a95); }
      @media (max-width: 639px) {
        .mini-status-bar-inner { padding: 5px 8px; gap: 6px; }
        .mini-status-chip { font-size: 10.5px; padding: 1px 6px; }
        .mini-status-grade-score { display: none; }
      }
      @media print { .mini-status-bar { display: none !important; } }

      /* ---------------------------------------------------------------
         Health Index — detailed score breakdown (collapsed by default).
         Sits below the plain-English narrative + Report Card so the
         landing view is not repetitive. Open this for analyst-grade
         per-component scores / weights / reliability.
         --------------------------------------------------------------- */
      .health-index-details {
        margin-top: 8px;
        border: 1px solid var(--fitz-border, #dbe6e8);
        border-radius: 12px;
        background: rgba(255,255,255,0.55);
      }
      .health-index-details[open] { background: rgba(255,255,255,0.78); }
      .health-index-details > summary.health-index-details-summary {
        cursor: pointer; list-style: none;
        display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
        padding: 10px 14px;
        font-family: 'Inter', system-ui, sans-serif;
      }
      .health-index-details > summary.health-index-details-summary::-webkit-details-marker { display: none; }
      .health-index-details > summary.health-index-details-summary::before {
        content: '▸'; display: inline-block; margin-right: 6px;
        color: var(--fitz-teal-700, #0d6473); transition: transform 120ms ease;
      }
      .health-index-details[open] > summary.health-index-details-summary::before { transform: rotate(90deg); }
      .health-index-details-summary-label {
        font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
        font-weight: 800; color: var(--fitz-teal-800, #0a4f5d);
      }
      .health-index-details-summary-hint {
        font-size: 12px; color: var(--fitz-muted, #5b818a); line-height: 1.4;
      }
      .health-index-details[open] > :not(summary) { padding: 0 10px 10px 10px; }

      /* ---------------------------------------------------------------
         Compact compare presets — single dropdown + chip row replacing
         the two stacked preset card sections. Designed to stay short
         on mobile (one row dropdown + three quick chips).
         --------------------------------------------------------------- */
      .compact-presets-row {
        display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
      }
      .compact-presets-label {
        font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
        color: rgba(203,213,225,0.85); font-weight: 700;
      }
      .compact-presets-select {
        flex: 1 1 220px; min-width: 0;
        background: rgba(15,23,29,0.85); color: #e6edf2;
        border: 1px solid rgba(99,140,148,0.55); border-radius: 8px;
        padding: 6px 28px 6px 10px; font-size: 13px; line-height: 1.3;
        appearance: none;
        background-image: linear-gradient(45deg, transparent 50%, rgba(203,213,225,0.85) 50%), linear-gradient(135deg, rgba(203,213,225,0.85) 50%, transparent 50%);
        background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
      }
      .compact-presets-select:focus-visible { outline: 2px solid var(--fitz-teal-500, #2f8a95); outline-offset: 1px; }
      .compact-presets-quick { display: inline-flex; flex-wrap: wrap; gap: 6px; }
      .compact-presets-chip {
        padding: 4px 10px; font-size: 12px; font-weight: 600;
        border-radius: 999px; border: 1px solid rgba(99,140,148,0.5);
        background: rgba(15,23,29,0.55); color: #e6edf2; cursor: pointer;
        transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
      }
      .compact-presets-chip:hover:not(.compact-presets-chip-disabled) {
        background: rgba(13,100,115,0.35); border-color: var(--fitz-teal-500, #2f8a95);
      }
      .compact-presets-chip-active {
        background: var(--fitz-teal-700, #0d6473); border-color: var(--fitz-teal-700, #0d6473);
        color: #fff;
      }
      .compact-presets-chip-disabled { opacity: 0.4; cursor: not-allowed; }
      .compact-presets-summary {
        margin-top: 6px; font-size: 12px; line-height: 1.45;
        color: rgba(203,213,225,0.88);
      }
      @media (max-width: 639px) {
        .compact-presets-row { gap: 6px; }
        .compact-presets-quick { width: 100%; }
        .compact-presets-chip { flex: 1 1 auto; text-align: center; }
      }

      /* ---------------------------------------------------------------
         Refresh status panel — short collapsible explaining what gets
         refreshed daily, today's date, and the latest real observation.
         --------------------------------------------------------------- */
      .refresh-status {
        background: rgba(255,255,255,0.85);
        border: 1px solid var(--fitz-border, #dbe6e8);
        border-radius: 10px;
      }
      .refresh-status[open] { background: #fff; }
      .refresh-status-summary {
        cursor: pointer; list-style: none;
        display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
        padding: 8px 12px; font-family: 'Inter', system-ui, sans-serif;
      }
      .refresh-status-summary::-webkit-details-marker { display: none; }
      .refresh-status-summary::before {
        content: '▸'; color: var(--fitz-teal-700, #0d6473);
        margin-right: 6px; transition: transform 120ms ease;
      }
      .refresh-status[open] .refresh-status-summary::before { transform: rotate(90deg); }
      .refresh-status-summary-label {
        font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
        font-weight: 800; color: var(--fitz-teal-800, #0a4f5d);
      }
      .refresh-status-summary-hint {
        font-size: 12px; color: var(--fitz-muted, #5b818a);
      }
      .refresh-status-body {
        padding: 0 14px 12px 14px; font-size: 12.5px; line-height: 1.55;
        color: var(--fitz-ink, #0b2a33);
      }
      .refresh-status-lead { margin: 4px 0 8px 0; font-weight: 600; color: var(--fitz-teal-800, #0a4f5d); }
      .refresh-status-list { list-style: disc; padding-left: 18px; margin: 0; }
      .refresh-status-list li { margin-bottom: 4px; }
      .refresh-status-term { font-weight: 700; color: var(--fitz-ink, #0b2a33); }
      .refresh-status-now { color: var(--fitz-teal-700, #0d6473); font-weight: 600; }
      @media (max-width: 639px) {
        .refresh-status-summary { padding: 6px 10px; }
        .refresh-status-body { padding: 0 12px 10px 12px; font-size: 12px; }
      }

      /* ---------------------------------------------------------------
         Methodology public note + Technical review response. Both sit
         under the Refresh status panel; the public note is a single
         neutral line, and the technical review is a collapsible block
         containing the feasibility matrix, glossary and roadmap.
         --------------------------------------------------------------- */
      .methodology-public-note {
        display: flex; align-items: flex-start; gap: 6px;
        margin: 8px 2px 0 2px; font-size: 12.5px; line-height: 1.5;
        color: var(--fitz-muted, #5b818a);
      }
      .methodology-public-note-icon {
        display: inline-flex; flex-shrink: 0; margin-top: 2px;
        color: var(--fitz-teal-700, #0d6473);
      }
      .tech-review {
        margin-top: 10px;
        background: rgba(255,255,255,0.85);
        border: 1px solid var(--fitz-border, #dbe6e8);
        border-radius: 10px;
      }
      .tech-review[open] { background: #fff; }
      .tech-review-summary {
        cursor: pointer; list-style: none;
        display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
        padding: 8px 12px; font-family: 'Inter', system-ui, sans-serif;
      }
      .tech-review-summary::-webkit-details-marker { display: none; }
      .tech-review-summary::before {
        content: '▸'; color: var(--fitz-teal-700, #0d6473);
        margin-right: 6px; transition: transform 120ms ease;
      }
      .tech-review[open] .tech-review-summary::before { transform: rotate(90deg); }
      .tech-review-summary-label {
        font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
        font-weight: 800; color: var(--fitz-teal-800, #0a4f5d);
      }
      .tech-review-summary-hint {
        font-size: 12px; color: var(--fitz-muted, #5b818a);
      }
      .tech-review-body {
        padding: 0 14px 14px 14px; font-size: 12.5px; line-height: 1.55;
        color: var(--fitz-ink, #0b2a33);
      }
      .tech-review-lead {
        margin: 4px 0 12px 0; font-weight: 600;
        color: var(--fitz-teal-800, #0a4f5d);
      }
      .tech-review-matrix {
        display: grid; gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      }
      .tech-review-col {
        border: 1px solid var(--fitz-border, #dbe6e8);
        border-radius: 8px; padding: 8px 10px;
        background: rgba(245, 242, 236, 0.55);
      }
      .tech-review-col-flood   { border-left: 3px solid #7e9162; }
      .tech-review-col-mekong  { border-left: 3px solid #3a8d9f; }
      .tech-review-col-sediment{ border-left: 3px solid #d29349; }
      .tech-review-col-muted   { border-left: 3px solid #8a99a3; }
      .tech-review-col-label {
        font-size: 10.5px; text-transform: uppercase;
        letter-spacing: 0.14em; font-weight: 800;
        color: var(--fitz-teal-800, #0a4f5d);
        margin-bottom: 4px;
      }
      .tech-review-col-list {
        list-style: disc; padding-left: 16px; margin: 0;
        font-size: 12px; line-height: 1.45;
      }
      .tech-review-col-list li { margin-bottom: 4px; }

      .tech-review-section { margin-top: 14px; }
      .tech-review-h {
        font-family: 'Source Serif 4', Georgia, serif;
        font-size: 14px; font-weight: 700;
        color: var(--fitz-teal-800, #0a4f5d);
        margin: 0 0 4px 0;
      }
      .tech-review-section p { margin: 4px 0; }
      .tech-review-link {
        color: var(--fitz-teal-700, #0d6473);
        text-decoration: underline; text-underline-offset: 2px;
      }
      .tech-review-link:hover { color: var(--fitz-teal-800, #0a4f5d); }
      .tech-review-glossary-list { margin: 4px 0 0 0; }
      .tech-review-glossary-row {
        display: grid; grid-template-columns: 160px 1fr;
        gap: 8px; padding: 4px 0;
        border-top: 1px dashed rgba(91,129,138,0.3);
      }
      .tech-review-glossary-row:first-child { border-top: none; }
      .tech-review-glossary-term {
        font-weight: 800; color: var(--fitz-ink, #0b2a33);
        font-size: 12px;
      }
      .tech-review-glossary-def {
        margin: 0; font-size: 12px; color: var(--fitz-muted, #5b818a);
      }
      .tech-review-pipeline-list {
        list-style: decimal; padding-left: 20px; margin: 4px 0 0 0;
        font-size: 12.5px; line-height: 1.5;
      }
      .tech-review-pipeline-list li { margin-bottom: 4px; }
      .tech-review-subdetails {
        margin-top: 16px;
        border: 1px solid rgba(91,129,138,0.3);
        border-radius: 6px;
        background: #fafaf6;
      }
      .tech-review-subdetails[open] { background: #fff; }
      .tech-review-subsummary {
        cursor: pointer; list-style: none;
        padding: 8px 12px; font-weight: 700;
        color: var(--fitz-teal-800, #0a4f5d);
        font-size: 13px;
      }
      .tech-review-subsummary::-webkit-details-marker { display: none; }
      .tech-review-subsummary-hint {
        display: block; font-weight: 400; font-size: 11.5px;
        color: var(--fitz-muted, #5b818a); margin-top: 2px;
      }
      .tech-review-subbody {
        padding: 0 12px 12px 12px;
        font-size: 12.5px; line-height: 1.5;
      }
      .tech-review-phase-list {
        list-style: none; padding-left: 0; margin: 6px 0 0 0;
      }
      .tech-review-phase-list li {
        padding: 6px 0;
        border-top: 1px dashed rgba(91,129,138,0.3);
      }
      .tech-review-phase-list li:first-child { border-top: none; }
      .tech-review-phase-label {
        font-weight: 800; color: var(--fitz-teal-800, #0a4f5d);
        font-size: 12.5px;
      }
      .tech-review-phase-status {
        font-size: 11.5px; color: var(--fitz-muted, #5b818a);
        font-style: italic; margin-bottom: 2px;
      }
      .tech-review-phase-body { font-size: 12.5px; }
      .tech-review-bullets {
        list-style: disc; padding-left: 20px; margin: 4px 0 0 0;
        font-size: 12.5px; line-height: 1.5;
      }
      .tech-review-bullets li { margin-bottom: 4px; }
      .tech-review-foot {
        margin-top: 6px; font-size: 11.5px;
        color: var(--fitz-muted, #5b818a);
      }
      .tech-review-param-list { margin: 4px 0 0 0; }
      .tech-review-param-row {
        display: grid; grid-template-columns: 200px 1fr;
        gap: 8px; padding: 4px 0;
        border-top: 1px dashed rgba(91,129,138,0.3);
      }
      .tech-review-param-row:first-child { border-top: none; }
      .tech-review-param-label {
        font-weight: 800; color: var(--fitz-ink, #0b2a33);
        font-size: 12px;
      }
      .tech-review-param-body {
        margin: 0; font-size: 12px; color: var(--fitz-muted, #5b818a);
      }
      @media (max-width: 639px) {
        .tech-review-summary { padding: 6px 10px; }
        .tech-review-body { padding: 0 12px 12px 12px; font-size: 12px; }
        .tech-review-glossary-row { grid-template-columns: 1fr; gap: 2px; }
        .tech-review-param-row { grid-template-columns: 1fr; gap: 2px; }
      }

      /* =================================================================
         Contrast & readability pass (contrast-readability-2026-05-19)
         -----------------------------------------------------------------
         The dashboard inherits a dark-theme Tailwind palette but renders
         on light cream/white cards. Earlier passes remapped a few classes
         (slate-100/200/300) but white-on-white and pale-grey-on-white
         text was still leaking through on:
           - card headings / collapsed accordion summaries
           - pills, badges and status chips
           - chart axis & focus labels
           - methodology + technical-review prose
           - mobile compact sliders / preset row label
         This block forces a dark-teal/ink color on text that sits over
         the light-mode cards and panels (everything EXCEPT the explicit
         dark-teal map, comparison-map, gridbg, satellite/radar/SWOT
         thumbnail panels, and the hero/top-strip which intentionally use
         light text on dark teal). The selector :not(...) chain scopes
         the overrides so dark panels keep their light copy.
         ================================================================= */

      /* Define a reusable "light-card scope" filter via :not(). We exclude
         the panels that legitimately use light text on a dark background. */
      :is(
        body, main, section, article, aside, div, details, summary,
        header, footer, nav, h1, h2, h3, h4, h5, h6, p, span, li
      ):not(
        .fitzroy-hero, .fitzroy-hero *,
        .fitzroy-topstrip, .fitzroy-topstrip *,
        .fitzroy-hero-figcaption, .fitzroy-hero-figcaption *,
        .gridbg, .gridbg *,
        [data-testid="panel-map"], [data-testid="panel-map"] *,
        [data-testid="panel-comparison-map"], [data-testid="panel-comparison-map"] *,
        [data-testid^="panel-optical-image-"], [data-testid^="panel-optical-image-"] *,
        [data-testid^="panel-radar-context-"], [data-testid^="panel-radar-context-"] *,
        [data-testid^="panel-swot-context-"], [data-testid^="panel-swot-context-"] *,
        [data-testid="panel-sentinel-mask-visual"], [data-testid="panel-sentinel-mask-visual"] *,
        [data-testid="badge-report-card-grade"], [data-testid="badge-report-card-grade"] *,
        [data-testid="mini-status-grade"], [data-testid="mini-status-grade"] *,
        .compact-presets-select, .compact-presets-select *,
        .compact-presets-chip, .compact-presets-chip *,
        .fitzroy-btn-cta,
        .bg-mekong-700\/60, .bg-mekong-700\/60 *
      ).text-slate-500 {
        color: #244752 !important;
      }
      :is(
        body, main, section, article, aside, div, details, summary,
        header, footer, nav, h1, h2, h3, h4, h5, h6, p, span, li, label
      ):not(
        .fitzroy-hero, .fitzroy-hero *,
        .fitzroy-topstrip, .fitzroy-topstrip *,
        .fitzroy-hero-figcaption, .fitzroy-hero-figcaption *,
        .gridbg, .gridbg *,
        [data-testid="panel-map"], [data-testid="panel-map"] *,
        [data-testid="panel-comparison-map"], [data-testid="panel-comparison-map"] *,
        [data-testid^="panel-optical-image-"], [data-testid^="panel-optical-image-"] *,
        [data-testid^="panel-radar-context-"], [data-testid^="panel-radar-context-"] *,
        [data-testid^="panel-swot-context-"], [data-testid^="panel-swot-context-"] *,
        [data-testid="panel-sentinel-mask-visual"], [data-testid="panel-sentinel-mask-visual"] *,
        [data-testid="badge-report-card-grade"], [data-testid="badge-report-card-grade"] *,
        [data-testid="mini-status-grade"], [data-testid="mini-status-grade"] *,
        .compact-presets-select, .compact-presets-select *,
        .compact-presets-chip, .compact-presets-chip *,
        .fitzroy-btn-cta,
        .bg-mekong-700\/60, .bg-mekong-700\/60 *
      ).text-slate-600 {
        color: var(--fitz-muted) !important;
      }

      /* Mekong (teal) text classes — they currently render as fitz-teal-700
         which works on cream but is too pale on plain white cards for small
         eyebrow text. Bump 100/200/300/400 to teal-800 on light cards. */
      .fitzroy-app .text-mekong-100,
      .fitzroy-app .text-mekong-200,
      .fitzroy-app .text-mekong-200\/90,
      .fitzroy-app .text-mekong-300,
      .fitzroy-app .text-mekong-300\/80,
      .fitzroy-app .text-mekong-400\/80 {
        color: var(--fitz-teal-800) !important;
      }
      /* But preserve light teal text on the genuinely dark panels. */
      [data-testid="panel-map"] .text-mekong-100,
      [data-testid="panel-map"] .text-mekong-200,
      [data-testid="panel-map"] .text-mekong-300,
      [data-testid="panel-comparison-map"] .text-mekong-100,
      [data-testid="panel-comparison-map"] .text-mekong-200,
      [data-testid="panel-comparison-map"] .text-mekong-300,
      .fitzroy-hero .text-mekong-100,
      .fitzroy-hero .text-mekong-200,
      .fitzroy-hero .text-mekong-300,
      .fitzroy-topstrip .text-mekong-100,
      .fitzroy-topstrip .text-mekong-200,
      .fitzroy-topstrip .text-mekong-300,
      [data-testid^="panel-optical-image-"] [class*="text-mekong-"],
      [data-testid^="panel-radar-context-"] [class*="text-mekong-"],
      [data-testid^="panel-swot-context-"] [class*="text-mekong-"],
      [data-testid="panel-sentinel-mask-visual"] [class*="text-mekong-"] {
        color: rgb(194 224 227) !important;
      }

      /* Flood / sediment / amber palette — pale tints unreadable on white. */
      .fitzroy-app .text-flood-100,
      .fitzroy-app .text-flood-200,
      .fitzroy-app .text-flood-300,
      .fitzroy-app .text-flood-400 {
        color: #3b5530 !important; /* dark flood green */
      }
      .fitzroy-app .text-sediment-100,
      .fitzroy-app .text-sediment-200,
      .fitzroy-app .text-sediment-300 {
        color: #7d4a14 !important; /* dark amber/sediment */
      }
      .fitzroy-app .text-amber-100,
      .fitzroy-app .text-amber-100\/90,
      .fitzroy-app .text-amber-200,
      .fitzroy-app .text-amber-200\/80 {
        color: #7a4a08 !important;
      }
      /* Preserve light amber text on the amber-tinted warning chips inside
         the genuinely dark hero / map panels. */
      .fitzroy-hero .text-amber-100,
      .fitzroy-hero .text-amber-200,
      [data-testid="panel-map"] .text-amber-100,
      [data-testid="panel-map"] .text-amber-200,
      [data-testid="panel-comparison-map"] .text-amber-100,
      [data-testid="panel-comparison-map"] .text-amber-200,
      [data-testid^="panel-optical-image-"] [class*="text-amber-"],
      [data-testid^="panel-radar-context-"] [class*="text-amber-"],
      [data-testid^="panel-swot-context-"] [class*="text-amber-"],
      [data-testid="panel-sentinel-mask-visual"] [class*="text-amber-"] {
        color: rgb(253 230 138) !important;
      }
      /* Same for flood/sediment on dark panels. */
      [data-testid="panel-map"] [class*="text-flood-"],
      [data-testid="panel-comparison-map"] [class*="text-flood-"],
      [data-testid^="panel-optical-image-"] [class*="text-flood-"],
      [data-testid^="panel-radar-context-"] [class*="text-flood-"],
      [data-testid^="panel-swot-context-"] [class*="text-flood-"],
      [data-testid="panel-sentinel-mask-visual"] [class*="text-flood-"] {
        color: rgb(207 220 177) !important;
      }
      [data-testid="panel-map"] [class*="text-sediment-"],
      [data-testid="panel-comparison-map"] [class*="text-sediment-"],
      [data-testid^="panel-optical-image-"] [class*="text-sediment-"],
      [data-testid^="panel-radar-context-"] [class*="text-sediment-"],
      [data-testid^="panel-swot-context-"] [class*="text-sediment-"],
      [data-testid="panel-sentinel-mask-visual"] [class*="text-sediment-"] {
        color: rgb(240 201 139) !important;
      }

      /* text-white that ends up on light cards. The hero, top-strip,
         badge-report-card-grade, mini-status-grade, dark map panels, and
         active layer tab (.bg-mekong-700/60) legitimately use white text.
         Other instances of text-white on the light theme need a dark
         fallback. */
      .fitzroy-app .text-white,
      .fitzroy-app .text-white\/85,
      .fitzroy-app .text-white\/90 {
        color: var(--fitz-ink) !important;
      }
      /* Restore white text inside dark surfaces. */
      .fitzroy-hero .text-white,
      .fitzroy-hero .text-white\/85,
      .fitzroy-hero .text-white\/90,
      .fitzroy-topstrip .text-white,
      .fitzroy-topstrip .text-white\/85,
      .fitzroy-topstrip .text-white\/90,
      [data-testid="panel-map"] .text-white,
      [data-testid="panel-map"] .text-white\/85,
      [data-testid="panel-map"] .text-white\/90,
      [data-testid="panel-comparison-map"] .text-white,
      [data-testid="panel-comparison-map"] .text-white\/85,
      [data-testid="panel-comparison-map"] .text-white\/90,
      [data-testid^="panel-optical-image-"] .text-white,
      [data-testid^="panel-radar-context-"] .text-white,
      [data-testid^="panel-swot-context-"] .text-white,
      [data-testid="panel-sentinel-mask-visual"] .text-white,
      [data-testid="badge-report-card-grade"] .text-white,
      [data-testid="mini-status-grade"] .text-white,
      .bg-mekong-700\/60 .text-white,
      .bg-mekong-700\/60.text-white,
      .fitzroy-btn-cta {
        color: #ffffff !important;
      }

      /* Collapsed accordion headings — every <summary> on a light card
         must use a dark color. The .text-slate-100 inside summaries was
         already handled for radar/SWOT/sentinel sections; broaden to all
         summary elements that aren't inside the dark panels. */
      details > summary,
      details > summary * {
        color: var(--fitz-ink);
      }
      details > summary .text-slate-100,
      details > summary .text-slate-200,
      details > summary .text-slate-300 {
        color: var(--fitz-teal-900) !important;
        font-weight: 700;
      }
      details > summary .text-xs.uppercase,
      details > summary .text-\[11px\].uppercase,
      details > summary .text-\[10px\].uppercase {
        color: var(--fitz-teal-800) !important;
        font-weight: 800;
      }
      /* Vitrine / collapsible card headings used by CollapsibleVitrine. */
      [data-testid^="vitrine-"] > button,
      [data-testid^="vitrine-"] > button *,
      [data-testid^="card-"] > header,
      [data-testid^="card-"] > header *,
      [data-testid^="card-"] > .card-header,
      [data-testid^="card-"] > .card-header * {
        color: var(--fitz-ink);
      }

      /* Pills (Pill component) — pill-* testids already styled in earlier
         block (eef6f7 background / teal-800 text). Make sure the inner
         text is dark too. */
      [data-testid^="pill-"] *,
      [data-testid^="pill-"] {
        color: var(--fitz-teal-800) !important;
      }

      /* Mini-status condition state + chips on the sticky bar. */
      .mini-status-condition-state,
      .mini-status-condition-label,
      .mini-status-chip {
        color: var(--fitz-ink) !important;
      }
      .mini-status-condition-label { color: var(--fitz-muted) !important; }
      .mini-status-chip { background: rgba(255,255,255,0.85) !important; }

      /* River-status driver chips (Health Index drivers) — already use
         currentColor borders against a tinted pastel background. The state
         label needs to stay dark. */
      .river-status-state,
      .river-status-label,
      .river-status-plain { color: var(--fitz-ink) !important; }
      .river-status-label { color: rgba(11,42,51,0.78) !important; }
      .river-status-plain { color: rgba(11,42,51,0.7) !important; }

      /* Score-driver chips inside the detailed Health Index breakdown. */
      [data-testid^="chip-score-driver-"],
      [data-testid^="chip-score-driver-"] * {
        color: var(--fitz-ink) !important;
      }

      /* Methodology + technical review prose. The tech-review-body /
         tech-review-glossary-def use --fitz-muted which is ~3.4:1 on
         the light card. Bump to a darker slate. */
      .tech-review-body,
      .tech-review-glossary-def,
      .tech-review-param-body,
      .tech-review-foot,
      .tech-review-phase-status,
      .tech-review-subsummary-hint {
        color: #3a5963 !important; /* ~5.5:1 on white */
      }
      .refresh-status-summary-hint,
      .health-index-details-summary-hint,
      .river-narrative-hint,
      .methodology-public-note {
        color: #3a5963 !important;
      }
      .river-methodology-friendly-body { color: var(--fitz-ink) !important; }

      /* Compact compare presets — sits on the (now white) controls card,
         not on a dark panel. The label "Compare preset" rendered as pale
         slate against white. The select / chips keep their dark surface
         + light text (looks like a small inset). */
      .compact-presets-label {
        color: var(--fitz-teal-800) !important;
      }
      .compact-presets-summary {
        color: var(--fitz-ink) !important;
      }
      /* The dark select + chips are deliberate dark inset elements; keep
         their internal light text. We just darken their backdrop so the
         contrast is high. */
      .compact-presets-select {
        background: #0a2a33 !important;
        color: #e6edf2 !important;
        border-color: rgba(13,100,115,0.6) !important;
      }
      .compact-presets-chip {
        background: rgba(10,42,51,0.85) !important;
        color: #e6edf2 !important;
        border-color: rgba(13,100,115,0.6) !important;
      }
      .compact-presets-chip-active {
        background: var(--fitz-teal-700) !important;
        border-color: var(--fitz-teal-700) !important;
        color: #ffffff !important;
      }
      .compact-presets-chip-disabled { color: #a9bcc1 !important; }

      /* Layer-tab buttons sit on the light controls panel now; the
         non-active tabs used .text-slate-300 which is already remapped,
         but the hover state targeted hover:text-white which becomes
         dark-on-white via the earlier rule. Pin hover to teal-800. */
      [data-testid^="button-layer-"]:not(.bg-mekong-700\/60):hover,
      .px-3.py-1\.5.text-xs.rounded.text-slate-300.hover\:text-white:hover {
        color: var(--fitz-teal-800) !important;
        background: rgba(13,100,115,0.08) !important;
      }

      /* Chart axis / focus labels — bumped to a darker tone. The
         recharts-text rule already exists; reinforce it. */
      .recharts-text,
      .recharts-cartesian-axis-tick text,
      .recharts-legend-item-text,
      .recharts-tooltip-item,
      .recharts-tooltip-label {
        fill: #0b2a33 !important;
        color: #0b2a33 !important;
      }
      /* Recharts text on dark map panels stays light. */
      [data-testid="panel-map"] .recharts-text,
      [data-testid="panel-comparison-map"] .recharts-text {
        fill: #e6eff0 !important;
      }

      /* Whole-lake / sentinel mask comparison headings: panels that
         hold the imagery have a deep teal background, but the cards
         that wrap them (section-*) sit on cream. Force dark text on
         the card headings (not the dark image panels). */
      [data-testid="section-whole-lake-mask"] > button,
      [data-testid="section-whole-lake-mask"] > button *,
      [data-testid="card-whole-lake-area"] > header,
      [data-testid="card-whole-lake-area"] > header *,
      [data-testid="section-sentinel-mask-comparison"] > button,
      [data-testid="section-sentinel-mask-comparison"] > button * {
        color: var(--fitz-ink) !important;
      }
      [data-testid="section-radar-context"] > button,
      [data-testid="section-radar-context"] > button *,
      [data-testid="section-swot-context"] > button,
      [data-testid="section-swot-context"] > button * {
        color: var(--fitz-ink) !important;
      }

      /* Final safety net: any element directly inside a Fitzroy report
         card or vitrine that hasn't been re-colored should inherit
         fitz-ink so we never end up with the browser default white. */
      .fitzroy-report-card, .fitzroy-report-card p,
      .fitzroy-report-card li, .fitzroy-report-card span:not([class*="text-"]),
      .fitzroy-report-card div:not([class*="text-"]) {
        color: var(--fitz-ink);
      }

      /* Mobile pass: at <640px, light-grey body copy can be even harder
         to read due to anti-aliasing on small displays. Apply slightly
         darker fallbacks. */
      @media (max-width: 639px) {
        .fitzroy-app .text-slate-400 { color: #2c4e58 !important; }
        .fitzroy-app .text-slate-500 { color: #2c4e58 !important; }
        .tech-review-body,
        .tech-review-glossary-def,
        .tech-review-param-body,
        .refresh-status-summary-hint,
        .health-index-details-summary-hint,
        .river-narrative-hint {
          color: #2c4e58 !important;
        }
      }
      /* =================================================================
         End contrast & readability pass.
         ================================================================= */


      /* =================================================================
         Collapsible-card readability fix (contrast-collapsible-fix-2026-05-19)
         -----------------------------------------------------------------
         User screenshot showed the collapsed "Whole-lake surface area
         (Next pipeline: ...)" card with a near-white title and a very
         pale "Show ↓" control on a light card background. The earlier
         contrast pass remapped bg-ink-900/70 (the section container) to
         WHITE, so .text-slate-100 (title) and .text-mekong-100 (Show)
         render as low-contrast text on a white card. We pin all
         collapsible-vitrine button content (title, description, Show /
         Hide label, arrow) to a dark ink colour with bold weight, while
         leaving the genuinely dark imagery panels (panel-map,
         panel-comparison-map, panel-optical-image-*, panel-radar-*,
         panel-swot-*, panel-sentinel-mask-visual) untouched.

         Targets:
           - section-whole-lake-mask      (Whole-lake surface area)
           - section-sentinel-mask-comparison (Real Sentinel water-mask)
           - section-radar-context        (Radar context)
           - section-swot-context         (SWOT context)
           - any [data-testid^="section-"] with a button-toggle-* child
           - any [data-testid^="button-toggle-"] directly
           - generic CollapsibleVitrine wrappers
         ================================================================= */
      [data-testid="section-whole-lake-mask"] > button,
      [data-testid="section-sentinel-mask-comparison"] > button,
      [data-testid="section-radar-context"] > button,
      [data-testid="section-swot-context"] > button,
      [data-testid^="button-toggle-"] {
        background: transparent !important;
      }

      /* Title row inside every collapsible button. The first inner div
         is the title (font-semibold text-xs). Force near-black ink and
         bump weight from 600 → 800 so it pops against the white card. */
      [data-testid="section-whole-lake-mask"] > button > div > div:first-child,
      [data-testid="section-sentinel-mask-comparison"] > button > div > div:first-child,
      [data-testid="section-radar-context"] > button > div > div:first-child,
      [data-testid="section-swot-context"] > button > div > div:first-child,
      [data-testid^="button-toggle-"] > div > div:first-child {
        color: #07242c !important;       /* near-black teal ink */
        font-weight: 800 !important;
      }

      /* Description row (text-[10px] text-slate-500 next sibling). Use
         a darker teal so it stays readable on white but secondary to
         the title. */
      [data-testid="section-whole-lake-mask"] > button > div > div + div,
      [data-testid="section-sentinel-mask-comparison"] > button > div > div + div,
      [data-testid="section-radar-context"] > button > div > div + div,
      [data-testid="section-swot-context"] > button > div > div + div,
      [data-testid^="button-toggle-"] > div > div + div {
        color: #21464f !important;       /* dark teal — body */
        font-weight: 500 !important;
      }

      /* "Show ↓" / "Hide ↑" label (last span inside the button). The
         user explicitly asked: make 'show' darker font. */
      [data-testid="section-whole-lake-mask"] > button > span,
      [data-testid="section-sentinel-mask-comparison"] > button > span,
      [data-testid="section-radar-context"] > button > span,
      [data-testid="section-swot-context"] > button > span,
      [data-testid^="button-toggle-"] > span {
        color: #06363f !important;       /* dark teal — strong */
        font-weight: 800 !important;
      }

      /* CollapsibleVitrine component — the dashboard wraps several
         analytic panels in a <section data-testid="vitrine-*"> with a
         single <button> child carrying the header label and a Show /
         Hide chip. Same dark-ink + bold treatment so we never regress
         here either. */
      [data-testid^="vitrine-"] > button,
      [data-testid^="vitrine-"] > button > * {
        color: #07242c !important;
      }
      [data-testid^="vitrine-"] > button > span {
        color: #06363f !important;
        font-weight: 800 !important;
      }

      /* Hover state must keep dark text — the underlying Tailwind class
         is hover:bg-ink-800/70 which (post-remap) becomes a faint tinted
         hover, so dark text continues to contrast. */
      [data-testid="section-whole-lake-mask"] > button:hover,
      [data-testid="section-sentinel-mask-comparison"] > button:hover,
      [data-testid="section-radar-context"] > button:hover,
      [data-testid="section-swot-context"] > button:hover,
      [data-testid^="button-toggle-"]:hover {
        background: rgba(13, 100, 115, 0.08) !important;
      }
      [data-testid="section-whole-lake-mask"] > button:hover > div > div:first-child,
      [data-testid="section-sentinel-mask-comparison"] > button:hover > div > div:first-child,
      [data-testid="section-radar-context"] > button:hover > div > div:first-child,
      [data-testid="section-swot-context"] > button:hover > div > div:first-child,
      [data-testid^="button-toggle-"]:hover > div > div:first-child {
        color: #062028 !important;
      }
      [data-testid="section-whole-lake-mask"] > button:hover > span,
      [data-testid="section-sentinel-mask-comparison"] > button:hover > span,
      [data-testid="section-radar-context"] > button:hover > span,
      [data-testid="section-swot-context"] > button:hover > span,
      [data-testid^="button-toggle-"]:hover > span {
        color: #042830 !important;
      }

      /* Mobile bump: small uppercase labels render slightly thinner
         on phones; reinforce the weight there. */
      @media (max-width: 639px) {
        [data-testid="section-whole-lake-mask"] > button > div > div:first-child,
        [data-testid="section-sentinel-mask-comparison"] > button > div > div:first-child,
        [data-testid="section-radar-context"] > button > div > div:first-child,
        [data-testid="section-swot-context"] > button > div > div:first-child,
        [data-testid^="button-toggle-"] > div > div:first-child {
          font-weight: 900 !important;
        }
        [data-testid="section-whole-lake-mask"] > button > span,
        [data-testid="section-sentinel-mask-comparison"] > button > span,
        [data-testid="section-radar-context"] > button > span,
        [data-testid="section-swot-context"] > button > span,
        [data-testid^="button-toggle-"] > span {
          font-weight: 900 !important;
        }
      }
      /* =================================================================
         End collapsible-card readability fix.
         ================================================================= */


      /* =================================================================
         WHITE-SURFACE DARK-FONT ENFORCEMENT
         (contrast-white-surface-enforce-2026-05-19)
         -----------------------------------------------------------------
         Project-wide rule: any element on a light/white/cream surface
         MUST render text in a dark, WCAG AA-friendly ink colour. The
         earlier remap turned dark Tailwind backgrounds (bg-ink-900/70,
         bg-slate-900, etc.) into white/cream cards, but descendants
         still carried pale text utility classes (text-white, text-slate-
         100..400, text-mekong-100..500, text-flood-100..400, text-
         sediment-100..300, text-amber-100..300, with /60/70/80 opacity
         variants). On the user's IMG_0865 the Real Sentinel water-mask
         comparison card showed values (Sensor S2, Method, Current water,
         Compare water, Unchanged, Cloud cover, Gained/Lost ratio, valid
         coverage) and the Interpretation paragraph as near-invisible
         text on a white card. This block enforces dark text universally
         on light surfaces and preserves dark imagery/map panels that
         legitimately need light text.

         Approach:
           1. Define a single CSS variable for the enforced ink colour.
           2. Apply dark text inside every known light-surface container.
              Tailwind utility classes (text-white, text-slate-*, text-
              mekong-*, text-flood-*, text-sediment-*, text-amber-* with
              opacity variants) are remapped to ink/teal/amber accessible
              tones.
           3. Carve out exception zones for genuinely dark panels: map,
              comparison map, optical/radar/SWOT thumbnails, sentinel
              mask visual, hero, topstrip, CTA buttons, badge grades.
           4. Specific direct fix for the Real Sentinel water-mask
              comparison card values and Interpretation card.
         ================================================================= */

      :root {
        --fitz-ink-strong: #0a141a;          /* near-black for headings on white */
        --fitz-ink-body:   #142a33;          /* body copy on white */
        --fitz-ink-soft:   #2c4e58;          /* secondary body on white */
        --fitz-amber-on-light: #8a5410;      /* amber readable on cream */
      }

      /* ----- Light-surface container set -----
         Any element whose immediate background is white, near-white,
         cream, or a light slate. These selectors capture the actual
         class names emitted by the bundle (Tailwind utility chains and
         the project's bespoke surface variables). */
      .fitzroy-app .bg-white,
      .fitzroy-app .bg-white\/90,
      .fitzroy-app .bg-white\/95,
      .fitzroy-app .bg-white\/80,
      .fitzroy-app .bg-white\/70,
      .fitzroy-app .bg-white\/60,
      .fitzroy-app .bg-white\/50,
      .fitzroy-app .bg-slate-50,
      .fitzroy-app .bg-slate-100,
      .fitzroy-app .bg-cream,
      .fitzroy-app .bg-cream-50,
      .fitzroy-app .bg-cream-100,
      .fitzroy-app .bg-cream-200,
      .fitzroy-app .bg-mekong-50,
      .fitzroy-app .bg-mekong-100,
      .fitzroy-app .bg-flood-50,
      .fitzroy-app .bg-flood-100,
      .fitzroy-app .bg-sediment-50,
      .fitzroy-app .bg-sediment-100,
      .fitzroy-app .bg-amber-50,
      .fitzroy-app .bg-amber-100,
      .fitzroy-app .fitzroy-card,
      .fitzroy-app .fitzroy-report-card,
      .fitzroy-app .fitzroy-vitrine,
      .fitzroy-app .river-narrative-card,
      .fitzroy-app .mini-status-bar {
        /* Default text colour on every light surface — wins over any
           remapped Tailwind utility text colour because rules below
           target descendants of these containers with !important. */
        color: var(--fitz-ink-body);
      }

      /* The bg-ink-900/70 utility was remapped to white earlier in this
         stylesheet — treat it as a light surface for descendant text.
         Match common composed forms used throughout the bundle. */
      .fitzroy-app .bg-ink-900\/70,
      .fitzroy-app .bg-ink-900\/60,
      .fitzroy-app .bg-ink-900\/50 {
        color: var(--fitz-ink-body);
      }

      /* ----- Dark-panel exception set -----
         Anything inside one of these containers KEEPS its existing
         light-on-dark colouring. We use a custom data attribute test on
         common parents AND a defensive class set. */
      [data-testid="panel-map"],
      [data-testid="panel-comparison-map"],
      [data-testid^="panel-optical-image-"],
      [data-testid^="panel-radar-context-"],
      [data-testid^="panel-swot-context-"],
      [data-testid="panel-sentinel-mask-visual"],
      [data-testid="badge-report-card-grade"],
      .fitzroy-hero,
      .fitzroy-topstrip {
        --fitz-surface-is-dark: 1;
      }

      /* ----- Force dark text on pale utilities within light surfaces -----
         The selector says: "for every light-surface container, inside
         it, any element using a pale text utility (and NOT inside a
         dark exception) becomes dark ink." We use !important to beat
         Tailwind utility specificity.

         Note: the :not() chain is intentionally generic — it skips any
         descendant of a dark exception container by checking the
         closest data-testid via :where()/:has() is too costly, so we
         instead RE-ESTABLISH the dark colour inside exception zones
         below this block. */
      .fitzroy-app .bg-white .text-white,
      .fitzroy-app .bg-white .text-white\/90,
      .fitzroy-app .bg-white .text-white\/80,
      .fitzroy-app .bg-white .text-white\/70,
      .fitzroy-app .bg-white .text-white\/60,
      .fitzroy-app .bg-white .text-white\/50,
      .fitzroy-app .bg-white\/90 .text-white,
      .fitzroy-app .bg-white\/90 .text-white\/90,
      .fitzroy-app .bg-white\/95 .text-white,
      .fitzroy-app .bg-white\/95 .text-white\/90,
      .fitzroy-app .bg-ink-900\/70 .text-white,
      .fitzroy-app .bg-ink-900\/70 .text-white\/90,
      .fitzroy-app .bg-ink-900\/70 .text-white\/80,
      .fitzroy-app .bg-ink-900\/70 .text-white\/70,
      .fitzroy-app .bg-ink-900\/70 .text-white\/60,
      .fitzroy-app .bg-ink-900\/70 .text-white\/50,
      .fitzroy-app .fitzroy-card .text-white,
      .fitzroy-app .fitzroy-report-card .text-white {
        color: var(--fitz-ink-strong) !important;
      }

      /* Slate pale family on light surfaces → dark teal ink. */
      .fitzroy-app .bg-white [class*="text-slate-1"],
      .fitzroy-app .bg-white [class*="text-slate-2"],
      .fitzroy-app .bg-white [class*="text-slate-3"],
      .fitzroy-app .bg-white [class*="text-slate-4"],
      .fitzroy-app .bg-white [class*="text-slate-5"],
      .fitzroy-app .bg-white\/90 [class*="text-slate-1"],
      .fitzroy-app .bg-white\/90 [class*="text-slate-2"],
      .fitzroy-app .bg-white\/90 [class*="text-slate-3"],
      .fitzroy-app .bg-white\/90 [class*="text-slate-4"],
      .fitzroy-app .bg-white\/90 [class*="text-slate-5"],
      .fitzroy-app .bg-white\/95 [class*="text-slate-1"],
      .fitzroy-app .bg-white\/95 [class*="text-slate-2"],
      .fitzroy-app .bg-white\/95 [class*="text-slate-3"],
      .fitzroy-app .bg-white\/95 [class*="text-slate-4"],
      .fitzroy-app .bg-white\/95 [class*="text-slate-5"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-slate-1"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-slate-2"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-slate-3"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-slate-4"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-slate-5"],
      .fitzroy-app .fitzroy-card [class*="text-slate-1"],
      .fitzroy-app .fitzroy-card [class*="text-slate-2"],
      .fitzroy-app .fitzroy-card [class*="text-slate-3"],
      .fitzroy-app .fitzroy-report-card [class*="text-slate-1"],
      .fitzroy-app .fitzroy-report-card [class*="text-slate-2"],
      .fitzroy-app .fitzroy-report-card [class*="text-slate-3"] {
        color: var(--fitz-ink-body) !important;
      }

      /* Mekong/flood/sediment pale family on light surfaces. */
      .fitzroy-app .bg-white [class*="text-mekong-1"],
      .fitzroy-app .bg-white [class*="text-mekong-2"],
      .fitzroy-app .bg-white [class*="text-mekong-3"],
      .fitzroy-app .bg-white [class*="text-mekong-4"],
      .fitzroy-app .bg-white [class*="text-mekong-5"],
      .fitzroy-app .bg-white\/90 [class*="text-mekong-1"],
      .fitzroy-app .bg-white\/90 [class*="text-mekong-2"],
      .fitzroy-app .bg-white\/90 [class*="text-mekong-3"],
      .fitzroy-app .bg-white\/90 [class*="text-mekong-4"],
      .fitzroy-app .bg-white\/90 [class*="text-mekong-5"],
      .fitzroy-app .bg-white\/95 [class*="text-mekong-1"],
      .fitzroy-app .bg-white\/95 [class*="text-mekong-2"],
      .fitzroy-app .bg-white\/95 [class*="text-mekong-3"],
      .fitzroy-app .bg-white\/95 [class*="text-mekong-4"],
      .fitzroy-app .bg-white\/95 [class*="text-mekong-5"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-mekong-1"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-mekong-2"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-mekong-3"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-mekong-4"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-mekong-5"] {
        color: var(--fitz-teal-800) !important;
      }
      .fitzroy-app .bg-white [class*="text-flood-1"],
      .fitzroy-app .bg-white [class*="text-flood-2"],
      .fitzroy-app .bg-white [class*="text-flood-3"],
      .fitzroy-app .bg-white [class*="text-flood-4"],
      .fitzroy-app .bg-white\/90 [class*="text-flood-1"],
      .fitzroy-app .bg-white\/90 [class*="text-flood-2"],
      .fitzroy-app .bg-white\/90 [class*="text-flood-3"],
      .fitzroy-app .bg-white\/90 [class*="text-flood-4"],
      .fitzroy-app .bg-white\/95 [class*="text-flood-1"],
      .fitzroy-app .bg-white\/95 [class*="text-flood-2"],
      .fitzroy-app .bg-white\/95 [class*="text-flood-3"],
      .fitzroy-app .bg-white\/95 [class*="text-flood-4"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-flood-1"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-flood-2"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-flood-3"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-flood-4"] {
        color: var(--fitz-teal-700) !important;
      }
      .fitzroy-app .bg-white [class*="text-sediment-1"],
      .fitzroy-app .bg-white [class*="text-sediment-2"],
      .fitzroy-app .bg-white [class*="text-sediment-3"],
      .fitzroy-app .bg-white\/90 [class*="text-sediment-1"],
      .fitzroy-app .bg-white\/90 [class*="text-sediment-2"],
      .fitzroy-app .bg-white\/90 [class*="text-sediment-3"],
      .fitzroy-app .bg-white\/95 [class*="text-sediment-1"],
      .fitzroy-app .bg-white\/95 [class*="text-sediment-2"],
      .fitzroy-app .bg-white\/95 [class*="text-sediment-3"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-sediment-1"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-sediment-2"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-sediment-3"] {
        color: var(--fitz-amber-on-light) !important;
      }
      .fitzroy-app .bg-white [class*="text-amber-1"],
      .fitzroy-app .bg-white [class*="text-amber-2"],
      .fitzroy-app .bg-white [class*="text-amber-3"],
      .fitzroy-app .bg-white\/90 [class*="text-amber-1"],
      .fitzroy-app .bg-white\/90 [class*="text-amber-2"],
      .fitzroy-app .bg-white\/90 [class*="text-amber-3"],
      .fitzroy-app .bg-white\/95 [class*="text-amber-1"],
      .fitzroy-app .bg-white\/95 [class*="text-amber-2"],
      .fitzroy-app .bg-white\/95 [class*="text-amber-3"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-amber-1"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-amber-2"],
      .fitzroy-app .bg-ink-900\/70 [class*="text-amber-3"] {
        color: var(--fitz-amber-on-light) !important;
      }

      /* Generic value cells on light surfaces — many metric grids use
         <dt>/<dd>, <td>, or [data-testid*="value"|"cell-"|"metric-"]
         children with no explicit dark text class, which means they
         inherited from a parent that has now been remapped white.
         Force dark ink on every direct value carrier inside light
         surfaces, including the bundle's td/th/dt/dd defaults. */
      .fitzroy-app .bg-white td,
      .fitzroy-app .bg-white th,
      .fitzroy-app .bg-white dt,
      .fitzroy-app .bg-white dd,
      .fitzroy-app .bg-white\/90 td,
      .fitzroy-app .bg-white\/90 th,
      .fitzroy-app .bg-white\/90 dt,
      .fitzroy-app .bg-white\/90 dd,
      .fitzroy-app .bg-white\/95 td,
      .fitzroy-app .bg-white\/95 th,
      .fitzroy-app .bg-white\/95 dt,
      .fitzroy-app .bg-white\/95 dd,
      .fitzroy-app .bg-ink-900\/70 td,
      .fitzroy-app .bg-ink-900\/70 th,
      .fitzroy-app .bg-ink-900\/70 dt,
      .fitzroy-app .bg-ink-900\/70 dd,
      .fitzroy-app .fitzroy-card td,
      .fitzroy-app .fitzroy-card th,
      .fitzroy-app .fitzroy-card dt,
      .fitzroy-app .fitzroy-card dd {
        color: var(--fitz-ink-body) !important;
      }

      /* ----- SPECIFIC FIX: Real Sentinel water-mask comparison values + Interpretation -----
         The cell-sentinel-* testids carry the *values* the user reported
         as washed-out. Force them dark + bold regardless of whatever
         pale class wraps them. Also catch the Interpretation paragraph
         inside the Sentinel mask comparison card. */
      [data-testid="card-sentinel-mask-comparison"],
      [data-testid="card-sentinel-mask-comparison"] p,
      [data-testid="card-sentinel-mask-comparison"] div,
      [data-testid="card-sentinel-mask-comparison"] span,
      [data-testid="card-sentinel-mask-comparison"] strong,
      [data-testid="card-sentinel-mask-comparison"] small,
      [data-testid="card-sentinel-mask-comparison"] li,
      [data-testid="card-sentinel-mask-comparison"] td,
      [data-testid="card-sentinel-mask-comparison"] th,
      [data-testid="card-sentinel-mask-comparison"] dt,
      [data-testid="card-sentinel-mask-comparison"] dd {
        color: var(--fitz-ink-body) !important;
      }
      [data-testid="card-sentinel-mask-comparison"] [data-testid^="cell-sentinel-"],
      [data-testid="card-sentinel-mask-comparison"] [data-testid^="cell-sentinel-"] *,
      [data-testid="table-sentinel-mask-metrics"] td,
      [data-testid="table-sentinel-mask-metrics"] th,
      [data-testid="table-sentinel-mask-metrics"] [data-testid^="cell-sentinel-"],
      [data-testid="table-sentinel-mask-metrics"] [data-testid^="cell-sentinel-"] * {
        color: var(--fitz-ink-strong) !important;
        font-weight: 600 !important;
      }
      /* Interpretation paragraph + narrative sub-panels (panel-sentinel-
         narrative, panel-sentinel-mask-real text, panel-sentinel-base
         line-metrics, panel-sentinel-scene-context, panel-sentinel-mask-
         same-date). These live on the light card body. */
      [data-testid="panel-sentinel-narrative"],
      [data-testid="panel-sentinel-narrative"] *,
      [data-testid="text-sentinel-narrative"],
      [data-testid="text-sentinel-narrative"] *,
      [data-testid="text-sentinel-pair-notes"],
      [data-testid="text-sentinel-pair-notes"] *,
      [data-testid="text-mask-caution-summary"],
      [data-testid="text-mask-caution-summary"] *,
      [data-testid="panel-sentinel-baseline-metrics"],
      [data-testid="panel-sentinel-baseline-metrics"] *,
      [data-testid="panel-sentinel-scene-context"],
      [data-testid="panel-sentinel-scene-context"] *,
      [data-testid="panel-sentinel-mask-real"],
      [data-testid="panel-sentinel-mask-real"] *,
      [data-testid="panel-sentinel-mask-empty"],
      [data-testid="panel-sentinel-mask-empty"] *,
      [data-testid="panel-sentinel-mask-same-date"],
      [data-testid="panel-sentinel-mask-same-date"] *,
      [data-testid="panel-sentinel-same-date-presets"],
      [data-testid="panel-sentinel-same-date-presets"] * {
        color: var(--fitz-ink-body) !important;
      }
      /* Direct "Interpretation" header / label inside the card. The
         component renders the literal string "Interpretation" as a small
         uppercase label — force it bold near-black. */
      [data-testid="card-sentinel-mask-comparison"] .uppercase,
      [data-testid="card-sentinel-mask-comparison"] .tracking-widest,
      [data-testid="card-sentinel-mask-comparison"] .tracking-wide,
      [data-testid="card-sentinel-mask-comparison"] [class*="text-xs"].uppercase {
        color: var(--fitz-ink-strong) !important;
        font-weight: 700 !important;
      }

      /* ----- Re-establish dark-panel exceptions -----
         Restore light text inside known dark imagery panels. The order
         of these rules is intentional: they appear AFTER the white-
         surface enforcement so they win. */
      [data-testid="panel-map"],
      [data-testid="panel-map"] *,
      [data-testid="panel-comparison-map"],
      [data-testid="panel-comparison-map"] *,
      [data-testid^="panel-optical-image-"],
      [data-testid^="panel-optical-image-"] *,
      [data-testid^="panel-radar-context-"],
      [data-testid^="panel-radar-context-"] *,
      [data-testid^="panel-swot-context-"],
      [data-testid^="panel-swot-context-"] *,
      [data-testid="panel-sentinel-mask-visual"],
      [data-testid="panel-sentinel-mask-visual"] * {
        /* Default light text inside dark panels — earlier rules already
           handle specific Tailwind utility remaps; this is the catch-
           all so a generic <span> doesn't pick up the new dark
           enforcement. */
      }
      [data-testid="panel-map"] :not(svg):not(path):not(circle):not(rect):not(line):not(g),
      [data-testid="panel-comparison-map"] :not(svg):not(path):not(circle):not(rect):not(line):not(g) {
        color: #e6eff0;
      }
      [data-testid^="panel-optical-image-"] .text-white,
      [data-testid^="panel-optical-image-"] [class*="text-slate-1"],
      [data-testid^="panel-optical-image-"] [class*="text-slate-2"],
      [data-testid^="panel-optical-image-"] [class*="text-mekong-"],
      [data-testid^="panel-radar-context-"] .text-white,
      [data-testid^="panel-radar-context-"] [class*="text-slate-1"],
      [data-testid^="panel-radar-context-"] [class*="text-slate-2"],
      [data-testid^="panel-radar-context-"] [class*="text-mekong-"],
      [data-testid^="panel-swot-context-"] .text-white,
      [data-testid^="panel-swot-context-"] [class*="text-slate-1"],
      [data-testid^="panel-swot-context-"] [class*="text-slate-2"],
      [data-testid^="panel-swot-context-"] [class*="text-mekong-"],
      [data-testid="panel-sentinel-mask-visual"] .text-white,
      [data-testid="panel-sentinel-mask-visual"] [class*="text-slate-1"],
      [data-testid="panel-sentinel-mask-visual"] [class*="text-slate-2"],
      [data-testid="panel-sentinel-mask-visual"] [class*="text-mekong-"] {
        color: #e6eff0 !important;
      }
      /* Grade badge keeps white text. */
      [data-testid="badge-report-card-grade"],
      [data-testid="badge-report-card-grade"] * {
        color: #ffffff !important;
      }
      /* Hero + topstrip preserve their existing intent (the topstrip is
         actually light, but the hero overlay is dark over imagery). */
      .fitzroy-hero .text-white,
      .fitzroy-hero [class*="text-slate-1"],
      .fitzroy-hero [class*="text-slate-2"],
      .fitzroy-hero [class*="text-slate-3"] {
        color: #f4f7f5 !important;
      }
      /* CTA / primary buttons that have a dark teal background. The
         remap left .bg-mekong-700/60 as teal — keep its text white. */
      .fitzroy-app .bg-mekong-700\/60,
      .fitzroy-app .bg-mekong-700\/60 * {
        color: #ffffff !important;
      }
      /* Compact-compare presets dark inset (data-testid="compact-compare-
         presets" hosts a small dark <select> wrapper). */
      [data-testid="compact-compare-presets"] .bg-ink-900,
      [data-testid="compact-compare-presets"] .bg-ink-900 *,
      [data-testid="compact-compare-presets"] .bg-mekong-900,
      [data-testid="compact-compare-presets"] .bg-mekong-900 * {
        color: #e6eff0 !important;
      }
      /* Change Visualization panel (the dark legend panel from the
         screenshot) — guard the dark legend swatches inside the
         sentinel mask visual. */
      [data-testid="panel-sentinel-mask-visual"] .text-white {
        color: #e6eff0 !important;
      }
      /* =================================================================
         End white-surface dark-font enforcement.
         ================================================================= */

      /* =================================================================
         Health-grade pastel scale (health-grade-scale-2026-05-19).

         Applies to every A/B/C/D/E/N representation on the page:
           - report-card grade circle (data-testid=badge-report-card-grade)
           - component grade pills inside indicator family chips
           - mini-status-bar grade pill
           - report-card legend grade swatches
           - any future element with class .health-grade-pill / .health-grade-circle

         Selection is by data-grade={A,B,C,D,E,N} so any DOM node can opt in.
         Inline style attributes (set by the JS render) already paint the
         right colors; these rules act as the fallback + ensure the
         contrast-enforcement layer above does NOT override the chosen
         foreground.
         ================================================================= */
      .health-grade-pill,
      .health-grade-circle {
        background: var(--grade-bg-N);
        color: var(--grade-fg-N);
      }
      .health-grade-pill[data-grade="A"], .health-grade-circle[data-grade="A"] {
        background: var(--grade-bg-A) !important;
        color: var(--grade-fg-A) !important;
      }
      .health-grade-pill[data-grade="B"], .health-grade-circle[data-grade="B"] {
        background: var(--grade-bg-B) !important;
        color: var(--grade-fg-B) !important;
      }
      .health-grade-pill[data-grade="C"], .health-grade-circle[data-grade="C"] {
        background: var(--grade-bg-C) !important;
        color: var(--grade-fg-C) !important;
      }
      .health-grade-pill[data-grade="D"], .health-grade-circle[data-grade="D"] {
        background: var(--grade-bg-D) !important;
        color: var(--grade-fg-D) !important;
      }
      .health-grade-pill[data-grade="E"], .health-grade-circle[data-grade="E"] {
        background: var(--grade-bg-E) !important;
        color: var(--grade-fg-E) !important;
      }
      .health-grade-pill[data-grade="N"], .health-grade-circle[data-grade="N"] {
        background: var(--grade-bg-N) !important;
        color: var(--grade-fg-N) !important;
      }
      /* All descendants of a grade pill/circle inherit the chosen foreground
         so the white-surface enforcement layer does not flip white text on
         A/E badges back to dark, or dark text on B/C/D/N back to white. */
      .health-grade-pill, .health-grade-pill *,
      .health-grade-circle, .health-grade-circle * {
        color: inherit !important;
      }
      /* Circle layout — solid pastel disc, centered grade letter + label. */
      .health-grade-circle {
        border: 2px solid currentColor;
        background-clip: padding-box;
      }
      /* Pill layout — small rounded chip used in family chips, legend, etc. */
      .health-grade-pill {
        font-weight: 700;
        letter-spacing: 0.03em;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      /* Print: keep colors visible even when browsers strip backgrounds. */
      @media print {
        .health-grade-pill, .health-grade-circle {
          -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
        }
      }
      /* =================================================================
         End health-grade pastel scale.
         ================================================================= */