/* WarteCheck UX refresh
 * Small, shared interaction rules that keep the redesigned pages calm and
 * predictable without changing their existing component contracts. */

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid rgba(47, 112, 98, .32);
    outline-offset: 2px;
}

/* The active-park home state has one primary action and one quiet switch
   action. The secondary picker should read as a continuation, not a second
   hero card. */
.home-park-picker-secondary {
    border: 1px solid #c8e2d8;
    background: #edf8f3;
}
.home-park-picker-secondary:hover,
.home-park-picker-secondary:focus-visible {
    background: #e2f3eb;
}

.home-quick-search > i {
    margin-inline: .1rem .15rem;
}

/* Search fields use the same icon rhythm everywhere. */
.album-filters .leaderboard-park-search,
.album-park-picker .leaderboard-park-search,
.visit-plan-park-picker .leaderboard-park-search,
.ridecount-park-picker .leaderboard-park-search,
.leaderboard-filter-field .leaderboard-park-search {
    position: relative;
}
.album-filters .leaderboard-park-search > i,
.album-park-picker .leaderboard-park-search > i,
.visit-plan-park-picker .leaderboard-park-search > i,
.ridecount-park-picker .leaderboard-park-search > i,
.leaderboard-filter-field .leaderboard-park-search > i {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: .75rem;
    color: #547873;
    pointer-events: none;
    transform: translateY(-50%);
}
.album-filters .leaderboard-park-search input,
.album-park-picker .leaderboard-park-search input,
.visit-plan-park-picker .leaderboard-park-search input,
.ridecount-park-picker .leaderboard-park-search input,
.leaderboard-filter-field .leaderboard-park-search input {
    padding-left: 2.2rem;
}

/* Keep park filters readable on small screens: the text field remains first,
   while the filter chips can wrap instead of creating a hidden horizontal
   scrollbar. */
.park-filter-row {
    scrollbar-width: none;
}
.park-filter-row::-webkit-scrollbar { display: none; }
.park-filter-row > button,
.park-sort-menu > summary,
.park-more-filters > summary { min-height: 44px; }
.park-more-filters { position: relative; flex: 0 0 auto; }
.park-more-filters > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .5rem .7rem;
    color: var(--app-muted, #55736e);
    border: 1px solid var(--app-line, #dce9e5);
    border-radius: 7px;
    background: #fff;
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}
.park-more-filters > summary::-webkit-details-marker { display: none; }
.park-more-filters[open] > summary { color: #fff; border-color: var(--app-green, #0b7770); background: var(--app-green, #0b7770); }
.park-more-filter-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + .35rem);
    right: 0;
    display: grid;
    min-width: 12rem;
    gap: .3rem;
    padding: .4rem;
    border: 1px solid var(--app-line, #dce9e5);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(11, 47, 51, .16);
}
.park-more-filter-menu > button,
.park-more-filter-menu .park-sort-menu > summary {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    gap: .45rem;
    padding: .55rem .6rem;
    color: var(--app-ink, #082f34);
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: .76rem;
    font-weight: 800;
    text-align: left;
}
.park-more-filter-menu > button:hover,
.park-more-filter-menu > button.is-active,
.park-more-filter-menu .park-sort-menu > summary:hover { background: var(--app-soft, #edf8f2); }

/* Consistent empty states make a page feel intentional even with a new or
   filtered account. */
.member-empty,
.community-empty,
.album-empty,
.leaderboard-empty,
.leaderboard-search-empty {
    line-height: 1.5;
}
.member-empty > strong,
.community-empty > strong,
.album-empty > h2,
.leaderboard-empty strong,
.leaderboard-search-empty strong {
    color: var(--app-ink, #082f34);
}

/* Profile and account tabs stay one line and remain finger-friendly. */
.member-tabs a,
.profile-section-nav a {
    min-height: 44px;
    white-space: nowrap;
}

/* Give the account dashboard a clear first step: the current park is the
   primary destination, while RideCount remains an equally reachable but
   quieter shortcut. */
.member-primary-actions > a:first-child {
    color: #fff;
    border-color: #092f33;
    background: #092f33;
}
.member-primary-actions > a:first-child > i:first-child {
    color: #bce9d8;
    background: rgba(188, 233, 216, .14);
}
.member-primary-actions > a:first-child small { color: #b8d7cf; }
.member-primary-actions > a:first-child > i:last-child { color: #bce9d8; }
.member-primary-actions > a:not(:first-child) { background: #fff; }
.member-summary-strip span { min-height: 2.8rem; display: inline-flex; align-items: center; gap: .25rem; }
.member-panel > header > a { white-space: nowrap; }

/* Feed composer: one calm input row, with the album action available without
   competing with the main text field. */
.community-composer-start {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem;
}
.community-composer-start > button {
    display: flex;
    min-width: 0;
    min-height: 44px;
    flex: 1;
    align-items: center;
    padding: .65rem 1rem;
    color: #647b76;
    border: 1px solid #d5e2dc;
    border-radius: 999px;
    background: #f5f9f7;
    font: inherit;
    font-size: .86rem;
    text-align: left;
    cursor: text;
}
.community-composer-start > button:hover,
.community-composer-start > button:focus-visible {
    color: #315b56;
    border-color: #a9cdbd;
    background: #edf8f2;
}
.community-composer-album-collapsed {
    display: inline-grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    color: #1d6657;
    border: 1px solid #c5dfd3;
    border-radius: 50%;
    background: #edf8f2;
}
.community-composer-album-collapsed:hover,
.community-composer-album-collapsed:focus-visible {
    color: #fff;
    border-color: #2f7062;
    background: #2f7062;
}
.community-composer-primary-tools {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    padding-top: .15rem;
}
.community-composer-primary-tools .community-composer-album,
.community-composer-primary-tools .community-composer-options-toggle {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: .4rem;
    padding: .5rem .7rem;
    color: #2f7062;
    border: 1px solid #c9e1d5;
    border-radius: 8px;
    background: #edf8f2;
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
}
.community-composer-primary-tools .community-composer-options-toggle {
    color: #5c7771;
    border-color: #d8e5df;
    background: #fff;
    cursor: pointer;
}
.community-composer-primary-tools .community-composer-album:hover,
.community-composer-primary-tools .community-composer-album:focus-visible,
.community-composer-primary-tools .community-composer-options-toggle:hover,
.community-composer-primary-tools .community-composer-options-toggle:focus-visible {
    color: #173f39;
    border-color: #9fcbbb;
    background: #e3f3eb;
}
.community-composer-advanced-link {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: .4rem;
    padding: .45rem .6rem;
    color: #2f7062;
    border: 1px solid #d2e4dc;
    border-radius: 7px;
    background: #fff;
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
}
.community-composer-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-top: .7rem;
    border-top: 1px solid #e5eee9;
}
.community-composer-tools > div { display: flex; align-items: center; gap: .45rem; }
.community-composer-draft-note { color: #718680; font-size: .74rem; }
.community-composer-draft-note i { color: #2f7062; margin-right: .25rem; }
.community-composer-actions { margin-left: auto; }
.community-composer-cancel {
    min-height: 42px;
    padding: .5rem .7rem;
    color: #5d7771;
    border: 1px solid #d3e1db;
    border-radius: 8px;
    background: #fff;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}
.community-composer-cancel:hover,
.community-composer-cancel:focus-visible { background: #f3f8f5; }
.community-composer-submit { min-height: 42px; white-space: nowrap; }

@media (max-width: 767.98px) {
    body.is-community-composer-open { overflow: auto; }
    .community-composer form:not([hidden]) {
        position: static;
        display: grid;
        height: auto;
        max-height: none;
        padding: .9rem;
        overflow: visible;
        border-top: 1px solid var(--wc-line);
        background: #fff;
    }
    .community-composer form > * { margin-top: 0; }
    .community-composer-head {
        position: static;
        margin: 0 !important;
        padding: 0 0 .7rem;
        border-bottom: 1px solid #e5eee9;
        background: #fff;
    }
    .community-composer-author { margin-top: .1rem !important; }
    .community-composer textarea { min-height: 8rem; padding: .75rem; border-color: #cadbd4; }
    .community-composer-tools { align-items: stretch; flex-direction: column; }
    .community-composer-tools > div { width: 100%; }
    .community-composer-actions { justify-content: flex-end; margin-left: 0; }
    .community-composer-actions .community-composer-submit { flex: 1; }
    .community-composer-primary-tools { flex-wrap: wrap; }
}

@media (max-width: 479.98px) {
    .community-composer-start { padding: .65rem; }
    .community-composer-start > button { font-size: .82rem; }
    .community-composer-album-collapsed { width: 42px; height: 42px; flex-basis: 42px; }
    .community-composer-tools > div:first-child { align-items: flex-start; }
    .community-composer-draft-note { line-height: 1.35; }
}

/* Keep the new secondary filter menu visually attached to the chip row on
   desktop, but let it become a normal block on phones. */
@media (min-width: 768px) {
    .park-filter-row { align-items: center; }
    .park-more-filter-menu { min-width: 14rem; }
}

@media (max-width: 575.98px) {
    .home-quick-search {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .home-quick-search button {
        grid-column: 1 / -1;
        width: 100%;
    }
    .park-filter-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .park-filter-row > button,
    .park-sort-menu,
    .park-sort-menu > summary,
    .park-more-filters,
    .park-more-filters > summary {
        width: 100%;
    }
    .park-more-filter-menu { position: static; min-width: 0; margin-top: .25rem; box-shadow: none; }
    .park-filter-row > button {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .member-primary-actions > a { min-height: 62px; }
    .member-summary-strip { padding-bottom: .1rem; }
}