/* ════════════════════════════════════════════
   UK Tick & Adder Activity Map — v1.8.0
   ════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

.uktm-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    color: #1c1c1e;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
    margin: 1rem 0;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

/* ── Toolbar ─────────────────────────────── */
.uktm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    padding: 9px 13px;
    background: #f5f7f5;
    border-bottom: 1px solid #e2e6e2;
}
.uktm-heading {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #1a2e1a;
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}
.uktm-heading svg { color: #2e7d32; }

.uktm-toolbar-right {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.uktm-btn-group {
    display: flex;
    border: 1px solid #b8c0b8;
    border-radius: 7px;
    overflow: hidden;
}
.uktm-btn {
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 500;
    background: #fff;
    border: none;
    border-right: 1px solid #b8c0b8;
    cursor: pointer;
    color: #4a5568;
    transition: background .12s, color .12s;
    line-height: 1.4;
    white-space: nowrap;
    min-height: 32px;
    touch-action: manipulation;
}
.uktm-btn:last-child    { border-right: none; }
.uktm-btn:hover         { background: #edf2ed; color: #1a5c1a; }
.uktm-btn--active,
.uktm-btn--active:hover { background: #2e7d32; color: #fff; }

.uktm-date-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: #fff;
    border: 1.5px solid #2e7d32;
    border-radius: 20px;
    color: #1a5c1a;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s;
    touch-action: manipulation;
    white-space: nowrap;
    min-height: 32px;
}
.uktm-date-pill:hover  { background: #edf7ed; }
.uktm-date-pill:active { background: #d4edda; }

/* ── Species bar ─────────────────────────── */
.uktm-species-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 13px;
    background: #fff;
    border-bottom: 1px solid #e2e6e2;
}
.uktm-species-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    flex: 0 0 auto;
}
.uktm-species-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.uktm-species-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border: 1.5px solid #d1d5db;
    border-radius: 20px;
    background: #fff;
    color: #4b5563;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all .12s;
    touch-action: manipulation;
    min-height: 32px;
}
.uktm-species-btn:hover { border-color: #2e7d32; color: #1a5c1a; background: #f0f7f0; }
.uktm-species-btn--active {
    background: #1a5c1a;
    border-color: #1a5c1a;
    color: #fff;
}
.uktm-species-icon { font-size: 14px; }

/* ── Overlays ────────────────────────────── */
.uktm-overlays {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 12px;
    padding: 6px 13px;
    border-bottom: 1px solid #e2e6e2;
    background: #fafbfa;
}
.uktm-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
    padding: 3px 0;
    touch-action: manipulation;
    min-height: 32px;
}
.uktm-toggle input { position:absolute; opacity:0; width:0; height:0; }
.uktm-toggle-track {
    position: relative;
    width: 28px; height: 16px;
    background: #d1d5db;
    border-radius: 8px;
    flex-shrink: 0;
    transition: background .18s;
}
.uktm-toggle-track::after {
    content:'';
    position:absolute;
    top:2px; left:2px;
    width:12px; height:12px;
    background:#fff;
    border-radius:50%;
    transition:transform .18s;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.uktm-toggle input:checked + .uktm-toggle-track               { background:#2e7d32; }
.uktm-toggle input:checked + .uktm-toggle-track::after         { transform:translateX(12px); }
.uktm-toggle-label { font-size:11.5px; color:#374151; font-weight:500; }

/* ── Search ──────────────────────────────── */
.uktm-search-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-bottom: 1px solid #e2e6e2;
}
.uktm-search-icon { color:#9ca3af; flex-shrink:0; }
.uktm-search-input {
    flex: 1;
    padding: 5px 9px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    color: #1c1c1e;
    background: #fff;
    outline: none;
    /* Prevent iOS zoom — must be ≥16px */
    font-size: 16px;
    line-height: 1.3;
    height: 34px;
}
.uktm-search-input:focus { border-color:#2e7d32; box-shadow:0 0 0 3px rgba(46,125,50,.1); }

/* Current location button */
.uktm-locate-btn {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 0 11px;
    height: 34px;
    background: #2e7d32;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .12s;
    touch-action: manipulation;
}
.uktm-locate-btn:hover   { background: #1a5c1a; }
.uktm-locate-btn:active  { background: #145214; }
.uktm-locate-btn.locating { background: #1a5c1a; animation: uktm-pulse 1s infinite; }
.uktm-locate-btn svg     { flex-shrink: 0; }
@keyframes uktm-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.uktm-search-results {
    position: absolute;
    top: calc(100% - 6px);
    left: 13px; right: 13px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-top: none;
    border-radius: 0 0 8px 8px;
    z-index: 10000;
    max-height: 175px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.1);
}
.uktm-search-results.open { display:block; }
.uktm-search-result-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid #f3f4f6;
    display: flex; align-items: center; gap: 7px;
    color: #374151;
    transition: background .1s;
    touch-action: manipulation;
}
.uktm-search-result-item:hover { background:#f0f7f0; color:#1a5c1a; }
.uktm-search-result-item:last-child { border-bottom:none; }

/* ── Map ─────────────────────────────────── */
.uktm-map { width:100%; background:#e8ede8; display:block; position:relative; }

/* Forecast banner */
.uktm-wrapper.uktm-forecast .uktm-map::before {
    content:'⚠ Forecast — modelled projection';
    position:absolute; z-index:600;
    top:8px; left:50%; transform:translateX(-50%);
    background:rgba(255,248,225,.96);
    border:1px solid #f59e0b; color:#78350f;
    font-size:11px; font-weight:600;
    padding:3px 14px; border-radius:20px;
    pointer-events:none; white-space:nowrap;
}

/* Adder mode tint on wrapper border */
.uktm-wrapper.uktm-species-adder { border-color: #7c3aed; }
.uktm-wrapper.uktm-species-adder .uktm-heading svg { color: #7c3aed; }

/* ── Legend ──────────────────────────────── */
.uktm-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 18px;
    padding: 7px 13px;
    border-top: 1px solid #e2e6e2;
    background: #f5f7f5;
}
.uktm-legend-block { display:flex; flex-direction:column; gap:3px; }
.uktm-legend-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#6b7280; }
.uktm-legend-note  { font-style:italic; font-weight:400; text-transform:none; letter-spacing:0; color:#9ca3af; font-size:9.5px; }

.uktm-dot-scale { display:flex; align-items:center; gap:5px; font-size:11px; color:#4b5563; }
.uktm-dot-ex {
    width:10px; height:10px; border-radius:50%;
    display:inline-block; flex-shrink:0;
}
/* Tick dots: green→amber→red */
.uktm-dot-low   { background:rgba(80,200,80,0.72); }
.uktm-dot-med   { background:rgba(255,165,0,0.72); }
.uktm-dot-high  { background:rgba(255,80,0,0.72); }
.uktm-dot-vhigh { background:rgba(200,30,30,0.72); }
/* Adder mode */
.uktm-species-adder .uktm-dot-low   { background:rgba(196,181,253,0.72); }
.uktm-species-adder .uktm-dot-med   { background:rgba(167,139,250,0.72); }
.uktm-species-adder .uktm-dot-high  { background:rgba(124,58,237,0.72); }
.uktm-species-adder .uktm-dot-vhigh { background:rgba(76,29,149,0.72); }
.uktm-legend-scale { display:flex; align-items:center; gap:4px; font-size:11px; color:#4b5563; flex-wrap:wrap; }
.uktm-lswatch { width:14px; height:10px; border-radius:3px; display:inline-block; flex-shrink:0; }
.lswatch-high { background:rgba(153,27,27,.18); border:2px dashed rgba(153,27,27,.7); }
.lswatch-mod  { background:rgba(194,65,12,.13); border:2px dashed rgba(194,65,12,.6); }
.uktm-ldot { width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; background:#fff; }
.ldot-vhigh { border:2.5px solid #b91c1c; }
.ldot-high  { border:2.5px solid #c2410c; }
.ldot-elev  { border:2.5px solid #ca8a04; }

/* ── Status ──────────────────────────────── */
.uktm-statusbar {
    display:flex; justify-content:space-between; align-items:center;
    padding:4px 13px; background:#fff; border-top:1px solid #e2e6e2;
    font-size:10.5px;
}
#uktm-status  { color:#374151; font-weight:500; }
.uktm-source  { color:#9ca3af; }

.uktm-hidden { display:none !important; }

/* ── Leaflet overrides ───────────────────── */
.uktm-map .leaflet-control-zoom a     { color:#2e7d32; font-weight:700; }
.uktm-map .leaflet-control-zoom a:hover { background:#edf7ed; }
.uktm-map .leaflet-popup-content-wrapper { border-radius:9px; box-shadow:0 4px 18px rgba(0,0,0,.14); }
.uktm-popup h4    { margin:0 0 4px; font-size:13px; font-weight:700; color:#1a2e1a; }
.uktm-popup p     { margin:3px 0 0; font-size:11.5px; color:#6b7280; }
.uktm-risk-badge  { display:inline-block; padding:2px 7px; border-radius:4px; font-size:10.5px; font-weight:700; margin-bottom:3px; }
.uktm-risk-vhigh  { background:#fee2e2; color:#991b1b; }
.uktm-risk-high   { background:#ffedd5; color:#9a3412; }
.uktm-risk-elev   { background:#fef9c3; color:#713f12; }
.uktm-risk-mod    { background:#dcfce7; color:#14532d; }

/* ════════════════════════════════════════════
   Date picker modal
   ════════════════════════════════════════════ */
.uktm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.48);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overscroll-behavior: none;
}
.uktm-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 320px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    overflow: hidden;
    touch-action: none;
}
.uktm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px 9px;
    border-bottom: 1px solid #e5e7eb;
}
.uktm-modal-title  { font-size:14px; font-weight:700; color:#1a2e1a; }
.uktm-modal-close  {
    background:none; border:none; cursor:pointer; font-size:16px;
    color:#9ca3af; padding:3px 6px; border-radius:5px; touch-action:manipulation;
}
.uktm-modal-close:hover { color:#374151; background:#f3f4f6; }

/* ── Drums ───────────────────────────────── */
.uktm-drums-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 6px 16px 0;
}
.uktm-drum-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}
.uktm-drum-arrow {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 10px;
    color: #6b7280;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background .1s, color .1s;
    touch-action: manipulation;
    width: 100%;
    line-height: 1;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.uktm-drum-arrow:hover  { background:#f0f7f0; color:#2e7d32; }
.uktm-drum-arrow:active { background:#d4edda; transform:scale(.95); }

.uktm-drum {
    position: relative;
    width: 100%;
    height: 153px;   /* exactly 3 × ITEM_H (51px) */
    overflow: hidden;
    cursor: grab;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    -webkit-user-select: none;
    user-select: none;
}
.uktm-drum:active { cursor:grabbing; }
.uktm-drum:focus  { outline:2px solid #2e7d32; outline-offset:2px; }

.uktm-drum-list {
    position: absolute;
    top: 0; left: 0; right: 0;
    will-change: transform;
}
.uktm-drum-item {
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 400;
    color: #9ca3af;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}
.uktm-drum-item.is-selected {
    font-size: 19px;
    font-weight: 700;
    color: #1a2e1a;
}

/* Centre band: two hairlines */
.uktm-drum-selection-band {
    position: absolute;
    top: 51px; left: 0; right: 0;
    height: 51px;
    border-top: 1.5px solid #c5cac5;
    border-bottom: 1.5px solid #c5cac5;
    pointer-events: none;
}
.uktm-drum-fade {
    position: absolute;
    left: 0; right: 0;
    height: 51px;
    pointer-events: none;
    z-index: 2;
}
.uktm-drum-fade--top {
    top: 0;
    background: linear-gradient(to bottom, rgba(249,250,251,1) 0%, rgba(249,250,251,0) 100%);
}
.uktm-drum-fade--bot {
    bottom: 0;
    background: linear-gradient(to top, rgba(249,250,251,1) 0%, rgba(249,250,251,0) 100%);
}

.uktm-modal-selected {
    text-align: center;
    padding: 9px 16px 3px;
    font-size: 14px;
    font-weight: 600;
    color: #2e7d32;
}
.uktm-modal-note {
    margin: 2px 16px 3px;
    padding: 5px 10px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    font-size: 11px;
    color: #92400e;
    text-align: center;
}
.uktm-modal-footer {
    padding: 8px 16px 14px;
}
.uktm-modal-btn {
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, transform .08s;
    touch-action: manipulation;
}
.uktm-modal-btn--ok { background:#2e7d32; color:#fff; }
.uktm-modal-btn--ok:hover  { background:#1a5c1a; }
.uktm-modal-btn--ok:active { transform:scale(.98); }

/* ════════════════════════════════════════════
   Responsive — mobile portrait + landscape
   ════════════════════════════════════════════ */
@media (max-width: 480px) {
    .uktm-toolbar   { padding:7px 10px; }
    .uktm-heading   { font-size:12px; }
    .uktm-btn       { padding:4px 8px; font-size:11.5px; }
    .uktm-date-pill { padding:4px 9px; font-size:11.5px; }
    .uktm-species-bar { padding:5px 10px; gap:7px; }
    .uktm-overlays  { padding:5px 10px; gap:2px 8px; }
    .uktm-toggle-label { font-size:11px; }
    .uktm-search-bar { padding:5px 10px; }
    .uktm-legend    { padding:5px 10px; gap:5px 12px; }
    .uktm-gradient-strip, .uktm-gradient-labels { width:130px; }
    .uktm-statusbar { padding:3px 10px; }
    .uktm-source    { display:none; }
}

/* Landscape phone: shrink map so controls stay visible */
@media (max-height: 480px) and (orientation: landscape) {
    .uktm-map { height: 250px !important; }
}

/* Modal on tiny screens */
@media (max-width: 380px) {
    .uktm-drum { height:135px; }
    .uktm-drum-item { height:45px; font-size:14px; }
    .uktm-drum-item.is-selected { font-size:17px; }
    .uktm-drum-selection-band { top:45px; height:45px; }
    .uktm-drum-fade { height:45px; }
    .uktm-modal { border-radius:10px; }
}

/* Landscape modal: compact */
@media (max-height: 520px) and (orientation: landscape) {
    .uktm-modal { max-width:88vw; }
    .uktm-drums-row { gap:8px; }
    .uktm-drum { height:120px; }
    .uktm-drum-item { height:40px; font-size:13px; }
    .uktm-drum-item.is-selected { font-size:16px; }
    .uktm-drum-selection-band { top:40px; height:40px; }
    .uktm-drum-fade { height:40px; }
    .uktm-modal-footer { padding:6px 16px 10px; }
}