/* Explore page (map + filterable timeline) */

/* Break out of the centered .main-section-wrapper max-width on this page. */
.main-section-wrapper:has(> #explore-page) {
    max-width: none;
    padding: 0.5rem 1rem;
}

#explore-page {
    max-width: none;
    margin: 0 auto;
    padding: 0;
}

#explore-page h1 {
    font-size: 1.5rem;
    margin: 0.5rem 0 1rem 0;
}

#explore-filters {
    background: var(--ground-2);
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start; /* left-align contents */
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
}

.filter-label {
    font-weight: 600;
    min-width: 9em;
    flex-shrink: 0;
}

.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-start;
}

/* A button takes the browser's own black text unless told otherwise, which on the
   dark ground below is all but unreadable. Every control on this page names its
   ink for that reason. */
.filter-pill {
    background: var(--ground-3);
    color: var(--ink);
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.filter-pill .pill-flag {
    font-size: 1.05em;
    line-height: 1;
}

.filter-pill .pill-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    /* PhyloPic silhouettes are black on transparent; invert when active. */
    transition: filter 0.15s;
}

.filter-pill.active .pill-icon {
    filter: invert(1);
}

/* Same rule read the other way round: on the dark ground every silhouette needs
   inverting to be seen at all, and the lit accent of an active pill is the one
   place one can stay black. */
:root[data-theme="dark"] .pill-icon,
:root[data-theme="dark"] .search-result-icon,
:root[data-theme="dark"] .chip-icon {
    filter: invert(1);
}

:root[data-theme="dark"] .filter-pill.active .pill-icon {
    filter: none;
}

.filter-pill:hover {
    background: var(--ground-2);
}

.filter-pill.active {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

.search-wrapper {
    position: relative;
    flex-grow: 1;
    max-width: 22em;
    z-index: 10;
}

#taxon-search {
    width: 100%;
    padding: 0.4rem 0.6rem;
    font-size: 0.95rem;
    font-family: var(--body);
    background: var(--ground-3);
    color: var(--ink);
    border: 1px solid var(--rule-2);
    border-radius: 6px;
    box-sizing: border-box;
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ground-3);
    border: 1px solid var(--rule-2);
    border-top: none;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    width: 100%;
    box-sizing: border-box;
}

.search-result-item {
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-result-item.highlighted {
    background: var(--ground-2);
}

.search-result-icon,
.search-result-icon-placeholder {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    object-fit: contain;
}

.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.filter-chip {
    background: var(--ground-2);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.filter-chip .chip-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.chip-remove {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
    padding: 0 0.2rem;
    color: var(--ink);
}

.chip-remove:hover {
    color: var(--danger);
}

.filter-actions {
    justify-content: flex-start;
}

#filter-clear-all {
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--rule-2);
    background: var(--ground-3);
    color: var(--ink);
    font-family: var(--body);
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Bin icon, rendered as a mask so it follows the button's text colour. Lives in
   a pseudo-element so it survives language.js setting the label via textContent. */
#filter-clear-all::before {
    content: "";
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%207h12v13a1%201%200%200%201-1%201H7a1%201%200%200%201-1-1V7zm3%202v9h2V9H9zm4%200v9h2V9h-2zM4%204h5l1-1h4l1%201h5v2H4V4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%207h12v13a1%201%200%200%201-1%201H7a1%201%200%200%201-1-1V7zm3%202v9h2V9H9zm4%200v9h2V9h-2zM4%204h5l1-1h4l1%201h5v2H4V4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#filter-clear-all:hover {
    background: var(--ground-2);
}

#map {
    height: 55vh;
    min-height: 320px;
    margin-bottom: 1rem;
    border-radius: 6px;
    overflow: hidden;
    z-index: 1;
}

.popup-content {
    max-width: 250px;
    color: inherit;
}

.popup-title {
    font-weight: bold;
    margin-bottom: 0.2rem;
}

.popup-meta {
    font-size: 0.85rem;
    color: var(--ink-2);
    margin-bottom: 0.4rem;
}

.popup-img {
    width: 100%;
    border-radius: 4px;
}

/* Timeline */

#timeline-wrapper {
    position: relative;
    width: 100%;
    user-select: none;
    margin-bottom: 1.5rem;
    padding-top: 20px; /* room for handle labels above */
}

#timeline-svg {
    display: block;
    width: 100%;
    background: var(--ground-2);
    border: 1px solid var(--rule);
    border-radius: 4px;
}

#timeline-handles {
    position: absolute;
    top: 20px; /* aligned with svg start (after padding-top) */
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

#timeline-handle-labels {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 18px;
    pointer-events: none;
}

.handle-label {
    position: absolute;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--on-accent);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.timeline-handle {
    position: absolute;
    top: 4px;
    bottom: 32px;
    width: 12px;
    margin-left: -6px;
    background: var(--ink-2);
    border-radius: 3px;
    cursor: ew-resize;
    pointer-events: auto;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

.timeline-handle:hover {
    background: var(--ink);
}

.timeline-handle span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 18px;
    background: var(--ground-3);
    border-radius: 1px;
}

/* The timeline is drawn from script, but its ink is named here so that it turns
   over with the palette. An SVG shape defaults to black fill, which is what left
   the period names and the dates unreadable on the dark ground. */
.period-label {
    pointer-events: none;
    user-select: none;
    fill: var(--ink);
}

text.ma-boundary {
    fill: var(--ink-2);
}

line.ma-boundary {
    stroke: var(--ink-3);
}

.loc-marker rect {
    stroke: var(--ink);
}

/* The basemap arrives in OpenStreetMap's own palette — saturated blue sea, pink
   motorways — which is the loudest thing on a page of parchment. Muted here
   rather than by swapping tile providers, so the map keeps one properly
   attributed source and the amount of colour on the page is a styling decision
   rather than a dependency. */
.leaflet-tile {
    filter: grayscale(0.55) sepia(0.35) saturate(0.85) brightness(1.04) contrast(0.94);
}

:root[data-theme="dark"] .leaflet-tile {
    filter: grayscale(0.7) sepia(0.3) saturate(0.7) brightness(0.62) contrast(1.05);
}

/* Leaflet's own chrome: controls, attribution, popups. */
.leaflet-container {
    background: var(--ground-2);
    font-family: var(--body);
}

.leaflet-bar a,
.leaflet-control-attribution {
    background: var(--ground-3);
    color: var(--ink-2);
    border-color: var(--rule);
}

.leaflet-bar a:hover { background: var(--ground-2); color: var(--ink); }
.leaflet-control-attribution a { color: var(--accent); }

/* Leaflet ships a white popup with grey text of its own, which on the dark map is
   a lit window: the tooltips beside it are already parchment, so the popup follows
   them rather than the library. */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: var(--ground-3);
    color: var(--ink);
    box-shadow: var(--lift);
}

.leaflet-popup-content-wrapper {
    border: 1px solid var(--rule);
    border-radius: 0;
}

/* Matching Leaflet's own selector, which is specific enough to win on its own. */
.leaflet-container a.leaflet-popup-close-button {
    color: var(--ink-2);
}

/* The outline of a locality dot and the line joining a fanned-out dot to its
   group: both are marks on the map, and take the page's ink like the rest. */
.loc-dot {
    stroke: var(--ink);
}

.loc-fan-line {
    stroke: var(--ink);
}

/* Square the pills: rounded chips are the one shape the rest of the site does
   not use. */
.filter-pill,
.filter-chip,
#filter-clear-all,
#clade-search {
    border-radius: 0;
}

/* Overlapping localities: the badge that stands in for a cluster of dots, and
   the labels shown while it is fanned out (see explore.js). Leaflet drives the
   icon element's own `transform` for positioning, so the hover/open scaling
   goes on the inner wrapper instead. */
.loc-group {
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: opacity 120ms ease;
}

.loc-group-inner {
    position: absolute;
    inset: 0;
    transform-origin: 50% 50%;
    transition: transform 120ms ease, opacity 120ms ease;
}

.loc-group:hover .loc-group-inner {
    transform: scale(1.12);
}

/* While the group is open its members carry the information, so the badge
   shrinks back to a hinge for the leader lines. */
.loc-group.is-open .loc-group-inner {
    transform: scale(0.5);
    opacity: 0.7;
}

.loc-group.is-dimmed {
    opacity: 0.25;
}

.loc-group-ring {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
}

.loc-group-count {
    position: absolute;
    inset: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ground-3);
    color: var(--ink);
    font-family: var(--body);
    font-size: 12px;
    font-weight: 700;
}

.loc-fan-label.leaflet-tooltip {
    padding: 2px 6px;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--ground-3);
    color: var(--ink);
    box-shadow: none;
    font-family: var(--body);
    font-size: 0.8rem;
    white-space: nowrap;
}

.loc-fan-label.leaflet-tooltip::before {
    display: none; /* no pointer arrow: the leader line already points */
}