:root{
            --secondary:#2c3e50;
            --bg-light:#f7f9fb;
            --border:#dcdcdc;
            --text-dark:#2b2b2b;
            --brandGreen: rgb(73,153,0);
            --primary: rgb(73,153,0);
            --mobile-panel-height: 40vh;
            --brandGradient: linear-gradient(90deg, rgb(55,135,0), rgb(73,153,0), rgb(38,184,129));
}
        *{box-sizing:border-box}
        body{margin:0;font-family:'Manrope',"Segoe UI",Roboto,Arial,sans-serif;color:var(--text-dark);background:var(--bg-light)}

        #mobileLandscapeNotice{
            position:fixed;
            inset:0;
            z-index:10000001;
            display:none;
            align-items:center;
            justify-content:center;
            padding:max(20px, env(safe-area-inset-top, 0px)) 20px max(20px, env(safe-area-inset-bottom, 0px));
            background:linear-gradient(180deg, rgba(44,62,80,0.98), rgba(55,135,0,0.98));
            color:#fff;
            text-align:center;
        }
        #mobileLandscapeNoticeCard{
            width:min(100%, 360px);
            padding:22px 20px;
            border-radius:24px;
            background:rgba(255,255,255,0.12);
            border:1px solid rgba(255,255,255,0.2);
            box-shadow:0 20px 40px rgba(0,0,0,0.25);
            backdrop-filter:blur(10px);
        }
        .mobileLandscapeLogo{
            width:56px;
            height:56px;
            object-fit:contain;
            display:block;
            margin:0 auto 12px;
        }
        #mobileLandscapeNoticeCard h2{
            margin:0 0 10px;
            font-size:24px;
            line-height:1.1;
        }
        #mobileLandscapeNoticeCard p{
            margin:0;
            font-size:14px;
            line-height:1.5;
        }

        .thTop{display:flex;align-items:center;justify-content:space-between;gap:10px}

        .sortHandle{
            font-size:12px;
            font-weight:900;
            color:#1f3342;           /* force visible */
            opacity:1;               /* remove fade */
            padding:4px 6px;
            border-radius:8px;
            border:1px solid #e3ece9;
            background:#fff;
            cursor:pointer;
            user-select:none;
        }

        #clearFiltersBtn{
            background:#fff;color:var(--secondary);border:1px solid var(--border);
            padding:7px 12px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap;
        }
        #clearFiltersBtn:hover{ filter:brightness(.95); }
        #metricsBtn{
            background:#fff;color:var(--secondary);border:1px solid var(--border);
            padding:7px 12px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap;
        }
        #metricsBtn.metricsCompact{
            padding-left:8px;
            padding-right:8px;
            min-width:44px;
        }
        #metricsBtn:hover{ filter:brightness(.95); }
        #helpBtn{
            background:#fff;color:var(--secondary);border:1px solid var(--border);
            padding:7px 12px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap;
        }
        #helpBtn:hover{ filter:brightness(.95); }
        #accountBtn{
            background:#fff;color:var(--secondary);border:1px solid var(--border);
            padding:7px 12px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap;
        }
        #accountBtn:hover{ filter:brightness(.95); }
        #logoutBtn{
            background:#fff;color:var(--secondary);border:1px solid var(--border);
            padding:7px 12px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap;
            position:relative; z-index:3; pointer-events:auto;
        }
        #logoutBtn:hover{ filter:brightness(.95); }
        #addWalkBtn{
            background:#fff;color:var(--secondary);border:1px solid var(--border);
            padding:7px 12px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap;
        }
        #addWalkBtn:hover{ filter:brightness(.95); }
        #locationBtn{
            background:#fff;color:var(--secondary);border:1px solid var(--border);
            padding:7px 12px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap;
        }
        #locationBtn:hover{ filter:brightness(.95); }
        #socialBtn{
            background:#fff;color:var(--secondary);border:1px solid var(--border);
            padding:7px 12px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap;
        }
        #socialBtn:hover{ filter:brightness(.95); }
        #topSearch{
            height: 34px;
            width: auto;
            min-width: 120px;
            max-width: 320px;
            flex: 1 1 320px;
            margin-right: auto;
            border:1px solid var(--border);
            border-radius:10px;
            padding:0 12px;
            font-weight:700;
            font-size:13px;
            color:var(--secondary);
            background:#fff;
            }

            /* Find Walk Step 2 boxes */
.fwChoiceBox{
  border:1px solid rgba(0,0,0,0.12);
  border-radius:14px;
  padding:12px;
  background:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,0.08);
  margin:10px 0;
  position:relative;
}

.fwChoiceBox h4{
  margin:0 0 10px;
  font-size:14px;
  font-weight:900;
}

.fwChoiceBox.isDisabled{
  opacity:1;                 /* keep readable */
}

.fwChoiceBox.isDisabled::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(180,180,180,0.35);
  border-radius:14px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);
  pointer-events:none;       /* overlay only */
}
        #topSearch:focus{
            outline:none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(31,122,109,0.15);
            }

        #mobilePanelHandle{
            position:sticky;top:0;z-index:5;display:none;width:100%;
            margin:0 0 10px 0;padding:10px 12px;border-radius:12px;border:1px solid var(--border);
            background:#fff;color:var(--secondary);font-weight:900;cursor:pointer;
            box-shadow:0 2px 10px rgba(0,0,0,0.06);
        }
        @media (min-width: 769px){
            #mobilePanelHandle{ display:none !important; }
        }
        /* === [LOGO-01] === */
        #logoImg{
            height:80px;
            width:auto;
            object-fit:cover;
            object-position:center;
            display:block;
            background:#fff;
            border:1px solid var(--border);
            border-radius:10px;
            box-shadow:0 2px 10px rgba(0,0,0,0.06);
            overflow:hidden;
            transform:scale(1.12);
            transform-origin:center;
        }

        .thSearch{
            display:none;margin-top:6px;width:100%;height:28px;border:1px solid var(--border);
            border-radius:8px;padding:0 8px;font-size:12px;font-weight:600;
        }
        th.search-open .thSearch{ display:block; }
/* === [NO-PAGE-SCROLL-DESKTOP-01] === */
html, body{
  height:100%;
  margin:0;
  overflow:hidden; /* page never scrolls */
}
body.add-walk-active #filters{
  display:flex !important;
}
body.add-walk-active #appWrap{
  height:calc(100vh - 70px) !important;
}
body.add-walk-active #map{
  height:100%;
}

/* ensure flex children can scroll internally */
#panel{ min-height:0; }
#walkTableContainer{ min-height:0; overflow:auto; }
        /* Top filters bar (desktop default) */
        #filters{
            background: var(--brandGradient);
            display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border);
            flex-wrap:nowrap;
        }
        #addWalkTopNotice{
            display:none;
            flex:1;
            min-width:0;
            color:#fff;
            font-size:13px;
            font-weight:800;
            line-height:1.25;
            text-align:left;
        }
        #filters label{ color:#1f3342;letter-spacing:.2px;font-size:13px;font-weight:600;white-space:nowrap; }
        .filterGroup{
            display:flex;flex-direction:column;gap:6px;padding:6px 10px;border:1px solid #eef2f5;
            background:#ffffff;border-radius:12px;box-shadow:0 1px 0 rgba(0,0,0,0.03);
        }
        /* === [SOCIAL-02] === */
        #socialBar{
            flex:0 0 auto;
            display:flex;
            gap:12px;
            justify-content:center;
            align-items:center;
            padding:4px 0 0;
            border-top:1px solid var(--border);
            margin-top:4px;
        }
        #socialBar img{ width:28px; height:28px; object-fit:contain; }

        .rangeRow{display:flex;align-items:center;gap:8px}
        .slider{width:160px}

        .miniInput{
            width:54px;height:28px;border:1px solid var(--border);border-radius:8px;padding:0 8px;
            font-weight:700;font-size:12px;color:var(--secondary);background:#fff;
        }
        .miniInput:focus{
            outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,122,109,0.15);
        }

        /* noUiSlider */
        .noUi-target{border:none;box-shadow:none;background:#e9eef3;border-radius:999px;height: 4px}
        .noUi-connect{background:var(--primary)}
        .noUi-handle{
            border:none;box-shadow:0 6px 14px rgba(0,0,0,.12);border-radius:999px;
            width:18px !important;height:18px !important;right:-9px !important;top:-6px !important;
        }
        .noUi-handle:before,.noUi-handle:after{display:none}

            #walkTable thead{
            position: sticky;
            top: 0;
            z-index: 60;    
             background: var(--brandGradient);                          /* above rows */
        }

        #walkTable thead tr{
            background: var(--brandGradient);         /* ONE continuous strip */
        }
                #walkTable th{
                background: transparent;
                color:#fff;
                border-bottom:none;
                }

        /* Filters toggle button */
        #mobileFiltersToggle{
            display:none;background:#fff;border:1px solid var(--border);border-radius:6px;
            padding:7px 12px;font-weight:600;font-size:13px;color:var(--secondary);cursor:pointer;
            align-items:center;
            justify-content:center;
            text-align:center;
            white-space:nowrap;
        }

        #filtersBackdrop{
            display:none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.35);
            z-index: 3999998;
            pointer-events: none;
        }

        /* Filters inner row (desktop default) */
        #filtersInner{
            -webkit-overflow-scrolling: touch;
            flex:1;display:flex;align-items:center;gap:18px;flex-wrap:nowrap;
            overflow-x:auto;overflow-y:visible;
        }
        .desktopFilterSectionTitle{
            display:none;
        }
        #desktopFiltersHeader,
        #desktopFiltersApplyBtn{
            display:none;
        }
        #mobileSheetClearFiltersBtn{
            display:none;
        }
        #desktopFilterCompactRow{
            display:contents;
        }
        #filters.desktop-filter-sheet #filtersInner{
            display:none !important;
            position: fixed !important;
            left: 0 !important;
            right: 0 !important;
            top: 66px !important;
            transform: none !important;
            margin: 0;
            width: min(860px, calc(100vw - 36px));
            max-height: 72vh;
            overflow: auto;
            background:#fff;
            border: 1px solid #e6ecea;
            border-radius: 16px;
            padding: 14px;
            box-shadow: 0 18px 60px rgba(0,0,0,0.25);
            z-index: 3999999;
            pointer-events: auto !important;
            flex: 0 0 auto !important;
            align-items:stretch;
            align-content:stretch;
            gap:14px;
            flex-wrap:nowrap;
            flex-direction:column;
            margin-inline:auto;
        }
        #filters.desktop-filter-sheet #desktopFiltersHeader{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:12px 14px;
            border-radius:14px;
            background:var(--brandGradient);
        }
        #filters.desktop-filter-sheet #desktopFiltersHeader h3{
            margin:0;
            font-size:18px;
            font-weight:900;
            color:#fff;
        }
        #filters.desktop-filter-sheet #slidersDropdown,
        #filters.desktop-filter-sheet #difficultyDropdown,
        #filters.desktop-filter-sheet #activityDropdown,
        #filters.desktop-filter-sheet #desktopFilterCompactRow{
            width:100% !important;
        }
        #filters.desktop-filter-sheet .desktopFilterSectionTitle{
            display:block;
            font-size:13px;
            font-weight:800;
            color:var(--secondary);
            margin-bottom:8px;
        }
        #filters.desktop-filter-sheet #slidersDropdown,
        #filters.desktop-filter-sheet #difficultyDropdown,
        #filters.desktop-filter-sheet #activityDropdown{
            display:flex;
            flex-direction:column;
        }
        #filters.desktop-filter-sheet #slidersDropdown > button,
        #filters.desktop-filter-sheet #difficultyDropdown > button{
            display:none;
        }
        #filters.desktop-filter-sheet #slidersDropdown .dropdown-content,
        #filters.desktop-filter-sheet #difficultyDropdown .dropdown-content{
            display:block !important;
            position:static;
            inset:auto;
            transform:none;
            min-width:0;
            width:100%;
            max-height:none;
            overflow:visible;
            box-shadow:none;
            border:1px solid #e6ecea;
            border-radius:14px;
            padding:12px;
        }
        #filters.desktop-filter-sheet #slidersDropdown .dropdown-content{
            display:grid !important;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:10px;
        }
        #filters.desktop-filter-sheet #difficultyDropdown .dropdown-content{
            display:flex !important;
            flex-wrap:wrap;
            gap:10px 16px;
            align-items:center;
        }
        #filters.desktop-filter-sheet #activityDropdown{
            order:4;
        }
        #filters.desktop-filter-sheet #activityDropdown > button{
            width:100%;
            text-align:left;
            display:flex;
            align-items:center;
            justify-content:space-between;
        }
        #filters.desktop-filter-sheet #activityDropdown > button::after{
            content:"â–¾";
            font-size:12px;
        }
        #filters.desktop-filter-sheet #activityDropdown > button::after{
            content:"\25BE";
            font-size:12px;
        }
        #filters.desktop-filter-sheet #desktopFiltersApplyBtn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-width:92px;
            margin-left:auto;
            padding:7px 12px;
            border:1px solid rgba(255,255,255,0.85);
            border-radius:8px;
            background:#fff;
            color:var(--secondary);
            font-size:13px;
            font-weight:800;
            cursor:pointer;
        }
        #filters.desktop-filter-sheet #difficultyDropdown .dropdown-content label{
            display:inline-flex;
            align-items:center;
            gap:6px;
            font-weight:700;
            color:var(--secondary);
        }
        #filters.desktop-filter-sheet #desktopFilterCompactRow{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:12px;
            align-items:start;
        }
        #filters.desktop-accountlike-filter-sheet #desktopFilterCompactRow{
            grid-template-columns:repeat(3, minmax(0, 1fr));
        }
        #filters.desktop-filter-sheet #countyDropdown > button,
        #filters.desktop-filter-sheet #poiDropdown > button,
        #filters.desktop-filter-sheet #activityDropdown > button{
            width:100%;
            text-align:left;
            display:flex;
            align-items:center;
            justify-content:space-between;
        }
        #filters.desktop-filter-sheet #countyDropdown > button::after,
        #filters.desktop-filter-sheet #poiDropdown > button::after{
            content:"▾";
            font-size:12px;
        }
        #filters.desktop-filter-sheet #countyDropdown.open,
        #filters.desktop-filter-sheet #poiDropdown.open,
        #filters.desktop-filter-sheet #activityDropdown.open{
            z-index:4000000;
        }
        #filters.desktop-filter-sheet #countyDropdown .dropdown-content,
        #filters.desktop-filter-sheet #poiDropdown .dropdown-content,
        #filters.desktop-filter-sheet #activityDropdown .dropdown-content{
            z-index:4000001 !important;
        }
        #filters.desktop-filter-sheet #countyDropdown.open .dropdown-content,
        #filters.desktop-filter-sheet #poiDropdown.open .dropdown-content{
            display:grid !important;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:0 18px;
            min-width:440px;
        }
        #filters.desktop-filter-sheet #countyDropdown .dd-search-wrap,
        #filters.desktop-filter-sheet #poiDropdown #parkNamesWrap,
        #filters.desktop-filter-sheet #poiDropdown hr{
            grid-column:1 / -1;
        }
        #filters.desktop-filter-sheet #countyDropdown .dropdown-content label,
        #filters.desktop-filter-sheet #poiDropdown .dropdown-content > label{
            break-inside:avoid;
        }
        #filters.desktop-filter-sheet.mobile-open #filtersInner{
            display:flex !important;
        }
        #filters.mobile-open + #filtersBackdrop{
            display:block;
        }
        @media (min-width: 769px){
            #filters{
                padding-right:18px;
            }
            #metricsDropdown{ order:2; }
            #filtersInner{
                order:3;
                flex:0 0 auto !important;
                gap:14px;
                overflow:visible;
            }
            #clearFiltersBtn{ order:6; }
            #socialDropdown{ order:7; }
            #findWalkBtn{ order:8; }
            #accountBtn{ order:9; }
            #logoutBtn{ order:10; }
            #activityDropdown{ order:4; }
            #difficultyDropdown{ order:1; }
            #slidersDropdown{ order:2; }
            #countyDropdown{ order:5; }
            #poiDropdown{ order:6; }
        }


        /* DROPDOWNS */
        .dropdown{ position:relative; z-index:11000; }

        .dropdown-content{
            display:none;position:fixed;background:#fff;border-radius:8px;border:1px solid var(--border);
            padding:10px;max-height:240px;overflow-y:auto;box-shadow:0 10px 25px rgba(0,0,0,0.12);
            z-index:999999;min-width:220px;
        }
        .dropdown.open .dropdown-content{display:block}
        .fwModal .actionBtn.secondary{
            min-width:auto !important;
            padding:5px 8px !important;
            font-size:12px !important;
            line-height:1 !important;
        }

        .dropdown-content label{
            display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px;cursor:pointer;
        }

        .dropdown button{
            background:#fff;color:var(--secondary);border:1px solid var(--border);
            padding:7px 12px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:700;white-space:nowrap;
        }
        .dd-search-wrap{
            position: sticky;
            top: 0;
            background: #fff;
            padding-bottom: 8px;
            margin-bottom: 6px;
            border-bottom: 1px solid #eef2f5;
            z-index: 1;
        }

        .dd-search{
            width:100%;
            height:34px;
            border:1px solid var(--border);
            border-radius:10px;
            padding:0 10px;
            font-weight:700;
            font-size:13px;
        }
        .dd-search:focus{
            outline:none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(31,122,109,0.15);
        }


        /* LAYOUT (desktop) */
        #appWrap{
            position:relative;width:100%;height:calc(100vh - 70px);
            display:flex;z-index:1;
        }
        /* Panel LEFT */
        #panel{
            width:29%;
            height:100%;
            padding:0px;
            background:#fff;
            border-right:1px solid var(--border);  /* ✅ changed */
            overflow:hidden;
            position:relative;
            transition:width .2s ease;
            display:flex;
            flex-direction:column;
        }

        /* Map RIGHT */
        #map{
            width:71%;
            height:100%;
            position:relative;
            z-index:1;
        }
        
        .mapBtn{
            position:absolute;
            z-index:60;
            background: var(--brandGradient);
            color:#fff;
            border:none;
            border-radius:10px;
            padding:10px 12px;
            font-weight:800;
            cursor:pointer;
            box-shadow:0 8px 18px rgba(0,0,0,.18);
        }
        .mapBtn:hover{filter:brightness(.95)}
        #appWrap.panel-collapsed #panelToggleBtn{
            left: 18px;               /* ✅ when full map, tuck to left edge */
        }
        #appWrap.panel-collapsed #panel{display:none}
        #appWrap.panel-collapsed #map{width:100%}
        #zoomOutBtn{
        top:12px;
        left: calc(29% + 10px);
        }
        #appWrap.panel-collapsed #zoomOutBtn{
        left: 10px;
        }
        #panelToggleBtn{
            position:absolute;
            top:58px;
            left: calc(29% + 10px);   /* ✅ sits just inside the map, beside the panel */
            z-index:60;
            background:var(--primary);
            color:#fff;
            border:none;
            border-radius:10px;
            padding:10px 12px;
            font-weight:800;
            cursor:pointer;
            box-shadow:0 8px 18px rgba(0,0,0,.18);
        }

        #panelToggleBtn:hover{filter:brightness(.95)}
        #findWalkBtn{
            background:#fff;
            color:var(--secondary);
            border:1px solid var(--border);
            padding:7px 12px;
            border-radius:6px;
            cursor:pointer;
            font-size:13px;
            font-weight:600;
            white-space:nowrap;
            box-shadow:none;
        }
        .actionRow{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin:12px 0 14px}
        @media (min-width: 769px){
            #selectedWalkActions{
                display:flex;
                flex-wrap:nowrap !important;
                gap:8px;
                align-items:center;
                justify-content:center;
            }
            #selectedWalkActions .actionBtn{
                flex:1 1 0;
                min-width:0;
                padding:9px 8px;
                font-size:12px;
                white-space:nowrap;
            }
        }
        .actionBtn{
            display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:170px;
            padding:12px 14px;border-radius:14px;border:1px solid transparent;font-weight:900;cursor:pointer;
            transition:transform .06s ease, filter .12s ease;
        }
        .actionBtn:active{ transform: translateY(1px); }
        .actionBtn.primary{background:var(--primary);color:#fff;box-shadow:0 10px 18px rgba(31,122,109,0.22)}
        .actionBtn.primary:hover{filter:brightness(.96)}
        .actionBtn.secondary{background:#fff;color:var(--secondary);border-color:#dfe7e5}
        .actionBtn.secondary:hover{filter:brightness(.95); }
        .statusBox{
          height:34px;
          width:240px;
          border:1px solid var(--border);
          border-radius:10px;
          padding:0 10px;
          font-weight:700;
          font-size:12px;
          color:var(--secondary);
          background:#fff;
        }
        #walkDetails{ padding:20px;
            border:2px solid var(--brandGreen);
            border-radius:16px;
            margin:12px;
            background:#fff;
            box-shadow:0 6px 18px rgba(0,0,0,0.08);}
        #walkDetails h2{ margin-top:0; color:var(--primary); padding:0; }
        #selectedWalkTabs{
            display:flex;
            gap:8px;
            flex-wrap:wrap;
            margin:0 0 10px;
        }
        .selectedWalkTabBtn{
            border:1px solid var(--border);
            background:#fff;
            color:var(--secondary);
            border-radius:999px;
            padding:6px 12px;
            font-size:12px;
            font-weight:800;
            cursor:pointer;
        }
        .selectedWalkTabBtn.isActive{
            background:var(--brandGradient);
            color:#fff;
            border-color:transparent;
        }
        #selectedWalkPanelBody{
            background:var(--bg-light);
            padding:10px;
            border-radius:8px;
            font-size:14px;
            border:1px solid rgba(73,153,0,0.25);
            margin-bottom:12px;
        }
        #selectedWalkPanelBody.isScrollable{
            overflow:auto;
            overscroll-behavior:contain;
        }
        @media (min-width: 769px){
            #selectedWalkPanelBody.isScrollable{
                max-height:min(48vh, 420px);
            }
        }
        #selectedWalkActions{
            margin:0 12px 10px;
        }
        #selectedWalkActionMessage{
            margin:0 12px 8px;
        }
        #selectedWalkAdminTools{
            display:none;
            margin:0 12px 10px;
        }
        .selectedWalkReviewSection{
            display:grid;
            gap:10px;
        }
        .selectedWalkReviewSectionTitle{
            font-weight:900;
            color:var(--secondary);
            font-size:14px;
        }
        .selectedWalkReviewCard{
            border:1px solid #e2e8e5;
            border-radius:14px;
            padding:10px;
            background:#fff;
        }
        .selectedWalkReviewCardGrid{
            display:grid;
            grid-template-columns:minmax(0, 1fr) auto;
            gap:12px;
            align-items:start;
        }
        .selectedWalkReviewOwner{
            font-weight:900;
            color:var(--secondary);
            margin-bottom:4px;
        }
        .selectedWalkReviewDate{
            font-size:12px;
            color:#5a6470;
            margin-bottom:6px;
        }
        .selectedWalkReviewRating{
            font-size:13px;
            font-weight:800;
            color:#d68b00;
            margin-bottom:6px;
        }
        .selectedWalkReviewText{
            font-size:12px;
            line-height:1.45;
            color:#334155;
        }
        .selectedWalkReviewMedia{
            display:grid;
            gap:8px;
            justify-items:start;
            align-content:start;
        }
        .selectedWalkReviewPhotoActions{
            display:flex;
            gap:8px;
            flex-wrap:wrap;
            justify-content:flex-start;
        }
        .selectedWalkReviewEditBtn{
            width:30px;
            min-width:30px;
            height:30px;
            padding:0;
            border:1px solid #d3ddd9;
            border-radius:10px;
            background:#fff;
            color:var(--secondary);
            display:inline-flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
        }
        .selectedWalkReviewEditBtn svg{
            width:16px;
            height:16px;
        }
        .selectedWalkTxtBox{
            display:grid;
            gap:10px;
            margin:0;
        }
        .selectedWalkTxtActionRow{
            display:flex;
            gap:8px;
            flex-wrap:wrap;
        }
        .selectedWalkTxtActionRow .actionBtn{
            min-width:148px;
            flex:1 1 0;
        }
        .selectedWalkTxtHint{
            font-size:12px;
            color:#5a6470;
        }
        .completedWalkModalCard{
            position:absolute;
            inset:12vh 8vw auto;
            width:min(540px, calc(100vw - 16vw));
            max-height:84vh;
            background:#fff;
            border-radius:18px;
            overflow:auto;
            padding:16px;
            margin:0 auto;
        }
        .completedWalkLegacyRating{
            display:none !important;
        }
        .ratingStarRow{
            display:flex;
            align-items:center;
            gap:6px;
            flex-wrap:nowrap;
            margin-top:6px;
        }
        .ratingStarBtn{
            width:38px;
            min-width:38px;
            height:38px;
            padding:0;
            border:1px solid #d9e1dd;
            border-radius:12px;
            background:#fff;
            color:#c5ced6;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            transition:background .12s ease, border-color .12s ease, color .12s ease, transform .06s ease;
            touch-action:manipulation;
        }
        .ratingStarBtn:hover{ filter:brightness(.98); }
        .ratingStarBtn:active{ transform:translateY(1px); }
        .ratingStarBtn.isActive{
            color:#d68b00;
            background:#fff6df;
            border-color:#efcf87;
        }
        .ratingStarBtn svg{
            width:20px;
            height:20px;
            fill:currentColor;
            stroke:currentColor;
            stroke-width:1.2;
        }
        .ratingStarRow.isReadOnly{
            opacity:.55;
        }
        .ratingStarRow.isReadOnly .ratingStarBtn{
            cursor:default;
            pointer-events:none;
            box-shadow:none;
        }
        #completedWalkReview.isReadOnly{
            background:#f3f5f4;
            color:#6b7280;
            border-color:#d7dfdb;
        }
        .completedWalkReviewBox{
            border:1px solid #dfe7e5;
            border-radius:14px;
            background:#f8fbfa;
            padding:12px;
            display:grid;
            gap:12px;
        }
        #completedWalkReviewEditWrap{
            display:none;
            margin-top:-4px;
            margin-bottom:4px;
        }
        .helpDialog{
            position:absolute;
            inset:4vh 4vw;
            max-width:980px;
            margin:0 auto;
            background:#fff;
            border-radius:22px;
            overflow:auto;
            padding:16px;
            box-shadow:0 18px 48px rgba(0,0,0,0.24);
        }
        .helpBody{
            margin-top:14px;
            display:grid;
            gap:14px;
        }
        .helpIntroBox{
            border:1px solid rgba(73,153,0,0.18);
            border-radius:18px;
            padding:14px 16px;
            background:linear-gradient(135deg, rgba(248,252,244,0.96), rgba(242,248,254,0.92));
            color:#334155;
            font-size:14px;
            line-height:1.6;
        }
        .helpStateGrid{
            display:grid;
            gap:14px;
        }
        .helpSection{
            border:1px solid #dfe7e5;
            border-radius:18px;
            padding:14px;
            background:#fff;
            display:grid;
            gap:12px;
        }
        .helpSection.isHighlighted{
            border-color:rgba(73,153,0,0.28);
            background:linear-gradient(180deg, rgba(249,252,247,0.96), rgba(255,255,255,1));
        }
        .helpSectionTitle{
            font-size:14px;
            font-weight:900;
            color:var(--secondary);
        }
        .helpEntryList{
            display:grid;
            gap:10px;
        }
        .helpEntry{
            display:grid;
            grid-template-columns:minmax(170px, 210px) minmax(0, 1fr);
            gap:12px;
            align-items:start;
        }
        .helpEntry.isActionable{
            cursor:pointer;
        }
        .helpEntry.isActionable:focus-visible{
            outline:none;
        }
        .helpEntry.isActionable .helpPreview,
        .helpEntry.isActionable .helpDescription{
            transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
        }
        .helpEntry.isActionable:hover .helpPreview,
        .helpEntry.isActionable:focus-visible .helpPreview{
            transform:translateY(-1px);
            border-color:rgba(73,153,0,0.35);
            box-shadow:0 12px 24px rgba(15,23,42,0.1);
        }
        .helpEntry.isActionable:hover .helpDescription,
        .helpEntry.isActionable:focus-visible .helpDescription{
            color:var(--secondary);
        }
        .helpPreview{
            min-height:48px;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            padding:10px 12px;
            border-radius:14px;
            border:1px solid #dfe7e5;
            background:#fff;
            color:var(--secondary);
            font-size:12px;
            font-weight:800;
            text-align:left;
            box-shadow:0 8px 20px rgba(15,23,42,0.06);
        }
        .helpPreview.isEmphasis{
            background:var(--brandGradient);
            border-color:transparent;
            color:#fff;
            box-shadow:0 12px 24px rgba(31,122,109,0.2);
        }
        .helpPreview .mobileBtnIconSvg{
            width:16px;
            height:16px;
            margin:0;
            flex:0 0 auto;
        }
        .helpPreviewSwatch{
            width:12px;
            height:12px;
            border-radius:999px;
            border:1px solid rgba(15,23,42,0.12);
            flex:0 0 auto;
        }
        .helpPreviewMiniText{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-width:42px;
            padding:3px 8px;
            border-radius:999px;
            background:rgba(73,153,0,0.1);
            color:var(--primary);
            font-size:11px;
            font-weight:900;
            line-height:1;
            flex:0 0 auto;
        }
        .helpPreview.isEmphasis .helpPreviewMiniText{
            background:rgba(255,255,255,0.18);
            color:#fff;
        }
        .helpPreviewText{
            min-width:0;
            line-height:1.25;
        }
        .helpDescription{
            min-width:0;
            padding-top:4px;
            color:#415161;
            font-size:13px;
            line-height:1.55;
        }
        .helpSponsorCard{
            display:grid;
            gap:10px;
            padding:14px;
            border:1px solid #dfe7e5;
            border-radius:16px;
            background:linear-gradient(135deg, rgba(73,153,0,0.08), rgba(38,184,129,0.08));
            margin-top:12px;
        }
        .helpSponsorKicker{
            font-size:11px;
            font-weight:900;
            letter-spacing:.08em;
            text-transform:uppercase;
            color:var(--primary);
        }
        .helpSponsorTitle{
            font-size:16px;
            font-weight:900;
            color:var(--secondary);
            line-height:1.3;
        }
        .helpSponsorText{
            font-size:13px;
            line-height:1.6;
            color:#415161;
        }
        .sponsorActionRow{
            display:flex;
            gap:8px;
            flex-wrap:wrap;
        }
        .sponsorActionBtn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:38px;
            padding:9px 12px;
            border-radius:12px;
            border:1px solid transparent;
            font-size:12px;
            font-weight:900;
            text-decoration:none;
            transition:filter .12s ease, transform .06s ease;
        }
        .sponsorActionBtn:active{
            transform:translateY(1px);
        }
        .sponsorActionBtn.primary{
            background:var(--primary);
            color:#fff;
            box-shadow:0 10px 18px rgba(31,122,109,0.18);
        }
        .sponsorActionBtn.secondary{
            background:#fff;
            color:var(--secondary);
            border-color:#dfe7e5;
        }
        .sponsorActionBtn.compact{
            min-height:34px;
            padding:8px 11px;
        }
        #distanceGroup.is-disabled{
            opacity:.48;
            filter:grayscale(.15);
            cursor:pointer;
        }
        #distanceGroup.is-disabled .rangeRow{
            pointer-events:none;
        }
        #distanceGroup.is-disabled label{
            cursor:pointer;
        }
        #distanceGroup.is-disabled::after{
            content:"Set a start point to use distance";
            display:block;
            margin-top:6px;
            font-size:11px;
            font-weight:700;
            color:#6b7280;
        }
        .startPointActionRow{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
        }
        #startPointModal .startPointModalCard{
            width:min(680px, calc(100vw - 32px));
        }
        iframe{width:100%;height:240px;border-radius:10px;margin-bottom:12px;border:0}

        /* TABLE */
        #walkTable{width:100%;border-collapse:collapse;font-size:12px;margin:0; }
        #walkTable th,#walkTable td{padding:6px 4px;border-bottom:1px solid var(--border);vertical-align:middle}
        #walkTable tr{cursor:pointer}
        #walkTable td:nth-child(1){
            max-width: 38vw;
            white-space: normal;
            overflow: visible;
            text-overflow: unset;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.2;
            padding-left:12px !important;
        }
        #walkTable tbody tr.rowHover{
            background: #eaf4f1 !important;
            box-shadow:
                inset 2px 0 0 #1f7a6d,
                inset 6px 0 0 #145c53,
                inset -2px 0 0 #1f7a6d;
        }
        #walkTable tbody tr.rowHover td:first-child{
            padding-left:16px !important;
        }
        #walkTable tbody tr.rowHover.rowHoverGroupStart{
            box-shadow:
                inset 0 2px 0 #1f7a6d,
                inset 2px 0 0 #1f7a6d,
                inset 6px 0 0 #145c53,
                inset -2px 0 0 #1f7a6d;
        }
        #walkTable tbody tr.rowHover.rowHoverGroupEnd{
            box-shadow:
                inset 0 -2px 0 #1f7a6d,
                inset 2px 0 0 #1f7a6d,
                inset 6px 0 0 #145c53,
                inset -2px 0 0 #1f7a6d;
        }
        #walkTable tbody tr.rowHover.rowHoverGroupStart.rowHoverGroupEnd{
            box-shadow:
                inset 0 2px 0 #1f7a6d,
                inset 0 -2px 0 #1f7a6d,
                inset 2px 0 0 #1f7a6d,
                inset 6px 0 0 #145c53,
                inset -2px 0 0 #1f7a6d;
        }
        .walkInfoGrid{
                    display:grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 12px;
                    align-items:start;
                    }

        .walkInfoTableRight{
        position: sticky;
        top: 0;                 /* sticks within the scroll container */
        align-self: start;
        }

        .walkInfoTableFull{
        grid-column: 1 / -1;    /* full width */
        }
        #backToAllWalksBtn{
            position:absolute;
            top:104px;              /* just below Full map */
            left: calc(29% + 10px);
            z-index:60;
            background: var(--brandGradient);
            color:#fff;
            border:none;
            padding:10px 12px;
            font-weight:800;
            cursor:pointer;
            box-shadow:0 8px 18px rgba(0,0,0,.12);
        }
        #appWrap.panel-collapsed #backToAllWalksBtn{ left:10px; }
        #backToAllWalksBtn:hover{ filter:brightness(.95); }

        #backToParkBtn{
            position:absolute;
            top:150px;             /* below Back to all walks */
            left: calc(29% + 10px);
            z-index:60;
            color:#fff;
            border:1px solid var(--border);
            border-radius:10px;
            padding:10px 12px;
            font-weight:800;
            cursor:pointer;
            box-shadow:0 8px 18px rgba(0,0,0,.12);
        }
        #appWrap.panel-collapsed #backToParkBtn{ left:10px; }
        #backToParkBtn:hover{ filter:brightness(.95) }

        @media (max-width: 768px){

            /* WALK DETAILS MOBILE TWEAK */
            #walkDetails{ padding:12px; margin:10px; border-width:1px; border-radius:14px; }
            #walkDetails h2{ font-size:16px; margin:0 0 8px; }
            #selectedWalkTabs{ gap:6px; margin-bottom:8px; }
            .selectedWalkTabBtn{ padding:5px 10px; font-size:11px; }
            #selectedWalkPanelBody{ font-size:12px; padding:10px; }
            .actionRow{ gap:8px; margin:10px 10px 12px; }
            #selectedWalkActions{
                display:grid;
                grid-template-columns:repeat(3, minmax(0, 1fr));
                align-items:stretch;
            }
            #selectedWalkActions .actionBtn{
                min-width:0;
                width:100%;
                padding:8px 6px;
                font-size:10px;
                border-radius:12px;
            }
            #selectedWalkActions .actionBtn.mobileIconBtn{
                padding:7px 4px;
                font-size:0 !important;
                line-height:0 !important;
            }
            #selectedWalkPanelBody.isScrollable{
                max-height:min(34vh, 320px);
                -webkit-overflow-scrolling:touch;
            }
            .selectedWalkReviewCardGrid{
                grid-template-columns:minmax(0, 1fr) 82px;
                gap:10px;
            }
            .selectedWalkReviewPhotoActions{
                gap:6px;
            }
            .selectedWalkReviewPhotoActions .miniActionBtn{
                padding:5px 8px;
                font-size:10px;
            }
            .actionBtn{ min-width:0; width:100%; padding:10px 12px; font-size:12px; border-radius:14px; }
            #accountWalkSections{ display:flex; flex-direction:column; min-height:0; }
            .accountSplitTable{ height:100%; border-bottom:none; }
            .accountSplitHeading{ display:none; }
            .accountSplitScroller{ height:100%; }
            #startPointModal .startPointModalCard{
                inset:8vh 1.5vw auto !important;
                width:97vw;
                max-width:none !important;
                padding:12px;
            }
            #completedWalkModal .completedWalkModalCard{
                inset:4vh 4vw auto !important;
                width:92vw;
                max-width:none !important;
                max-height:90vh;
                padding:12px;
            }
            #completedWalkModal .ratingStarRow{
                gap:4px;
                justify-content:flex-start;
            }
            #completedWalkModal .ratingStarBtn{
                width:32px;
                min-width:32px;
                height:32px;
                border-radius:10px;
            }
            #completedWalkModal .ratingStarBtn svg{
                width:16px;
                height:16px;
            }
            #helpModal .helpDialog{
                inset:4vh 3vw;
                padding:12px;
                max-height:90vh;
            }
            #helpModal .helpEntry{
                grid-template-columns:minmax(122px, 146px) minmax(0, 1fr);
                gap:10px;
            }
            #helpModal .helpPreview{
                min-height:44px;
                justify-content:flex-start;
                padding:8px 10px;
                font-size:11px;
            }
            #helpModal .helpPreview .mobileBtnIconSvg{
                width:15px;
                height:15px;
            }
            #helpModal .helpPreviewMiniText{
                min-width:34px;
                padding:3px 6px;
                font-size:10px;
            }
            #helpModal .helpDescription{
                font-size:12px;
                line-height:1.45;
            }
            #helpModal .helpSection{
                padding:12px;
            }
            #helpModal .helpIntroBox{
                padding:12px 14px;
                font-size:13px;
                line-height:1.5;
            }
            .helpSponsorCard{
                padding:12px;
            }
            #startPointModal .startPointModalCard > div:first-child{
                padding:10px 10px !important;
                gap:8px !important;
            }
            #startPointModal .startPointModalCard > div:first-child .actionBtn{
                min-width:0 !important;
                width:auto !important;
                padding:6px 8px !important;
                font-size:11px !important;
            }
            .startPointActionRow{ gap:5px; flex-wrap:nowrap; }
            .startPointActionRow .actionBtn{
                width:0;
                min-width:0;
                flex:1 1 0;
                max-width:none;
                padding:5px 1px;
                font-size:7px;
                line-height:1;
                border-radius:8px;
                white-space:normal;
            }
            #addWalkMapHint{
                display:none !important;
            }
            #draftControlStack{
                top:10px;
                right:10px;
                gap:6px;
            }
            #draftControlStack .mapBtn{
                min-width:96px;
                text-align:center;
            }
            #globalNotice{
                top:62px;
                width:min(94vw, 520px);
                padding:10px 12px;
                font-size:12px;
            }
            #backToParkBtn{
                left:12px;
                top:104px;
            }
        }

        @media (max-width: 768px){
           #draftToolPickerBackdrop{
    z-index:5000001;
  }
           #draftToolPicker.isMobileModal{
    position:fixed !important;
    top:86px !important;
    left:12px !important;
    right:12px !important;
    z-index:5000002 !important;
    width:auto !important;
    min-width:0 !important;
    max-height:min(62dvh, 480px);
    overflow:auto;
    padding:12px !important;
    border-radius:18px !important;
    box-shadow:0 18px 42px rgba(0,0,0,.22) !important;
  }
           #draftToolPicker.isMobileModal .addWalkToolGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
           #draftToolPicker.isMobileModal .addWalkToolBtn{
    min-height:56px;
    padding:8px 6px;
    font-size:9px;
  }
           #zoomOutBtn.mobileMapIconBtn,
           #backToAllWalksBtn.mobileMapIconBtn,
           #backToParkBtn.mobileMapIconBtn,
           #draftToolBtn.mobileMapIconBtn,
           #draftCancelBtn.mobileMapIconBtn,
           #draftBackBtn.mobileMapIconBtn,
           #draftDoneBtn.mobileMapIconBtn{
    width:34px;
    min-width:34px;
    height:30px;
    padding:3px;
    border-radius:10px;
    box-shadow:0 6px 14px rgba(0,0,0,.16);
  }
           #draftControlStack .mapBtn.mobileMapIconBtn{
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:30px !important;
    padding:3px !important;
    align-self:flex-end;
  }
           #zoomOutBtn{
    top: 15px;
    left: 12px;
  }
 
  #backToAllWalksBtn{
    top: 51px;
    left: 12px;
  }
  #backToParkBtn{
    top: 87px;
    left: 12px;
  }
}

        #walkTable th:hover{filter:brightness(.65);} 
        #walkTable tbody tr:hover{background:var(--bg-light)}
        #walkTable tbody tr.rowHover{
            background: #eaf4f1 !important;
        }
        #walkTable th{user-select:none;cursor:pointer;position:sticky;top:0;font-size:12px;z-index:61;text-align:left}
        #walkTable th .thTop{justify-content:flex-start}
        @media (min-width: 769px){
            #walkTable{
                table-layout:fixed;
            }
            #walkTable .stackUnit{
                display:block;
                font-size:0.9em;
                line-height:1.05;
                margin-top:2px;
            }
            #walkTable th:nth-child(1),
            #walkTable td:nth-child(1){
                width:38%;
                max-width:none;
            }
            #walkTable th:nth-child(2),
            #walkTable td:nth-child(2),
            #walkTable th:nth-child(3),
            #walkTable td:nth-child(3),
            #walkTable th:nth-child(4),
            #walkTable td:nth-child(4),
            #walkTable th:nth-child(5),
            #walkTable td:nth-child(5){
                width:12%;
            }
            #walkTable th:nth-child(6),
            #walkTable td:nth-child(6){
                width:14%;
            }
            #walkTable th:first-child,
            #walkTable td:first-child{
                text-align:left;
            }
            #walkTable th:first-child .thTop{
                justify-content:flex-start;
            }
            #walkTable th:nth-child(2),
            #walkTable th:nth-child(3),
            #walkTable th:nth-child(4),
            #walkTable th:nth-child(5),
            #walkTable td:nth-child(2),
            #walkTable td:nth-child(3),
            #walkTable td:nth-child(4),
            #walkTable td:nth-child(5){
                text-align:center;
            }
            #walkTable th:nth-child(2) .thTop,
            #walkTable th:nth-child(3) .thTop,
            #walkTable th:nth-child(4) .thTop,
            #walkTable th:nth-child(5) .thTop{
                justify-content:center;
            }
            #walkTable th:last-child{
                text-align:left;
                padding-left:12px;
            }
            #walkTable th:last-child .thTop{
                justify-content:flex-start;
            }
        }
        .th-sort-indicator{font-size:11px;opacity:.75;margin-left:6px}
        #walkTableContainer{ flex:1; overflow:auto; }
        .dir-btn{
            background:#fff;border:1px solid var(--border);color:var(--secondary);
            padding:4px 8px;border-radius:8px;font-weight:700;
        }
        .dir-btn:hover{background:var(--bg-light)}
        .row-actions{display:flex;gap:8px;justify-content:flex-end}
        .row-actions button{margin:0}
        .actionBtn.warn{background:#fff7ec;color:#9a5500;border-color:#f4d4a5}
        .actionBtn.warn:hover{filter:brightness(.97)}
        .authModalBox{
            border:1px solid rgba(0,0,0,0.12);
            border-radius:14px;
            padding:14px;
            background:#fff;
            box-shadow:0 8px 18px rgba(0,0,0,0.08);
            margin:12px 0;
        }
        .authField{
            display:flex;
            flex-direction:column;
            gap:6px;
            margin-bottom:12px;
        }
        .authField label{
            font-size:13px;
            font-weight:800;
            color:var(--secondary);
        }
        .authField input,
        .authField select{
            height:38px;
            border:1px solid var(--border);
            border-radius:10px;
            padding:0 12px;
            font-size:13px;
            font-weight:700;
            color:var(--secondary);
            background:#fff;
        }
        .authField input[type="file"]{
            height:auto;
            padding:8px 10px;
        }
        .authField input:focus,
        .authField select:focus{
            outline:none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(31,122,109,0.15);
        }
        .authMessage{
            font-size:12px;
            font-weight:700;
            margin-top:6px;
        }
        .authMessage.error{ color:#c62828; }
        .authMessage.ok{ color:#1b7f44; }
        .authLinkBtn{
            background:none;
            border:none;
            padding:0;
            color:var(--primary);
            font-weight:900;
            cursor:pointer;
            text-decoration:underline;
            font-size:13px;
        }
        .accountStatGrid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
            gap:10px;
            margin-top:12px;
        }
        .accountStatCard{
            border:1px solid #e6ecea;
            border-radius:14px;
            background:#f7f9fb;
            padding:12px;
        }
        .accountStatCard strong{
            display:block;
            font-size:21px;
            color:var(--primary);
            margin-top:4px;
        }
        .setupNote{
            margin-top:10px;
            font-size:12px;
            line-height:1.45;
            color:#5a6470;
            background:#f7f9fb;
            border:1px solid #e6ecea;
            border-radius:12px;
            padding:10px 12px;
        }
        #mapLegend{
            display:none;
            position:absolute;
            left:calc(29% + 10px);
            bottom:14px;
            z-index:85;
            min-width:180px;
            padding:10px 12px;
            border-radius:14px;
            background:rgba(255,255,255,0.96);
            border:1px solid #dfe7e5;
            box-shadow:0 10px 24px rgba(0,0,0,0.14);
            font-size:12px;
            color:var(--secondary);
        }
        #mapLegend.collapsed{
            min-width:0;
            width:auto;
            padding:6px 8px;
        }
        .mapLegendHeader{
            display:flex;
            align-items:center;
            gap:8px;
            margin-bottom:8px;
        }
        .mapLegendTitle{
            font-weight:900;
        }
        .mapLegendToggle{
            border:1px solid var(--border);
            background:#fff;
            color:var(--secondary);
            border-radius:999px;
            width:24px;
            height:24px;
            min-width:24px;
            padding:0;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            font-weight:900;
            cursor:pointer;
        }
        #mapLegend.collapsed .mapLegendHeader{
            margin:0;
            justify-content:center;
        }
        #mapLegend.collapsed .mapLegendTitle,
        #mapLegend.collapsed .legendRows{
            display:none;
        }
        .legendRow{
            display:flex;
            align-items:center;
            gap:8px;
            margin-top:6px;
        }
        .legendSwatch{
            width:12px;
            height:12px;
            border-radius:999px;
            flex:0 0 auto;
            border:1px solid rgba(0,0,0,0.12);
        }
        #accountWalkSections{
            display:none;
            flex:1;
            min-height:0;
            overflow:auto;
            padding:0;
            background:#fff;
        }
        .accountSplitTable{
            flex:1;
            height:100%;
            min-height:0;
            display:flex;
            flex-direction:column;
            background:#fff;
            border-bottom:1px solid var(--border);
        }
        .accountSplitTable:last-child{
            border-bottom:none;
        }
        .accountSplitHeading{
            position:sticky;
            top:0;
            z-index:62;
            background:var(--brandGradient);
            color:#fff;
            font-weight:900;
            padding:10px 12px;
            border-bottom:1px solid rgba(255,255,255,0.18);
        }
        .accountSplitNotice{
            padding:10px 12px;
            border-bottom:1px solid #e8eeeb;
            background:#f7faf8;
        }
        .accountNoticeCard{
            border:1px solid #dfe7e5;
            border-radius:12px;
            background:#fff;
            padding:10px 12px;
            margin-top:8px;
        }
        .accountNoticeCard:first-child{
            margin-top:0;
        }
        .accountMobileTabs{
            display:flex;
            gap:8px;
            padding:10px 12px;
            background:#fff;
            border-bottom:1px solid var(--border);
            flex-wrap:wrap;
        }
        .accountMobileTabBtn{
            flex:1 1 0;
            border:1px solid var(--border);
            background:#fff;
            color:var(--secondary);
            border-radius:12px;
            padding:8px 10px;
            font-size:12px;
            font-weight:800;
            cursor:pointer;
        }
        .accountMobileTabBtn.isActive{
            background:var(--brandGradient);
            color:#fff;
            border-color:transparent;
        }
        #friendTabsBar,
        #friendStatsBar{
            display:none;
        }
        #panel.friend-desktop-layout #friendTabsBar{
            display:block;
            width:100%;
            margin:0;
            padding:8px 12px 0;
            background:var(--brandGradient);
        }
        #panel.friend-desktop-layout #friendTabsBar .accountMobileTabs{
            display:grid !important;
            grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
            gap:4px;
            width:100%;
            margin:0;
            padding:0 !important;
            background:transparent;
            border-bottom:none;
        }
        #panel.friend-desktop-layout #friendTabsBar .accountMobileTabBtn{
            width:100%;
            min-height:28px;
            padding:6px 10px;
            border-radius:10px;
            border:1px solid rgba(255,255,255,0.24);
            background:rgba(255,255,255,0.14);
            color:rgba(255,255,255,0.92);
            font-size:11px;
            font-weight:800;
            line-height:1.1;
        }
        #panel.friend-desktop-layout #friendTabsBar .accountMobileTabBtn.isActive{
            background:#fff;
            color:var(--secondary);
            border-color:transparent;
        }
        #panel.friend-desktop-layout #walkTableContainer{
            margin-top:0;
        }
        #panel.friend-desktop-layout #walkTable thead{
            top:0;
        }
        #panel.account-desktop-layout #accountWalkSections{
            background:#fff;
        }
        #panel.account-desktop-layout #accountWalkSections > .accountMobileTabs{
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
            gap:4px;
            width:100%;
            margin:0;
            padding:8px 12px 0;
            background:var(--brandGradient);
            border-bottom:none;
            box-sizing:border-box;
        }
        #panel.account-desktop-layout #accountWalkSections > .accountMobileTabs .accountMobileTabBtn{
            width:100%;
            min-height:28px;
            padding:6px 10px;
            border-radius:10px;
            border:1px solid rgba(255,255,255,0.24);
            background:rgba(255,255,255,0.14);
            color:rgba(255,255,255,0.92);
            font-size:11px;
            font-weight:800;
            line-height:1.1;
        }
        #panel.account-desktop-layout #accountWalkSections > .accountMobileTabs .accountMobileTabBtn.isActive{
            background:#fff;
            color:var(--secondary);
            border-color:transparent;
        }
        #panel.account-desktop-layout #accountWalkSections .accountSplitHeading{
            display:none;
        }
        #panel.account-desktop-layout #accountWalkSections .accountSplitTable{
            border-bottom:none;
        }
        #panel.account-desktop-layout #accountWalkSections .accountSplitScroller thead{
            top:0;
        }
        .accountSplitScroller{
            flex:1;
            min-height:0;
            overflow:visible;
        }
        #addWalkEditor{
            display:none;
            flex:1;
            min-height:0;
            overflow:auto;
            padding:12px;
            background:#fff;
        }
        .addWalkEditorBox{
            display:grid;
            gap:12px;
            border:1px solid #dfe7e5;
            border-radius:16px;
            padding:14px;
            background:#f9fcfa;
        }
        .addWalkField{
            display:grid;
            gap:6px;
        }
        .addWalkFieldGrid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:8px;
        }
        .addWalkField label{
            font-size:12px;
            font-weight:800;
            color:var(--secondary);
        }
        .addWalkField input,
        .addWalkField select{
            border:1px solid #d3ddd9;
            border-radius:12px;
            padding:2px 4px;
            min-height:34px;
            width:100%;
        }
        .addWalkChecks{
            display:flex;
            align-items:center;
            gap:12px;
            flex-wrap:wrap;
        }
        .addWalkChecks label{
            display:flex;
            align-items:center;
            gap:8px;
            font-size:12px;
            font-weight:700;
            min-width:0;
        }
        .addWalkCountyField{
            min-width:118px;
            flex:0 0 118px;
            gap:4px;
        }
        .addWalkRadioGroup{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:6px;
            align-items:stretch;
        }
        .addWalkRadioOption{
            display:grid;
            grid-template-columns:14px minmax(0, 1fr);
            align-items:start;
            gap:6px;
            padding:7px 8px;
            border:1px solid #d3ddd9;
            border-radius:10px;
            background:#fff;
            font-size:11px;
            font-weight:700;
            color:var(--secondary);
            cursor:pointer;
            line-height:1.2;
        }
        .addWalkRadioOption input{
            margin:0;
            width:14px;
            height:14px;
        }
        .addWalkRadioHint{
            font-size:11px;
            color:#5a6470;
            line-height:1.35;
        }
        .addWalkToolGrid{
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(74px, 1fr));
            gap:8px;
        }
        .addWalkToolBtn{
            display:grid;
            gap:6px;
            justify-items:center;
            align-content:center;
            min-height:72px;
            border:1px solid #d3ddd9;
            border-radius:14px;
            background:#fff;
            color:var(--secondary);
            font-size:11px;
            font-weight:800;
            cursor:pointer;
            padding:8px 6px;
        }
        .addWalkToolBtn.isActive{
            background:var(--brandGradient);
            color:#fff;
            border-color:transparent;
            box-shadow:0 10px 20px rgba(31,122,109,0.18);
        }
        .addWalkToolBtn img{
            width:24px;
            height:24px;
            object-fit:contain;
        }
        #addWalkMapHint{
            position:absolute;
            top:14px;
            left:auto;
            right:126px;
            transform:none;
            z-index:65;
            display:none;
            background:rgba(255,255,255,0.96);
            border:1px solid #dfe7e5;
            border-radius:14px;
            padding:9px 12px;
            font-size:12px;
            font-weight:800;
            color:var(--secondary);
            box-shadow:0 10px 22px rgba(0,0,0,.12);
            max-width:min(360px, calc(100vw - 170px));
        }
        #draftControlStack{
            position:absolute;
            top:14px;
            right:14px;
            z-index:66;
            display:none;
            flex-direction:column;
            gap:8px;
            align-items:stretch;
        }
        #draftControlStack .mapBtn{
            position:static !important;
            display:block;
            min-width:110px;
            justify-content:center;
            text-align:center;
        }
        #draftToolPickerBackdrop{
            position:fixed;
            inset:0;
            z-index:67;
            background:rgba(14, 28, 34, 0.28);
        }
        .accountSplitScroller table{
            width:100%;
            border-collapse:collapse;
            font-size:12px;
            margin:0;
            background:#fff;
        }
        .accountSplitScroller thead{
            position:sticky;
            top:0;
            z-index:61;
            background:var(--brandGradient);
        }
        .accountSplitScroller thead tr{
            background:var(--brandGradient);
        }
        .accountSplitScroller th{
            background:transparent;
            color:#fff;
            border-bottom:none;
            user-select:none;
            cursor:pointer;
            position:sticky;
            top:0;
            text-align:left;
        }
        .accountSplitScroller th,
        .accountSplitScroller td{
            padding:6px 4px;
            border-bottom:1px solid var(--border);
            vertical-align:middle;
        }
        .accountSplitScroller td:first-child{
            padding-left:12px !important;
        }
        .accountSplitScroller tbody tr{
            cursor:pointer;
        }
        .accountSplitScroller tbody tr:hover{
            background:var(--bg-light);
        }
        .accountSplitScroller tbody tr.rowHover{
            background:#eaf4f1 !important;
            box-shadow:
                inset 2px 0 0 #1f7a6d,
                inset 6px 0 0 #145c53,
                inset -2px 0 0 #1f7a6d;
        }
        .accountSplitScroller tbody tr.rowHover td:first-child{
            padding-left:16px !important;
        }
        .accountSplitScroller tbody tr.rowHover.rowHoverGroupStart{
            box-shadow:
                inset 0 2px 0 #1f7a6d,
                inset 2px 0 0 #1f7a6d,
                inset 6px 0 0 #145c53,
                inset -2px 0 0 #1f7a6d;
        }
        .accountSplitScroller tbody tr.rowHover.rowHoverGroupEnd{
            box-shadow:
                inset 0 -2px 0 #1f7a6d,
                inset 2px 0 0 #1f7a6d,
                inset 6px 0 0 #145c53,
                inset -2px 0 0 #1f7a6d;
        }
        .accountSplitScroller tbody tr.accountFriendOverlayRow td{
            border-top:1px solid var(--friend-row-color, #2d7ff9);
            border-bottom:1px solid var(--friend-row-color, #2d7ff9);
            background:rgba(255,255,255,0.98);
        }
        .accountSplitScroller tbody tr.accountFriendOverlayRow td:first-child{
            border-left:2px solid var(--friend-row-color, #2d7ff9);
        }
        .accountSplitScroller tbody tr.accountFriendOverlayRow td:last-child{
            border-right:2px solid var(--friend-row-color, #2d7ff9);
        }
        .accountSplitScroller tbody tr.accountFriendOverlayRow.rowHover td{
            background:#eef6ff !important;
        }
        .accountSplitMeta{
            display:block;
            margin-top:3px;
            font-size:11px;
            color:#5a6470;
            font-weight:600;
        }
        .addedWalkTitleRow{
            display:flex;
            align-items:flex-start;
            gap:6px;
            min-width:0;
        }
        .addedWalkTitleText{
            min-width:0;
            flex:1 1 auto;
            white-space:normal;
            line-height:1.25;
        }
        .addedWalkOwnerActions{
            display:inline-flex;
            align-items:center;
            gap:4px;
            flex:0 0 auto;
            margin-top:0;
        }
        .addedWalkOwnerActions.desktopIconActions{
            margin-top:6px;
        }
        .expandNameCell{
            display:grid;
            width:100%;
            grid-template-columns:30px minmax(0, 1fr);
            align-items:start;
            gap:8px;
        }
        .expandNameCell .miniActionBtn{
            justify-self:start;
        }
        .expandNameText{
            min-width:0;
            white-space:normal;
            line-height:1.25;
        }
        .expandNameText > span{
            display:block;
            overflow-wrap:anywhere;
        }
        .miniActionBtn{
            border:1px solid var(--border);
            background:#fff;
            color:var(--secondary);
            border-radius:10px;
            padding:6px 8px;
            font-size:11px;
            font-weight:800;
            cursor:pointer;
        }
        .stateControl{ display:none; }
        .friendBadge{
            display:none;
            min-width:18px;
            height:18px;
            padding:0 5px;
            border-radius:999px;
            background:#d62828;
            color:#fff;
            font-size:11px;
            font-weight:900;
            align-items:center;
            justify-content:center;
            margin-left:6px;
        }
        .srOnly{
            position:absolute;
            width:1px;
            height:1px;
            padding:0;
            margin:-1px;
            overflow:hidden;
            clip:rect(0,0,0,0);
            white-space:nowrap;
            border:0;
        }
        .mobileBtnIconSvg{
            width:18px;
            height:18px;
            display:block;
            flex:0 0 auto;
            margin:auto;
        }
        .mapBtn.mobileMapIconBtn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            font-size:0 !important;
            line-height:0 !important;
        }
        .mapBtn.mobileMapIconBtn .mobileBtnIconSvg{
            width:16px;
            height:16px;
        }
        .mapBtn.mobileMapIconBtn .draftToolButtonImg{
            width:16px;
            height:16px;
            display:block;
            object-fit:contain;
            margin:auto;
        }
        .mapBtn.mobileMapIconBtn .draftToolPointDot{
            width:16px;
            height:16px;
            display:block;
            margin:auto;
            border-radius:999px;
            border:2px solid rgba(255,255,255,0.96);
            box-shadow:0 2px 6px rgba(0,0,0,.18);
        }
        #socialBtn{
            position:relative;
        }
        .friendRow,
        .requestRow,
        .searchUserRow{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            padding:8px 0;
            border-bottom:1px solid #eef2f5;
        }
        .friendRowActions{
            display:flex;
            align-items:center;
            gap:6px;
            flex:0 0 auto;
        }
        .friendMeta{
            display:flex;
            flex-direction:column;
            gap:2px;
            min-width:0;
        }
        .friendMeta button{
            all:unset;
            cursor:pointer;
            font-weight:800;
            color:var(--secondary);
        }
        .friendMeta small{
            color:#5a6470;
            font-size:11px;
        }
        .iconMiniBtn{
            border:1px solid var(--border);
            background:#fff;
            color:#7a2430;
            border-radius:10px;
            padding:6px 9px;
            font-weight:900;
            cursor:pointer;
        }
        .iconMiniBtn.editActionBtn{
            color:var(--secondary);
        }
        .iconMiniBtn.deleteActionBtn{
            color:#7a2430;
        }
        .iconMiniBtn.friendAddBtn{
            color:var(--secondary);
        }
        .iconMiniBtn.friendAddBtn.isSelected{
            background:#edf7ee;
            border-color:#b6d8bb;
            color:#196a2b;
        }
        .leaderboardGrid{
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
            gap:14px;
            margin-top:14px;
        }
        .leaderboardCard{
            border-radius:18px;
            padding:14px;
            background:linear-gradient(160deg, rgba(55,135,0,0.12), rgba(38,184,129,0.12), rgba(255,255,255,0.95));
            border:1px solid rgba(73,153,0,0.22);
            box-shadow:0 14px 30px rgba(0,0,0,0.08);
        }
        .leaderboardCard h4{
            margin:0 0 10px;
            font-size:15px;
            color:var(--secondary);
        }
        .leaderboardRow{
            display:grid;
            grid-template-columns:32px 1fr auto;
            gap:10px;
            align-items:center;
            padding:8px 0;
            border-top:1px solid rgba(31,122,109,0.12);
        }
        .leaderboardAvatar{
            width:32px;
            height:32px;
            border-radius:999px;
            object-fit:cover;
            border:2px solid #fff;
            box-shadow:0 4px 10px rgba(0,0,0,0.12);
            background:#edf3f1;
        }
        #globalNotice{
            display:none;
            position:fixed;
            top:72px;
            left:50%;
            transform:translateX(-50%);
            z-index:9999998;
            width:min(640px, calc(100vw - 24px));
            padding:12px 16px;
            background:#fff7ec;
            color:#7a4a00;
            border:1px solid #f0d4ab;
            border-radius:14px;
            box-shadow:0 12px 26px rgba(0,0,0,0.16);
            font-size:13px;
            font-weight:800;
            pointer-events:none;
        }
        #accountBtn{
            position:relative;
        }
        #accountBtn .friendBadge{
            position:absolute;
            top:-6px;
            right:-6px;
            margin-left:0;
        }
        #appWrap.has-distance-column #panel{ width:37%; }
        #appWrap.has-distance-column #map{ width:63%; }
        #appWrap.has-distance-column #walkTable{ font-size:11px; }
        #appWrap.has-distance-column #walkTable th,
        #appWrap.has-distance-column #walkTable td{ padding:1px 1px; }
        #appWrap.has-distance-column #walkTable td:nth-child(1){ max-width:18vw; }
        #appWrap.has-distance-column #zoomOutBtn,
        #appWrap.has-distance-column #panelToggleBtn,
        #appWrap.has-distance-column #backToAllWalksBtn,
        #appWrap.has-distance-column #backToParkBtn{
            left: calc(37% + 10px);
        }
        #appWrap.panel-collapsed.has-distance-column #map{
            width:100%;
        }
        #appWrap.panel-collapsed.has-distance-column #zoomOutBtn,
        #appWrap.panel-collapsed.has-distance-column #panelToggleBtn,
        #appWrap.panel-collapsed.has-distance-column #backToAllWalksBtn,
        #appWrap.panel-collapsed.has-distance-column #backToParkBtn{
            left:10px;
        }
        #appWrap.has-distance-column #mapLegend{
            left:calc(37% + 10px);
        }
        #appWrap.panel-collapsed #mapLegend,
        #appWrap.panel-collapsed.has-distance-column #mapLegend{
            left:12px;
        }

        /* Small screens */
        @media (max-width: 520px){
            .filterGroup{ width:100%; }
            .dropdown{ width:100%; }
        }

        @media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 540px){
            #mobileLandscapeNotice{
                display:flex;
            }
        }

        /* =========================
           MOBILE (single source of truth)
           ========================= */
        @media (max-width: 768px){
            :root{
                --mobile-header-logo-size: 40px;
                --mobile-header-button-width: 36px;
                --mobile-header-button-height: 30px;
                --mobile-header-icon-size: 30px;
                --mobile-header-search-width: 78px;
            }
            /* Stack slider rows vertically on mobile */
            .rangeRow{
            flex-direction: column !important;
            align-items: stretch !important;
            }
            .rangeRow .miniInput{
            width: 100%!important;
            }
           .rangeRow .slider{
            width: 100% !important;
            }
            /* Top bar layout */
            #filters{
                display:flex;align-items:center;justify-content:flex-start;gap:4px;
                position: sticky;top: 0;z-index: 4000000;
                padding: 10px 12px;height:auto;background: var(--brandGreen);
            }
            #topSearch{
                flex: 1 1 var(--mobile-header-search-width);
                width: auto;
                margin: 0;
                min-width: 40px;
                max-width: var(--mobile-header-search-width);
                font-size: 10px;
                height: 34px;
                padding: 0 6px;
                margin-right: auto;
            }
            #logoImg{
                width:var(--mobile-header-logo-size);
                height:var(--mobile-header-logo-size);
                max-width:none;
                flex:0 0 var(--mobile-header-logo-size);
                transform:none;
            }

                html, body{
                height:100%;
                overflow:hidden;
                }

                #appWrap{
                height: calc(100vh - 60px); /* top bar approx */
                }

                #map{
                height: calc(100vh - 60px);
                }
            /* Show filters button on mobile */
            #mobileFiltersToggle{
                display:inline-flex !important;
                align-items:center;gap:0;
                margin-left:0;
                pointer-events:auto;
                border-color: rgba(255,255,255,0.35);
            }
            #topSearch{ order: 1; }
            #socialDropdown{ order: 2; width:auto !important; flex:0 0 auto; }
            #activityDropdown{ order: 3; width:auto !important; flex:0 0 auto; }
            #findWalkBtn{ order: 4; margin: 0; }
            #metricsDropdown{ order: 5; width:auto !important; flex:0 0 auto; }
            #accountBtn{ order: 6; }
            #addWalkBtn{ order: 7; }
            #locationBtn{ order: 8; }
            #mobileFiltersToggle{ order: 9; }
            #logoutBtn{ order: 10; }
            #clearFiltersBtn{ display:none !important; }
            #socialBtn,
            #activityBtn,
            #metricsBtn,
            #helpBtn,
            #accountBtn,
            #addWalkBtn,
            #locationBtn,
            #logoutBtn,
            #findWalkBtn,
            #mobileFiltersToggle{
                display:inline-flex;
                align-items:center;
                justify-content:center;
                width:var(--mobile-header-button-width);
                min-width:var(--mobile-header-button-width);
                height:var(--mobile-header-button-height);
                padding:2px 2px;
                font-size:8px;
                font-weight:700;
                line-height:1.05;
                white-space:normal;
                text-align:center;
                justify-content:center;
                border-radius:10px;
            }
            #socialDropdown,
            #activityDropdown,
            #metricsDropdown,
            #findWalkBtn,
            #helpBtn,
            #accountBtn,
            #addWalkBtn,
            #locationBtn,
            #logoutBtn,
            #mobileFiltersToggle{
                flex:0 0 auto;
                flex-shrink:0;
            }
            #socialBtn.mobileIconBtn,
            #accountBtn.mobileIconBtn,
            #addWalkBtn.mobileIconBtn,
            #locationBtn.mobileIconBtn,
            #logoutBtn.mobileIconBtn,
            #findWalkBtn.mobileIconBtn,
            #helpBtn.mobileIconBtn,
            #mobileFiltersToggle.mobileIconBtn{
                width:var(--mobile-header-icon-size);
                min-width:var(--mobile-header-icon-size);
                height:var(--mobile-header-icon-size);
                padding:2px;
                font-size:0 !important;
                line-height:0 !important;
                gap:0 !important;
            }
            #metricsBtn.metricsCompact{
                width:var(--mobile-header-icon-size);
                min-width:var(--mobile-header-icon-size);
                height:var(--mobile-header-icon-size);
                padding:2px;
            }
            #locationBtn.mobileIconBtn{
                background:#fff;
                color:#111;
                border:1px solid transparent;
            }
            #socialBtn.mobileIconBtn .friendBadge,
            #accountBtn.mobileIconBtn .friendBadge{
                position:absolute;
                top:-5px;
                right:-5px;
                margin-left:0;
            }
            #mobileFiltersToggle{
                background:#fff;
                color:var(--secondary);
                border:1px solid var(--border);
            }
            #findWalkBtn{ word-break:break-word; }
            #topSearch{
                min-width: 40px;
                max-width: var(--mobile-header-search-width);
                flex: 1 1 var(--mobile-header-search-width);
                width: auto;
                margin: 0;
                font-size: 10px;
                padding: 0 5px;
                margin-right: auto;
            }
            #distanceColHeader{
                min-width:0;
            }
            #distanceColHeader .thTop{
                gap:4px;
            }
            #tableDistanceHeading{
                display:block;
                white-space:normal;
                line-height:1.1;
                font-size:8px;
                font-weight:400;
            }
            #metricsDropdown{
                margin: 0;
                width: auto !important;
                flex: 0 0 auto;
            }
            #socialDropdown,
            #activityDropdown{
                margin:0;
            }
            #accountBtn{
                margin:0;
                flex:0 0 auto;
                font-size:8px;
                font-weight:700;
                line-height:1.05;
                white-space:normal;
                text-align:center;
                justify-content:center;
            }
            #socialDropdown .dropdown-content,
            #activityDropdown .dropdown-content,
            #metricsDropdown .dropdown-content{
                min-width: 210px !important;
            }
            #mapLegend{
                left:12px !important;
                right:auto;
                bottom:calc(var(--mobile-panel-height, 40vh) + env(safe-area-inset-bottom, 0px) + 4px);
                min-width:112px;
                max-width:46vw;
                max-height:calc(100dvh - var(--mobile-panel-height, 40vh) - env(safe-area-inset-bottom, 0px) - 146px);
                overflow:auto;
                padding:6px 8px;
                font-size:9px;
                line-height:1.2;
                z-index:4000001;
            }
            #mapLegend.collapsed{
                padding:4px 6px;
            }
            .mapLegendHeader{
                gap:6px;
                margin-bottom:5px;
            }
            .mapLegendTitle{
                font-size:10px;
            }
            .mapLegendToggle{
                width:20px;
                height:20px;
                min-width:20px;
                font-size:10px;
            }
            .legendRow{
                gap:5px;
                margin-top:3px;
            }
            .legendSwatch{
                width:8px;
                height:8px;
            }
            .accountMobileTabs{
                display:flex;
                gap:6px;
                padding:8px 10px;
            }
            .friendBadge{
                min-width:16px;
                height:16px;
                font-size:10px;
                margin-left:4px;
            }

            /* Base: hide inner until modal open */
            #filtersInner{
                display:none;
                flex-direction:column;
                align-items:stretch;
                gap:12px;
            }

            /* Modal backdrop */
            #filtersBackdrop{
                display:none;
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,0.35);
                z-index: 3999998;
                pointer-events: auto;
            }

            /* Modal sheet */
            #filtersInner{
                position: fixed;
                left: 4vw;
                right: 4vw;
                top: 60px;
                transform: none !important;
                margin: 0 auto;
                max-width: 520px;
                width: min(92vw, 520px);
                max-height: 70vh;
                overflow: auto;
                background:#fff;
                border: 1px solid #e6ecea;
                border-radius: 16px;
                padding: 14px;
                box-shadow: 0 18px 60px rgba(0,0,0,0.25);
                z-index: 3999999;
                pointer-events: auto;
                touch-action: manipulation;
            }

            #filters.mobile-open #filtersInner{ display:flex; }
            #filters.mobile-open + #filtersBackdrop{ display:block; }

            /* Make each control full width in the sheet */
            .filterGroup{ width:100% !important; }
            .dropdown{ position:relative; width:100% !important; z-index: 1; }
            .dropdown button{ width:100%; padding:8px 10px; font-size:12px; border-radius:12px; }
            #filtersInner .dropdown-content{
                position: static !important;
                left: auto !important;
                top: auto !important;
                width: 100% !important;
                min-width: 0 !important;
                max-height: 42vh;
                margin-top: 10px;
                overflow: auto;
                -webkit-overflow-scrolling: touch;
                box-shadow: 0 10px 24px rgba(0,0,0,0.14);
                border-radius: 18px;
            }
            #filtersInner .dropdown.open{ z-index: 1; }
            #filtersInner .dropdown.open .dropdown-content{
                z-index: auto !important;
            }
            #mobileSheetClearFiltersBtn{
                display:block;
                width:100%;
                margin-top:2px;
                padding:10px 12px;
                border:1px solid var(--border);
                border-radius:12px;
                background:#fff;
                color:var(--secondary);
                font-size:12px;
                font-weight:800;
                cursor:pointer;
            }
            #filtersInner #countyDropdown .dropdown-content{
                padding-top: 0;
            }
            #filtersInner #countyDropdown .dd-search-wrap{
                top: 0;
                z-index: 2;
                margin: 0 0 10px;
                padding: 10px 0 10px;
            }
            #filtersInner #countyDropdown .dropdown-content label{
                margin: 0;
            }
            /* === [PARK-HOVER-CSS-01] === */
            /* Default: popups should not steal map hover/clicks */
            .mapboxgl-popup { pointer-events: none; }

            /* But: the walk hover popup should be clickable */
            .mapboxgl-popup.clickableWalkPopup,
            .mapboxgl-popup.clickableWalkPopup * {
            pointer-events: auto;
            }

            .walkPopupBtn{
            all: unset;
            display:block;
            cursor:pointer;
            font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
            font-size: 12px;
            line-height: 1.2;
            }
            .walkPopupBtn:active{ transform: translateY(1px); }

            .slider{ width:100%; }
            .miniInput{ width:48px; height:26px; font-size:12px; padding:0 6px; }

            /* App layout mobile */
            #appWrap{
                    position: relative;
                    height: calc(100vh - 60px);
                    display:block;
                    }

            #map{
                    width:100%;
                    height: calc(100% - var(--mobile-panel-height, 40vh));
                    }
            .walkInfoTable{
                width:100%;
                border-collapse:collapse;
                font-size:14px;
            }
            .walkInfoTable th{
                text-align:left;
                padding:8px 10px;
                width:40%;
                border-bottom:1px solid rgba(0,0,0,0.08);
                color:var(--secondary);
            }
            .walkInfoTable td{
                padding:8px 10px;
                border-bottom:1px solid rgba(0,0,0,0.08);
            }
            .walkInfoTable tr:last-child th,
            .walkInfoTable tr:last-child td{ border-bottom:none; }
            .walkInfoTable tr.highlightRow th,
            .walkInfoTable tr.highlightRow td{
                background: rgba(73,153,0,0.10);
            }

            /* Bottom sheet / panel */
            #panel{
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 40vh;
                max-height: 92vh;
                min-height: 0vh;
                z-index: 5000000;
                background:#fff;
                border-top:1px solid var(--border);
                border-left:none;
                padding: 4px 14px 14px;
                overflow:hidden;
                touch-action: pan-y;
                }
            #logoImg{
                width:var(--mobile-header-logo-size);
                height:var(--mobile-header-logo-size);
                max-width:none;
                flex:0 0 var(--mobile-header-logo-size);
            }

            #walkTableContainer, #walkDetails{
                height: calc(100% - 52px);
                overflow:auto;
            }
            #panel.walk-selected{
                height:calc(var(--mobile-panel-height, 40vh) + 36px);
            }
            #panel.friend-mobile-layout{
                overflow:auto;
                padding-bottom:14px;
            }
            #panel.friend-mobile-layout #mobilePanelHandle{
                order:0;
            }
            #panel.friend-mobile-layout #friendTabsBar{
                order:1;
                flex:0 0 auto;
                display:block;
                width:calc(100% + 28px);
                margin:0 -14px;
                padding:6px 14px 0;
                background:var(--brandGradient);
            }
            #panel.friend-mobile-layout #walkTableContainer{
                order:2;
                flex:0 0 auto;
                height:auto;
                overflow:visible;
                width:calc(100% + 28px);
                margin:0 -14px;
            }
            #panel.friend-mobile-layout #friendStatsBar{
                order:3;
                flex:0 0 auto;
                display:grid;
                width:calc(100% + 28px);
                margin:10px -14px 0;
                padding:0 14px;
                background:#fff;
            }
            #panel.friend-mobile-layout #socialBar{
                order:4;
                flex:0 0 auto;
                margin-top:10px;
                padding-top:8px;
            }
            #panel.friend-mobile-layout #friendTabsBar .accountMobileTabs{
                display:grid !important;
                grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
                gap:4px;
                width:100%;
                margin:0;
                padding:0 !important;
                background:transparent;
                border-bottom:none;
            }
            #panel.friend-mobile-layout #friendTabsBar .accountMobileTabBtn{
                width:100%;
                border-radius:8px;
                border:1px solid rgba(255,255,255,0.24);
                background:rgba(255,255,255,0.14);
                color:rgba(255,255,255,0.92);
                min-height:18px;
                font-size:7px;
                padding:2px 4px;
                line-height:1.05;
            }
            #panel.friend-mobile-layout #friendTabsBar .accountMobileTabBtn.isActive{
                background:#fff;
                color:var(--secondary);
                border-color:transparent;
            }
            #panel #accountWalkSections > .accountMobileTabs{
                display:grid;
                grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
                gap:4px;
                width:calc(100% + 28px);
                margin:0 -14px;
                padding:6px 14px 0 !important;
                background:var(--brandGradient);
                border-bottom:none;
                box-sizing:border-box;
            }
            #panel #accountWalkSections > .accountMobileTabs .accountMobileTabBtn{
                width:100%;
                min-height:18px;
                padding:2px 4px;
                font-size:7px;
                line-height:1.05;
                border-radius:8px;
                border:1px solid rgba(255,255,255,0.24);
                background:rgba(255,255,255,0.14);
                color:rgba(255,255,255,0.92);
            }
            #panel #accountWalkSections > .accountMobileTabs .accountMobileTabBtn.isActive{
                background:#fff;
                color:var(--secondary);
                border-color:transparent;
            }
            #panel.friend-mobile-layout [data-shared-completed-row].miniActionBtn{
                padding:3px 6px;
                font-size:9px;
                line-height:1.05;
                border-radius:8px;
                min-height:24px;
            }
            #panel.friend-mobile-layout .accountSplitMeta{
                margin-top:1px;
                font-size:7px;
                line-height:1.05;
            }
            #panel.friend-mobile-layout #walkTable{
                height:auto;
                width:100%;
            }
            #panel.friend-mobile-layout #walkTable th:nth-child(1),
            #panel.friend-mobile-layout #walkTable td:nth-child(1){
                width:50%;
                max-width:none;
            }
            #panel.friend-mobile-layout #walkTable th:nth-child(2),
            #panel.friend-mobile-layout #walkTable td:nth-child(2),
            #panel.friend-mobile-layout #walkTable th:nth-child(3),
            #panel.friend-mobile-layout #walkTable td:nth-child(3),
            #panel.friend-mobile-layout #walkTable th:nth-child(4),
            #panel.friend-mobile-layout #walkTable td:nth-child(4){
                width:10%;
            }
            #panel.friend-mobile-layout #walkTable th:nth-child(5),
            #panel.friend-mobile-layout #walkTable td:nth-child(5){
                width:20%;
            }
            #panel.friend-mobile-layout #walkTable .expandNameCell{
                grid-template-columns:20px minmax(0, 1fr);
                gap:4px;
            }
            #panel.friend-mobile-layout #walkTable button[data-expand-dates].miniActionBtn{
                min-width:auto;
                padding:2px 5px;
                font-size:7px;
                line-height:1;
                border-radius:7px;
            }
            #walkTable{ font-size:9px; }
            /* Compact walk details card on mobile */
            #walkDetails{
                padding:10px;
                margin:8px;
                border-width:1px;
            }
            #walkDetails h2{ font-size:16px; margin-bottom:6px; }
            #selectedWalkPanelBody{ font-size:12px; padding:8px; margin-bottom:10px; }
            .actionBtn{
                min-width: 140px;
                padding:10px 12px;
                border-radius:12px;
                font-size:13px;
            }
            #addWalkEditor{
                padding:8px;
            }
            .addWalkEditorBox{
                gap:8px;
                padding:10px;
                border-radius:14px;
            }
            .addWalkFieldGrid{
                gap:6px;
            }
            .addWalkEditorBox > div:first-child{
                font-size:11px !important;
            }
            .addWalkField label,
            .addWalkChecks label,
            #addWalkEditorStatus{
                font-size:9px !important;
            }
            .addWalkRadioGroup{
                gap:4px;
            }
            .addWalkChecks{
                gap:8px;
                flex-wrap:nowrap;
                justify-content:space-between;
            }
            .addWalkRadioOption{
                grid-template-columns:12px minmax(0, 1fr);
                gap:4px;
                padding:5px 6px;
                border-radius:9px;
                font-size:8px;
                line-height:1.1;
            }
            .addWalkRadioOption input{
                width:11px;
                height:11px;
            }
            .addWalkRadioHint{
                font-size:8px;
            }
            .addWalkField input,
            .addWalkField select{
                padding:4px 6px;
                border-radius:10px;
                font-size:10px;
                min-height:28px;
            }
            .addWalkCountyField{
                min-width:84px;
                flex:0 0 84px;
            }

            #walkTable th,
            #walkTable td{
                padding:4px 3px;
                font-size:8px;
                font-weight:400;
                line-height:1.15;
            }
            #walkTable th{
                font-size:8px;
                font-weight:400;
            }
            #walkTable td:nth-child(1){
                max-width: 20vw;
                font-size:8px;
                font-weight:400;
                line-height:1.15;
            }
            .accountSplitScroller th,
            .accountSplitScroller td{
                padding:4px 3px;
                font-size:8px;
                font-weight:400;
                line-height:1.15;
            }
            .accountSplitScroller th{
                font-size:8px;
                font-weight:400;
            }
            .accountSplitScroller td:first-child{
                padding-left:6px !important;
            }
            .accountSplitScroller .expandNameCell{
                grid-template-columns:28px minmax(0, 1fr);
                gap:6px;
            }
            .accountSplitScroller .expandNameText{
                font-size:8px;
                font-weight:400;
                line-height:1.15;
            }
            .addedWalkTitleRow{
                gap:4px;
                align-items:flex-start;
            }
            .addedWalkTitleText{
                font-size:8px;
                font-weight:400;
                line-height:1.15;
            }
            .addedWalkOwnerActions{
                gap:2px;
            }
            .addedWalkOwnerActions .iconMiniBtn{
                padding:0;
                width:10px;
                min-width:10px;
                height:10px;
                border:none;
                border-radius:0;
                background:transparent;
                box-shadow:none;
                font-size:8px;
                line-height:1;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                vertical-align:top;
            }
            .thTop{
                gap:4px;
            }
            .th-sort-indicator,
            .sortHandle{
                font-size:8px;
            }
            .thSearch{
                height:24px;
                padding:0 5px;
                font-size:8px;
                font-weight:400;
            }
            .dir-btn{
                padding:3px 5px;
                font-size:8px;
                font-weight:400;
            }

            #mobilePanelHandle{
                display:block;
                width:100%;
                height:18px;
                background:transparent !important;
                border:none !important;
                box-shadow:none !important;
                padding:0 !important;
                margin:4px 0 2px;
                position:relative;
                z-index:2;
                cursor:ns-resize;
                touch-action: none;
            }

            #mobilePanelHandle::before{
                content:"";
                display:block;
                width:44px;
                height:5px;
                border-radius:999px;
                background:#dfe7e5;
                margin:6px auto 0;
            }
            #panel.is-resizing{
                transition:none !important;
                touch-action:none;
            }
            #panel.is-resizing #walkTableContainer,
            #panel.is-resizing #walkDetails{
                pointer-events:none;
            }
            /* Find Walk modal: smaller type on mobile */
            .fwModal h3{ font-size:14px !important; }
            .fwModal div, .fwModal label, .fwModal input, .fwModal select{
            font-size:12px !important;
            }
            .fwModal .actionBtn{
            font-size:12px !important;
            padding:9px 10px !important;
            min-width:120px;
            }
            #leaderboardRange,
            #leaderboardMobileMetric{
                height:34px;
                font-size:11px !important;
                padding:0 8px;
            }
            .fwModal .fwStepNav{
display:flex !important;
flex-wrap:nowrap !important;
gap:8px !important;
justify-content:space-between !important;
align-items:center !important;
}

.fwModal .fwStepNav .actionBtn{
flex:1 1 0 !important;
width:0 !important;
min-width:0 !important;
padding:8px 6px !important;
font-size:11px !important;
border-radius:10px !important;
white-space:nowrap !important;
}
.fwModal h3{ font-size:13px !important; }
.fwModal .fwSubLabel,
.fwModal .fwChoiceBox,
.fwModal .fwChoiceBox div,
.fwModal .fwChoiceBox label,
.fwModal .fwChoiceBox input,
.fwModal .fwChoiceBox select,
.fwModal #fwReviewBox,
.fwModal #fwNoResultsMsg{
  font-size:11px !important;
}
#fwPoiGrid{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
#fwPoiGrid label{
  display:flex !important;
  align-items:flex-start !important;
  gap:6px !important;
  font-size:10px !important;
  padding:4px 5px !important;
  min-height:0 !important;
}
#fwCountyGrid{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
#fwCountyGrid label{
  display:flex !important;
  align-items:flex-start !important;
  gap:5px !important;
  font-size:10px !important;
  line-height:1.15 !important;
}
            #panelToggleBtn{ display:none; }

            /* Collapsing table gives map more room */
            #appWrap.mobile-panel-collapsed #walkTableContainer{ display:none; }
            #appWrap.mobile-panel-collapsed #panel{ height:auto; padding:10px 14px; }
            #appWrap.mobile-panel-collapsed #map{ height: calc(100vh - 60px - 62px); }
            #walkDetails h2{ font-size:15px; margin:0 0 8px; }
            #selectedWalkPanelBody{ font-size:11px; }
            .walkInfoTable{ font-size:11px; }
            .walkInfoTable th, .walkInfoTable td{ padding:6px 8px; }
        }
        /* === Clickable walk hover popup === */
        .clickableWalkPopup .mapboxgl-popup-content{
        pointer-events: auto;
        cursor: pointer;
        padding: 0;
        border-radius: 12px;
         max-width: 260px;
        overflow-wrap: break-word;
        white-space: normal;
        }
        .clickableWalkPopup .mapboxgl-popup-content{
       
        overflow: hidden;
        }

        .walkPopupBtn div{
        overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
        }
        .walkPopupBtn{
        all: unset;
        display: block;
        width: 100%;
        padding: 10px 12px;
        cursor: pointer;
        }
        .walkPopupBtn:active{ transform: scale(0.99); }
        /*may have to remove for licancing*/
        .mapboxgl-ctrl-logo{ display:none !important; }
        .mapboxgl-ctrl-attrib{ display:none !important; }