.desktop-only {
    display: none;
}
@media (min-width: 768px) {
    .desktop-only {
        display: block;
    }
    tr.desktop-only {
        display: table-row;
    }
}

.grid > section {
    display: flex;
    flex-direction: column;
}
/* Carousel container */
.carousel {
    overflow-x: auto;
    display: flex;
    gap: var(--pico-spacing);
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: var(--pico-spacing);
    height: 100%;
}

/* Hide scrollbar (optional) */
.carousel::-webkit-scrollbar { display: none; }
.carousel { scrollbar-width: none; }

/* Slides (cards) */
.carousel > article {
    flex: 0 0 100%;
    scroll-snap-align: start;
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-card-border-color);
    border-radius: var(--pico-border-radius);
    box-shadow: var(--pico-box-shadow);
}

/* Dots + arrows nav */
.carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.carousel-nav .dots {
    display: inline-flex;
    gap: 1rem;
}

.carousel-nav a.dot {
    width: .55rem; height: .55rem; border-radius: 50%;
    background: var(--pico-muted-border-color);
    display: inline-block;
}

/* Optional larger target sizes for arrows */
.carousel-nav a.arrow {
    padding: .25rem .6rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
}

/* Make anchor jumps land nicely */
.carousel > article { scroll-margin-inline: var(--pico-spacing); }

/* Shared hover/focus style */
.carousel > article:hover,
.carousel > article:focus-within {
    border-color: var(--pico-primary);
    color: var(--pico-primary);
}

.carousel > .carousel-add {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--pico-muted-border-color);
    background: transparent;
    color: var(--pico-muted-color);
    cursor: pointer;
    transition: border-color var(--pico-transition), color var(--pico-transition);
}

/* Hover/focus state */
.carousel > .carousel-add:hover,
.carousel > .carousel-add:focus-within {
    border-color: var(--pico-primary);
    color: var(--pico-primary);
}

/* Plus icon or button */
.carousel > .carousel-add button {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    font-size: 1.5rem;
    line-height: 1;
    transition: background var(--pico-transition), color var(--pico-transition);
}

.carousel > .carousel-add button:hover {
    background: var(--pico-primary);
    color: var(--pico-primary-inverse);
}
:root { --header-h: 3.5rem; }
html {
    scrollbar-gutter: stable both-edges;
    scroll-padding-top: calc(var(--header-h) * 2);
}
#body>header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    background: var(--pico-background-color);
    height: var(--header-h);
}
.scrolled {
    box-shadow: var(--pico-card-box-shadow);
}
#menu-bar {
    display: none;
    position: fixed;
    top: var(--header-h);
    right: 0;
    height: calc(100dvh - 6rem);
    width: fit-content;
    background: var(--pico-card-background-color);
    z-index: 1002;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
    overscroll-behavior: contain;      /* don’t scroll the page when at ends */
    transform: translateX(100%);
    transition: transform .2s ease;
    padding: var(--pico-spacing);
}
#menu-bar.open {
    display: block;
    transform: translateX(0);
}
#menu-overlay {
    display: none;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0; bottom: 0;
    height:100dvh;
    background: var(--pico-modal-overlay-background-color);
    backdrop-filter:var(--pico-modal-overlay-backdrop-filter);
    z-index: 1001;                 /* below drawer */
}
#menu-overlay.open { display: block; }
body.lock { overflow: hidden; }
table td>input {margin-bottom: 0;}

@media (min-width: 576px) {
    :root,
    :host {
        --pico-font-size: 90%;
    }
}
@media (min-width: 768px) {
    :root,
    :host {
        --pico-font-size: 96.25%;
    }
}

.map-wrapper {
    position: relative;
}

/* default: NOT following */
.locate-btn {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 99;

    border: none;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    cursor: pointer;
    font-size: 0.85rem;

    background: var(--pico-secondary);
    color: var(--pico-secondary-inverse, #fff);
    transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.locate-btn:active {
    transform: scale(0.96);
}

/* following ON */
.locate-btn.active {
    background: var(--pico-primary);
    color: var(--pico-primary-inverse, #fff);
}

/* Show divider only on single-item breadcrumbs */
nav[aria-label=breadcrumb] ul li:only-child::after {
    display: inline-block;
    position: absolute;
    width: calc(var(--pico-nav-link-spacing-horizontal) * 4);
    margin: 0 calc(var(--pico-nav-link-spacing-horizontal) * -1);
    content: var(--pico-nav-breadcrumb-divider);
    color: var(--pico-muted-color);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

ul > li > details,
ol > li > details {
    margin-bottom: 0;
}

dl dt {
    font-weight: bold;
}

dl dd:not(:last-child) {
    margin-bottom: 1rem;
}

dd {
    margin-inline-start: auto;
}

#hx-spinner-dialog.htmx-request {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 300ms;
}

#hx-spinner-dialog {
    display: flex;
    opacity: 0;
    visibility: hidden;
    z-index: 999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: inherit;
    min-width: 100%;
    height: inherit;
    min-height: 100%;
    padding: 0;
    border: 0;
    -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
    backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
    background-color: var(--pico-modal-overlay-background-color);
    color: var(--pico-color);
    transform: translateY(100%);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transition-delay: 0s;
}
.grid-table {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
}
.grid-table > div {
    padding: var(--pico-spacing);
    border-bottom: var(--pico-border-width) solid var(--pico-table-border-color);
}
.grid-table .th {
    font-weight: bold;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .grid-table {
        grid-template-columns: auto 1fr;
    }
}

.hx-indicator {
    opacity: 0;
    visibility: hidden;
}

.hx-indicator.htmx-request {
    opacity: 1;
    visibility: visible;
}

.badge {
    font-size: 80%;
    background-color: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
    padding: 0.2em 0.6em;
    border-radius: var(--pico-border-radius);
}