/* ==========================================================================
   Hydroscape theme    hydroscape_theme.css    Session 54, September 2026
   Consolidated: one layer, one specificity system.

   One stylesheet, loaded after the compiled Tailwind build on every page of
   both sites. It changes colour, type, spacing and surfaces. It never changes
   words: every label, heading and paragraph on every page is left exactly as
   written. Capitals were text-transform in page CSS and are removed here.

   HOW THE CASCADE IS ARRANGED
   Every declaration that overrides page CSS is marked important, so page CSS
   never wins on its own (page rules are not important, with two exceptions
   handled in section 10). Among the theme's own rules, specificity and then
   file order decide, and the file is arranged so that intent flows downward:

     1  tokens            5  controls            9  layout media
     2  ground and band   6  coloured containers 10 page rules marked important
     3  text, by element  7  components
     4  surfaces          8  page-specific hooks

   Section 3 lifts text with bare element selectors (0,0,1): the lowest rung,
   so any class rule anywhere in this file beats it by specificity. Section 6
   sets the ink of anything inside a coloured button with descendant rules
   (0,1,0) placed after the ink utilities they tie with, so a <span> inside a
   lime button takes the button's dark ink. Touch-target floors in section 9
   sit inside :where() at zero specificity so a page's own sizing always wins.

   To remove the theme from a page, remove its <link>. Nothing else depends
   on it. Every themed page carries class="hs-theme" on <html>; it is only
   used in section 10.
   ========================================================================== */

/* ── 1  Tokens ─────────────────────────────────────────────────────────── */
:root {
  --hs-ground:     #101B10;
  --hs-surface:    #2E5A2A;   /* cards: a green that sits on the ground (Rob, 14 Sep) */
  --hs-surface-2:  #3A6B36;   /* panels inside a card, inputs, chips               */
  --hs-glass:      rgba(46,90,42,.94);
  --hs-line:       rgba(255,255,255,.12);
  --hs-line-2:     rgba(255,255,255,.24);
  --hs-ink:        #F6F8F1;   /* near white with a breath of warmth                */
  --hs-ink-2:      #DCE2D7;   /* secondary: 4.77:1 on a panel, not just on a card   */
  --hs-ink-3:      #98A496;   /* placeholders and footers only                     */
  --hs-lime:       #A9B93C;   /* the one accent, as a fill                         */
  --hs-lime-2:     #B9C94A;   /* hover on lime                                     */
  --hs-lime-ink:   #101B10;   /* ink on lime                                       */
  --hs-red:        #E06060;   /* fills                                             */
  --hs-green:      #7FC77A;
  --hs-blue:       #6FB3D2;
  --hs-amber:      #E0A63A;
  --hs-purple:     #B58BE0;   /* wildlife tint, fills and icons only               */
  --hs-purple-text:#EDE4FB;   /* the same tint as text, measured on the panel      */
  --hs-lime-text:  #DCEA7C;   /* the same accents as text: brighter, measured to   */
  --hs-red-text:   #FFCFCF;   /* clear 4.5:1 on the card surface                  */
  --hs-green-text: #C2EABE;
  --hs-blue-text:  #BCE2F4;
  --hs-amber-text: #F8D998;
  --hero:          none;      /* each page sets its own photograph on <body>       */
  --hero-lg:       var(--hero);
  --hero-pos:      50% 40%;
  --hero-h:        320px;
  --hero-gap:      132px;
  color-scheme: dark;
}
@media (min-width: 900px)  { :root { --hero-h: 440px; --hero-gap: 180px; } }

/* ── 2  Ground and the photograph ──────────────────────────────────────── */
html { background: var(--hs-ground); }
body { background: var(--hs-ground) !important; color: var(--hs-ink) !important; -webkit-font-smoothing: antialiased; position: relative; }
::selection { background: var(--hs-lime); color: var(--hs-lime-ink); }
*:focus-visible { outline: 2px solid var(--hs-lime) !important; outline-offset: 2px; }
* { scrollbar-color: var(--hs-surface-2) var(--hs-ground); }

/* The photograph: a band at the top, lightly darkened, faded into the ground,
   behind the content. Pages set --hero (phone set) and --hero-lg (1600px). */
body::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--hero-h);
  background-image: linear-gradient(180deg, rgba(6,8,6,.08) 0%, rgba(8,12,8,.30) 55%, var(--hs-ground) 100%), var(--hero);
  background-size: cover, cover; background-position: center, var(--hero-pos); background-repeat: no-repeat;
  z-index: 0; pointer-events: none;
}
@media (min-width: 1100px) { body::before { background-image: linear-gradient(180deg, rgba(6,8,6,.08) 0%, rgba(8,12,8,.30) 55%, var(--hs-ground) 100%), var(--hero-lg); } }
body > * { position: relative; z-index: 1; }
main { padding-top: var(--hero-gap) !important; }
/* Hub tools: a thinner band standalone, none inside the shell's iframe */
.hs-hub-tool { --hero-h: 240px; --hero-gap: 84px; }
@media (min-width: 900px) { .hs-hub-tool { --hero-h: 300px; --hero-gap: 108px; } }
.in-iframe body::before { display: none; }
.in-iframe main { padding-top: 0 !important; }

/* ── 3  Text, by element ───────────────────────────────────────────────── */
/* The lowest rung: page CSS left dark text on the dark ground in thousands of
   places, and this lifts all of it. Class rules below win by specificity. */
h1, h2, h3, h4, h5, h6, p, li, dd, dt, td, th, label, legend, summary, blockquote, figcaption,
span, div, section, article, strong, b, em, i:not(.fa-solid):not(.fa-brands):not(.fa-regular)
  { color: var(--hs-ink) !important; }
small { color: var(--hs-ink-2) !important; }
/* Species autocomplete: the taxon label is secondary to the species name */
.search-item span { color: var(--hs-ink-2) !important; }
a:not([class]):not([style*="background"]), p a:not([style*="background"]):not([class*="bg-"]),
li a:not([class*="bg-"]), td a:not([class*="bg-"]), dd a:not([class*="bg-"]) { color: var(--hs-lime-text) !important; }
input::placeholder, textarea::placeholder, .placeholder-slate-400::placeholder { color: var(--hs-ink-3) !important; }
hr { border-color: var(--hs-line) !important; }
blockquote { border-left-color: var(--hs-lime) !important; background: var(--hs-surface) !important; }
code, pre { background: var(--hs-surface-2) !important; color: var(--hs-ink) !important; }

/* Capitals and their tracking were styling; the words were already sentence case */
.uppercase, button, [role="button"], .header small, .footer p, .policy-meta-item strong, th, .section-label, .label, .hs-tab
  { text-transform: none !important; letter-spacing: 0 !important; }
.tracking-wide, .tracking-wider, .tracking-widest, .tracking-\[0\.1em\], .tracking-\[0\.12em\], .tracking-\[0\.15em\], .tracking-\[0\.2em\] { letter-spacing: 0 !important; }
/* Big figures carry the page */
.text-3xl, .text-4xl, .text-5xl, .text-6xl { font-weight: 800 !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Ink utilities and hand-written text classes (0,1,0) */
.text-slate-900, .text-slate-800, .text-slate-700, .text-slate-600, .text-black, .text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-white, .text-\[\#707070\], .text-\[\#787b75\],
.metric-name, .error-card h2, .error-card p, .loading-doctitle, .loading-msg, .zoom-label, .policy-meta dd, .policy-meta-item span, .policy-meta-item p,
.gs-card p, .gs-card li, .hs-infographic-wrapper p, .hs-infographic-wrapper li, .hs-infographic-wrapper td, .hs-infographic-wrapper h1, .hs-infographic-wrapper h2, .hs-infographic-wrapper h3,
.hs-fab-card, .hs-fab-card *, .hs-fab-row, .hs-fab-row *, #cookieConsent, #cookieConsent p, #cookieConsent span, #cookieConsent div,
.section-h, .sub-heading, .shelf-title, .shelf-card-title, .section-title, .brand-fishery, .card-title, .panel-title, .article-body, .prose, .help-body, .guide-body, .shelf-card-subtitle
  { color: var(--hs-ink) !important; }
.text-slate-500, .text-slate-400, .text-slate-300, .text-slate-200, .text-gray-500, .text-gray-400,
.caption, figcaption, .meta, .muted, .subtitle, .sub, .hint, .note-text, .latin, .field-note, .form-hint, .image-panel .caption, .stat-box .label,
.opinion-badge, .shelf-card-kind, .metric-desc, .policy-meta-item strong, .policy-meta dt, .policy-meta .label,
.hs-fab-card small, .hs-fab-row small, .gs-tabs a, .gs-tabs button, .lang-icon, .leaflet-popup-close-button
  { color: var(--hs-ink-2) !important; }
footer, .footer { color: var(--hs-ink-3) !important; background: transparent !important; border-top: 1px solid var(--hs-line); }

/* ── 4  Surfaces ───────────────────────────────────────────────────────── */
/* Everything that was white or pale becomes the card surface */
.bg-white, .bg-slate-50, .bg-white\/90, .bg-white\/95, .bg-white\/80, [class*="bg-white"],
.search-results,
.card, .mode-card, .stat-card, .panel, .hs-card,
.policy-meta, .policy-meta-item, .meta-card, .info, .info-card, .notice, .callout, .prose, .guide-body, .feature-card, .stat-box, .image-panel, .related-card, .info-tab,
.hs-fab-card, .nl-card, .eco-card, .modal-content, .article-card, .login-card, #loginCard, .auth-card,
.load-overlay, #loadOverlay, .header-bar, .signup-card, .section-card, .trust-tier, .tier-card, .cat-chip, .chip, .doc-row, #statusMsg, #log, .log, .console,
.gs-card, .gs-kpi, .gs-tabs, .gs-timeline, .filters-bar, .stats-bar, .section-panel, .kpi, .kpi-card, .stat-tile, .tile, .emu-toolbar, .map-container,
.metric-card, .wq-chip, .opinion-badge, .shelf-card-kind, .error-card, .error-state, .loading, .loading-screen, .badge-soft, .status-msg, .connecting, .status-card,
.activity-label, .rating-btn, .flow-content, .quote-block, .contact-cta, table, .data-table, .data-table td, .data-table th, tr, td,
#statsHandle, #layersHandle, #hexTooltip, .layer-btn, .time-pill, .filter-btn, .tab-bar, .gs-nav, .back-btn, .view-tab, .handle, .tooltip,
[class~="bg-slate-200"], [class~="bg-slate-300"], [class~="bg-gray-200"], .cta-btn-secondary, .btn-secondary,
.leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-draw-toolbar a, .leaflet-draw-actions a, .leaflet-bar a, #cookieConsent
  { background-color: var(--hs-surface) !important; background-image: none !important; border-color: var(--hs-line) !important; color: var(--hs-ink) !important; }
[style*="background:#fff"], [style*="background: #fff"], [style*="background:#ffffff"], [style*="background:white"], [style*="background-color:#fff"], [style*="background-color: #fff"],
[style*="background:#f8fafc"], [style*="background:#f4f7ee"], [style*="background:rgba(255,255,255"], [style*="background: rgba(255,255,255"], [style*="background:rgba(255, 255, 255"]
  { background-color: var(--hs-surface) !important; background-image: none !important; color: var(--hs-ink) !important; }
/* Panels inside a card, tints, inputs' kin */
.bg-slate-100, .bg-slate-200, .bg-slate-300, .bg-gray-100, .bg-gray-200, .bg-slate-50\/50,
.section-label, .flow-tool, .flow-free, .caption, .gs-card-priority, .tab-btn, .gs-nav-btn, .pill, .badge, .tag, .eyebrow, .kicker,
[class~="bg-sky-50"], [class~="bg-sky-100"], [class~="bg-blue-50"], [class~="bg-blue-100"], [class~="bg-emerald-50"], [class~="bg-emerald-100"], [class~="bg-green-50"], [class~="bg-green-100"],
[class~="bg-amber-50"], [class~="bg-amber-100"], [class~="bg-red-50"], [class~="bg-red-100"], [class~="bg-yellow-50"], [class~="bg-yellow-100"],
[class~="bg-slate-50"], [class~="bg-slate-100"], [class~="bg-gray-50"], [class~="bg-gray-100"], [class~="bg-indigo-50"], [class~="bg-purple-50"], [class~="bg-purple-100"],
.probe-card, .probe-field, .kb-hint, .bottombar, .topbar, .emu-toolbar *, .loading-card, #loadingState, .alert, .alert-error, .alert-warn, .alert-info,
.data-table th, thead th, th, tr:nth-child(even) td, .layer-btn, .time-pill, .filter-btn, .view-tab, .tab-bar,
[class~="from-slate-50"], [class~="from-indigo-50"], [class~="from-indigo-100"], [class~="from-blue-50"], [class~="from-\[\#f4f6e8\]"]
  { background-color: var(--hs-surface-2) !important; background-image: none !important; border-color: var(--hs-line) !important; color: var(--hs-ink) !important; }
[style*="background:#e0f2fe"], [style*="background:#dbeafe"], [style*="background:#d1fae5"], [style*="background:#fef3c7"], [style*="background:#fee2e2"],
[style*="background:#f0f9ff"], [style*="background:#ecfdf5"], [style*="background:#f0fdf4"], [style*="background:#fffbeb"], [style*="background:#fef2f2"],
[style*="background:#f1f5f9"], [style*="background:#e2e8f0"], [style*="background:#eef2f7"], [style*="background:#f5f7f0"], [style*="background:#f4f7ee"]
  { background-color: var(--hs-surface-2) !important; background-image: none !important; border-color: var(--hs-line) !important; color: var(--hs-ink) !important; }
.bg-slate-300 { color: var(--hs-ink-2) !important; }
.bg-\[\#a9b93c\]\/10, .bg-\[\#A9B93C\]\/10 { background-color: rgba(169,185,60,.10) !important; }
/* Already dark: the ground, and overlays */
.bg-slate-900, .bg-slate-800, .bg-black, #loginView, .hs-infographic-wrapper { background-color: var(--hs-ground) !important; }
.bg-slate-900\/50, .bg-black\/50, .bg-black\/40, .bg-black\/60 { background-color: rgba(16,27,16,.82) !important; }
.bg-slate-900\/80, .bg-slate-800\/80, .bg-black\/80 { background-color: rgba(16,27,16,.88) !important; }
.glass-panel, .time-bar { background: var(--hs-glass) !important; border-color: var(--hs-line) !important; }
header, .hs-header, .header, .site-header, .page-header, .hs-tabbar, .hs-toolbar, .tool-toolbar
  { background: rgba(16,27,16,.92) !important; border-bottom: 1px solid var(--hs-line) !important; border-color: var(--hs-line) !important; }
.leaflet-container { background: var(--hs-ground) !important; }
/* Kit: hairlines instead of shadows, a calmer radius */
.card, .mode-card, .stat-card, .hs-card, [class*="rounded-2xl"].bg-white, [class*="rounded-xl"].bg-white { border: 1px solid var(--hs-line) !important; box-shadow: none !important; }
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: none !important; }
.rounded-2xl, .rounded-3xl { border-radius: 12px !important; }
.rounded-xl { border-radius: 10px !important; }
.rounded-lg { border-radius: 8px !important; }
.border-slate-50, .border-slate-100, .border-slate-200, .border-slate-300, .border-gray-200, .border-gray-300,
.border-blue-100, .border-blue-200, .border-emerald-200, .border-amber-200, .border-white, .border-\[\#a9b93c\]\/20,
.divide-slate-100 > :not([hidden]) ~ :not([hidden]), .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--hs-line) !important; }
.border-red-100, .border-red-200 { border-color: rgba(224,96,96,.35) !important; }
.border-l-purple-500 { border-left-color: var(--hs-purple) !important; }
.border-l-blue-500, .border-l-sky-500 { border-left-color: var(--hs-blue) !important; }
.alert, .alert-error, .alert-warn, .alert-info, button.bg-white, a.bg-white, .cta-btn-secondary, .btn-secondary,
[class~="from-slate-50"], [class~="from-indigo-50"], [class~="from-indigo-100"], [class~="from-blue-50"] { border-color: var(--hs-line-2) !important; }
.alert-error { border-left: 4px solid var(--hs-red) !important; }
.doc-row.uploaded { border-left: 3px solid var(--hs-green) !important; }
table td, .data-table td, tr:nth-child(odd) td { background-color: var(--hs-surface) !important; border-color: var(--hs-line) !important; }
table th, .data-table th, thead th, tr:nth-child(even) td { background-color: var(--hs-surface-2) !important; }
th { color: var(--hs-ink) !important; }

/* Accents as text: the brighter variants */
.text-\[\#a9b93c\], .text-\[\#A9B93C\], .text-lime, .accent, .section-label, .eyebrow, .kicker,
.stat-box strong, .stat-box b, .stat-box .value, .gs-kpi b, .gs-kpi strong, .figure,
.tab-btn.active, .hs-tab.active, .hs-tab[aria-selected="true"], .hs-tab[aria-current="page"], .hs-tabbar .active, .hs-tabbar [aria-current="page"], [aria-selected="true"]
  { color: var(--hs-lime-text) !important; }
.text-red-400, .text-red-500, .text-red-600, .text-red-700, .error, .danger, .gs-card-priority.priority-high { color: var(--hs-red-text) !important; }
.text-amber-500, .text-amber-600, .text-amber-700, .warn, .warning, .gs-card-priority.priority-medium { color: var(--hs-amber-text) !important; }
.text-emerald-400, .text-emerald-500, .text-emerald-600, .text-emerald-700, .text-emerald-800, .text-green-500, .text-green-600, .text-green-700, .text-green-800, .text-\[\#4C8D2B\], .success, .ok { color: var(--hs-green-text) !important; }
.text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-sky-500, .text-sky-700, .text-sky-800, [style*="color:#0284c7"], [style*="color:#0369a1"] { color: var(--hs-blue-text) !important; }
.text-purple-400, .text-purple-500, .text-purple-600, .text-indigo-500, .text-indigo-600, .text-indigo-700, .text-violet-500, .text-violet-600 { color: var(--hs-purple-text) !important; }
.text-orange-500, .text-orange-600, .text-orange-700, .text-yellow-600, .text-yellow-700 { color: var(--hs-amber-text) !important; }
.text-teal-500, .text-teal-600, .text-teal-700, .text-cyan-500, .text-cyan-600, .text-cyan-700 { color: var(--hs-blue-text) !important; }
.text-pink-500, .text-pink-600, .text-rose-500, .text-rose-600 { color: var(--hs-red-text) !important; }
/* Inline colours a page wrote by hand */
[style*="color:#78350f"], [style*="color:#0f172a"], [style*="color:#1e293b"], [style*="color:#334155"], [style*="color:#475569"], [style*="color: #334155"] { color: var(--hs-ink) !important; }
[style*="color:#64748b"], [style*="color:#94a3b8"], [style*="color: #64748b"] { color: var(--hs-ink-2) !important; }

/* ── 5  Controls ───────────────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea
  { background-color: var(--hs-surface-2) !important; color: var(--hs-ink) !important; border-color: var(--hs-line) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--hs-lime) !important; box-shadow: 0 0 0 3px rgba(169,185,60,.22) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--hs-lime-text); }
select option, .lang-select option { background: var(--hs-surface-2); color: var(--hs-ink); }
button, .btn, [role="button"] { border-radius: 8px; }
/* Language picker: a control, not a call to action */
.lang-btn-wrapper { background: var(--hs-surface-2) !important; border: 1px solid var(--hs-line-2) !important; border-radius: 8px !important; }
.lang-btn-wrapper:hover { background: var(--hs-surface) !important; transform: none !important; }
.lang-select { background: transparent !important; color: var(--hs-ink) !important; border: 0 !important; font-weight: 600; }
/* Active states on chips, tabs and toggles */
.tab-btn.active, .hs-tab.active, .hs-tab[aria-selected="true"], .hs-tab[aria-current="page"], .hs-tabbar .active, .hs-tabbar [aria-current="page"], [aria-selected="true"] { border-color: var(--hs-lime) !important; }
.tier-card.selected, .tier-card.active, .cat-chip.selected, .cat-chip.active, .chip.active, .wq-chip.active, .wq-chip.selected, .wq-chip[aria-pressed="true"]
  { background: rgba(169,185,60,.18) !important; border-color: var(--hs-lime) !important; color: var(--hs-ink) !important; }
.trust-tier.selected, .trust-tier.active { border-color: var(--hs-lime) !important; box-shadow: 0 0 0 2px rgba(169,185,60,.3) !important; }
.hs-fab-row:hover, .hs-fab-row:active, .info-tab:hover, .leaflet-bar a:hover { background: var(--hs-surface-2) !important; }
.hs-tabbar a, .hs-tabbar button, .hs-tab { color: var(--hs-ink-2) !important; font-size: 0.8125rem !important; }
.filter-btn[style*="background"], button[style*="background:#fff"], button[style*="background: #fff"] { background-color: var(--hs-surface) !important; }

/* ── 6  Coloured containers ────────────────────────────────────────────── */
/* Every solid button colour used on either site, by inventory. Blue, purple,
   indigo, sky, cyan and amber families become the accent, lime; emerald and
   green become the theme green; red stays red. Descendant rules come last so
   a <span> or <i> inside takes the button's ink over the utilities above. */
.bg-\[\#a9b93c\], .bg-\[\#A9B93C\], .bg-\[\#8a9a2f\], .bg-\[\#76c4cc\], .bg-\[\#76C4CC\], .bg-\[\#4C8D2B\], .bg-\[\#4c8d2b\],
.bg-purple-500, .bg-purple-600, .bg-purple-700, .bg-violet-500, .bg-indigo-500, .bg-indigo-600, .bg-indigo-700,
.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-sky-500, .bg-sky-600, .bg-sky-700, .bg-cyan-500, .bg-lime-500, .bg-lime-600, .bg-amber-500, .bg-amber-600, .bg-yellow-500,
.hover\:bg-purple-600:hover, .hover\:bg-blue-600:hover, [class~="from-indigo-600"], [class~="from-\[\#a9b93c\]"],
.hs-fab-btn, .tab-btn.active, .gs-nav-btn.active, .gs-tabs .active,
.layer-btn.active, .time-pill.active, .filter-btn.active, .view-tab.active, .rating-btn.active, .rating-btn.selected, .activity-label.selected, .activity-label:has(input:checked), .peer:checked ~ .activity-label,
[style*="background:#A9B93C"], [style*="background: #A9B93C"], [style*="background:#a9b93c"], [style*="background-color:#A9B93C"], [style*="background-color: #A9B93C"], [style*="background-color:#a9b93c"]
  { background-color: var(--hs-lime) !important; background-image: none !important; color: var(--hs-lime-ink) !important; border-color: var(--hs-lime) !important; }
.bg-\[\#a9b93c\]:hover, .bg-\[\#A9B93C\]:hover, .hover\:bg-\[\#8a9a2f\]:hover { background-color: var(--hs-lime-2) !important; }
.bg-emerald-500, .bg-emerald-600, .bg-emerald-700, .bg-green-500, .bg-green-600, .bg-green-700 { background-color: var(--hs-green) !important; color: var(--hs-lime-ink) !important; }
.bg-red-500, .bg-red-600, .bg-red-700 { background-color: var(--hs-red) !important; color: #fff !important; }
/* Cluster markers. The brand lime and amber are too pale to carry white type
   over satellite imagery, so the fills drop to the deep end of the same hues:
   white reads at 7:1 or better on all three. The outer ring is box-shadow
   spread, which stays crisp at any zoom, rather than a second translucent
   element, which looked like a smudge. */
.marker-cluster {
  background: transparent !important;
  display: grid !important; place-items: center !important;
  border-radius: 999px !important;
}
.marker-cluster div {
  display: grid !important; place-items: center !important;
  min-width: 34px; min-height: 34px;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  white-space: nowrap;
  border: 2px solid #fff !important;
  background: #3F6212 !important;
  box-shadow: 0 0 0 5px rgba(63,98,18,.28), 0 1px 3px rgba(0,0,0,.55) !important;
}
.marker-cluster-medium div {
  background: #92400E !important;
  box-shadow: 0 0 0 5px rgba(146,64,14,.28), 0 1px 3px rgba(0,0,0,.55) !important;
}
.marker-cluster-large div {
  background: #991B1B !important;
  box-shadow: 0 0 0 5px rgba(153,27,27,.3), 0 1px 3px rgba(0,0,0,.55) !important;
}
.marker-cluster:hover div { filter: brightness(1.12); }
.cta-btn-primary, .btn-primary, .hero-cta, .cta-btn, .primary-btn, .lang-btn-wrapper.active { color: var(--hs-lime-ink) !important; }
/* These get a lime background from the block above but kept near-white text,
   which measured 2.0:1. Anything painted lime takes the dark ink. */
.filter-btn.active, .filter-btn.active *, .featured-cta, .featured-cta *,
.tab-btn.active, .gs-nav-btn.active, .gs-tabs .active, .layer-btn.active,
.time-pill.active, .view-tab.active, .rating-btn.active, .rating-btn.selected
  { color: var(--hs-lime-ink) !important; }
/* Pale gradient chips (the HydroVision label on the library and its kin) keep the ink; the label's bolt is lime */
[class~="from-slate-50"] *, [class~="from-indigo-50"] *, [class~="from-indigo-100"] *, [class~="from-blue-50"] * { color: var(--hs-ink) !important; }
label[class~="from-indigo-50"] > .fa-bolt, label[class~="from-indigo-100"] > .fa-bolt { color: var(--hs-lime-text) !important; }
/* Ink inside coloured containers, after everything it must beat */
.bg-\[\#a9b93c\] *, .bg-\[\#A9B93C\] *, .bg-\[\#8a9a2f\] *, .bg-\[\#76c4cc\] *, .bg-\[\#4C8D2B\] *, .bg-\[\#4c8d2b\] *,
.bg-purple-500 *, .bg-purple-600 *, .bg-purple-700 *, .bg-indigo-500 *, .bg-indigo-600 *, .bg-indigo-700 *,
.bg-blue-500 *, .bg-blue-600 *, .bg-blue-700 *, .bg-sky-500 *, .bg-sky-600 *, .bg-sky-700 *, .bg-cyan-500 *, .bg-lime-500 *, .bg-lime-600 *, .bg-amber-500 *, .bg-amber-600 *, .bg-yellow-500 *,
[class~="from-indigo-600"] *, [class~="from-\[\#a9b93c\]"] *, .cta-btn-primary *, .btn-primary *, .hero-cta *, .cta-btn *, .primary-btn *, .hs-fab-btn *, .gs-tabs .active *,
.layer-btn.active *, .time-pill.active *, .filter-btn.active *, .view-tab.active *, .activity-label:has(input:checked) *,
[style*="background:#A9B93C"] *, [style*="background: #A9B93C"] *, [style*="background:#a9b93c"] *, [style*="background-color:#A9B93C"] *, [style*="background-color: #A9B93C"] *, [style*="background-color:#a9b93c"] *,
.bg-\[\#a9b93c\].text-white, .bg-\[\#A9B93C\].text-white, .bg-\[\#4C8D2B\].text-white, .bg-blue-500.text-white, .bg-blue-600.text-white, .bg-purple-500.text-white, .bg-purple-600.text-white, .bg-lime-500.text-white, .bg-lime-600.text-white
  { color: var(--hs-lime-ink) !important; }
.bg-red-500 *, .bg-red-600 *, .bg-red-700 * { color: #fff !important; }
.bg-emerald-500 *, .bg-emerald-600 *, .bg-emerald-700 *, .bg-green-500 *, .bg-green-600 *, .bg-green-700 *,
.bg-emerald-500.text-white, .bg-emerald-600.text-white, .bg-green-500.text-white, .bg-green-600.text-white { color: var(--hs-lime-ink) !important; }
/* Secondary buttons are not lime: ink on the surface */
.cta-btn-secondary, .cta-btn-secondary *, .btn-secondary, .btn-secondary * { color: var(--hs-ink) !important; }

/* ── 7  Components ─────────────────────────────────────────────────────── */
#cookieConsent { border-top-color: var(--hs-lime) !important; }
.leaflet-container { background: var(--hs-ground) !important; }
.leaflet-bar a { color: var(--hs-ink) !important; border-bottom-color: var(--hs-line) !important; }
.leaflet-control-attribution { background: rgba(255,255,255,.85) !important; color: #4b5563 !important; }
.leaflet-control-attribution a { color: #374151 !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { color: var(--hs-ink) !important; box-shadow: 0 4px 16px rgba(0,0,0,.4) !important; }
.leaflet-popup-content { color: var(--hs-ink); }
.leaflet-draw-actions a { color: var(--hs-ink) !important; }
#drawStatus, .draw-status, .map-status { background: rgba(16,27,16,.72) !important; color: var(--hs-ink) !important; padding: 4px 10px !important; border-radius: 6px !important; display: inline-block; }
canvas { filter: none; }

/* ── 8  Page-specific hooks ────────────────────────────────────────────── */
#hubView .card[data-tool] { padding: 20px 16px !important; }          /* Hub tool grid: room around the content */
.hs-infographic-wrapper { color: var(--hs-ink) !important; }         /* HydroCam: page-wide wrapper is the ground */
.emu-toolbar * { color: var(--hs-ink) !important; }                  /* phone emulator toolbar */

/* ── 9  Layout media ───────────────────────────────────────────────────── */
/* Narrow phones: headers are a wordmark on the left and a fixed cluster on the
   right, and at 320px they collided. The wordmark drops a size on one line,
   the language pill stops being squeezed, status pills truncate. */
@media (max-width: 380px) {
  h1.text-xl, header h1 { font-size: 0.95rem !important; white-space: nowrap; }
  .mx-auto.px-4, .mx-auto.px-6, header .px-6 { padding-left: 10px !important; padding-right: 10px !important; }
  .mx-auto.px-4 > .gap-3, .mx-auto.px-6 > .gap-3, header .gap-3 { gap: 8px !important; }
  .mx-auto.px-4 > .gap-2, .mx-auto.px-6 > .gap-2, header .gap-2 { gap: 6px !important; }
  span[data-i18n="tagline"], header .text-\[10px\] { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .lang-btn-wrapper { flex-shrink: 0 !important; }
  .lang-select { padding: 8px 24px 8px 8px !important; font-size: 13px !important; }
  .lang-icon { right: 6px !important; font-size: 11px !important; }
  #statusMsg, #authStatus, #globalStatusText, #statusText, #globalStatus { min-width: 0; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block !important; padding-left: 8px !important; padding-right: 8px !important; }
  #statusMsg .loader { display: inline-block; vertical-align: middle; }
  header button.w-8.h-8 { flex-shrink: 0; }
}
/* Mobile fit: tables scroll in their own box; chip strips do not shrink */
@media (max-width: 640px) {
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .filter-btn, .tab-btn, .pipeline-tab, .cat-chip, .gs-nav-btn { flex-shrink: 0; }
  .zoom-group { flex-wrap: wrap; }
  .hs-fab-articles .hs-fab-row-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Touch targets: 44px floors at zero specificity, so a page's own sizing wins */
@media (pointer: coarse) {
  select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { min-height: 44px !important; }
  :where(button:not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]):not([class*="w-10"]):not([class*="h-7"]):not([class*="h-8"]):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):not(.leaflet-draw-toolbar *)),
  :where([role="button"]:not([class*="w-7"]):not([class*="w-8"]):not(.card)), :where(.btn, .cta-btn, .cta-btn-secondary) { min-height: 44px; }
  :where(.tab-btn, .pipeline-tab, .cat-chip, .gs-nav-btn, .info-tab, .filter-btn, .time-pill, .stat-pill) { min-height: 40px; }
  :where(a.btn) { min-height: 44px; display: inline-flex; align-items: center; }
  :where(a[class*="rounded"][class*="px-"][class*="py-"]:not(.card):not([class*="block"])) { min-height: 44px; }

  /* Leaflet gives every interactive marker role="button", so the tap-target
     minimum above was stretching map pins to 44px tall. Leaflet anchors an icon
     by the size it was told, not the size it ends up, so a stretched pin also
     draws below its own coordinate: draw-tool vertices landed 16px south of the
     point that was actually tapped, and the finished polygon did not match them.
     A map pin is a positioned graphic, not a control, so it is exempt. */
  .leaflet-marker-icon, .leaflet-div-icon, .leaflet-marker-shadow { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── 10  Page rules marked important ───────────────────────────────────── */
/* The help pages set `.help-cta a { color: white !important }`. Only a more
   specific important rule beats that, so these carry the html class. */
.hs-theme .help-cta a:not([class]), .hs-theme .contact-cta a:not([class]), .hs-theme .cta a:not([class]), .hs-theme .cta-box a:not([class])
  { color: var(--hs-lime-ink) !important; background: var(--hs-lime) !important; }
.hs-theme .help-cta a:not([class]):hover { background: var(--hs-lime-2) !important; color: var(--hs-lime-ink) !important; }
/* The seals case study's cost table paints its category rows pale with an important rule */
.hs-theme .cost-table .category-row td { background-color: var(--hs-surface-2) !important; color: var(--hs-ink) !important; }

/* ── 11  Interaction states ────────────────────────────────────────────── */
/* Page CSS was written for the old light theme and still carries pale hover
   and focus backgrounds. Sections 1 to 10 only set the resting state, so an
   element could look right until you touched it: .hs-tab:hover measured 1.20:1,
   pale ink on #f8fafc. Everything a pointer or keyboard reaches is set here. */
.hs-tabbar a:hover, .hs-tabbar button:hover, .hs-tab:hover,
.hs-tabbar a:focus-visible, .hs-tabbar button:focus-visible, .hs-tab:focus-visible,
.hs-tabbar a:active, .hs-tabbar button:active, .hs-tab:active
  { background: var(--hs-surface) !important; color: var(--hs-ink) !important; }
.hs-tab.hs-tab--active, .hs-tab.hs-tab--active:hover { color: var(--hs-lime-text) !important; border-bottom-color: var(--hs-lime) !important; }
.hs-tab.hs-tab--active i, .hs-tab:hover i { opacity: 1 !important; }

a:hover, a:focus-visible, button:hover, button:focus-visible, [role="button"]:hover, [role="button"]:focus-visible,
label:hover, summary:hover, .info-tab:hover, .doc-row:hover, .shelf-card:hover, .related-card:hover,
.hover\:bg-slate-50:hover, .hover\:bg-slate-100:hover, .hover\:bg-slate-200:hover, .hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover,
.hover\:bg-white:hover, .hover\:bg-blue-50:hover, .hover\:bg-emerald-50:hover, .hover\:bg-red-50:hover, .hover\:bg-amber-50:hover
  { background-color: var(--hs-surface-2) !important; color: var(--hs-ink) !important; }
.bg-\[\#a9b93c\]:hover, .bg-\[\#A9B93C\]:hover, .cta-btn-primary:hover, .btn-primary:hover, .hero-cta:hover, .primary-btn:hover,
.bg-blue-500:hover, .bg-blue-600:hover, .bg-purple-500:hover, .bg-purple-600:hover, .bg-indigo-600:hover, .bg-sky-600:hover, .bg-lime-500:hover, .bg-lime-600:hover
  { background-color: var(--hs-lime-2) !important; color: var(--hs-lime-ink) !important; }
.bg-\[\#a9b93c\]:hover *, .cta-btn-primary:hover *, .btn-primary:hover *, .bg-blue-600:hover *, .bg-purple-600:hover * { color: var(--hs-lime-ink) !important; }
.bg-emerald-500:hover, .bg-emerald-600:hover, .bg-emerald-700:hover, .bg-green-500:hover, .bg-green-600:hover, .bg-green-700:hover
  { background-color: var(--hs-green) !important; color: var(--hs-lime-ink) !important; }
.bg-red-500:hover, .bg-red-600:hover, .bg-red-700:hover { background-color: var(--hs-red) !important; color: #fff !important; }
.export-btn, .refresh-btn, .export-btn:hover, .refresh-btn:hover, .export-btn:focus-visible, .refresh-btn:focus-visible
  { background-color: var(--hs-surface-2) !important; color: var(--hs-ink) !important; border-color: var(--hs-line-2) !important; }
.skip-link, .skip-link:focus, .skip-link:focus-visible
  { background: var(--hs-lime) !important; color: var(--hs-lime-ink) !important; }

/* ── 12  Tailwind slash-opacity backgrounds ────────────────────────────── */
/* bg-slate-200/50 is a different class name from bg-slate-200, so none of the
   surface rules matched it and those panels stayed pale. */
[class*="bg-white/"], [class*="bg-slate-50/"], [class*="bg-slate-100/"], [class*="bg-slate-200/"], [class*="bg-slate-300/"],
[class*="bg-gray-50/"], [class*="bg-gray-100/"], [class*="bg-blue-50/"], [class*="bg-sky-50/"], [class*="bg-emerald-50/"],
[class*="bg-green-50/"], [class*="bg-amber-50/"], [class*="bg-red-50/"], [class*="bg-purple-50/"], [class*="bg-indigo-50/"]
  { background-color: var(--hs-surface-2) !important; color: var(--hs-ink) !important; }

/* ── 13  Named components still on light values ────────────────────────── */
.signup-header, .signup-header *, .brand, .brand * { color: var(--hs-ink) !important; }
.step-badge { background: var(--hs-lime) !important; color: var(--hs-lime-ink) !important; }
.upload-zone, .upload-zone * { color: var(--hs-ink) !important; }
/* Leaflet's attribution keeps a light background, so its links stay dark */
.leaflet-control-attribution, .leaflet-control-attribution a, .leaflet-control-attribution span
  { color: #374151 !important; background-color: rgba(255,255,255,.88) !important; }

/* ── 14  Touch targets measured under the floor ────────────────────────── */
@media (pointer: coarse) {
  :where(.cat-chip, .tab-btn, .map-btn, .pipeline-tab) { min-height: 44px; min-width: 44px; }
  :where(button[class*="w-7"], button[class*="h-7"]) { min-width: 36px; min-height: 36px; }
}

/* ── 15  The states section 11 missed ─────────────────────────────────── */
/* Section 11 covered :hover but not :active or :focus-visible on coloured
   buttons, so pressing a lime button left dark ink on whatever the page's
   :active rule painted underneath. "Close Guide" measured 1.52:1 while held. */
.bg-\[\#a9b93c\]:active, .bg-\[\#A9B93C\]:active, .bg-\[\#a9b93c\]:focus-visible, .bg-\[\#A9B93C\]:focus-visible,
.cta-btn-primary:active, .btn-primary:active, .hero-cta:active, .primary-btn:active,
.cta-btn-primary:focus-visible, .btn-primary:focus-visible, .hero-cta:focus-visible, .primary-btn:focus-visible,
.bg-blue-500:active, .bg-blue-600:active, .bg-purple-600:active, .bg-sky-600:active, .bg-lime-500:active, .bg-lime-600:active,
.bg-blue-500:focus-visible, .bg-blue-600:focus-visible, .bg-purple-600:focus-visible, .bg-lime-500:focus-visible
  { background-color: var(--hs-lime) !important; color: var(--hs-lime-ink) !important; }
.bg-\[\#a9b93c\]:active *, .bg-\[\#A9B93C\]:active *, .bg-\[\#a9b93c\]:focus-visible *, .bg-blue-600:active *, .bg-blue-500:active *
  { color: var(--hs-lime-ink) !important; }
.bg-emerald-500:active, .bg-emerald-600:active, .bg-green-500:active, .bg-green-600:active,
.bg-emerald-600:focus-visible, .bg-green-600:focus-visible
  { background-color: var(--hs-green) !important; color: var(--hs-lime-ink) !important; }
.bg-red-500:active, .bg-red-600:active, .bg-red-500:focus-visible, .bg-red-600:focus-visible
  { background-color: var(--hs-red) !important; color: #fff !important; }

/* White ink never survives a lime fill: 2.17:1. Any element carrying both
   loses the white, whatever order the classes appear in. */
.text-white.bg-\[\#a9b93c\], .bg-\[\#a9b93c\] .text-white, .text-white.bg-lime-500, .text-white.bg-lime-600,
.bg-\[\#a9b93c\] > .text-white, [class*="bg-[#a9b93c]"].text-white, [class*="bg-[#A9B93C]"].text-white
  { color: var(--hs-lime-ink) !important; }

/* ── 16  Third-party map attribution ───────────────────────────────────── */
/* Leaflet and Mapbox draw their own attribution on a pale strip and the page
   CSS marks parts of it !important, so the plain rules lost. Scoped so they
   win, and the ink stays dark because the strip stays pale. */
.hs-theme .leaflet-control-attribution, .hs-theme .leaflet-control-attribution a,
.hs-theme .leaflet-control-attribution span, .hs-theme .leaflet-control-attribution div,
.hs-theme .mapboxgl-ctrl-attrib, .hs-theme .mapboxgl-ctrl-attrib a, .hs-theme .mapboxgl-ctrl-attrib-inner,
.hs-theme .mapboxgl-ctrl-attrib-inner a
  { color: #1f2937 !important; background-color: rgba(255,255,255,.92) !important; }

/* ── 17  Named components the second sweep found ──────────────────────── */
.signup-header, .signup-header *, .brand, .brand *, .signup-header h1, .signup-header p
  { color: var(--hs-lime-ink) !important; }
.theme-text { color: var(--hs-ink) !important; }

/* ── 18  The last of the measured contrast failures ───────────────────── */
/* White ink on any coloured fill, wherever the fill comes from. The earlier
   rules named specific background classes; these catch the rest by asking
   what the element actually is rather than which utility painted it. */
/* Dark ink on a white-text button ONLY where the button actually became lime.
   The rule used to catch every .text-white button, which broke the ones that
   carry their own inline gradient (HydroSonde's "Analyse Zone", Water Quality's
   "Connect HydroProbe"): those stay blue and were left with dark navy text on
   blue. A button with its own background-image keeps white text. */
button.text-white:not([style*="gradient"]):not([style*="background"]),
a.text-white:not([style*="gradient"]):not([style*="background"]),
.btn.text-white:not([style*="gradient"]):not([style*="background"]),
[role="button"].text-white:not([style*="gradient"]):not([style*="background"])
  { color: var(--hs-lime-ink) !important; }
button.text-white[style*="gradient"], a.text-white[style*="gradient"],
button.text-white[style*="gradient"] span, button.text-white[style*="gradient"] i
  { color: #ffffff !important; }
button.text-white i, a.text-white i, button.text-white span { color: inherit !important; }
/* the red and green fills are dark enough to keep white */
.bg-red-500.text-white, .bg-red-600.text-white, .bg-red-700.text-white,
.bg-red-500.text-white *, .bg-red-600.text-white * { color: #fff !important; }

/* Named states the sweep found still inheriting a pale page style */
.active-btn, .active-btn:hover, .active-btn:focus-visible, .active-btn:active
  { background: rgba(169,185,60,.18) !important; color: var(--hs-ink) !important; border-color: var(--hs-lime) !important; }
.gs-nav-btn, .view-tab, .emu-icon-btn, .emu-drop-btn { color: var(--hs-ink) !important; }
[class*="bg-cyan-50/"], [class*="bg-teal-50/"], [class*="bg-cyan-100/"] { background-color: var(--hs-surface-2) !important; color: var(--hs-ink) !important; }
[class*="bg-cyan-50/"] *, [class*="bg-teal-50/"] * { color: var(--hs-ink) !important; }

/* ── 20  Tab and pill strips, every width ─────────────────────────────── */
/* A strip of tabs wraps onto another row rather than squeezing its buttons
   until the words break. Not inside the phone media query: the Hub's Client
   Users strip is 790px of tabs and overflowed a 768px tablet too. The rule
   costs nothing on a wide screen, where the row fits and never wraps. The
   containers are usually unclassed Tailwind flex rows, so match on the child. */
:has(> .view-tab), :has(> .tab-btn), :has(> .filter-btn),
:has(> .time-pill), :has(> .layer-btn) { flex-wrap: wrap; max-width: 100%; }
.view-tab, .tab-btn, .filter-btn, .time-pill, .layer-btn { flex-shrink: 0; white-space: nowrap; }

/* ── 19  Horizontal overflow at phone width ───────────────────────────── */
/* Six pages scrolled sideways at 375px, worst 426px over. In every case a row
   of buttons or a wide table was refusing to wrap. Nothing here changes a
   layout that already fits; it only stops one escaping the viewport. */
@media (max-width: 640px) {
  /* S55: `overflow-x: hidden` promotes the element to a scroll container, which
     forces overflow-y from `visible` to `auto`. That made body a scroller nested
     inside html at phone width, and the cormorant page's own
     `body { overscroll-behavior-y: none; }` then blocked the touch gesture from
     chaining out of a body that had nothing to scroll. Frozen page on Android,
     fine on desktop because this query never fires above 640px.
     `clip` clips without creating a scroll container. The hidden line stays as a
     fallback for anything older than Chrome 90 / Safari 16. */
  html, body { overflow-x: hidden; overflow-x: clip; }
  .hs-tabbar-inner, .gs-tabs, .view-tabs, .emu-toolbar, .tab-bar, .filters-bar, .stats-bar,
  .zoom-group, .toolbar, .btn-row, .actions-row { flex-wrap: wrap !important; row-gap: 6px; }
  table, .data-table, .gs-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .min-w-\[900px\], .min-w-\[800px\], .min-w-\[760px\], .min-w-\[720px\], .min-w-\[640px\] { min-width: 0 !important; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
  .whitespace-nowrap { white-space: normal !important; }
  .hs-tabbar-inner .hs-tab { flex: 0 0 auto; }
}

/* ── 20  Public-site findings ─────────────────────────────────────────── */
/* The cookie banner and the licence guide paint their own buttons, and the
   help pages carry a back link from the old light design. Measured at 2.02:1
   and 2.85:1 respectively, both only while hovered or focused. */
#cookieConsent button, #cookieConsent button:hover, #cookieConsent button:focus-visible, #cookieConsent button:active,
.cookie-accept, .cookie-accept:hover, .guide-accept, .guide-accept:hover
  { background: var(--hs-lime) !important; color: var(--hs-lime-ink) !important; border-color: var(--hs-lime) !important; }
#cookieConsent button *, .cookie-accept * { color: var(--hs-lime-ink) !important; }
#cookieConsent ul, #cookieConsent ul li, #cookieConsent p, #cookieConsent span { color: var(--hs-ink-2) !important; }
.hero-back, .hero-back:hover, .hero-back:focus-visible, .hero-back:active
  { color: var(--hs-lime-text) !important; background: transparent !important; }
.install-btn, .install-btn:hover, .install-btn:focus-visible
  { background: var(--hs-lime) !important; color: var(--hs-lime-ink) !important; }
.install-btn *, .install-btn:hover * { color: var(--hs-lime-ink) !important; }
/* The inactive chip is a surface, so it takes the light ink. The active one is
   painted lime, so it takes the dark ink (set in section 6) and must not be
   caught here: this rule used to include .active and undid it, leaving near
   white on lime at 2.0:1. */
.filter-btn:not(.active) { color: var(--hs-ink) !important; }
.shelf-card-kind, .h-44 > span, [class*="bg-[#787b75]"] { color: var(--hs-ink) !important; }
[class*="bg-[#787b75]"] { background-color: var(--hs-surface-2) !important; }
/* the HydroVision label is a pale gradient chip; keep its ink dark enough */
label[class*="from-indigo-50"], label[class*="from-indigo-100"], label[class*="bg-gradient-to-br"]
  { background: var(--hs-surface-2) !important; color: var(--hs-ink) !important; }

/* ── 21  Rows of links and cards running off the right edge ───────────── */
/* 255 elements sat past the viewport on the public site at 375px, most of them
   a credits list and the library shelf. Nothing here changes a layout that
   already fits. */
@media (max-width: 640px) {
  .credits-grid, .credits-list, .shelf, .shelf-row, .card-row, .chip-row, .filter-row
    { flex-wrap: wrap !important; }
  .shelf-card, .credits-list a, .credits-grid a { max-width: 100%; }
  /* S55: was `word-break: break-word`, the legacy alias for `overflow-wrap:
     anywhere`. That collapses an element's min-content width to a single
     character, so a flex item with no flex-shrink:0 gets squeezed until every
     letter wraps onto its own line. It turned the Hub's Client Users tab strip
     into six vertical columns of letters. `overflow-wrap: break-word` keeps the
     long-URL protection this was added for, but leaves min-content at the
     longest word, so nothing can be squeezed below a readable width. */
  a, button { overflow-wrap: break-word; }
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
}

/* Dark ink on the lime brand surface, and on everything inside it.
   The rules above set the colour on the lime element itself, but a child
   span carrying its own text-white keeps it and lands at 2.02:1. That is what
   the Hydro-Vericount header button, the dashboard cluster pill, the a06
   draw button and the reset button were all doing. Icons count too: a white
   glyph on lime fails the same way a white word does.
   The selector list is generated from every rule in these stylesheets that
   actually paints lime, so it does not drift as buttons are added. */
#cookieConsent button,
#cookieConsent button:active,
#cookieConsent button:focus-visible,
.active-btn,
.activity-label.selected,
.activity-label:has(input:checked),
.bg-\[\#4C8D2B\],
.bg-\[\#4c8d2b\],
.bg-\[\#76C4CC\],
.bg-\[\#76c4cc\],
.bg-\[\#8a9a2f\],
.bg-\[\#A9B93C\],
.bg-\[\#A9B93C\]:active,
.bg-\[\#A9B93C\]:focus-visible,
.bg-\[\#a9b93c\],
.bg-\[\#a9b93c\]:active,
.bg-\[\#a9b93c\]:focus-visible,
.bg-amber-500,
.bg-amber-600,
.bg-blue-500,
.bg-blue-500:active,
.bg-blue-500:focus-visible,
.bg-blue-600,
.bg-blue-600:active,
.bg-blue-600:focus-visible,
.bg-blue-700,
.bg-cyan-500,
.bg-indigo-500,
.bg-indigo-600,
.bg-indigo-700,
.bg-lime-500,
.bg-lime-500:active,
.bg-lime-500:focus-visible,
.bg-lime-600,
.bg-lime-600:active,
.bg-purple-500,
.bg-purple-600,
.bg-purple-600:active,
.bg-purple-600:focus-visible,
.bg-purple-700,
.bg-sky-500,
.bg-sky-600,
.bg-sky-600:active,
.bg-sky-700,
.bg-violet-500,
.bg-yellow-500,
.btn-primary:active,
.btn-primary:focus-visible,
.ci-refresh,
.cookie-accept,
.cta-btn-primary:active,
.cta-btn-primary:focus-visible,
.filter-btn.active,
.gs-nav-btn.active,
.gs-tabs .active,
.guide-accept,
.header-btn,
.hero-cta:active,
.hero-cta:focus-visible,
.hs-fab-btn,
.hs-theme .contact-cta a:not([class]),
.hs-theme .cta a:not([class]),
.hs-theme .cta-box a:not([class]),
.hs-theme .help-cta a:not([class]),
.install-btn,
.install-btn:focus-visible,
.layer-btn.active,
.map-fab-draw,
.marker-cluster div,
.peer:checked ~ .activity-label,
.primary-btn:active,
.primary-btn:focus-visible,
.rating-btn.active,
.rating-btn.selected,
.skip-link,
.skip-link:focus,
.skip-link:focus-visible,
.step-badge,
.tab-btn.active,
.theme-bg,
.time-pill.active,
.tour-btn-next,
.tour-close-cta,
.view-tab.active,
[class~="from-\[\#a9b93c\]"],
[class~="from-indigo-600"],
[style*="background-color: #A9B93C"],
[style*="background-color:#A9B93C"],
[style*="background-color:#a9b93c"],
[style*="background: #A9B93C"],
[style*="background:#A9B93C"],
[style*="background:#a9b93c"],
#cookieConsent button *,
#cookieConsent button:active *,
#cookieConsent button:focus-visible *,
.active-btn *,
.activity-label.selected *,
.activity-label:has(input:checked) *,
.bg-\[\#4C8D2B\] *,
.bg-\[\#4c8d2b\] *,
.bg-\[\#76C4CC\] *,
.bg-\[\#76c4cc\] *,
.bg-\[\#8a9a2f\] *,
.bg-\[\#A9B93C\] *,
.bg-\[\#A9B93C\]:active *,
.bg-\[\#A9B93C\]:focus-visible *,
.bg-\[\#a9b93c\] *,
.bg-\[\#a9b93c\]:active *,
.bg-\[\#a9b93c\]:focus-visible *,
.bg-amber-500 *,
.bg-amber-600 *,
.bg-blue-500 *,
.bg-blue-500:active *,
.bg-blue-500:focus-visible *,
.bg-blue-600 *,
.bg-blue-600:active *,
.bg-blue-600:focus-visible *,
.bg-blue-700 *,
.bg-cyan-500 *,
.bg-indigo-500 *,
.bg-indigo-600 *,
.bg-indigo-700 *,
.bg-lime-500 *,
.bg-lime-500:active *,
.bg-lime-500:focus-visible *,
.bg-lime-600 *,
.bg-lime-600:active *,
.bg-purple-500 *,
.bg-purple-600 *,
.bg-purple-600:active *,
.bg-purple-600:focus-visible *,
.bg-purple-700 *,
.bg-sky-500 *,
.bg-sky-600 *,
.bg-sky-600:active *,
.bg-sky-700 *,
.bg-violet-500 *,
.bg-yellow-500 *,
.btn-primary:active *,
.btn-primary:focus-visible *,
.ci-refresh *,
.cookie-accept *,
.cta-btn-primary:active *,
.cta-btn-primary:focus-visible *,
.filter-btn.active *,
.gs-nav-btn.active *,
.gs-tabs .active *,
.guide-accept *,
.header-btn *,
.hero-cta:active *,
.hero-cta:focus-visible *,
.hs-fab-btn *,
.hs-theme .contact-cta a:not([class]) *,
.hs-theme .cta a:not([class]) *,
.hs-theme .cta-box a:not([class]) *,
.hs-theme .help-cta a:not([class]) *,
.install-btn *,
.install-btn:focus-visible *,
.layer-btn.active *,
.map-fab-draw *,
.marker-cluster div *,
.peer:checked ~ .activity-label *,
.primary-btn:active *,
.primary-btn:focus-visible *,
.rating-btn.active *,
.rating-btn.selected *,
.skip-link *,
.skip-link:focus *,
.skip-link:focus-visible *,
.step-badge *,
.tab-btn.active *,
.theme-bg *,
.time-pill.active *,
.tour-btn-next *,
.tour-close-cta *,
.view-tab.active *,
[class~="from-\[\#a9b93c\]"] *,
[class~="from-indigo-600"] *,
[style*="background-color: #A9B93C"] *,
[style*="background-color:#A9B93C"] *,
[style*="background-color:#a9b93c"] *,
[style*="background: #A9B93C"] *,
[style*="background:#A9B93C"] *,
[style*="background:#a9b93c"] *
  { color: var(--hs-lime-ink) !important; }
/* reset.html styles its button at element level with no class of its own. */
button:not([class]) { color: var(--hs-lime-ink); }

/* ── Dialog surfaces ─────────────────────────────────────────────────────
   Plain white was missing from the pastel conversion list above, so a modal
   that kept a white panel through the brand change ends up showing near-white
   ink on white. Scoped to dialogs and drawers: a Leaflet popup is white with
   dark ink and that pairing is right, so it is not touched. */
[role="dialog"],
[aria-modal="true"],
[class*="modal"],
[class*="Modal"],
[class*="drawer"],
[class*="Drawer"],
[class*="overlay"],
[class*="Overlay"],
[class*="sheet"],
[class*="flyout"],
dialog
  { --hs-dialog-surface: var(--hs-surface); }

[role="dialog"] [class~="bg-white"],
[aria-modal="true"] [class~="bg-white"],
[class*="modal"] [class~="bg-white"],
[class*="Modal"] [class~="bg-white"],
[class*="drawer"] [class~="bg-white"],
[class*="Drawer"] [class~="bg-white"],
[class*="overlay"] [class~="bg-white"],
[class*="Overlay"] [class~="bg-white"],
[class*="sheet"] [class~="bg-white"],
[class*="flyout"] [class~="bg-white"],
dialog [class~="bg-white"],
[role="dialog"] [style*="background:#fff"],
[aria-modal="true"] [style*="background:#fff"],
[class*="modal"] [style*="background:#fff"],
[class*="Modal"] [style*="background:#fff"],
[class*="drawer"] [style*="background:#fff"],
[class*="Drawer"] [style*="background:#fff"],
[class*="overlay"] [style*="background:#fff"],
[class*="Overlay"] [style*="background:#fff"],
[class*="sheet"] [style*="background:#fff"],
[class*="flyout"] [style*="background:#fff"],
dialog [style*="background:#fff"],
[role="dialog"] [style*="background: #fff"],
[aria-modal="true"] [style*="background: #fff"],
[class*="modal"] [style*="background: #fff"],
[class*="Modal"] [style*="background: #fff"],
[class*="drawer"] [style*="background: #fff"],
[class*="Drawer"] [style*="background: #fff"],
[class*="overlay"] [style*="background: #fff"],
[class*="Overlay"] [style*="background: #fff"],
[class*="sheet"] [style*="background: #fff"],
[class*="flyout"] [style*="background: #fff"],
dialog [style*="background: #fff"],
[role="dialog"] [style*="background:#FFF"],
[aria-modal="true"] [style*="background:#FFF"],
[class*="modal"] [style*="background:#FFF"],
[class*="Modal"] [style*="background:#FFF"],
[class*="drawer"] [style*="background:#FFF"],
[class*="Drawer"] [style*="background:#FFF"],
[class*="overlay"] [style*="background:#FFF"],
[class*="Overlay"] [style*="background:#FFF"],
[class*="sheet"] [style*="background:#FFF"],
[class*="flyout"] [style*="background:#FFF"],
dialog [style*="background:#FFF"],
[role="dialog"] [style*="background:white"],
[aria-modal="true"] [style*="background:white"],
[class*="modal"] [style*="background:white"],
[class*="Modal"] [style*="background:white"],
[class*="drawer"] [style*="background:white"],
[class*="Drawer"] [style*="background:white"],
[class*="overlay"] [style*="background:white"],
[class*="Overlay"] [style*="background:white"],
[class*="sheet"] [style*="background:white"],
[class*="flyout"] [style*="background:white"],
dialog [style*="background:white"],
[role="dialog"] [style*="background-color:#fff"],
[aria-modal="true"] [style*="background-color:#fff"],
[class*="modal"] [style*="background-color:#fff"],
[class*="Modal"] [style*="background-color:#fff"],
[class*="drawer"] [style*="background-color:#fff"],
[class*="Drawer"] [style*="background-color:#fff"],
[class*="overlay"] [style*="background-color:#fff"],
[class*="Overlay"] [style*="background-color:#fff"],
[class*="sheet"] [style*="background-color:#fff"],
[class*="flyout"] [style*="background-color:#fff"],
dialog [style*="background-color:#fff"]
  { background-color: var(--hs-surface) !important; background-image: none !important;
    border-color: var(--hs-line) !important; }

[role="dialog"] [class~="bg-slate-50"],
[aria-modal="true"] [class~="bg-slate-50"],
[class*="modal"] [class~="bg-slate-50"],
[class*="Modal"] [class~="bg-slate-50"],
[class*="drawer"] [class~="bg-slate-50"],
[class*="Drawer"] [class~="bg-slate-50"],
[class*="overlay"] [class~="bg-slate-50"],
[class*="Overlay"] [class~="bg-slate-50"],
[class*="sheet"] [class~="bg-slate-50"],
[class*="flyout"] [class~="bg-slate-50"],
dialog [class~="bg-slate-50"],
[role="dialog"] [class~="bg-slate-100"],
[aria-modal="true"] [class~="bg-slate-100"],
[class*="modal"] [class~="bg-slate-100"],
[class*="Modal"] [class~="bg-slate-100"],
[class*="drawer"] [class~="bg-slate-100"],
[class*="Drawer"] [class~="bg-slate-100"],
[class*="overlay"] [class~="bg-slate-100"],
[class*="Overlay"] [class~="bg-slate-100"],
[class*="sheet"] [class~="bg-slate-100"],
[class*="flyout"] [class~="bg-slate-100"],
dialog [class~="bg-slate-100"],
[role="dialog"] [class~="bg-gray-50"],
[aria-modal="true"] [class~="bg-gray-50"],
[class*="modal"] [class~="bg-gray-50"],
[class*="Modal"] [class~="bg-gray-50"],
[class*="drawer"] [class~="bg-gray-50"],
[class*="Drawer"] [class~="bg-gray-50"],
[class*="overlay"] [class~="bg-gray-50"],
[class*="Overlay"] [class~="bg-gray-50"],
[class*="sheet"] [class~="bg-gray-50"],
[class*="flyout"] [class~="bg-gray-50"],
dialog [class~="bg-gray-50"],
[role="dialog"] [class~="bg-gray-100"],
[aria-modal="true"] [class~="bg-gray-100"],
[class*="modal"] [class~="bg-gray-100"],
[class*="Modal"] [class~="bg-gray-100"],
[class*="drawer"] [class~="bg-gray-100"],
[class*="Drawer"] [class~="bg-gray-100"],
[class*="overlay"] [class~="bg-gray-100"],
[class*="Overlay"] [class~="bg-gray-100"],
[class*="sheet"] [class~="bg-gray-100"],
[class*="flyout"] [class~="bg-gray-100"],
dialog [class~="bg-gray-100"],
[role="dialog"] [style*="background:#f8fafc"],
[aria-modal="true"] [style*="background:#f8fafc"],
[class*="modal"] [style*="background:#f8fafc"],
[class*="Modal"] [style*="background:#f8fafc"],
[class*="drawer"] [style*="background:#f8fafc"],
[class*="Drawer"] [style*="background:#f8fafc"],
[class*="overlay"] [style*="background:#f8fafc"],
[class*="Overlay"] [style*="background:#f8fafc"],
[class*="sheet"] [style*="background:#f8fafc"],
[class*="flyout"] [style*="background:#f8fafc"],
dialog [style*="background:#f8fafc"],
[role="dialog"] [style*="background:#f0f4e8"],
[aria-modal="true"] [style*="background:#f0f4e8"],
[class*="modal"] [style*="background:#f0f4e8"],
[class*="Modal"] [style*="background:#f0f4e8"],
[class*="drawer"] [style*="background:#f0f4e8"],
[class*="Drawer"] [style*="background:#f0f4e8"],
[class*="overlay"] [style*="background:#f0f4e8"],
[class*="Overlay"] [style*="background:#f0f4e8"],
[class*="sheet"] [style*="background:#f0f4e8"],
[class*="flyout"] [style*="background:#f0f4e8"],
dialog [style*="background:#f0f4e8"],
[role="dialog"] [style*="background:#fafafa"],
[aria-modal="true"] [style*="background:#fafafa"],
[class*="modal"] [style*="background:#fafafa"],
[class*="Modal"] [style*="background:#fafafa"],
[class*="drawer"] [style*="background:#fafafa"],
[class*="Drawer"] [style*="background:#fafafa"],
[class*="overlay"] [style*="background:#fafafa"],
[class*="Overlay"] [style*="background:#fafafa"],
[class*="sheet"] [style*="background:#fafafa"],
[class*="flyout"] [style*="background:#fafafa"],
dialog [style*="background:#fafafa"]
  { background-color: var(--hs-surface-2) !important; background-image: none !important;
    border-color: var(--hs-line) !important; }

/* A dialog that is itself the white panel. */
[role="dialog"][class~="bg-white"],
[aria-modal="true"][class~="bg-white"],
[class*="modal"][class~="bg-white"],
[class*="Modal"][class~="bg-white"],
[class*="drawer"][class~="bg-white"],
[class*="Drawer"][class~="bg-white"],
[class*="overlay"][class~="bg-white"],
[class*="Overlay"][class~="bg-white"],
[class*="sheet"][class~="bg-white"],
[class*="flyout"][class~="bg-white"],
dialog[class~="bg-white"]
  { background-color: var(--hs-surface) !important; }

/* Borders inside a dialog were drawn for a white panel. */
[role="dialog"] [class*="border-slate-1"],
[aria-modal="true"] [class*="border-slate-1"],
[class*="modal"] [class*="border-slate-1"],
[class*="Modal"] [class*="border-slate-1"],
[class*="drawer"] [class*="border-slate-1"],
[class*="Drawer"] [class*="border-slate-1"],
[class*="overlay"] [class*="border-slate-1"],
[class*="Overlay"] [class*="border-slate-1"],
[class*="sheet"] [class*="border-slate-1"],
[class*="flyout"] [class*="border-slate-1"],
dialog [class*="border-slate-1"],
[role="dialog"] [class*="border-slate-2"],
[aria-modal="true"] [class*="border-slate-2"],
[class*="modal"] [class*="border-slate-2"],
[class*="Modal"] [class*="border-slate-2"],
[class*="drawer"] [class*="border-slate-2"],
[class*="Drawer"] [class*="border-slate-2"],
[class*="overlay"] [class*="border-slate-2"],
[class*="Overlay"] [class*="border-slate-2"],
[class*="sheet"] [class*="border-slate-2"],
[class*="flyout"] [class*="border-slate-2"],
dialog [class*="border-slate-2"],
[role="dialog"] [class*="border-gray-1"],
[aria-modal="true"] [class*="border-gray-1"],
[class*="modal"] [class*="border-gray-1"],
[class*="Modal"] [class*="border-gray-1"],
[class*="drawer"] [class*="border-gray-1"],
[class*="Drawer"] [class*="border-gray-1"],
[class*="overlay"] [class*="border-gray-1"],
[class*="Overlay"] [class*="border-gray-1"],
[class*="sheet"] [class*="border-gray-1"],
[class*="flyout"] [class*="border-gray-1"],
dialog [class*="border-gray-1"],
[role="dialog"] [class*="border-gray-2"],
[aria-modal="true"] [class*="border-gray-2"],
[class*="modal"] [class*="border-gray-2"],
[class*="Modal"] [class*="border-gray-2"],
[class*="drawer"] [class*="border-gray-2"],
[class*="Drawer"] [class*="border-gray-2"],
[class*="overlay"] [class*="border-gray-2"],
[class*="Overlay"] [class*="border-gray-2"],
[class*="sheet"] [class*="border-gray-2"],
[class*="flyout"] [class*="border-gray-2"],
dialog [class*="border-gray-2"]
  { border-color: var(--hs-line) !important; }

/* The hub is dark throughout and the blanket ink rule above is !important, so
   nothing can put dark text on a light panel any more. That makes a white
   surface unreadable by definition, which is why bg-white is converted
   wherever it appears rather than only inside dialogs. Leaflet keeps its own
   popup styling and is not affected. */
[class~="bg-white"]:where(:not(.leaflet-popup-content-wrapper):not(.leaflet-control))
  { background-color: var(--hs-surface) !important; }
[class~="bg-white"] [class~="bg-white"]
  { background-color: var(--hs-surface-2) !important; }


/* ── Branded date picker (S58n) ─────────────────────────────────────────
   hs_datepicker.js reads these. Every Hub surface is the dark green one,
   so the panel is themed once here rather than nine times. The public
   forms sit on white and use the script's own defaults, which is why
   there is no matching block over there.

   color-scheme is the one that is easy to miss: without it the browser
   draws the nested time field's own segments dark on dark. */
:root {
  --hsdp-scheme: dark;
  --hsdp-bg:     #24461f;
  --hsdp-fg:     #f1f6ec;
  --hsdp-line:   rgba(255, 255, 255, .18);
  --hsdp-hover:  rgba(169, 185, 60, .22);
  --hsdp-accent: #a9b93c;
}