/* Link styles
Default inherits color from its parent so component-specific styling
(e.g. journey CTAs, brand-colored links) is preserved. Only inline links
inside body copy or with `.text-link` opt-in get the primary color and
underline treatment. */
a:not(.btn) {
text-decoration: none;
transition: text-decoration-color 0.15s ease-in-out;
}
p a:not(.btn),
a:not(.btn).text-link {
color: var(--color-primary);
text-decoration: underline;
text-decoration-color: var(--color-primary-disabled);
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
}
p a:not(.btn):hover,
a:not(.btn).text-link:hover {
text-decoration-color: var(--color-primary);
}
html[data-theme="dark"] p a:not(.btn),
html[data-theme="dark"] a:not(.btn).text-link {
color: var(--text-color);
}
html[data-theme="dark"] p a:not(.btn):hover,
html[data-theme="dark"] a:not(.btn).text-link:hover {
color: var(--text-color);
}
/* Auth page navigation links (Sign in / Sign up / Forgot password) */
.sign-in-link {
text-align: center;
}
.sign-in-link a {
font-size: 100%;
margin: 0 2px 0 4px;
}
html[data-theme="dark"] .sign-in-link a {
color: var(--color-primary);
}
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] p a:not(.btn),
html[data-theme="auto"] a:not(.btn).text-link {
color: var(--text-color);
}
html[data-theme="auto"] p a:not(.btn):hover,
html[data-theme="auto"] a:not(.btn).text-link:hover {
color: var(--text-color);
}
}
/* SVG/Icon styles */
html[data-theme="dark"] svg {
stroke: currentColor;
}
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] svg {
stroke: currentColor;
}
}
/* Make black fallback document PNG white */
/* in dark mode. see function getFileTypeName(filename) */
html[data-theme="dark"] img[alt="Document"] {
filter: brightness(0) invert(1);
}
svg {
width: 1.5rem;
height: 1.5rem;
}
/* Leaflet draws vector overlays (polygons, circles) into an SVG it sizes through
that element's own width/height attributes, matched to the map viewport. The
icon default above outranks those attributes and collapses the entire layer to
icon size, leaving shapes present in the DOM but invisible on the map.
leaflet.css only guards max-width/max-height, so undo the sizing here. Scoped
to the overlay pane, not the whole map: marker icons live in their own pane and
should keep the icon sizing. */
.leaflet-container .leaflet-overlay-pane svg {
width: auto;
height: auto;
}
/* LEGACY BLANKET RULE - READ BEFORE REUSING ICONS INSIDE LINKS.
This paints every svg inside an with the body text color, at specificity
(0,1,2). Any link-styled button (a.btn with an icon) therefore loses its own
label color on the icon, while the same CTA built as