/* ===================================================================
   Fort Wayne Parks Finder — Custom Styles
   Started from the Allen County GIS viewers' stylesheet (reference/css),
   with its token names kept so fixes can move between the two.
   Matches cityoffortwayne.in.gov/461 (Parks & Recreation):
   Header blue #0075A5, dark blue #005274, parks green #178744
   Typography: Poppins (headings), Arial (body)
   =================================================================== */

/* ── Brand Colors & Tokens ────────────────────────────────────────── */
:root {
    /* Fort Wayne Parks & Recreation palette, from the department's site */
    --ac-dark: #005274;
    --ac-primary: #0075A5;
    --ac-primary-light: #1689b9;
    --ac-accent: #178744;
    --ac-accent-hover: #1d9d51;
    --ac-background: #f7f8f9;
    --ac-surface: #ffffff;
    --ac-text: #14140C;
    --ac-text-secondary: #555548;
    --ac-text-muted: #8a8a7e;
    --ac-border: #d9ddd6;
    --ac-highlight: rgba(0, 117, 165, 0.1);
    --ac-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
    --ac-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
    --ac-shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.15);
    --ac-radius: 6px;
    --ac-radius-lg: 10px;
    --ac-transition: 0.2s ease;

    /* Override Calcite brand tokens */
    --calcite-color-brand: var(--ac-primary);
    --calcite-color-brand-hover: var(--ac-primary-light);
    --calcite-color-brand-press: var(--ac-dark);
    --calcite-font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* ── Global ───────────────────────────────────────────────────────── */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    background: var(--ac-background);
    color: var(--ac-text);
    overflow: hidden;
}

calcite-shell {
    --calcite-shell-border-color: transparent;
}

.hidden {
    display: none !important;
}

/* Utility for screen-reader-only content */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── Header ───────────────────────────────────────────────────────── */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* The department's blue band. Its logo has white lettering, so the
       header must stay dark enough for it. */
    background: var(--ac-primary);
    color: #ffffff;
    padding: 0 24px;
    height: 88px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    z-index: 10;
    position: relative;
    border-bottom: 4px solid var(--ac-accent);
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 18px;
}

.header-logo {
    height: 58px;
    width: auto;
}

/* Divider between the logo and the map's own title */
.header-titles {
    border-left: 1px solid rgba(255, 255, 255, 0.45);
    padding-left: 18px;
}

.header-titles h1 {
    font-family: "Poppins", Arial, sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.2px;
    color: #ffffff;
}

.header-titles h2 {
    font-size: 13px;
    font-weight: 400;
    margin: 2px 0 0;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.88);
}

/* Header action buttons */
.header-actions calcite-action-bar {
    --calcite-action-background-color: transparent;
    --calcite-color-foreground-1: transparent;
    --calcite-color-text-1: #ffffff;
    background: transparent;
}

.header-actions calcite-action {
    --calcite-action-background-color: transparent;
    --calcite-color-foreground-1: transparent;
    --calcite-color-text-1: #ffffff;
    --calcite-color-text-3: #ffffff;
    --calcite-action-indicator-color: #ffffff;
    --calcite-action-background-color-hover: rgba(255, 255, 255, 0.14);
    --calcite-action-background-color-press: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    transition: all var(--ac-transition);
    width: 64px;
    height: 64px;
    --calcite-font-size-0: 24px;
}

.header-actions calcite-action:hover {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    --calcite-color-text-1: #ffffff;
}

/* An open tool's button stays lit */
.header-actions calcite-action[active] {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* ── Map View ─────────────────────────────────────────────────────── */
#viewDiv {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
}

.esri-ui-corner .esri-component {
    border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow);
}

/* Push default top-left Esri widgets (zoom) below floating search */
.esri-ui-top-left {
    top: 80px !important;
}

@media (max-width: 768px) {
    .esri-ui-top-left {
        top: 72px !important;
    }
}

/* ── Floating Search Overlay ─────────────────────────────────────── */
.floating-search {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 380px;
    max-width: calc(100vw - 32px);
    z-index: 50;
    pointer-events: none;
}

.floating-search > * {
    pointer-events: auto;
}

.floating-search-bar {
    display: flex;
    align-items: stretch;
    gap: 6px;
    background: #ffffff;
    border-radius: 28px 4px 4px 28px;
    box-shadow: var(--ac-shadow-lg);
    padding: 4px;
}

.floating-search-bar .search-box {
    flex: 1;
    padding: 0;
    border-bottom: none;
    background: transparent;
}

/* The search button. Filled and circular: this is the control that runs the
   search, so it carries the weight in the bar. */
.floating-search-bar .search-submit {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    --calcite-color-brand: var(--ac-accent);
    --calcite-color-brand-hover: var(--ac-accent-hover);
    align-self: center;
}

.floating-search-bar .search-submit::part(button) {
    border-radius: 50% !important;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
}

/* Advanced Sales Search. Outlined and labelled rather than a filled magnifier,
   so it reads as a second, different control: it opens a filter panel and does
   not run the search. */
.floating-search-bar .advanced-toggle {
    flex-shrink: 0;
    height: 44px;
    align-self: center;
    --calcite-color-brand: var(--ac-accent);
    --calcite-color-brand-hover: var(--ac-accent-hover);
}

.floating-search-bar .advanced-toggle::part(button) {
    height: 44px;
    border-radius: 22px;
    padding: 0 14px;
    justify-content: center;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.floating-results {
    margin-top: 8px;
    background: #ffffff;
    border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow-lg);
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

.floating-advanced {
    margin-top: 8px;
    background: #ffffff;
    border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow-lg);
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    --calcite-block-header-background: transparent;
}

/* Layers and Legend panels.
   Docked to the left, under the floating search and the zoom buttons, so they
   never sit under the Property Details pane and need no offset tied to its
   width. Anchored top and bottom so the panel sizes itself to the window and
   stops short of the scale bar and basemap switcher. */
.floating-layers {
    position: absolute;
    top: 180px;
    left: 16px;
    bottom: 80px;
    /* calcite-panel sets its own height, which over-constrains the box and
       makes `bottom` be ignored — without this the panel runs past the
       bottom of the window and over the scale bar */
    height: auto;
    width: 360px;
    max-width: calc(100vw - 32px);
    z-index: 55;
    box-shadow: var(--ac-shadow-lg);
    border-radius: var(--ac-radius);
    overflow: hidden;
}

#btnToggleLayers[active] {
    background: var(--ac-highlight);
    border-radius: 4px;
}

/* ── Select Parcel pill switch ────────────────────────────────────── */
/* .header-actions defaulted to display:block, which stacked the pill above the
   action bar and pushed the tool icons out of the fixed-height header. Lay the
   two out as a row instead. */
.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.identify-toggle {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--ac-border);
    border-radius: 999px;
    background: var(--ac-surface);
    white-space: nowrap;
    transition: border-color var(--ac-transition), background var(--ac-transition);
}

/* On is the resting state, so the pill carries the accent while active and
   drains to neutral when off — the state reads without parsing the switch. */
.identify-toggle:not(.is-off) {
    border-color: var(--ac-accent);
    background: rgba(23, 135, 68, 0.06);
}

.identify-toggle calcite-switch {
    --calcite-color-brand: var(--ac-accent);
    --calcite-color-brand-hover: var(--ac-accent-hover);
    --calcite-color-brand-press: var(--ac-accent-hover);
}

.identify-toggle-label {
    font-family: "Poppins", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--ac-accent);
    cursor: pointer;
    user-select: none;
}

.identify-toggle.is-off .identify-toggle-label {
    color: var(--ac-text-muted);
    font-weight: 500;
}

.identify-info {
    --calcite-ui-icon-color: var(--ac-text-muted);
    cursor: help;
    border-radius: 50%;
    transition: color var(--ac-transition);
}

.identify-info:hover,
.identify-info:focus-visible {
    --calcite-ui-icon-color: var(--ac-accent);
}

.identify-info:focus-visible {
    outline: 2px solid var(--ac-accent);
    outline-offset: 2px;
}

.identify-toggle.is-disabled {
    opacity: 0.45;
}

.identify-toggle.is-disabled .identify-toggle-label {
    cursor: not-allowed;
}

/* The header gets crowded on tablets — drop the wording, keep switch + info */
@media (max-width: 1100px) {
    .identify-toggle-label {
        display: none;
    }
}

/* ── Right Panel (Property Details) ──────────────────────────────── */
#rightPanel {
    --calcite-shell-panel-width: 400px;
    --calcite-shell-panel-max-width: 450px;
}

#rightPanel:not([collapsed]) {
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
}

/* ── Bottom Results Panel ────────────────────────────────────────── */
.bottom-results-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    z-index: 100;
    background: #ffffff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    transition: height 0.3s ease, transform 0.3s ease;
    transform: translateY(0);
}

.bottom-results-panel.hidden {
    transform: translateY(100%);
    pointer-events: none;
}

.bottom-results-panel.collapsed {
    height: 56px;
    overflow: hidden;
}

.sales-table-container {
    height: calc(300px - 56px);
    overflow: auto;
}

.sales-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.sales-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.sales-table th {
    background: var(--ac-primary);
    color: #ffffff;
    padding: 6px 10px;
    text-align: left;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sales-table td {
    padding: 5px 10px;
    border-bottom: 1px solid #e8e8e8;
    white-space: nowrap;
}

.sales-table tbody tr:hover {
    background: rgba(0, 117, 165, 0.06);
}

.sales-table tbody tr.selected {
    background: rgba(23, 135, 68, 0.12);
    font-weight: 500;
}

.sales-table .action-cell {
    display: flex;
    gap: 2px;
}

/* ── Search Box ───────────────────────────────────────────────────── */
.search-box {
    padding: 12px;
    position: relative;
    background: #ffffff;
    border-bottom: 1px solid var(--ac-border);
}

/* Native search input (replaces calcite-input to avoid shadow-DOM styling issues) */
.native-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: 44px;
    border-radius: 24px;
    border: 1px solid #ccc;
    background: #ffffff;
}

.native-search-icon {
    color: var(--ac-text-secondary);
    flex-shrink: 0;
}

.native-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: var(--ac-text);
    padding: 0;
    min-width: 0;
}

.native-search input::placeholder {
    color: var(--ac-text-secondary);
}

.native-search-clear {
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--ac-text-secondary);
    border-radius: 50%;
    flex-shrink: 0;
}

.native-search-clear:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--ac-text);
}

.native-search.has-value .native-search-clear {
    display: inline-flex;
}

.search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow-lg);
    z-index: 100;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
}

.search-suggestion-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid #f0f0f0;
    transition: background var(--ac-transition);
    color: var(--ac-text);
}

/* Both dropdowns: suggestion on the left, its source on the right */
.search-suggestion-item,
.mobile-search-suggestions .suggestion-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.suggestion-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Secondary rather than muted text: the muted token is 3.49:1 on white and
   fails WCAG AA; this is 7.56:1. */
.suggestion-kind {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--ac-text-secondary);
}

.search-suggestion-item:hover {
    background: var(--ac-highlight);
    color: var(--ac-primary);
}

.search-suggestion-item:last-child {
    border-bottom: none;
}

.search-results {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
}

/* ── COMPS Controls ───────────────────────────────────────────────── */
#compsBlock {
    --calcite-block-header-background: transparent;
    overflow-x: hidden;
    max-width: 100%;
}

.comps-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
    overflow: hidden;
    max-width: 100%;
}

.date-range,
.price-range {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 100%;
}

.date-range>*,
.price-range>* {
    min-width: 0;
    flex: 1 1 auto;
}

.range-sep {
    font-size: 12px;
    color: var(--ac-text-muted);
    flex-shrink: 0;
    flex: 0 0 auto;
}

.comps-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

/* Override the COMPS search button to use the accent orange */
#btnCompsSearch {
    --calcite-color-brand: var(--ac-accent);
    --calcite-color-brand-hover: var(--ac-accent-hover);
    --calcite-color-brand-press: #9e5220;
    font-weight: 600;
}

/* ── PIN Banner ───────────────────────────────────────────────────── */
.pin-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--ac-primary);
    color: white;
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.pin-banner calcite-icon {
    --calcite-ui-icon-color: rgba(255, 255, 255, 0.8);
}

/* ── Detail Panels ────────────────────────────────────────────────── */
.detail-section {
    padding: 8px 0;
}

/* Addresses on parcel list */
.addresses-on-parcel .address-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 13px;
    border-bottom: 1px solid #eef0ec;
    color: var(--ac-text);
}

.addresses-on-parcel .address-item:last-child {
    border-bottom: none;
}

.detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* `th` is included for row-header cells (<th scope="row">), which carry the
   label for the value beside them. Without the explicit left alignment they
   would centre, since that is the browser default for th. */
.detail-table td,
.detail-table th {
    padding: 7px 10px;
    border-bottom: 1px solid #eef0ec;
    vertical-align: top;
    text-align: left;
}

.detail-table .label {
    font-weight: 600;
    color: var(--ac-text-secondary);
    white-space: nowrap;
    width: 40%;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-table td:last-child {
    color: var(--ac-text);
    font-weight: 400;
    word-break: break-word;
}

.value-highlight {
    font-weight: 700 !important;
    color: var(--ac-primary) !important;
    font-size: 15px;
}

.legal-desc {
    font-size: 12px;
    line-height: 1.7;
    color: var(--ac-text-secondary);
    padding: 10px 12px;
    background: #f5f6f3;
    border-radius: var(--ac-radius);
    border-left: 3px solid var(--ac-primary-light);
    margin: 4px 0;
}

.assessment-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding: 0 4px;
}

/* ── Details Panel Tabs ───────────────────────────────────────────── */
/* A 5-column grid, not calcite-tabs. calcite-tab-nav scrolls its strip and
   grows chevron buttons once the heads overflow; a grid of equal fractions
   cannot overflow, so all five stay visible at every panel width. */
.details-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--ac-surface);
    border-bottom: 1px solid var(--ac-border);
    position: sticky;
    top: 0;
    z-index: 3;
}

.details-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* min-width:0 lets a grid child shrink below its content width, which is
       what keeps long labels from forcing the strip wider than the panel. */
    min-width: 0;
    padding: 9px 2px 7px;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--ac-text-secondary);
    font-family: "Poppins", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: color var(--ac-transition), background var(--ac-transition),
        border-color var(--ac-transition);
}

.details-tab-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.details-tab calcite-icon {
    --calcite-ui-icon-color: currentColor;
}

.details-tab:hover {
    color: var(--ac-primary);
    background: var(--ac-highlight);
}

.details-tab:focus-visible {
    outline: 2px solid var(--ac-accent);
    outline-offset: -2px;
}

.details-tab.active {
    color: var(--ac-primary);
    font-weight: 600;
    border-bottom-color: var(--ac-accent);
}

.details-panels {
    padding-bottom: 24px;
}

.details-panel[hidden] {
    display: none;
}

/* Very narrow panels (small phones): drop the labels rather than let the
   heads shrink into unreadable slivers. The icon and title tooltip remain. */
@media (max-width: 360px) {
    .details-tab-label {
        display: none;
    }

    .details-tab {
        padding: 11px 2px;
    }
}

/* Tab styling — now used only by the Help & Info modal */
calcite-tab-nav {
    --calcite-color-brand: var(--ac-primary);
}

calcite-tab-title[selected] {
    --calcite-color-brand: var(--ac-primary);
}

/* Tab scroll chevrons — orange accent background to pop */
calcite-tab-nav::part(scroll-button),
calcite-tab-nav::part(scroll-backward-button),
calcite-tab-nav::part(scroll-forward-button),
calcite-tab-nav::part(scroll-button-start),
calcite-tab-nav::part(scroll-button-end) {
    background-color: var(--ac-accent) !important;
    --calcite-color-foreground-1: var(--ac-accent) !important;
    --calcite-color-foreground-2: var(--ac-accent-hover) !important;
    --calcite-color-text-1: #ffffff !important;
    --calcite-color-text-3: #ffffff !important;
    --calcite-ui-icon-color: #ffffff !important;
    color: #ffffff !important;
}

/* ── Vote Centers & Sample Ballots ────────────────────────────────── */
.vote-centers {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
}

.vote-center {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--ac-border);
}

.vote-center:last-child {
    border-bottom: none;
}

.vote-center-name {
    font-weight: 600;
    color: var(--ac-text);
    line-height: 1.3;
}

.vote-center-addr {
    color: var(--ac-text-secondary);
    font-size: 13px;
}

.vote-center-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
}

.vote-chip {
    font-size: 11px;
    line-height: 1.5;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--ac-highlight);
    color: var(--ac-primary);
    white-space: nowrap;
}

/* First chip is the distance — the reason this list is ordered the way it
   is, so give it the accent rather than the flat brand tint. */
.vote-chip:first-child {
    background: var(--ac-accent);
    color: #ffffff;
    font-weight: 600;
}

.vote-center-empty {
    padding: 10px 4px;
    color: var(--ac-text-muted);
    font-size: 13px;
}

/* Inline link inside a calcite-notice message. The message is slotted light
   DOM, so it takes ordinary CSS — no shadow-part needed. */
.notice-link {
    color: var(--ac-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.notice-link:hover,
.notice-link:focus-visible {
    color: var(--ac-accent);
}

.sample-ballots {
    margin-top: 10px;
}

.ballot-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ac-text-muted);
    margin-bottom: 6px;
}

.ballot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ballot-link {
    display: inline-block;
    padding: 4px 11px;
    border: 1px solid var(--ac-primary);
    border-radius: var(--ac-radius);
    color: var(--ac-primary);
    background: var(--ac-surface);
    font-size: 12.5px;
    text-decoration: none;
    transition: background var(--ac-transition), color var(--ac-transition);
}

.ballot-link:hover,
.ballot-link:focus-visible {
    background: var(--ac-primary);
    color: #ffffff;
}

/* ── Image Gallery ────────────────────────────────────────────────── */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    padding: 8px;
}

.image-gallery img {
    width: 100%;
    height: auto;
    border-radius: var(--ac-radius);
    cursor: pointer;
    transition: transform var(--ac-transition), box-shadow var(--ac-transition);
    box-shadow: var(--ac-shadow-sm);
}

.image-gallery img:hover {
    transform: scale(1.03);
    box-shadow: var(--ac-shadow);
}

/* ── Sales Table ──────────────────────────────────────────────────── */
.sales-table-container {
    overflow: auto;
    max-height: 100%;
}

.sales-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 1200px;
}

.sales-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

.sales-table th {
    background: var(--ac-dark);
    color: white;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 8px;
    text-align: left;
    white-space: nowrap;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.sales-table th:last-child {
    border-right: none;
}

/* ── Sortable headers ── */
.sales-table th[data-sort-type] {
    cursor: pointer;
    user-select: none;
    /* room for the indicator so the label never shifts when it appears */
    padding-right: 20px;
    position: relative;
    transition: background var(--ac-transition);
}

.sales-table th[data-sort-type]:hover {
    background: var(--ac-primary);
}

.sales-table th[data-sort-type]:focus-visible {
    outline: 2px solid var(--ac-accent);
    outline-offset: -2px;
}

/* Neutral hint on hover, solid arrow once a column is active */
.sales-table th[data-sort-type]::after {
    content: "";
    position: absolute;
    right: 7px;
    top: 50%;
    margin-top: -2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: 0;
    transition: opacity var(--ac-transition);
}

.sales-table th[data-sort-type]:hover::after {
    opacity: 0.45;
    border-top: 5px solid #ffffff;
}

.sales-table th.sorted-asc::after {
    opacity: 1;
    border-bottom: 5px solid var(--ac-accent);
    border-top: none;
    margin-top: -3px;
}

.sales-table th.sorted-desc::after {
    opacity: 1;
    border-top: 5px solid var(--ac-accent);
    border-bottom: none;
}

.sales-table th.sorted-asc,
.sales-table th.sorted-desc {
    background: var(--ac-primary);
}

.sales-table td {
    padding: 8px;
    border-bottom: 1px solid #eef0ec;
    white-space: nowrap;
}

.sales-table tbody tr {
    transition: background var(--ac-transition);
    cursor: pointer;
}

.sales-table tbody tr:nth-child(even) {
    background: #fafbf9;
}

.sales-table tbody tr:hover {
    background: var(--ac-highlight);
}

.sales-table tbody tr.selected {
    background: rgba(0, 141, 150, 0.15);
    font-weight: 500;
}

.sales-table .action-cell {
    display: flex;
    gap: 4px;
}

/* ── Details Pane Edge Toggle (desktop) ───────────────────────────── */
/* Width of the open right pane (calcite width-scale="l"). The handle rides
   just inside that edge when the pane is open, and against the window edge
   when it is hidden. */
:root {
    --ac-details-width: 416px;
}

.details-edge-toggle {
    display: none;
    /* revealed at >1024px once a parcel has been loaded */
    position: fixed;
    top: 50%;
    right: var(--ac-details-width);
    transform: translateY(-50%);
    z-index: 40;
    align-items: center;
    gap: 4px;
    writing-mode: vertical-rl;
    padding: 14px 6px;
    border: none;
    border-radius: 8px 0 0 8px;
    background: var(--ac-primary);
    color: #ffffff;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    cursor: pointer;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.18);
    transition: right 0.25s ease, background var(--ac-transition);
}

.details-edge-toggle:hover {
    background: var(--ac-primary-light);
}

.details-edge-toggle:focus-visible {
    outline: 2px solid var(--ac-accent);
    outline-offset: 2px;
}

/* Pane hidden: sit against the window edge instead */
.details-edge-toggle.panel-hidden {
    right: 0;
}

.details-edge-toggle calcite-icon {
    /* the icon is rotated by writing-mode; keep it upright */
    writing-mode: horizontal-tb;
}

@media (min-width: 1025px) {
    .details-edge-toggle:not(.hidden) {
        display: flex;
    }
}

/* ── Clear Map Results ────────────────────────────────────────────── */
/* Positioned by the MapView UI (top-right), so no absolute placement here —
   only the drop shadow that lifts it off the imagery. */
.map-clear-bar {
    box-shadow: var(--ac-shadow);
    border-radius: var(--ac-radius);
    overflow: hidden;
}

.map-clear-bar calcite-button {
    --calcite-color-danger: var(--ac-accent);
    --calcite-color-danger-hover: var(--ac-accent-hover);
    --calcite-color-danger-press: var(--ac-accent-hover);
}

/* At these widths the floating search spans the full map, so the top-right
   slot sits underneath it. Drop the button clear of the search instead. */
@media (max-width: 1024px) {
    .map-clear-bar {
        margin-top: 60px;
    }
}

/* ── Basemap Switcher ─────────────────────────────────────────────── */
.basemap-switcher {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.pillbox {
    position: relative;
    display: inline-flex;
    background: var(--ac-surface);
    padding: 4px;
    border-radius: 24px;
    box-shadow: var(--ac-shadow-lg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    gap: 0;
}

.pill-indicator {
    position: absolute;
    top: 4px;
    left: 0;
    height: calc(100% - 8px);
    background: var(--ac-accent);
    border-radius: 20px;
    transition: transform 0.3s ease, width 0.3s ease;
    z-index: 0;
}

.pill-btn {
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
    padding: 6px 18px;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    color: var(--ac-text);
    cursor: pointer;
    border-radius: 20px;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.pill-btn:hover:not(.active) {
    background: rgba(0, 0, 0, 0.05);
}

.pill-btn.active {
    color: #ffffff;
}

/* ── Historical Slider ────────────────────────────────────────────── */
/* ── Aerial Timeline Widget ──────────────────────────────────────── */
.aerial-timeline {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    background: var(--ac-surface);
    padding: 14px 24px 10px;
    border-radius: var(--ac-radius-lg);
    box-shadow: var(--ac-shadow-lg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    min-width: 600px;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.aerial-timeline.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(20px);
}

.timeline-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.timeline-title {
    font-family: "Poppins", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ac-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timeline-year {
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--ac-accent);
    margin-left: auto;
}

.timeline-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--ac-text-muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.2s;
}

.timeline-close:hover {
    color: var(--ac-text);
}

.timeline-track-wrapper {
    position: relative;
    padding-bottom: 22px;
}

/* Custom range slider */
.timeline-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--ac-accent) 0%, var(--ac-accent) var(--fill, 100%), #ddd var(--fill, 100%), #ddd 100%);
    outline: none;
    cursor: pointer;
}

.timeline-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ac-accent);
    border: 3px solid #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
    cursor: grab;
    transition: transform 0.15s ease;
}

.timeline-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.timeline-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

.timeline-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ac-accent);
    border: 3px solid #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
    cursor: grab;
}

.timeline-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 10px;
    color: var(--ac-text-muted);
    user-select: none;
}

.timeline-labels span {
    text-align: center;
    flex: 1;
    cursor: pointer;
    transition: color 0.2s;
}

.timeline-labels span:hover {
    color: var(--ac-accent);
}

.timeline-labels span.active {
    color: var(--ac-accent);
    font-weight: 700;
}

/* ── Tool Panels ──────────────────────────────────────────────────── */
.tool-panel {
    position: absolute;
    top: 108px;
    right: 15px;
    z-index: 20;
    background: var(--ac-surface);
    padding: 16px;
    border-radius: var(--ac-radius-lg);
    box-shadow: var(--ac-shadow-lg);
    min-width: 280px;
    max-width: min(520px, calc(100vw - 30px));
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Each tool panel sits a little lower than the one before it, loosely
   tracking its button's place in the toolbar. Only one is ever open at a
   time, so this is orientation rather than collision avoidance. */
#drawPanel {
    top: 145px;
}

#printPanel {
    top: 170px;
}

#mailingPanel {
    top: 220px;
}

.tool-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

/* The Sketch widget brings its own surface; drop its outer frame so it sits
   in the panel rather than looking like a second card inside one. */
#drawPanel .esri-sketch,
#drawPanel .esri-sketch__panel {
    background: transparent;
    box-shadow: none;
    border: none;
}

#drawPanel .esri-sketch__info-panel {
    margin-bottom: 4px;
}

/* ── Draggable floating panels ───────────────────────────────────── */
/* Layers and Legend can be open together, so either may need moving out of
   the way. The header is the grab area; the panel keeps its stylesheet
   position until the first drag, at which point js/legend.js writes explicit
   left/top and these rules only have to signal the state. The attribute is
   set by makePanelDraggable(), so styling follows the behaviour. */
[data-draggable]::part(header),
[data-draggable] [slot="header-content"] {
    cursor: move;
}

[data-draggable].is-dragging {
    /* Lifts it over the other floating panel while it is being moved, and
       stops text selection fighting the drag. */
    z-index: 60;
    user-select: none;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

[data-draggable].is-dragging,
[data-draggable].is-dragging * {
    cursor: grabbing !important;
}

/* Side by side rather than stacked, so opening both is actually useful.
   Each is draggable, so this is only the starting arrangement. Below this
   width there is no room for two, and they open on top of each other with
   the most recent in front — moving one aside is then the way out. */
@media (min-width: 1100px) {
    #legendPanel {
        left: 392px;
    }
}

/* ── Legend: collapsible layer sections ──────────────────────────── */
/* Esri's Legend renders one .esri-legend__service per layer: a heading
   followed by the swatches. The heading is given button semantics in
   js/legend.js; these rules give it the affordance and do the hiding. */
#legendContainer .esri-legend__service-label {
    position: relative;
    cursor: pointer;
    padding-inline-start: 18px;
    border-radius: 3px;
}

#legendContainer .esri-legend__service-label::before {
    content: "";
    position: absolute;
    inset-inline-start: 2px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    /* Points down when open, right when collapsed */
    transform: translateY(-70%) rotate(45deg);
    transition: transform 120ms ease;
    opacity: 0.65;
}

#legendContainer .esri-legend__service.is-collapsed .esri-legend__service-label::before {
    transform: translateY(-50%) rotate(-45deg);
}

#legendContainer .esri-legend__service-label:hover {
    background: var(--ac-highlight, rgba(0, 0, 0, 0.05));
}

#legendContainer .esri-legend__service-label:focus-visible {
    outline: 2px solid var(--ac-accent);
    outline-offset: 1px;
}

#legendContainer .esri-legend__service.is-collapsed .esri-legend__layer {
    display: none;
}

/* The second line of a stacked value, e.g. the floodplain zone subtype
   under its zone. Quieter than the value above it, since it qualifies it. */
.plan-subvalue {
    color: var(--ac-text-secondary);
    font-size: 0.92em;
}

.draw-hint {
    margin: 10px 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ac-text-secondary);
}

.tool-panel-title {
    font-family: "Poppins", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--ac-text);
    letter-spacing: 0.2px;
}

.mailing-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.mailing-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--ac-text-secondary);
    margin: 8px 0;
}

.mailing-list {
    max-height: 240px;
    overflow: auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
}

.mailing-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 10px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.mailing-row:last-child {
    border-bottom: none;
}

.mailing-primary {
    font-weight: 700;
    color: var(--ac-text);
    font-size: 12px;
}

.mailing-secondary {
    font-size: 12px;
    color: var(--ac-text-secondary);
    margin-top: 2px;
    line-height: 1.25;
}

.mailing-empty {
    padding: 12px;
    font-size: 12px;
    color: var(--ac-text-secondary);
}

@media (max-width: 640px) {
    .tools-panel {
        flex-direction: column;
    }

    .tools-col {
        min-width: 0;
    }
}

/* ── Coordinate Display ───────────────────────────────────────────── */
.coord-display {
    position: absolute;
    bottom: 30px;
    right: 15px;
    z-index: 5;
    background: var(--ac-dark);
    color: #ffffff !important;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-family: "Consolas", "Courier New", monospace;
    box-shadow: var(--ac-shadow);
}

.coord-display * {
    color: #ffffff !important;
}

/* ── Disclaimer Modal ─────────────────────────────────────────────── */
#disclaimerDialog {
    --calcite-dialog-scrim-background: rgba(0, 72, 73, 0.6);
}

.disclaimer-content {
    font-size: 13px;
    line-height: 1.7;
    color: var(--ac-text-secondary);
}

.disclaimer-content p {
    margin-bottom: 12px;
}

#disclaimerAccept {
    --calcite-color-brand: var(--ac-accent);
    --calcite-color-brand-hover: var(--ac-accent-hover);
    font-weight: 600;
}

/* ── Calcite Component Overrides ──────────────────────────────────── */
/* Panel headings use Poppins */
calcite-panel {
    --calcite-font-family: Arial, sans-serif;
}

calcite-block {
    --calcite-font-family: Arial, sans-serif;
}

calcite-block[heading] {
    font-family: "Poppins", Arial, sans-serif;
}

/* List items */
calcite-list-item:hover {
    --calcite-color-foreground-2: var(--ac-highlight);
}

/* Notices */
calcite-notice[kind="info"] {
    --calcite-color-status-info: var(--ac-primary-light);
}

/* Loader */
calcite-loader {
    --calcite-color-brand: var(--ac-primary-light);
}

/* ── Help & Info Modal ───────────────────────────────────────────── */
#helpInfoModal {
    --calcite-dialog-size-x: 90vw;
    --calcite-dialog-size-y: 85vh;
}

.help-modal-content {
    padding: 16px 8px;
    min-height: 60vh;
}

.help-section {
    padding: 16px 8px;
    line-height: 1.7;
    color: var(--ac-text);
}

.help-section h3 {
    font-family: "Poppins", Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--ac-primary);
    margin: 0 0 12px;
}

.help-steps {
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 15px;
}

.help-steps li {
    padding: 4px 0;
}

.help-section a {
    color: var(--ac-accent);
    text-decoration: none;
    font-weight: 500;
}

.help-section a:hover {
    text-decoration: underline;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .header-titles h2 {
        display: none;
    }

    .header-titles h1 {
        font-size: 15px;
    }

    .header-logo {
        height: 28px;
    }

    .app-header {
        padding: 0 10px;
        height: 48px;
    }

    .historical-slider {
        min-width: 280px;
    }

    .basemap-switcher {
        bottom: 20px;
    }

    .aerial-timeline {
        min-width: auto;
        width: calc(100vw - 20px);
        left: 50%;
        transform: translateX(-50%);
        padding: 12px 14px 8px;
        bottom: 60px;
    }

    .floating-search {
        top: 8px;
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
    }

    /* ── Collapsible search (phones) ──
       Expanded, the search bar spans the top of the map and hides it. On
       phones it collapses to a single button and expands on demand. */
    .floating-search.collapsed {
        right: auto;
        /* shrink the container too, so it stops covering the map */
        width: auto;
    }

    .floating-search.collapsed .floating-search-bar,
    .floating-search.collapsed .search-results,
    .floating-search.collapsed .floating-advanced {
        display: none;
    }

    .search-expand-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 50%;
        background: var(--ac-surface);
        color: var(--ac-primary);
        box-shadow: var(--ac-shadow-lg);
        cursor: pointer;
        pointer-events: auto;
    }

    .floating-search:not(.collapsed) .search-expand-btn {
        display: none;
    }

    .search-expand-btn:focus-visible,
    .search-collapse-btn:focus-visible {
        outline: 2px solid var(--ac-accent);
        outline-offset: 2px;
    }

    .search-collapse-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 36px;
        height: 44px;
        border: none;
        background: transparent;
        color: var(--ac-text-secondary);
        cursor: pointer;
        align-self: center;
    }

    .floating-layers {
        /* On phones the search collapses to a button, so the panel can sit
           near the top and use the full width */
        top: 60px;
        bottom: 16px;
        right: 8px;
        width: auto;
        left: 8px;
    }
}

/* Above the phone breakpoint the search is always open, so neither control
   is needed. */
@media (min-width: 769px) {

    .search-expand-btn,
    .search-collapse-btn {
        display: none;
    }
}

@media (max-width: 480px) {
    .header-actions {
        display: none;
    }
}

/* ── Mobile Hamburger Menu ───────────────────────────────────────── */
.mobile-menu-wrapper {
    display: none;
    position: relative;
}

.mobile-menu-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    transition: background 0.2s ease;
}

.mobile-menu-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

.mobile-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--ac-surface);
    border-radius: var(--ac-radius-lg);
    box-shadow: var(--ac-shadow-lg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    min-width: 180px;
    overflow: hidden;
    z-index: 50;
}

.mobile-menu-heading {
    padding: 10px 16px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ac-text-secondary);
}

.mobile-menu-divider {
    height: 1px;
    background: var(--ac-border);
    margin: 4px 12px;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 14px;
    color: var(--ac-text);
    cursor: pointer;
    transition: background 0.15s ease;
}

.mobile-menu-item:hover {
    background: var(--ac-highlight);
}

.mobile-menu-item.active {
    background: var(--ac-accent);
    color: #ffffff;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .mobile-menu-wrapper {
        display: block;
    }

    .basemap-switcher {
        display: none !important;
    }
}

/* ── Mobile Floating Search ──────────────────────────────────────── */
.mobile-search-bar {
    position: fixed;
    top: 58px;
    left: 10px;
    right: 10px;
    z-index: 20;
    display: none;
}

.mobile-search-bar.visible {
    display: block;
}

.mobile-search-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border-radius: 28px;
    padding: 8px 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.mobile-search-icon {
    color: var(--ac-text-secondary);
    flex-shrink: 0;
}

.mobile-search-bar input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 15px;
    color: var(--ac-text);
    padding: 6px 0;
}

.mobile-search-bar input::placeholder {
    color: var(--ac-text-secondary);
}

.mobile-search-close {
    background: transparent;
    border: none;
    color: var(--ac-text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.mobile-search-close:hover {
    background: var(--ac-highlight);
}

.mobile-search-suggestions {
    margin-top: 6px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.06);
    max-height: 50vh;
    overflow-y: auto;
}

.mobile-search-suggestions .suggestion-item {
    padding: 12px 16px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background 0.15s;
}

.mobile-search-suggestions .suggestion-item:last-child {
    border-bottom: none;
}

.mobile-search-suggestions .suggestion-item:hover {
    background: var(--ac-highlight);
}

.mobile-details-toggle {
    display: none;
}

@media (max-width: 768px) {

    /* Bottom sheet toggle button */
    .mobile-details-toggle {
        display: flex;
        position: fixed;
        bottom: 65vh;
        left: 0;
        right: 0;
        z-index: 35;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--ac-accent);
        color: #ffffff;
        border: none;
        padding: 10px 20px;
        font-family: "Poppins", Arial, sans-serif;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
        border-radius: 12px 12px 0 0;
        transition: bottom 0.35s ease, background 0.2s ease;
    }

    .mobile-details-toggle.collapsed {
        bottom: 0;
    }

    .mobile-details-toggle.hidden {
        display: none !important;
    }

    /* Right panel as bottom sheet */
    #rightPanel {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 65vh !important;
        z-index: 30 !important;
        transition: transform 0.35s ease !important;
        border-radius: 0 !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
        --calcite-shell-panel-spacing: 0 !important;
        --calcite-internal-shell-panel-spacing: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    #rightPanel::part(content) {
        padding: 0 !important;
        margin: 0 !important;
    }

    #rightPanel[collapsed] {
        transform: translateY(100%) !important;
    }

    #rightPanel:not([collapsed]) {
        transform: translateY(0) !important;
    }

    #detailsPanel {
        height: 100%;
        overflow-y: auto;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        inline-size: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        --calcite-panel-width: 100% !important;
    }

    calcite-panel#detailsPanel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        inline-size: 100% !important;
    }

    #detailsPanel::part(container) {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ===================================================================
   Parks additions
   =================================================================== */

/* ── Park banner (replaces the county viewers' PIN banner) ────────── */
.park-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--ac-accent);
    color: #ffffff;
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 600;
    font-size: 17px;
}

.park-banner-text {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.status-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.status-badge.closed {
    background: #b42318;
    color: #ffffff;
}

#detailsBody.is-loading {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* ── Clicked feature summary ──────────────────────────────────────── */
.selected-feature {
    margin: 12px 12px 0;
    padding: 10px 12px;
    border: 1px solid var(--ac-border);
    border-left: 4px solid var(--ac-primary);
    border-radius: var(--ac-radius);
    background: var(--ac-highlight);
}

.selected-feature-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.selected-feature-title {
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--ac-dark);
}

.selected-feature .detail-table {
    margin-top: 4px;
}

/* Count beside a tab's label, e.g. "Activities 6" */
.tab-count:not(:empty) {
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--ac-accent);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
}

/* ── Activity / trail lists ───────────────────────────────────────── */
.park-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.park-item {
    padding: 10px 4px;
    border-bottom: 1px solid var(--ac-border);
}

.park-item:last-child {
    border-bottom: none;
}

.park-item-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.park-item-title {
    font-weight: 600;
    color: var(--ac-text);
}

.park-item-kind {
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(0, 117, 165, 0.12);
    color: var(--ac-dark);
    font-size: 11px;
    font-weight: 600;
}

.park-item-desc {
    margin-top: 2px;
    color: var(--ac-text-secondary);
    font-size: 13px;
}

/* ── Search results heading ───────────────────────────────────────── */
.results-heading {
    padding: 10px 14px 6px;
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--ac-dark);
    border-bottom: 1px solid var(--ac-border);
}

/* ── Find a Park ──────────────────────────────────────────────────── */
/* Left side, under the search bar, so it never sits on top of the park
   details pane on the right. */
.nearme-panel {
    top: 172px;
    left: 16px;
    right: auto;
    width: 380px;
    min-width: 0;
    max-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
}

.nearme-panel:not(.hidden) {
    display: flex;
}

.nearme-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    min-height: 0;
}

.nearme-hint {
    margin: -6px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--ac-text-secondary);
}

.nearme-origin {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px 6px 10px;
    border-radius: var(--ac-radius);
    background: var(--ac-highlight);
    color: var(--ac-dark);
    font-weight: 600;
    font-size: 13px;
}

.nearme-origin #nearMeOrigin {
    flex: 1;
}

.nearme-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nearme-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ac-text-secondary);
}

.activity-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.activity-toggle {
    padding: 4px 10px;
    border: 1px solid var(--ac-border);
    border-radius: 14px;
    background: #ffffff;
    color: var(--ac-text);
    font: 12px Arial, sans-serif;
    cursor: pointer;
    transition: background var(--ac-transition), border-color var(--ac-transition);
}

.activity-toggle:hover {
    border-color: var(--ac-accent);
}

.activity-toggle[aria-pressed="true"] {
    background: var(--ac-accent);
    border-color: var(--ac-accent);
    color: #ffffff;
}

.activity-toggle:focus-visible {
    outline: 2px solid var(--ac-primary);
    outline-offset: 2px;
}

.nearme-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--ac-dark);
    margin-bottom: 4px;
}

.nearme-distance {
    font-weight: 700;
    color: var(--ac-accent);
    white-space: nowrap;
}

.measure-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.share-body {
    padding: 0 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.share-body p {
    margin-top: 0;
}

@media (max-width: 768px) {
    .header-titles {
        border-left: none;
        padding-left: 0;
    }

    /* Below the round search button (header 52px + 8px + 44px button) */
    .tool-panel {
        top: 112px;
    }

    .nearme-panel {
        top: 112px;
        left: 8px;
        right: 8px;
        width: auto;
        max-height: calc(100vh - 180px);
    }
}