/* collection page (collection.html); shared pieces come from refs.css and taxon.css */

.cp-crumbs .btnT { white-space: nowrap; }
.pageHeader .cp-meta { gap: 0.25em 1.1em; font-size: 14px; color: var(--rw-muted); }
.cp-meta b { color: var(--rw-text); font-weight: 600; }
.cp-meta .cp-meta-sep { color: var(--rw-line); }
#TitleText .cp-title-sub { color: var(--rw-muted); font-weight: normal; font-size: 0.6em; margin-left: 0.4em; }

/* search */
.cp-search { grid-column: 1 / -1; margin: 0.1em 0 0.7em; }
.cp-bar { display: flex; gap: 0.5em; align-items: stretch; max-width: 48em; }
.cp-q { flex: 1 1 auto; display: flex; min-width: 0; }
.cp-q input { flex: 1 1 auto; min-width: 0; height: 2.3em; padding: 0 0.7em; font: inherit; font-size: 15px; color: var(--rw-text); background: rgb(30, 32, 35); border: 1px solid var(--rw-line); border-right: 0; border-radius: 3px 0 0 3px; outline: 0; }
.cp-q input::placeholder { color: rgb(140, 140, 140); }
.cp-q input:focus { border-color: var(--rw-accent); }
.cp-q button { flex: 0 0 2.6em; background: var(--rw-accent) url(/img/search.png) center / 1.2em no-repeat; border: 1px solid var(--rw-accent); border-radius: 0 3px 3px 0; cursor: pointer; }
.cp-q button:focus-visible, .cp-ftoggle:focus-visible, .cp-btn:focus-visible, .cp-views button:focus-visible, .cp-pager button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cp-ftoggle { display: inline-flex; align-items: center; gap: 0.45em; padding: 0 0.8em; font: inherit; font-size: 14px; color: var(--rw-text); background: none; border: 1px solid var(--rw-line); border-radius: 3px; cursor: pointer; white-space: nowrap; }
.cp-ftoggle:hover { background: rgb(60, 63, 67); color: #fff; text-decoration: underline; }
.cp-ftoggle[aria-expanded="true"] { border-color: var(--rw-accent); }
.cp-ftoggle svg { flex: 0 0 auto; }
.cp-badge { background: var(--rw-accent); color: #111; border-radius: 8px; font-size: 11px; font-weight: 700; padding: 0 0.45em; line-height: 1.55; }
.cp-badge:empty { display: none; }

.cp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em; margin-top: 0.55em; font-size: 13px; line-height: 1.5; }
.cp-chips:empty { display: none; }
.cp-chip { display: inline-flex; align-items: center; padding: 0 0 0 0.55em; border: 1px solid var(--rw-line); border-radius: 3px; background: rgb(56, 59, 63); color: var(--rw-text); }
.cp-chip .k { color: var(--rw-muted); margin-right: 0.3em; }
.cp-chip a, .cp-chip a:visited { color: var(--rw-muted); padding: 0 0.45em; text-decoration: none; font-size: 15px; }
.cp-chip a:hover { color: #fff; text-decoration: none; }
a.cp-clearall, a.cp-clearall:visited { color: var(--rw-muted); text-decoration: underline; margin-left: 0.3em; }

/* advanced filters: three compact rows */
.cp-filters { margin-top: 0.6em; padding: 0.65em 0.8em 0.75em; background: rgb(52, 55, 58); border: 1px solid var(--rw-line); border-radius: 3px; }
.cp-filters[hidden] { display: none; }
.cp-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.45em 0.6em; }
.cp-f { min-width: 0; }
.cp-f label { display: block; font-size: 11.5px; line-height: 1.3; color: var(--rw-muted); margin: 0 0 0.15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-f input, .cp-f select { display: block; width: 100%; min-width: 0; height: 2em; padding: 0 0.45em; font: inherit; font-size: 13.5px; color: var(--rw-text); background: rgb(30, 32, 35); border: 1px solid var(--rw-line); border-radius: 2px; outline: 0; }
.cp-f input:focus, .cp-f select:focus { border-color: var(--rw-accent); }
.cp-f input[type="date"] { color-scheme: dark; padding-right: 0.2em; }
.cp-f.cp-set input, .cp-f.cp-set select { border-color: rgba(142, 213, 182, 0.65); }
.cp-actions { grid-column: 1 / -1; display: flex; gap: 0.4em; align-items: flex-end; justify-content: flex-end; }
.cp-btn { height: 2em; font: inherit; font-size: 13.5px; color: var(--rw-text); background: none; border: 1px solid rgb(130, 133, 138); border-radius: 2px; padding: 0 0.8em; cursor: pointer; white-space: nowrap; }
.cp-btn:hover { text-decoration: underline; background: rgb(60, 63, 67); color: #fff; }
.cp-btn-primary:hover { background: rgb(176, 232, 207); color: #111; }
.cp-btn-primary { color: #111; background: var(--rw-accent); border-color: var(--rw-accent); font-weight: 600; }

/* grid / table switch, top right like the Key button */
.cp-views { display: flex; gap: 0.25em; }
.cp-views button { display: inline-flex; align-items: center; justify-content: center; width: 2.2em; height: calc(1.4em + 0.4em + 2px); padding: 0; color: #222; background: rgb(241, 241, 241); border: 1px solid rgb(156, 155, 155); border-radius: 0.1em; cursor: pointer; }
.cp-views button[aria-pressed="true"] { background: var(--rw-accent); }

/* panels */
.cp-panel { padding-right: 1em; }
.cp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 1em; margin: 0.9em 0 0.8em; font-size: 14px; color: var(--rw-muted); }
.cp-toolbar label { display: inline-flex; align-items: center; gap: 0.4em; }
.cp-toolbar select { height: 1.9em; font: inherit; font-size: 13.5px; color: var(--rw-text); background: rgb(30, 32, 35); border: 1px solid var(--rw-line); border-radius: 2px; padding: 0 0.3em; }
.cp-pager { margin-left: auto; display: flex; gap: 2px; }
.cp-pager button { min-width: 1.9em; height: 1.9em; padding: 0 0.35em; font: inherit; font-size: 13px; color: var(--rw-text); background: rgb(30, 32, 35); border: 1px solid var(--rw-line); border-radius: 2px; cursor: pointer; }
.cp-pager button:hover:not(:disabled):not([aria-current]) { background: rgb(60, 63, 67); color: #fff; text-decoration: underline; }
.cp-pager button[aria-current="page"] { color: #111; background: var(--rw-accent); border-color: var(--rw-accent); font-weight: 600; }
.cp-pager button:disabled { opacity: 0.35; cursor: default; }
.cp-pager-bottom { display: flex; justify-content: flex-end; margin: 0.4em 0 0; }
.cp-message { color: var(--rw-muted); margin: 1.2em 0; }

#cp-results.Gal { padding-bottom: 0.4em; }
#cp-results .specimenHolder { color: #fff; }

/* table view */
.cp-tablewrap { overflow-x: auto; }
.cp-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.35; }
.cp-table th { text-align: left; font-weight: 500; color: var(--rw-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.35em 0.5em; border-bottom: 1px solid var(--rw-line); white-space: nowrap; }
.cp-table td { padding: 0.25em 0.5em; border-bottom: 1px solid rgba(255, 255, 255, 0.07); vertical-align: middle; color: var(--rw-text); }
.cp-table tbody tr { cursor: pointer; }
.cp-table tbody tr:hover td { background: rgba(255, 255, 255, 0.05); }
.cp-table td.cp-c-img { width: 4.6em; padding-left: 0; }
.cp-thumb { display: block; width: 4.2em; height: 3.2em; object-fit: contain; background: rgb(61, 64, 68); border-radius: 2px; }
.cp-table .cp-c-id a { white-space: nowrap; }
.cp-table .cp-c-date, .cp-table .cp-c-sex { white-space: nowrap; color: var(--rw-muted); }
.cp-table .cp-loc-sub { color: var(--rw-muted); }
.cp-tag { display: inline-block; font-size: 11px; font-weight: 650; letter-spacing: 0.02em; padding: 0.05em 0.5em; border-radius: 0.6em; color: #fff; margin: 0.1em 0.25em 0.1em 0; white-space: nowrap; }
.cp-tag.project { background: rgb(2, 165, 93); }
.cp-tag.barcode { background: rgb(0, 112, 153); }

/* summary tab */
.cp-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4em 2.4em; padding-bottom: 0.4em; }
.cp-sum section { min-width: 0; }
.cp-sum h3 { font-size: 1.05em; color: #fff; margin: 1em 0 0.4em; font-weight: 600; }
.cp-sum h3 .rw-count { margin-left: 0.3em; }
.cp-bars { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.cp-bars li { display: grid; grid-template-columns: minmax(0, 1fr) 3.2em; gap: 0.6em; align-items: center; }
.cp-bars .lbl { position: relative; display: block; min-width: 0; padding: 0.12em 0.45em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-bars .bar { position: absolute; left: 0; top: 2px; bottom: 2px; background: rgba(142, 213, 182, 0.2); border-radius: 0 4px 4px 0; z-index: 0; }
.cp-bars .txt { position: relative; z-index: 1; }
.cp-bars .n { text-align: right; color: var(--rw-muted); font-variant-numeric: tabular-nums; }
.cp-more { font: inherit; font-size: 13px; color: var(--rw-link); background: none; border: 0; padding: 0.3em 0.45em; cursor: pointer; }
.cp-more:hover { text-decoration: underline; }

.cp-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; align-items: end; height: 8em; border-bottom: 1px solid var(--rw-line); }
.cp-months .m { position: relative; height: 100%; display: flex; align-items: flex-end; }
.cp-months .m span { display: block; width: 100%; background: var(--rw-accent); border-radius: 4px 4px 0 0; min-height: 0; }
.cp-months .m:hover span { background: rgb(176, 232, 207); }
.cp-months-lbl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; font-size: 11px; color: var(--rw-muted); text-align: center; margin-top: 0.25em; }
.cp-note { font-size: 13px; color: var(--rw-muted); margin: 0.5em 0 0; }

/* overview when nothing is searched */
.cp-intro { margin: 0.9em 0 0.4em; max-width: 52em; line-height: 1.55; }
.cp-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(17em, 1fr)); gap: 0.6em; margin: 0.4em 0 0.6em; }
.cp-group { padding: 0.55em 0.75em 0.65em; background: rgb(65, 69, 72); border: 1px solid var(--rw-line); border-radius: 3px; }
.cp-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5em; font-weight: 600; margin-bottom: 0.3em; }
.cp-group-head .n { color: var(--rw-muted); font-weight: normal; font-size: 13px; }
.cp-links { display: flex; flex-wrap: wrap; gap: 0.15em 0.75em; font-size: 13.5px; line-height: 1.6; }
.cp-links .n { color: var(--rw-muted); font-size: 12px; margin-left: 0.2em; }
.cp-events { list-style: none; padding: 0; margin: 0.3em 0 0; font-size: 14px; }
.cp-events li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; gap: 0.8em; padding: 0.3em 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.cp-events li:first-child { border-top: 0; }
.cp-events .d, .cp-events .n { color: var(--rw-muted); white-space: nowrap; }

/* map */
#cp-map { position: relative; z-index: 0; isolation: isolate; aspect-ratio: 3 / 2; min-height: 360px; max-height: 80vh; width: 100%; background: rgb(30, 32, 35); border: 1px solid var(--rw-line); border-radius: 3px; }
#cp-map .rw-map-placeholder { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--rw-muted); font-size: 14px; }
#cp-map .leaflet-popup-content-wrapper, #cp-map .leaflet-popup-tip { background: rgb(44, 46, 49); color: var(--rw-text); }
#cp-map .leaflet-popup-content { margin: 0.6em 0.8em; font-size: 13px; max-height: 14em; overflow-y: auto; }
#cp-map .leaflet-popup-content ul { margin: 0.3em 0 0; padding-left: 1.1em; }
#cp-map .leaflet-control-attribution { background: rgba(30, 32, 35, 0.8); color: var(--rw-muted); }
#cp-map .leaflet-control-attribution a { color: var(--rw-muted); }
#cp-map .leaflet-bar a { background: rgb(44, 46, 49); color: var(--rw-text); border-color: var(--rw-line); }

@media (max-width: 1100px) {
    .cp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cp-actions { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .cp-sum { grid-template-columns: 1fr; }
    .cp-table .cp-c-sex { display: none; }
}
@media (max-width: 600px) {
    .cp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp-bar { flex-wrap: wrap; }
    .cp-q { flex-basis: 100%; }
    .cp-ftoggle { height: 2.1em; }
    .cp-toolbar .cp-range { flex-basis: 100%; }
    .cp-pager { margin-left: 0; }
    .cp-table .cp-c-loc { display: none; }
    .cp-events li { grid-template-columns: 6.5em minmax(0, 1fr); }
    .cp-events .n { display: none; }
    #cp-map { aspect-ratio: auto; height: 440px; }
}
.cp-bars li[hidden] { display: none; }
#cp-tabs[hidden], #cp-views[hidden], #cp-links[hidden] { display: none; }
.cp-events li { grid-template-columns: 12.5em minmax(0, 1fr) auto; }
@media (max-width: 600px) { .cp-events li { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* "Show all" in the summary: the list scrolls inside its box instead of growing the page */
.cp-bars.cp-scroll { max-height: 19em; overflow-y: auto; overscroll-behavior: contain; padding-right: 0.4em; border-bottom: 1px solid var(--rw-line); scrollbar-width: thin; scrollbar-color: rgb(120, 124, 128) transparent; }
.cp-q button:hover { background-color: rgb(176, 232, 207); }
.cp-csv[hidden] { display: none; }
.cp-toolbar .cp-csv { font-size: 13.5px; padding: 0.25em 0.6em; }
.cp-toolbar .cp-csv:hover { background: rgb(60, 63, 67); color: #fff; }