@font-face {
    font-family: "Parkly Condensed Soft";
    font-style: normal;
    font-weight: 400;
    src: url("/static/assets/fonts/Parkly-CondensedSoft.woff2") format("woff2");
}

@font-face {
    font-family: "Optima";
    font-style: normal;
    font-weight: 400;
    src: url("/static/assets/fonts/OPTIMA.TTF") format("ttf");
}

:root {
    --lens-font: Futura, "Avenir Next", "Trebuchet MS", Arial, sans-serif;
    --lens-accent: #00d3b7;
    --lens-accent-soft: rgba(0, 211, 183, 0.16);
    --lens-surface: rgba(44, 102, 143, 0.92);
    --lens-border: rgba(255, 255, 255, 0.1);
    --lens-text-strong: rgba(255, 255, 255, 0.95);
    --lens-text-soft: rgba(255, 255, 255, 0.62);
    --lens-line: #2c668f;
    --lens-panel: #2c668f;
    --lens-panel-dark: #224e6e;
    --alt-font:
        "Optima", "Helvetica Neue", "Avenir Next", "Trebuchet MS", Arial,
        sans-serif;
}

body.trails-lens-page,
body.trails-lens-page input,
body.trails-lens-page button,
body.trails-lens-page select,
body.trails-lens-page textarea {
    font-family: var(--lens-font);
}

body.trails-lens-page {
    background: var(--lens-panel);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#header.lens-rail-header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(44, 102, 143, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 1.05rem 0.95rem 0.8rem 0.8rem;
    position: sticky;
    top: 0;
    z-index: 80;
}

.lens-rail-header__row {
    align-items: center;
    box-sizing: border-box;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.lens-search {
    margin: 0.5rem 0 0.5rem;
}

.lens-search--rail {
    margin: 0;
}

.lens-search__row {
    align-items: stretch;
    box-sizing: border-box;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.lens-search__row--rail {
    grid-template-columns: minmax(0, 1fr);
}

.lens-search input,
.lens-control select,
.lens-empty__global input {
    appearance: none;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.85rem;
    background: rgba(34, 78, 110, 0.88);
    color: #ffffff;
    /* iOS Safari auto-zooms when a focused input has font-size < 16px.
       Pinning all lens inputs to 1rem (16px) prevents that focus zoom. */
    font-size: 1rem;
    min-height: 3.15rem;
    padding: 0 0.95rem;
}

.lens-search input::placeholder,
.lens-empty__global input::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.lens-toolbar {
    display: grid;
    gap: 0.75rem;
}

.lens-toolbar__stats,
.lens-toolbar__controls,
.lens-toolbar__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.lens-stat,
.lens-control,
.lens-switch,
.lens-link-button,
.lens-button {
    align-items: center;
    background: rgba(34, 78, 110, 0.88);
    border: 1px solid var(--lens-border);
    border-radius: 0.9rem;
    color: rgba(255, 255, 255, 0.86);
    display: inline-flex;
    gap: 0.55rem;
    min-height: 3.15rem;
    padding: 0.65rem 0.85rem;
}

.lens-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 8rem;
}

.lens-stat__label,
.lens-control__label {
    color: rgba(255, 255, 255, 0.54);
    display: block;
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.lens-stat strong {
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1.2;
}

.lens-control {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 0.55rem 0.8rem;
    width: 100%;
}

.lens-control--range {
    gap: 0.2rem;
    min-height: 0;
    padding-bottom: 0.4rem;
    padding-top: 0.45rem;
}

.lens-control--range input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(
        to right,
        var(--lens-accent) 0%,
        var(--lens-accent) var(--lens-range-fill, 100%),
        rgba(0, 0, 0, 0.22) var(--lens-range-fill, 100%),
        rgba(0, 0, 0, 0.22) 100%
    );
    border-radius: 0.5rem;
    height: 6px;
    margin: 0.12rem 0 0;
    width: 100%;
}

.lens-control--range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: var(--lens-accent);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    height: 16px;
    width: 16px;
}

.lens-control--range input[type="range"]::-moz-range-thumb {
    background: var(--lens-accent);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    height: 16px;
    width: 16px;
}

.lens-range-value {
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.05;
}

.lens-control select {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-opacity='0.75' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-position: right 0 center;
    background-repeat: no-repeat;
    background-size: 0.7rem 0.5rem;
    border: 0;
    border-radius: 0;
    color: #ffffff;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    min-height: 1.7rem;
    outline: none;
    padding: 0 1.1rem 0 0;
    width: 100%;
}

.lens-control select:focus {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2300d3b7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
}

.lens-control select option {
    background-color: var(--lens-panel-dark);
    color: #ffffff;
}

.lens-button,
.lens-link-button,
.lens-filter-icon-button {
    border: 1px solid var(--lens-border);
    cursor: pointer;
    justify-content: center;
    text-decoration: none;
    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.lens-button:hover,
.lens-link-button:hover,
.lens-filter-icon-button:hover,
.lens-button:focus,
.lens-link-button:focus,
.lens-filter-icon-button:focus {
    border-color: rgba(0, 211, 183, 0.36);
    transform: translateY(-1px);
}

.lens-button--primary {
    background: rgba(0, 211, 183, 0.16);
    border-color: rgba(0, 211, 183, 0.32);
    color: #ffffff;
}

.lens-button--filters-toggle {
    min-width: 3.15rem;
    padding: 0;
    position: relative;
    width: 3.15rem;
}

.lens-button--filters-toggle.is-active {
    background: rgba(0, 211, 183, 0.16);
    border-color: rgba(0, 211, 183, 0.42);
}

.lens-filters-toggle__badge {
    align-items: center;
    background: var(--lens-accent);
    border: 2px solid var(--lens-panel);
    border-radius: 999px;
    color: #0c1e2a;
    display: inline-flex;
    font-size: 0.65rem;
    font-weight: 800;
    height: 1.15rem;
    justify-content: center;
    line-height: 1;
    min-width: 1.15rem;
    padding: 0 0.3rem;
    pointer-events: none;
    position: absolute;
    right: -0.3rem;
    top: -0.3rem;
}

.lens-filters-toggle__badge[hidden] {
    display: none;
}

.lens-button--map-toggle {
    color: #ffffff;
    display: none;
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    min-width: 0;
    padding-inline: 1rem;
    text-transform: uppercase;
}

.lens-button--map-toggle.is-active {
    background: var(--lens-panel-dark);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
    color: #ffffff;
}

#lensSearchButton {
    font-size: 0.95rem;
    min-height: 3.15rem;
    padding-inline: 1.1rem;
}

.lens-switch {
    cursor: pointer;
    gap: 0.7rem;
    justify-content: space-between;
    min-width: 0;
}

.lens-switch input {
    -webkit-appearance: none;
    appearance: none;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
    cursor: pointer;
    float: none;
    height: 1.25rem;
    margin: 0;
    opacity: 1;
    position: relative;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
    width: 2.25rem;
    z-index: 0;
    flex-shrink: 0;
}

.lens-switch input::after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 0.85rem;
    left: 0.15rem;
    position: absolute;
    top: 0.15rem;
    transition: transform 0.2s ease;
    width: 0.85rem;
}

.lens-switch input:checked {
    background-color: var(--lens-accent);
    border-color: var(--lens-accent);
}

.lens-switch input:checked::after {
    transform: translateX(1rem);
}

.lens-switch__text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.84rem;
    line-height: 1.2;
}

.lens-switch--photos {
    min-width: 0;
    width: 100%;
}

.lens-advanced-filters {
    margin-top: 0.6rem;
    max-height: 72vh;
    opacity: 1;
    overflow: hidden;
    transition:
        max-height 0.26s ease,
        opacity 0.2s ease,
        margin-top 0.22s ease,
        padding-top 0.22s ease,
        padding-bottom 0.22s ease;
}

.lens-advanced-filters.is-collapsed {
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}

.lens-search-status {
    align-items: center;
    background: var(--lens-accent-soft);
    border: 1px solid rgba(0, 211, 183, 0.32);
    border-radius: 0.75rem;
    color: var(--lens-text-strong);
    display: flex;
    font-size: 0.82rem;
    gap: 0.55rem;
    line-height: 1.3;
    margin-bottom: 0.55rem;
    padding: 0.5rem 0.75rem;
}

.lens-search-status[hidden] {
    display: none;
}

.lens-search-status__icon {
    color: var(--lens-accent);
    flex: 0 0 auto;
    font-size: 0.85rem;
}

.lens-search-status__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lens-search-status__scope {
    color: var(--lens-text-soft);
    margin-right: 0.3rem;
}

.lens-search-status strong {
    color: #ffffff;
    font-weight: 700;
}

.lens-advanced-filters__toprow {
    align-items: stretch;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
    margin-bottom: 0.45rem;
}

.lens-advanced-filters__grid {
    align-items: stretch;
    column-gap: 0.5rem;
    display: grid;
    row-gap: 0.32rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lens-control--type {
    align-items: center;
    justify-content: center;
    margin: 0;
    min-height: 2.65rem;
    padding: 0 0.8rem;
}

.lens-control--type select {
    font-size: 0.9rem;
    min-height: 1.35rem;
}

.lens-filter-icon-button {
    align-items: center;
    background: rgba(34, 78, 110, 0.88);
    border-radius: 0.9rem;
    color: rgba(255, 255, 255, 0.68);
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 2.65rem;
    padding: 0;
    width: 2.65rem;
}

.lens-filter-icon-button.is-active {
    background: rgba(0, 211, 183, 0.16);
    border-color: rgba(0, 211, 183, 0.42);
    color: rgba(255, 255, 255, 0.96);
}

.lens-filter-icon {
    display: inline-flex;
    line-height: 1;
}

.lens-filter-icon--heart {
    display: block;
    font-size: 1rem;
    line-height: 1;
}

.lens-filter-icon--photo {
    border: 1.8px solid currentColor;
    border-radius: 0.2rem;
    height: 0.9rem;
    position: relative;
    width: 1.15rem;
}

.lens-filter-icon--photo::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    height: 0.18rem;
    position: absolute;
    right: 0.16rem;
    top: 0.14rem;
    width: 0.18rem;
}

.lens-filter-icon--photo::after {
    background: currentColor;
    clip-path: polygon(0% 100%, 34% 52%, 52% 70%, 74% 34%, 100% 100%);
    content: "";
    height: 0.42rem;
    left: 0.12rem;
    position: absolute;
    right: 0.12rem;
    top: 0.29rem;
}

.lens-advanced-filters .lens-switch {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 3.15rem;
    padding: 0.65rem 0.85rem;
}

.lens-advanced-filters .lens-control,
.lens-advanced-filters .lens-switch {
    box-sizing: border-box;
}

.lens-button--clear-filters {
    box-sizing: border-box;
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    min-height: 2.45rem;
    padding: 0.4rem 0.95rem;
    text-transform: uppercase;
}

.lens-button--clear-filters[hidden] {
    display: none;
}

.lens-advanced-filters__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.lens-tag-filter-section {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.lens-tag-filter-section__head {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.lens-tag-filter-list {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0.25rem 0.2rem 0;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.lens-tag-filter-list::-webkit-scrollbar {
    height: 0.35rem;
}

.lens-tag-filter-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
}

.lens-tag-filter-track {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: max-content;
}

.lens-tag-filter-row {
    display: flex;
    gap: 0.45rem;
    min-height: 2rem;
    width: max-content;
}

.lens-tag-filter {
    align-items: center;
    appearance: none;
    background: rgba(34, 78, 110, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: var(--lens-font);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    line-height: 1;
    min-height: 2rem;
    padding: 0.45rem 0.75rem;
    white-space: nowrap;
    text-transform: uppercase;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.lens-tag-filter:hover,
.lens-tag-filter:focus {
    border-color: rgba(0, 211, 183, 0.42);
    outline: none;
    transform: translateY(-1px);
}

.lens-tag-filter.is-inactive {
    background: rgba(19, 41, 58, 0.72);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.48);
}

.lens-tag-filter--all {
    flex: 0 0 auto;
}

.lens-filters-icon {
    align-items: center;
    display: inline-flex;
    flex-direction: column;
    gap: 0.18rem;
    justify-content: center;
}

.lens-filters-icon span {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 999px;
    display: block;
    height: 2px;
}

.lens-filters-icon span:nth-child(1) {
    width: 1rem;
}

.lens-filters-icon span:nth-child(2) {
    width: 0.72rem;
}

.lens-filters-icon span:nth-child(3) {
    width: 0.44rem;
}

#thumbnails {
    align-content: flex-start;
    gap: 0.45rem;
    overflow: visible;
    padding: 0.65rem 0.9rem 1rem;
}

#main {
    background: var(--lens-panel);
    overflow-x: hidden;
}

:is(#thumbnails, .trail-sheet) article {
    background: transparent;
    border-radius: 0.8rem;
    overflow: visible;
    position: relative;
    transition: z-index 0.22s ease;
    width: 100%;
    z-index: 0;
}

:is(#thumbnails, .trail-sheet) article .thumbnail {
    background: rgba(21, 49, 69, 0.92);
    border: 0;
    border-radius: 0.8rem;
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transform: translateZ(0);
    transition:
        box-shadow 0.2s ease,
        border-color 0.2s ease;
    width: 100%;
}

:is(#thumbnails, .trail-sheet) article .thumbnail::after {
    background:
        linear-gradient(
            180deg,
            rgba(16, 16, 16, 0.02),
            rgba(16, 16, 16, 0.018) 30%,
            rgba(16, 16, 16, 0.072) 68%,
            rgba(16, 16, 16, 0.096)
        ),
        linear-gradient(135deg, rgba(0, 211, 183, 0.12), transparent 42%);
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
}

:is(#thumbnails, .trail-sheet) article .thumbnail img {
    aspect-ratio: 1.6 / 1;
    display: block;
    filter: saturate(0.8) brightness(0.68) contrast(1.02);
    object-fit: cover;
    transform: scale(1.03);
    transform-origin: center center;
    transition:
        transform 0.22s ease,
        filter 0.22s ease,
        opacity 0.32s ease;
    width: 100%;
}

:is(#thumbnails, .trail-sheet) article .thumbnail.is-img-loading img {
    opacity: 0;
}

:is(#thumbnails, .trail-sheet) article .thumbnail.is-img-loading::before {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(255, 255, 255, 0) 100%
        ),
        rgba(34, 78, 110, 0.55);
    background-size: 200% 100%, 100% 100%;
    background-position: -120% 0, 0 0;
    animation: lens-skeleton-shimmer 1.4s ease-in-out infinite;
    content: "";
    inset: 0;
    position: absolute;
    z-index: 2;
}

@keyframes lens-skeleton-shimmer {
    0% { background-position: -120% 0, 0 0; }
    100% { background-position: 220% 0, 0 0; }
}

:is(#thumbnails, .trail-sheet) article .thumbnail:before {
    box-shadow:
        inset 0 0 0 2px rgba(0, 211, 183, 0),
        inset 0 0 0 3px rgba(0, 0, 0, 0.08);
}

:is(#thumbnails, .trail-sheet) article h2,
:is(#thumbnails, .trail-sheet) article p {
    display: block;
}

.trail-card__body {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    inset: 0;
    justify-content: flex-start;
    padding: 0.85rem 5.6rem 0.8rem 0.85rem;
    position: absolute;
    z-index: 2;
}

.trail-card__body--with-tags {
    padding-right: 9.8rem;
}

.trail-card__body h2 {
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    font-family: "Parkly Condensed Soft", var(--lens-font);
    font-size: 1.5rem;
    font-weight: 200;
    letter-spacing: 0.01em;
    line-height: 0.96;
    margin: 0;
    max-width: 92%;
    overflow: hidden;
    text-align: left;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
}

.trail-card__eyebrow {
    color: rgba(255, 255, 255, 0.82);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 0.68rem;
    gap: 0.38rem;
    justify-content: flex-start;
    letter-spacing: 0.18em;
    margin-top: 0;
    text-align: left;
    text-transform: uppercase;
}

.trail-card__eyebrow span {
    background: transparent;
    border: 0;
    padding: 0;
}

.trail-card__stats {
    display: flex;
    font-family: var(--lens-font), var(--alt-font);
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: auto 0 0;
    padding: 0;
}

.trail-card__stats li {
    background: rgba(35, 58, 76, 0.72);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    padding: 0.28rem 0.56rem;
}

.trail-card__elevation {
    bottom: 0;
    fill: rgba(255, 255, 255, 0.32);
    height: 3rem;
    left: 0;
    pointer-events: none;
    position: absolute;
    stroke: rgba(255, 255, 255, 0.72);
    stroke-width: 0.8;
    width: 100%;
    z-index: 1;
}

.feed-card--ad .thumbnail {
    background: rgba(67, 46, 18, 0.94);
}

.feed-card--ad .thumbnail::after {
    background:
        linear-gradient(
            180deg,
            rgba(18, 12, 6, 0.02),
            rgba(18, 12, 6, 0.04) 28%,
            rgba(237, 179, 69, 0.08) 60%,
            rgba(18, 12, 6, 0.16)
        ),
        linear-gradient(135deg, rgba(237, 179, 69, 0.2), transparent 45%);
}

.feed-card--ad .thumbnail img {
    filter: saturate(0.88) brightness(0.78) contrast(1.02);
}

.feed-card--ad:hover,
.feed-card--ad:focus-within {
    z-index: 30;
}

.feed-card--ad:hover .thumbnail,
.feed-card--ad:focus-within .thumbnail {
    box-shadow:
        0 0 0 2px rgba(0, 211, 183, 0.62),
        0 1rem 2rem rgba(0, 0, 0, 0.24);
}

.feed-card--ad:hover .thumbnail::after,
.feed-card--ad:focus-within .thumbnail::after {
    background:
        linear-gradient(
            180deg,
            rgba(18, 12, 6, 0.04),
            rgba(18, 12, 6, 0.03) 28%,
            rgba(237, 179, 69, 0.12) 56%,
            rgba(18, 12, 6, 0.16)
        ),
        linear-gradient(135deg, rgba(0, 211, 183, 0.08), transparent 42%);
}

.feed-card--ad:hover .thumbnail img,
.feed-card--ad:focus-within .thumbnail img {
    filter: saturate(0.94) brightness(0.9) contrast(1.04);
    transform: scale(1.05);
}

.ad-card__badge {
    background: rgba(255, 221, 140, 0.92);
    border-radius: 999px;
    color: #3f2b08;
    font-family: var(--lens-font), var(--alt-font);
    font-size: 0.62rem;
    font-weight: 700;
    left: 0.75rem;
    letter-spacing: 0.12em;
    padding: 0.32rem 0.62rem;
    position: absolute;
    text-transform: uppercase;
    bottom: 0.75rem;
    z-index: 3;
}

.ad-card__body {
    gap: 0.36rem;
    justify-content: flex-end;
    padding-bottom: 2.6rem;
    padding-right: 0.95rem;
}

.ad-card__description {
    color: rgba(255, 247, 230, 0.92);
    font-size: 0.82rem;
    line-height: 1.35;
    margin: 0 0 0.1rem;
    max-width: 92%;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
}

.trail-card__map-focus,
.trail-card__favorite {
    align-items: center;
    appearance: none;
    background: rgba(20, 34, 44, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    height: 2rem;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    width: 2rem;
    z-index: 3;
}

.trail-card__map-focus {
    font-size: 0.95rem;
    right: 3.15rem;
}

.trail-card__map-focus i {
    display: block;
    font-size: 0.88rem;
    line-height: 1;
}

.trail-card__map-focus:hover,
.trail-card__map-focus:focus,
.trail-card__favorite:hover,
.trail-card__favorite:focus {
    border-color: rgba(0, 211, 183, 0.42);
    outline: none;
}

.trail-card__favorite.is-favorite {
    background: rgba(0, 211, 183, 0.2);
    border-color: rgba(0, 211, 183, 0.54);
    color: #6ff5e3;
}

.trail-card__tags {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    list-style: none;
    margin: 0;
    max-width: 6rem;
    padding: 0;
    position: absolute;
    right: 0.75rem;
    top: 3.15rem;
    z-index: 3;
}

.trail-card__tags li {
    background: rgba(20, 34, 44, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    padding: 0.28rem 0.55rem;
    text-align: right;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

:is(#thumbnails, .trail-sheet) article.is-active {
    z-index: 30;
}

:is(#thumbnails, .trail-sheet) article.is-active .thumbnail {
    box-shadow:
        0 0 0 2px rgba(0, 211, 183, 0.62),
        0 1rem 2rem rgba(0, 0, 0, 0.24);
}

:is(#thumbnails, .trail-sheet) article.is-active .thumbnail::after {
    background:
        linear-gradient(
            180deg,
            rgba(16, 16, 16, 0.04),
            rgba(16, 16, 16, 0.018) 28%,
            rgba(0, 211, 183, 0.02) 56%,
            rgba(16, 16, 16, 0.09)
        ),
        linear-gradient(135deg, rgba(0, 211, 183, 0.05), transparent 42%);
}

:is(#thumbnails, .trail-sheet) article.is-active .thumbnail img {
    filter: saturate(0.92) brightness(0.92) contrast(1.04);
    transform: scale(1.05);
}

#lensCardSpotlight {
    display: none;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    z-index: 10001;
}

#lensCardSpotlight.is-visible {
    display: block;
}

#lensCardSpotlight .trail-card__favorite {
    right: 0.75rem;
    top: 0.75rem;
}

#lensCardSpotlight .trail-card__map-focus {
    right: 3.15rem;
    top: 0.75rem;
}

#lensCardSpotlight .thumbnail {
    background: rgba(21, 49, 69, 0.92);
    border: 0;
    border-radius: 0.8rem;
    box-shadow:
        0 0 0 2px rgba(0, 211, 183, 0.68),
        -1.8rem 0 3.8rem rgba(0, 0, 0, 0.34),
        0 1.15rem 2.35rem rgba(0, 0, 0, 0.28);
    display: block;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#lensCardSpotlight .thumbnail::after {
    background:
        linear-gradient(
            180deg,
            rgba(16, 16, 16, 0.04),
            rgba(16, 16, 16, 0.018) 28%,
            rgba(0, 211, 183, 0.02) 56%,
            rgba(16, 16, 16, 0.09)
        ),
        linear-gradient(135deg, rgba(0, 211, 183, 0.05), transparent 42%);
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
}

#lensCardSpotlight .thumbnail img {
    display: block;
    filter: saturate(0.92) brightness(0.92) contrast(1.04);
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transform-origin: center center;
    width: 100%;
}

#lensCardSpotlight.feed-card--ad .thumbnail {
    background: rgba(67, 46, 18, 0.94);
}

#lensCardSpotlight.feed-card--ad .thumbnail::after {
    background:
        linear-gradient(
            180deg,
            rgba(18, 12, 6, 0.04),
            rgba(18, 12, 6, 0.03) 28%,
            rgba(237, 179, 69, 0.12) 56%,
            rgba(18, 12, 6, 0.16)
        ),
        linear-gradient(135deg, rgba(0, 211, 183, 0.08), transparent 42%);
}

#lensCardSpotlight.feed-card--ad .thumbnail img {
    filter: saturate(0.94) brightness(0.9) contrast(1.04);
}

#lensCardSpotlight .trail-card__body {
    z-index: 2;
}

#viewer {
    background:
        radial-gradient(
            circle at top left,
            rgba(0, 211, 183, 0.12),
            transparent 24rem
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255, 255, 255, 0.06),
            transparent 28rem
        ),
        var(--lens-panel);
}

#viewer .inner {
    padding: 0.7rem;
}

#viewer .inner:before {
    background-image:
        linear-gradient(
            180deg,
            rgba(34, 78, 110, 0.08),
            rgba(34, 78, 110, 0) 25%,
            rgba(34, 78, 110, 0.1)
        ),
        linear-gradient(
            90deg,
            rgba(34, 78, 110, 0.08),
            rgba(34, 78, 110, 0) 8rem,
            rgba(34, 78, 110, 0)
        );
}

#viewer .inner .nav-next,
#viewer .inner .nav-previous {
    display: none;
}

#lensMapFrame {
    border-radius: 1.35rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
    inset: 0.7rem;
    overflow: hidden;
    position: absolute;
    z-index: 1;
}

#lensMap {
    height: 100%;
    width: 100%;
}

.lens-locate-control.leaflet-control {
    margin-top: 0.45rem;
}

.lens-locate-control__button {
    appearance: none;
    align-items: center;
    background: #ffffff;
    border: 0;
    color: #2c3e50;
    cursor: pointer;
    display: flex;
    height: 44px;
    justify-content: center;
    padding: 0;
    width: 44px;
}

.lens-locate-control__button:hover,
.lens-locate-control__button:focus {
    background: #f4f4f4;
    transform: none;
}

.lens-locate-control__button:disabled,
.lens-locate-control__button.is-locating {
    color: rgba(44, 62, 80, 0.45);
    cursor: progress;
}

.lens-locate-control__button .fas {
    font-size: 1.05rem;
}

.leaflet-bar a,
.leaflet-bar a:hover,
.leaflet-bar a:focus,
.leaflet-bar a:active,
.leaflet-touch .leaflet-bar a,
.leaflet-touch .leaflet-bar a:hover,
.leaflet-touch .leaflet-bar a:focus,
.leaflet-touch .leaflet-bar a:active {
    box-sizing: border-box;
    display: block;
    font-size: 1.45rem;
    font-weight: 600;
    height: 44px;
    line-height: 44px;
    margin: 0;
    min-height: 44px;
    min-width: 44px;
    padding: 0;
    transform: none;
    width: 44px;
}

.lens-locate-control__button--refresh.is-spinning .fas {
    animation: lens-refresh-spin 0.7s linear;
}

@keyframes lens-refresh-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.lens-locate-control__button--home[hidden] {
    display: none;
}

.lens-locate-control__button--home.has-home {
    color: var(--lens-accent);
}

/* Inline "Save this view?" prompt that appears when the home button is
   tapped and no home is set yet. Positions itself near the top-left
   leaflet bar without obstructing the map view. */

.lens-home-prompt {
    background: linear-gradient(
        160deg,
        rgba(33, 68, 91, 0.96),
        rgba(44, 102, 143, 0.94)
    );
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 1rem;
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.32);
    color: #ffffff;
    font-family: var(--lens-font);
    left: 4.2rem;
    max-width: 18rem;
    padding: 0.9rem 1rem;
    position: fixed;
    top: 11rem;
    z-index: 19000;
}

.lens-home-prompt__copy {
    font-size: 0.9rem;
    line-height: 1.32;
    margin: 0 0 0.7rem;
}

.lens-home-prompt__actions {
    display: flex;
    gap: 0.5rem;
}

.lens-home-prompt__save,
.lens-home-prompt__cancel {
    appearance: none;
    border-radius: 0.65rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.5rem 0.85rem;
    text-transform: uppercase;
}

.lens-home-prompt__save {
    background: var(--lens-accent);
    border: 0;
    color: #0c1e2a;
}

.lens-home-prompt__cancel {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: rgba(255, 255, 255, 0.88);
}

/* Brief confirmation pill that floats above the map after a home save
   or clear succeeds (or fails). Mirrors the visual language of the
   lens controls so it feels native. */

.lens-home-toast {
    background: rgba(20, 34, 44, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    bottom: 2.5rem;
    color: #ffffff;
    font-family: var(--lens-font);
    font-size: 0.85rem;
    left: 50%;
    opacity: 0;
    padding: 0.6rem 1.1rem;
    pointer-events: none;
    position: fixed;
    transform: translate(-50%, 0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 19500;
}

.lens-home-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.lens-home-toast.is-error {
    background: rgba(143, 38, 26, 0.94);
    border-color: rgba(255, 158, 142, 0.4);
}

@media screen and (max-width: 980px) {
    .lens-home-prompt {
        left: 1rem;
        right: 1rem;
        max-width: none;
        top: auto;
        bottom: 6rem;
    }
}

.lens-map-controls {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    z-index: 550;
}

.lens-map-controls__row {
    display: flex;
    gap: 0.55rem;
}

.lens-button--map {
    min-height: 3.15rem;
}

.lens-button--auth {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    height: 3.15rem;
    justify-content: center;
    width: 3.15rem;
    padding: 0;
}

.lens-button--auth::before,
.lens-button--auth::after {
    border: 0;
    border-radius: 0;
    left: auto;
    top: auto;
    transform: none;
}

.lens-button--auth::before {
    color: #ffffff;
    content: "\f2f6";
    font-family: "Font Awesome 5 Free";
    font-size: 1.05rem;
    font-weight: 900;
    height: auto;
    width: auto;
}

.lens-button--auth::after {
    content: none;
}

.lens-button--auth.is-authenticated::before {
    content: "\f004";
}

.lens-button--auth.is-active {
    background: rgba(0, 211, 183, 0.22);
    border-color: rgba(0, 211, 183, 0.58);
}

.lens-button--auth.is-active::before {
    color: #6ff5e3;
}

.lens-button--icon {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-width: 3.15rem;
    position: relative;
    padding: 0;
}

.lens-button--icon::before {
    border: 1.5px solid rgba(255, 255, 255, 0.92);
    border-radius: 0.2rem;
    content: "";
    display: block;
    height: 1.05rem;
    width: 1.05rem;
}

.lens-button--icon::after {
    border-bottom: 0.45rem solid transparent;
    border-left: 0.32rem solid transparent;
    border-right: 0.32rem solid transparent;
    border-top: 0.8rem solid rgba(255, 255, 255, 0.96);
    content: "";
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -58%) rotate(45deg);
}

.lens-button--icon[disabled]::before,
.lens-button--icon[disabled]::after {
    opacity: 0.7;
}

.lens-button--admin {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    min-height: 2.9rem;
    min-width: 0;
    padding: 0 1rem;
    text-transform: uppercase;
}

.lens-button--admin.is-hidden {
    display: none;
}

/* Viewer-status: collapsed = small square badge with trail count;
   hover / focus-within / .is-open = expands into a horizontal popout
   showing the label + Account + Share icon buttons. */

.viewer-status {
    align-items: center;
    background: var(--lens-surface);
    border: 1px solid var(--lens-border);
    border-radius: 1rem;
    bottom: 2rem;
    color: var(--lens-text-strong);
    display: flex;
    gap: 0;
    left: 2rem;
    overflow: hidden;
    padding: 0.4rem;
    position: absolute;
    transition: gap 0.24s ease, padding 0.24s ease;
    z-index: 500;
}

.viewer-status__toggle {
    align-items: center;
    appearance: none;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.7rem;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: var(--lens-font);
    font-size: 1rem;
    font-weight: 700;
    height: 2.6rem;
    justify-content: center;
    line-height: 1;
    padding: 0 0.7rem;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.viewer-status__toggle:hover,
.viewer-status:hover .viewer-status__toggle,
.viewer-status:focus-within .viewer-status__toggle,
.viewer-status.is-open .viewer-status__toggle {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.18);
}

.viewer-status__count {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* 2x3 dot grip used as the affordance on the mobile right-edge chip.
   Hidden on desktop where the trail count is the toggle label instead. */
.viewer-status__grip {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 14'%3E%3Ccircle cx='1.5' cy='2' r='1.2' fill='white'/%3E%3Ccircle cx='4.5' cy='2' r='1.2' fill='white'/%3E%3Ccircle cx='1.5' cy='7' r='1.2' fill='white'/%3E%3Ccircle cx='4.5' cy='7' r='1.2' fill='white'/%3E%3Ccircle cx='1.5' cy='12' r='1.2' fill='white'/%3E%3Ccircle cx='4.5' cy='12' r='1.2' fill='white'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 6px 14px;
    display: none;
    height: 14px;
    width: 6px;
}

.viewer-status__body {
    align-items: center;
    display: flex;
    gap: 0.55rem;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.28s ease, opacity 0.2s ease 0.04s;
}

.viewer-status:hover .viewer-status__body,
.viewer-status:focus-within .viewer-status__body,
.viewer-status.is-open .viewer-status__body {
    max-width: 18rem;
    opacity: 1;
}

.viewer-status:hover,
.viewer-status:focus-within,
.viewer-status.is-open {
    gap: 0.6rem;
    padding-right: 0.55rem;
}

.viewer-status__label {
    color: #ffffff;
    flex: 0 0 auto;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding-left: 0.2rem;
    white-space: nowrap;
}

.viewer-status__actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 0.4rem;
}

.viewer-status__action {
    align-items: center;
    appearance: none;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.7rem;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.95rem;
    height: 2.6rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease,
        transform 0.12s ease;
    width: 2.6rem;
}

.viewer-status__action:hover,
.viewer-status__action:focus {
    background: var(--lens-accent-soft);
    border-color: rgba(0, 211, 183, 0.4);
    color: var(--lens-accent);
    text-decoration: none;
}

.viewer-status__action:active {
    transform: translateY(1px);
}

.viewer-status__action.is-authenticated {
    background: var(--lens-accent-soft);
    border-color: rgba(0, 211, 183, 0.32);
    color: var(--lens-accent);
}

.viewer-status__action.is-flashing {
    background: rgba(0, 211, 183, 0.32);
    border-color: var(--lens-accent);
    color: #ffffff;
}

.lens-auth-modal[hidden] {
    display: none;
}

.lens-auth-modal {
    inset: 0;
    position: fixed;
    z-index: 20000;
}

.lens-auth-modal__backdrop {
    backdrop-filter: blur(10px);
    background: rgba(16, 28, 38, 0.56);
    inset: 0;
    position: absolute;
}

.lens-auth-modal__dialog {
    background:
        linear-gradient(
            160deg,
            rgba(33, 68, 91, 0.96),
            rgba(44, 102, 143, 0.94)
        ),
        rgba(33, 68, 91, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.5rem;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.3);
    color: #ffffff;
    left: 50%;
    max-width: min(34rem, calc(100% - 2rem));
    padding: 1.5rem;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.lens-auth-modal__close {
    align-items: center;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    display: inline-flex;
    font-size: 2rem;
    height: 2.5rem;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 0.9rem;
    top: 0.65rem;
    width: 2.5rem;
}

.lens-auth-modal__eyebrow {
    color: var(--lens-accent);
    font-size: 0.74rem;
    letter-spacing: 0.24em;
    margin: 0 0 0.85rem;
    text-transform: uppercase;
}

.lens-auth-modal__dialog h2 {
    color: #ffffff;
    font-family: "Parkly Condensed Soft", var(--lens-font);
    font-size: 2.2rem;
    line-height: 0.96;
    margin: 0 0 0.85rem;
}

.lens-auth-modal__copy {
    color: rgba(255, 255, 255, 0.76);
    margin: 0 0 1rem;
    max-width: 28rem;
}

.lens-auth-form {
    display: grid;
    gap: 0.9rem;
}

.lens-auth-form__field {
    display: grid;
    gap: 0.35rem;
}

.lens-auth-form__field span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.lens-auth-form__field input {
    appearance: none;
    background: rgba(16, 36, 50, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.95rem;
    color: #ffffff;
    /* Same iOS auto-zoom guard as the search input — 16px minimum. */
    font-size: 1rem;
    min-height: 3.1rem;
    padding: 0 0.95rem;
}

.lens-auth-form__field input:focus {
    border-color: rgba(0, 211, 183, 0.48);
    outline: 2px solid rgba(0, 211, 183, 0.14);
}

.lens-auth-form__error {
    color: #ffd7c9;
    margin: 0;
}

.lens-auth-form__actions {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

/* Force the primary and secondary actions in the inline auth modal to
   render at the same visual weight. Buttons inherit font sizing
   inconsistently across browsers (iOS Safari shrinks <button> by
   default), so the size is pinned here for both <button> and <a>. */
.lens-auth-form__actions > .lens-button,
.lens-auth-form__actions > .lens-link-button {
    font-family: var(--lens-font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    min-height: 3rem;
    padding-block: 0.85rem;
    padding-inline: 1.1rem;
}

.lens-auth-form__actions > .lens-button {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    position: relative;
}

.lens-button__spinner,
.lens-button__progress {
    display: none;
}

.lens-auth-form.is-submitting .lens-auth-form__field input,
.lens-auth-form.is-submitting .lens-link-button,
.lens-auth-form.is-submitting .lens-auth-modal__close {
    pointer-events: none;
}

.lens-auth-form.is-submitting .lens-auth-form__field input {
    opacity: 0.72;
}

.lens-auth-form.is-submitting .lens-button--primary {
    cursor: wait;
}

.lens-auth-form.is-submitting .lens-button--primary .lens-button__label {
    display: none;
}

.lens-auth-form.is-submitting .lens-button--primary .lens-button__spinner,
.lens-auth-form.is-submitting .lens-button--primary .lens-button__progress {
    display: inline-flex;
}

.lens-auth-form.is-submitting .lens-button--primary .lens-button__spinner {
    animation: lensButtonSpin 0.8s linear infinite;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    border-top-color: #ffffff;
    height: 1rem;
    margin-right: 0.6rem;
    width: 1rem;
}

@keyframes lensButtonSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.lens-popup {
    display: grid;
    gap: 0.28rem;
    max-width: min(19rem, calc(100vw - 6.5rem));
}

.lens-popup__select {
    appearance: none;
    background: transparent;
    border: 0;
    color: rgba(16, 16, 16, 0.86);
    cursor: pointer;
    display: block;
    font-family: var(--lens-font);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    padding: 0;
    text-align: left;
    text-decoration: none;
    width: auto;
    max-width: 100%;
}

.lens-popup__title,
.lens-popup__meta,
.lens-popup__source {
    display: block;
}

.lens-popup__title {
    line-height: 1.08;
    overflow-wrap: break-word;
    white-space: normal;
    word-break: normal;
}

.lens-popup__meta {
    color: rgba(16, 16, 16, 0.68);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-transform: uppercase;
}

.lens-popup__source {
    color: rgba(16, 16, 16, 0.62);
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 600;
    justify-self: start;
    line-height: 1.3;
    text-decoration: none;
}

.lens-popup__select:hover,
.lens-popup__select:focus,
.lens-popup__source:hover,
.lens-popup__source:focus {
    color: #007666;
    outline: none;
}

.leaflet-popup-content-wrapper {
    font-family: var(--lens-font);
    border-radius: 1rem;
    max-width: min(21rem, calc(100vw - 4.5rem));
}

.leaflet-popup-content {
    margin: 0.85rem 1rem;
    max-width: min(19rem, calc(100vw - 6.5rem));
}

.lens-map-marker {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    display: flex;
    height: 1.125rem;
    justify-content: center;
    width: 1.125rem;
}

/* All trails share the same teal marker. Activity-type distinction is
   surfaced via filters in the UI, not via marker color — keeps the map
   visually calm and lets the new-trail (is-new) and highlight states
   read clearly against a single base hue. */
.lens-map-marker__core {
    background: #167c80;
    border: 2px solid rgba(255, 255, 255, 0.96);
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    display: block;
    height: 100%;
    transition:
        transform 0.18s ease,
        background-color 0.18s ease;
    width: 100%;
}

.lens-map-marker.is-highlighted {
    z-index: 1000 !important;
}

.lens-map-marker.is-highlighted .lens-map-marker__core {
    background: var(--lens-accent);
    transform: scale(1.45);
}

/* Trails added within the last 30 days draw with a warm-orange tint
   to surface "freshness" on the map. is-highlighted wins so hover and
   selected affordances still trump the new-state color. */
.lens-map-marker.is-new .lens-map-marker__core {
    background: #e07a3d;
    box-shadow: 0 0 0 2px rgba(224, 122, 61, 0.32);
}

.lens-empty {
    align-items: center;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(16, 16, 16, 0.18);
    border-radius: 1rem;
    color: rgba(16, 16, 16, 0.68);
    display: flex;
    justify-content: center;
    min-height: 13rem;
    padding: 2rem;
    text-align: center;
    width: 100%;
}

.lens-empty p {
    margin: 0 0 0.6rem;
}

.lens-empty__global {
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
}

.lens-scroll-state {
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    padding: 0.4rem 1rem 0.45rem;
    text-align: center;
    text-transform: uppercase;
}

.lens-card-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.8rem;
    justify-content: center;
    padding: 0 1rem 1rem;
}

.lens-card-links a {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
}

.lens-card-links a:hover,
.lens-card-links a:focus {
    color: var(--lens-accent);
    text-decoration: underline;
}

@media screen and (max-width: 1280px) {
    #header.lens-rail-header {
        padding-left: 0.05rem;
        padding-right: 0.75rem;
    }

    #thumbnails {
        padding-left: 0.05rem;
        padding-right: 0.75rem;
    }

    .viewer-status:hover .viewer-status__body,
    .viewer-status:focus-within .viewer-status__body,
    .viewer-status.is-open .viewer-status__body {
        max-width: 15rem;
    }
}

@media screen and (max-width: 980px) {
    #viewer .inner .toggle,
    #main .toggle {
        display: block;
    }

    body.trails-lens-page {
        --lens-mobile-map-control-edge: 1.15rem;
        --lens-mobile-map-offset: calc(env(safe-area-inset-top, 0px) + 5.9rem);
        --lens-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    #main {
        background: var(--lens-panel);
        width: 100%;
        z-index: 10030;
    }

    #header.lens-rail-header {
        border-radius: 1rem;
        margin: 0.75rem 0.75rem 0;
        position: sticky;
        top: 0;
    }

    .lens-rail-header__row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .lens-button--rail-auth,
    .lens-button--filters-toggle {
        width: 100%;
    }

    .lens-button--rail-auth {
        justify-self: stretch;
    }

    .lens-button--map-toggle {
        background: var(--lens-panel-dark);
        border-color: rgba(255, 255, 255, 0.22);
        bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
        color: #ffffff;
        display: inline-flex;
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        left: var(--lens-mobile-map-control-edge);
        min-height: 2.9rem;
        padding: 0 1rem;
        position: fixed;
        right: auto;
        text-transform: uppercase;
        top: auto;
        width: auto;
        z-index: 10040;
    }

    /* Hover and "List" (active = in fullscreen map view) states keep
       the same solid dark-blue, never the cyan accent that other
       lens buttons use for active state. */
    .lens-button--map-toggle:hover,
    .lens-button--map-toggle:focus,
    .lens-button--map-toggle.is-active {
        background: var(--lens-panel-dark);
        border-color: rgba(255, 255, 255, 0.32);
        color: #ffffff;
        transform: none;
    }

    .lens-search__row {
        grid-template-columns: 1fr;
    }

    .lens-advanced-filters__grid {
        grid-template-columns: 1fr 1fr;
    }

    .lens-advanced-filters__toprow {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .lens-toolbar__controls,
    .lens-toolbar__stats,
    .lens-toolbar__links {
        flex-direction: column;
    }

    .lens-stat,
    .lens-control,
    .lens-switch,
    .lens-button,
    .lens-link-button {
        width: 100%;
    }

    .lens-button--map-toggle {
        width: auto;
    }

    /* Mobile viewer-status: a thin gripper tab flush against the right
       edge of the viewport. Tap to slide the account + share actions
       out to the left; tap anywhere else (handled in JS) to retract.
       No trail-count number — the bottom-left map toggle is the
       balanced counterpart on the opposite corner. */
    .viewer-status {
        background: var(--lens-panel-dark);
        border-color: rgba(255, 255, 255, 0.16);
        border-radius: 0.7rem 0 0 0.7rem;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        box-shadow: -6px 6px 18px rgba(0, 0, 0, 0.24);
        display: flex;
        flex-direction: row-reverse;
        left: auto;
        padding: 0.3rem;
        position: fixed;
        right: 0;
        top: auto;
        z-index: 10040;
    }

    /* Replace the digit-count toggle with the gripper handle.
       Narrow column flush to the screen edge. */
    .viewer-status__toggle {
        background: transparent;
        border: 0;
        border-radius: 0.55rem;
        height: 2.75rem;
        min-width: 0;
        padding: 0;
        width: 1.2rem;
    }

    .viewer-status__count {
        display: none;
    }

    .viewer-status__grip {
        display: block;
    }

    /* Hide the count label too — the user asked for no numbers. */
    .viewer-status__label {
        display: none;
    }

    .viewer-status:hover .viewer-status__body,
    .viewer-status:focus-within .viewer-status__body,
    .viewer-status.is-open .viewer-status__body {
        max-width: calc(100vw - 4rem);
    }

    .viewer-status__action {
        height: 2.5rem;
        width: 2.5rem;
    }

    .lens-map-controls {
        left: auto;
        right: var(--lens-mobile-map-control-edge);
        top: 1.15rem;
    }


    body.trails-lens-page {
        overflow: hidden;
    }

    #viewer {
        background: var(--lens-panel);
        height: 100dvh;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        visibility: hidden;
        width: 100%;
        z-index: 10020;
    }

    #viewer .inner:before {
        background-image: none;
    }

    body.fullscreen #viewer {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    body.fullscreen #main {
        background: var(--lens-panel);
        height: auto;
        left: 0;
        opacity: 1;
        overflow: visible;
        right: 0;
        visibility: visible;
        width: 100%;
    }

    body.fullscreen #lensMapFrame {
        top: var(--lens-mobile-map-offset);
    }

    body.fullscreen .lens-map-controls {
        top: calc(var(--lens-mobile-map-offset) + 0.35rem);
    }

    body.fullscreen .lens-rail-header__row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body.fullscreen #lensFiltersToggle {
        width: 3.15rem;
    }

    body.fullscreen #lensMapToggle.is-active {
        background: rgba(34, 78, 110, 0.96);
        border-color: rgba(255, 255, 255, 0.22);
        color: #ffffff;
    }

    body.fullscreen #thumbnails,
    body.fullscreen #lensScrollState,
    body.fullscreen .lens-card-links {
        display: none;
    }

    #thumbnails {
        padding: 0.75rem 0.75rem 1rem;
    }

    .trail-card__favorite,
    .trail-card__map-focus {
        height: 44px;
        width: 44px;
    }

    .trail-card__favorite {
        font-size: 1.25rem;
    }

    .trail-card__map-focus {
        right: calc(0.75rem + 44px + 0.35rem);
    }

    .trail-card__map-focus i {
        font-size: 1.05rem;
    }

    .trail-card__tags {
        top: calc(0.75rem + 44px + 0.45rem);
    }

    #lensCardSpotlight {
        display: none !important;
    }
}

@media screen and (max-width: 480px) {
    body.fullscreen #main {
        left: 0 !important;
        opacity: 1;
        right: 0 !important;
        visibility: visible;
    }
}

@media screen and (max-width: 736px) {
    #header.lens-rail-header {
        padding: 0.95rem 0.75rem 0.65rem 0.65rem;
    }

    .lens-advanced-filters__toprow {
        gap: 0.45rem;
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .lens-advanced-filters__grid {
        grid-template-columns: 1fr;
    }

    #thumbnails {
        gap: 0.55rem;
        padding: 0 0.75rem 0.85rem;
    }

    :is(#thumbnails, .trail-sheet) article .thumbnail {
        display: block;
    }

    :is(#thumbnails, .trail-sheet) article .thumbnail::after {
        inset: 0;
    }

    :is(#thumbnails, .trail-sheet) article .thumbnail img {
        aspect-ratio: 1.6 / 1;
        height: clamp(11rem, 46vw, 13rem);
        width: 100%;
    }

    .trail-card__body {
        background: transparent;
        gap: 0.24rem;
        inset: 0;
        justify-content: flex-start;
        padding: 0.75rem 5.35rem 0.75rem 0.75rem;
        position: absolute;
    }

    .trail-card__body--with-tags {
        padding-right: 8.7rem;
    }

    .trail-card__body h2 {
        font-size: 1.32rem;
        line-height: 1.02;
        max-width: 92%;
    }

    .trail-card__eyebrow {
        font-size: 0.62rem;
        gap: 0.3rem;
        letter-spacing: 0.14em;
    }

    .trail-card__stats {
        margin-top: auto;
    }

    .trail-card__stats li {
        font-size: 0.68rem;
    }

    .trail-card__tags {
        gap: 0.26rem;
        max-width: 7rem;
    }

    .trail-card__tags li {
        font-size: 0.56rem;
        padding: 0.24rem 0.48rem;
    }

    .trail-card__tags li:nth-child(n + 4) {
        display: none;
    }

    .lens-map-close {
        min-height: 2.45rem;
        padding: 0 0.9rem;
    }

    #viewer .inner {
        padding: 0.9rem;
    }

    #lensMapFrame {
        inset: 0.9rem;
    }
}

/* ================================================================
   Mobile trail sheet
   Slides up from the bottom when a trail marker/polyline is tapped.
   The shared `:is(#thumbnails, .trail-sheet) article` rules render the
   card inside the sheet identically to the list view.
   Only active in compact (≤ 980px) viewports; hidden on desktop.
   ================================================================ */

.trail-sheet {
    display: none; /* hidden on desktop — the @media block below activates it */
}

@media screen and (max-width: 980px) {
    .trail-sheet {
        background: transparent;
        bottom: 0;
        display: block;
        left: 0;
        padding: 0.75rem 0.75rem calc(env(safe-area-inset-bottom, 0px) + 0.85rem);
        pointer-events: none; /* re-enabled on the inner article so taps outside dismiss */
        position: fixed;
        right: 0;
        transform: translateY(110%);
        transition: transform 0.33s cubic-bezier(0.32, 0.72, 0, 1);
        will-change: transform;
        z-index: 10050;
    }

    .trail-sheet.is-visible {
        transform: translateY(0);
    }

    .trail-sheet article {
        box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.52);
        pointer-events: auto;
    }
}

/* Wider tap hit-area for the marker dot: the icon container is 30×30px
   but the visible core is pinned to 18×18px so the map stays clean. */
.lens-map-marker__core {
    height: 18px;
    width: 18px;
}