/* Checklist Subnav */
.checklist-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 0;
    margin: 0;
}

.checklist-subnav-left {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
}

.checklist-subnav-right {
    display: flex;
    align-items: center;
    padding: 0.4rem 0;
}

.checklist-subnav-group {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0.4rem 0;
}

.checklist-subnav-label {
    font-size: var(--font-xxs);
    font-weight: 700;
    color: var(--fotx-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.4rem 0.8rem 0.4rem 0.2rem;
    white-space: nowrap;
}

.checklist-subnav-links {
    display: flex;
    gap: 2px;
}

.checklist-subnav-link {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    font-size: var(--font-xxs);
    font-weight: 600;
    color: var(--fotx-navy);
    text-decoration: none;
    border-radius: var(--radius-border);
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.checklist-subnav-link:hover {
    background-color: var(--fotx-light-blue);
    border-color: var(--fotx-light-blue);
    text-decoration: none;
    color: var(--fotx-navy);
}

.checklist-subnav-link.active {
    background-color: var(--fotx-navy);
    color: #fff;
    border-color: var(--fotx-navy);
    text-decoration: none;
}

.checklist-subnav-link.active:hover {
    background-color: var(--fotx-blue);
    border-color: var(--fotx-blue);
}

.checklist-subnav-divider {
    width: 1px;
    background-color: var(--fotx-light-blue);
    margin: 0.3rem 1rem;
    align-self: stretch;
}

/* Shared checklist badge base */
.checklist-status-indicator,
.checklist-legend-suspect,
.checklist-species-badge {
    display: inline-block;
    font-size: var(--font-xxs);
    font-weight: 700;
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--fotx-navy);
    border-radius: var(--radius-pill);
}

/* Status indicator (right side of subnav) */
.checklist-status-indicator {
    color: var(--fotx-navy);
    background-color: var(--fotx-light-blue);
    white-space: nowrap;
}

/* Checklist legend: suspect row indicator */
.checklist-legend-suspect {
    color: var(--fotx-red);
    background-color: var(--fotx-light-red);
}

.checklist-legend-hint {
    font-size: var(--font-xxs);
    color: var(--fotx-gray);
    font-style: italic;
}

/* Checklist table data sizing */
table.checklist td {
    font-size: var(--font-sm);
}

/* Sticky table headers — stay visible below the sticky subnav when scrolling.
   overflow-x: visible overrides .table-responsive so sticky works against the viewport.
   border-collapse: separate is required because collapsed borders don't move with
   sticky-positioned cells — they belong to the table, not the cell. */
.table-responsive:has(> table.checklist) {
    overflow-x: visible;
}
/* border-collapse: separate so borders travel with sticky-positioned cells. */
table.checklist {
    border-collapse: separate;
    border-spacing: 0;
}
/* Remove doubled borders: every cell keeps top + left only. */
table.checklist th,
table.checklist td {
    border-right: none;
    border-bottom: none;
}
/* Restore right edge on the last column and bottom edge on the last row. */
table.checklist th:last-child,
table.checklist td:last-child {
    border-right: 1px solid var(--fotx-navy);
}
table.checklist tbody tr:last-child td {
    border-bottom: 1px solid var(--fotx-navy);
}
table.checklist thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    border-color: var(--fotx-light-blue);
}
/* Outer edges stay navy */
table.checklist thead th:first-child {
    border-left-color: var(--fotx-navy);
}
table.checklist thead th:last-child {
    border-right-color: var(--fotx-navy);
}
/* Top edge of header */
table.checklist thead tr:first-child th {
    border-top-color: var(--fotx-navy);
}
/* Bottom edge of header (last row of thead) */
table.checklist thead tr:last-child th {
    border-bottom: 1px solid var(--fotx-navy);
}
/* Rowspan cells span into the last row so they need a bottom border */
table.checklist thead th[rowspan] {
    border-bottom: 1px solid var(--fotx-navy);
}
/* Total (last rowspan) keeps navy right edge, Species gets internal light-blue */
table.checklist thead th[rowspan]:first-child {
    border-right: 1px solid var(--fotx-light-blue);
}
table.checklist thead th[rowspan]:last-child {
    border-right: 1px solid var(--fotx-navy);
}
/* Drop left border on first colspan to avoid doubling against Species rowspan */
table.checklist thead tr:first-child th[colspan]:first-of-type {
    border-left: none;
}
/* Family divider rows */
table.checklist td[colspan] {
    background-color: var(--fotx-light-blue) !important;
    padding: 0.25rem 0.5rem;
}
table.checklist td[colspan] h5 {
    margin: 0;
    font-size: var(--font-sm);
}
/* Fixed layout for consistent column widths */
table.checklist {
    table-layout: fixed;
    width: 100%;
}
table.checklist colgroup .col-species { width: 30%; }
table.checklist colgroup .col-status  { width: 8.75%; }
table.checklist colgroup .col-total   { width: 8.75%; }

table.checklist td:not(:first-child) {
    text-align: center;
}
/* Status count links: no underline */
table.checklist td a {
    text-decoration: none;
}
/* Override generic striping — use class-based striping that skips family rows */
table.checklist tbody tr:nth-child(odd) {
    background: transparent;
}
table.checklist tbody tr.checklist-odd {
    background: var(--fotx-gray-light);
}

/* Toolbar row between subnav and table */
.checklist-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0;
}

.checklist-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.checklist-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Species count badge */
.checklist-species-badge {
    color: var(--fotx-navy);
    background-color: var(--fotx-light-blue);
}


.non-native-species {
    padding: 1px 6px;
    background-color: var(--fotx-red);
    color: #fff;
    float: right;
    border: 1px solid var(--fotx-navy);
    border-radius: var(--radius-pill);
    font-weight: bold;
}

.possibly-native-species {
    padding: 1px 6px;
    background-color: var(--fotx-yellow);
    color: #000;
    float: right;
    border: 1px solid var(--fotx-navy);
    border-radius: var(--radius-pill);
    font-weight: bold;
}

/* Common names group: primary + secondary stacked as one flex item */
.common-names-group {
    line-height: 1.3;
}

/* Alternate common names: indented below primary */
.alt-common-names {
    font-size: var(--font-xxs);
    font-style: italic;
    color: var(--fotx-blue);
    padding-left: 1.5rem;
}

.alt-common-names .alt-lang {
    font-weight: 600;
    font-style: normal;
}

/* Taxon Details */
.taxon-detail-name {
    font-style: italic;
    font-size: var(--font-xl);
    /*line-height: 32px;*/
    color: var(--fotx-navy);
}

.taxon-detail-common {
    font-size: var(--font-xl);
    /*line-height: 32px;*/
    color: var(--fotx-blue);
    padding-left: 1rem;
}

.rank-id:before {
    padding-right: 1rem;
    font-size: var(--font-sm);
    font-weight: 700;
    text-transform: lowercase;
}

.rank-id-1,
.rank-id-2,
.rank-id-3 {
    display: none;
}

.rank-id-1:before {
    content: 'Life ';
}

.rank-id-2:before {
    content: 'Kingdom ';
}

.rank-id-3:before {
    content: 'Phylum ';
}

.rank-id-4:before {
    content: 'Class ';
}

.rank-id-4 {
    padding-left: 0.5rem;
}

.rank-id-5:before {
    content: 'Order ';
}

.rank-id-5 {
    padding-left: 1rem;
}

.rank-id-6:before {
    content: 'Family ';
}

.rank-id-6 {
    padding-left: 1.5rem;
}

.rank-id-7:before {
    content: 'Genus ';
}

.rank-id-7 {
    padding-left: 2rem;
}

.rank-id-8:before {
    content: 'Species ';
}

.rank-id-8 {
    padding-left: 2.5rem;
}

#row-checklist-above {
    background-color: #fff;
    top: 0px;
    position: sticky;
    z-index: 9999;
    border-bottom: 2px solid var(--fotx-navy);
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
}

#map {
    height: 500px;
    margin-bottom: 1.5rem;
}

#year-range {
    padding: 0.5rem 0;
    margin-bottom: 0;
    border: 1px solid var(--fotx-navy);
    border-bottom: none;
    border-radius: var(--radius-border) var(--radius-border) 0 0;
    background: var(--fotx-light-blue);
    display: flex;
    justify-content: center;
    align-items: center;
}
#year-range.js-hidden { display: none; }

#year-range ~ #map {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#slider-wrap {
    padding: 1rem 2.5rem 4.2rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--fotx-navy);
    border-top: none;
    border-radius: 0 0 var(--radius-border) var(--radius-border);
    background: var(--fotx-light-blue);
}

#slider {
    margin: 0;
}

.map-no-bottom-radius {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-bottom: 0 !important;
}

/* Taxon map side panel (floats freely, draggable) */
#map-sidepanel {
    display: none;
    flex-direction: column;
    z-index: 7000;
    position: fixed;
    width: 280px;
    max-height: 420px;
    color: #000;
    background: #fff;
    border: 2px solid var(--fotx-navy);
    border-radius: var(--radius-border);
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
#sidepanel-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: var(--fotx-navy);
    color: #fff;
    font-weight: 700;
    font-size: var(--font-xs);
    cursor: move;
    user-select: none;
}
#close-sidepanel {
    color: #fff;
    cursor: pointer;
    font-size: var(--font-xs);
}
#close-sidepanel:hover {
    color: var(--fotx-blue);
}
#sidepanel-body {
    flex: 1;
    padding: 0.75rem 1rem 1rem;
    overflow-x: hidden;
    overflow-y: auto;
}
#sidepanel-body h2 {
    font-size: var(--font-sm);
    font-weight: bold;
    color: var(--fotx-navy);
    margin: 0 0 0.5rem;
}
#sidepanel-summary {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--fotx-light-blue);
    border: 1px solid var(--fotx-navy);
    border-radius: var(--radius-border);
    font-size: var(--font-xxs);
    line-height: 1.5;
}
.sidepanel-specimen {
    margin: 0 0 0.5rem;
    padding: 0.5rem 1rem;
    font-size: var(--font-xxs);
    border: 1px solid var(--fotx-navy);
    border-right-width: 5px;
    border-radius: 0 var(--radius-border) var(--radius-border) 0;
    outline: 1px solid var(--fotx-navy);
    outline-offset: -1px;
}
.sidepanel-specimen:hover {
    background: var(--fotx-gray-light);
}
.sidepanel-specimen a {
    text-decoration: none;
    color: var(--fotx-navy);
}
.sidepanel-specimen b {
    color: var(--fotx-navy);
}

/* Taxon detail: floated right column, description wraps then expands */
.taxon-detail-flow {
    overflow: hidden; /* contain the float */
}

.taxon-detail-right {
    float: right;
    width: 50%;
    padding-left: 3rem;
    padding-top: 1rem;
    margin-bottom: 3rem;
    box-sizing: border-box;
    position: relative;
}

/* BFC: shrinks to fit beside the float instead of extending behind it */
.taxon-detail-top {
    overflow: hidden;
}

/* Description section */
#taxon_description > :first-child {
    margin-top: 0;
}

#taxon_description h3 {
    margin-bottom: 0.2rem;
}

#taxon_description .desc-provenance {
    margin: 0 0 1rem;
    padding: 10px 14px;
    background: #f0f4f8;
    border-left: 3px solid var(--fotx-blue);
    font-size: var(--font-sm);
    line-height: 1.5;
    color: var(--fotx-gray-dark);
}

#taxon_description .desc-provenance a {
    margin-left: 2px;
}

#taxon_description .desc-text {
    margin: 0.3rem 0;
    font-family: 'EB Garamond', serif;
    font-size: var(--font-base);
    line-height: 1.6;
}

#taxon_description .desc-indented {
    padding-left: 1rem;
}

#taxon_description .field-label {
    margin-top: 0.4rem;
    margin-bottom: 0;
}

#taxon_description .desc-source-tag {
    font-weight: normal;
    font-size: var(--font-xs);
    color: var(--text-muted);
    font-style: italic;
}

#taxon_description .reference {
    padding-left: 2rem;
    text-indent: -2rem;
}

.decade-val {
    font-size: var(--font-lg);
    font-weight: bold;
    color: var(--fotx-navy);
    display: inline;
    margin: 3px;
}

.decade-val-start:after {
    content: ' \2014'
}