/* ============================================================
   TrapperTracker map marks, popups and legend.
   Loaded by index.html and by /advanced so both maps read the
   same. Colours and shapes are defined in assets/js/markers.js;
   this file holds layout, the stack badge, the popup column and
   the paired-match highlight.
   ============================================================ */

.tt-mk {
    background: none;
    border: none;
    line-height: 0;
    position: relative;
}
.tt-mk svg {
    display: block;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

/* several records at one point */
.tt-mk-count {
    position: absolute;
    top: -2px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: 10px;
    background: #14201B;
    color: #fff;
    border: 1.5px solid #fff;
    font: 700 11px/17px 'Archivo', system-ui, sans-serif;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* one end of a pair somebody should check */
.tt-mk--match svg { filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.85)); }
.tt-mk--lit svg { filter: drop-shadow(0 0 7px rgba(139, 92, 246, 1)); }
.tt-mk--lit { z-index: 800 !important; }
.tt-matchline { stroke-linecap: round; }
.tt-matchline--lit { stroke-width: 5px; stroke-opacity: 1; }

/* cluster badges */
.tt-cluster {
    background: none;
    border: none;
    display: grid;
    place-items: center;
}
.tt-cluster span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font: 700 14px/1 'Archivo', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.tt-cluster--traps span { background: rgba(153, 27, 27, 0.92); }
.tt-cluster--pets span { background: rgba(20, 32, 27, 0.92); }

/* ---------------- popups ---------------- */

.leaflet-popup-content .tt-pop,
.leaflet-popup-content .tt-col {
    font-family: 'Archivo', system-ui, -apple-system, sans-serif;
    color: #14201B;
    max-width: 17rem;
}
.tt-pop-title, .tt-col-head {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}
.tt-pop-where {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: #5C665F;
}
.tt-pop-when {
    margin: 6px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #5C665F;
}
.tt-pop-when--fresh { color: #9C4614; }
.tt-pop-when--recent { color: #14201B; }
.tt-pop-img {
    display: block;
    width: 100%;
    max-width: 15rem;
    margin: 8px 0 0;
    border-radius: 3px;
}
.tt-pop-desc {
    margin: 7px 0 0;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 14px;
    line-height: 1.45;
}
.tt-pop-link { margin: 8px 0 0; font-size: 13px; font-weight: 600; }
.tt-pop-match {
    margin: 0 0 7px;
    padding: 6px 8px;
    border-left: 3px solid #8B5CF6;
    background: #F5F1FE;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 13.5px;
    line-height: 1.4;
}

/* a column of the animals sharing one point */
.tt-col-note {
    margin: 4px 0 0;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 13px;
    line-height: 1.4;
    color: #5C665F;
}
.tt-col-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-height: 15rem;
    overflow-y: auto;
}
.tt-col-row {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 0 9px;
    align-items: start;
    padding: 8px 0;
    border-top: 1px solid #E3E6DF;
}
.tt-col-row--found { border-left: 3px solid #16A34A; padding-left: 7px; }
.tt-col-row--lost { border-left: 3px solid #F2B10A; padding-left: 7px; }
.tt-col-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 3px;
    background: #E8EAE2;
    display: block;
}
.tt-col-img--none { border: 1px dashed #CBD0C6; }
.tt-col-text { display: block; font-size: 13px; line-height: 1.35; }
.tt-col-when {
    display: block;
    color: #5C665F;
    font-variant-numeric: tabular-nums;
}
.tt-col-link { display: block; margin-top: 2px; font-weight: 600; }

/* ---------------- legend ---------------- */

.tt-legend {
    position: fixed;
    left: 12px;
    bottom: 44px;
    z-index: 900;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #CBD0C6;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    font-family: 'Archivo', system-ui, sans-serif;
    max-width: 15rem;
}
body:not(.map-mode) .tt-legend { display: none; }
.tt-legend-toggle {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 9px 12px;
    font: 600 13px/1.2 'Archivo', system-ui, sans-serif;
    color: #14201B;
    cursor: pointer;
    min-height: 40px;
}
.tt-legend-items {
    list-style: none;
    margin: 0;
    padding: 0 12px 10px;
    border-top: 1px solid #E3E6DF;
}
.tt-legend[data-open="false"] .tt-legend-items { display: none; }
.tt-legend-items li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 0 9px;
    align-items: center;
    padding: 6px 0;
    font-size: 12.5px;
    line-height: 1.3;
    color: #14201B;
}
.tt-legend-items svg { display: block; margin: 0 auto; }
.tt-legend-note {
    margin: 4px 0 0;
    padding: 0;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 12px;
    line-height: 1.4;
    color: #5C665F;
}

@media (prefers-color-scheme: dark) {
    .tt-legend { background: rgba(26, 35, 31, 0.96); border-color: #38433D; }
    .tt-legend-toggle, .tt-legend-items li { color: #E8EBE4; }
    .tt-legend-items { border-top-color: #38433D; }
    .tt-legend-note { color: #9AA69E; }
}