/* RideCount overview: compact, readable and filter-aware on every viewport. */
.ridecount-stat-strip {
    display: grid;
    grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 2.3fr);
    align-items: stretch;
    gap: 1.25rem;
    margin: 1rem 0;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(120deg, #f7fbfa, #fff);
    border: 1px solid var(--wc-border, #d7e5e1);
    border-radius: 1rem;
}
.ridecount-stat-context { display: flex; flex-direction: column; justify-content: center; gap: .15rem; padding-right: 1rem; border-right: 1px solid var(--wc-border, #d7e5e1); }
.ridecount-stat-context .eyebrow { margin: 0; }
.ridecount-stat-context strong { color: #0b4548; font-size: 1rem; }
.ridecount-stat-context > span:last-child { color: #668080; font-size: .78rem; }
.ridecount-stat-proof { margin-top: .45rem; color: #668080; font-size: .72rem; }
.ridecount-stat-proof b { color: #0b7770; font-weight: 700; }
.ridecount-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ridecount-stat-grid article { min-width: 0; padding: .15rem 1rem; border-left: 1px solid var(--wc-border, #d7e5e1); }
.ridecount-stat-grid article:first-child { border-left: 0; }
.ridecount-stat-grid span, .ridecount-stat-grid small { display: block; color: #668080; font-size: .76rem; }
.ridecount-stat-grid strong { display: block; margin: .15rem 0; color: #082f34; font-size: clamp(1.65rem, 2.5vw, 2.2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.ridecount-stat-grid small { line-height: 1.25; }
.ridecount-filter-panel { display: grid; grid-template-columns: minmax(13rem, 1.5fr) minmax(10rem, 1fr) minmax(10rem, 1fr) auto; align-items: end; gap: .7rem; margin: 1rem 0; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--wc-border, #d7e5e1); border-radius: .9rem; }
.ridecount-filter-heading { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ridecount-filter-heading .eyebrow { margin: 0 0 .15rem; }
.ridecount-filter-heading strong { color: #0b4548; }
.ridecount-filter-heading > span { color: #668080; font-size: .8rem; }
.ridecount-filter-panel .ride-history-search { position: relative; }
.ridecount-filter-panel .ride-history-search > i { position: absolute; z-index: 1; top: 50%; left: .8rem; color: #578080; transform: translateY(-50%); }
.ridecount-filter-panel .ride-history-search input { padding-left: 2.25rem; }
.ridecount-filter-panel .btn { white-space: nowrap; }
.ridecount-filter-actions { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; }
.ridecount-filter-actions .btn { min-height: 42px; }
.ridecount-filter-reset { color: var(--app-green, #0b7770); font-size: .76rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.ridecount-filter-reset:hover { text-decoration: underline; }
.ridecount-filter-panel .ride-history-custom-range { grid-column: 1 / -1; display: flex; gap: .7rem; }
.ridecount-filter-panel .ride-history-custom-range label { flex: 1; color: #668080; font-size: .75rem; }
.ridecount-filter-panel .ride-history-custom-range input { margin-top: .2rem; }
.ride-activity-panel { overflow: hidden; }
.ride-activity-content { padding: .15rem 0 .1rem; }
.ride-activity-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ride-activity-head h2 { margin: .1rem 0 .15rem; }
.ride-activity-head .eyebrow { margin: 0; }
.ride-activity-range-label { margin: 0; color: #668080; font-size: .82rem; }
.ride-activity-toplist-link { color: #0b7770; font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ride-activity-toplist-link:hover { text-decoration: underline; }
.ride-activity-head-actions { display: flex; align-items: center; gap: .8rem; padding-top: .25rem; }
.ride-activity-head-actions a { color: #0b7770; font-size: .78rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ride-activity-head-actions a:hover { text-decoration: underline; }
.ride-activity-summary { display: flex; gap: 2rem; margin: 1.1rem 0; padding: .8rem 0; border-top: 1px solid #e2ece9; border-bottom: 1px solid #e2ece9; }
.ride-activity-summary div { display: flex; flex-direction: column; gap: .1rem; }
.ride-activity-summary strong { color: #0b4548; font-size: 1.45rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ride-activity-summary span { color: #668080; font-size: .76rem; }
.ride-activity-toolbar { display: flex; gap: .35rem; margin-bottom: .8rem; }
.ride-activity-toolbar button { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; color: #456d6d; background: transparent; border: 1px solid transparent; border-radius: .5rem; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.ride-activity-toolbar button:hover { background: #f1f8f6; }
.ride-activity-toolbar button.is-active { color: #0b4548; background: #e1f3ed; border-color: #b9dfd4; }
.ride-activity-detail { min-height: 1.2rem; margin: .8rem 0 0; padding: .65rem .8rem; color: #416866; background: #f7fbfa; border-radius: .55rem; font-size: .8rem; }
.ride-activity-detail-link { margin-left: .4rem; color: #0b7770; font-weight: 700; white-space: nowrap; }
.ride-activity-strongest { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ride-activity-strongest li { display: grid; grid-template-columns: 2rem minmax(7rem, 1fr) auto minmax(8rem, 1fr); align-items: center; gap: .7rem; padding: .7rem .8rem; border-bottom: 1px solid #e2ece9; }
.ride-activity-rank { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; color: #0b7770; background: #e1f3ed; border-radius: 50%; font-size: .8rem; font-weight: 700; }
.ride-activity-strongest-date { display: flex; flex-direction: column; gap: .1rem; }
.ride-activity-strongest-date strong { color: #0b4548; }
.ride-activity-strongest-date small, .ride-activity-strongest-meta { color: #77918f; font-size: .75rem; }
.ride-activity-strongest-count { color: #0b7770; font-size: 1.1rem; text-align: right; }
.ride-activity-strongest-count small { font-size: .73rem; font-weight: 500; }
.ride-activity-strongest-meta { text-align: right; }
.ride-activity-empty { margin: 0; padding: 1rem; color: #668080; background: #f7fbfa; border-radius: .55rem; }
.ride-activity-chart-meta { display: flex; justify-content: space-between; gap: 1rem; margin: .2rem 0 .35rem 2rem; color: #77918f; font-size: .72rem; }
.ride-activity-chart-shell { display: flex; height: 12.5rem; min-width: 0; }
.ride-activity-chart-scale { display: flex; flex: 0 0 1.8rem; flex-direction: column; justify-content: space-between; padding: .1rem 0 1.6rem; color: #91a5a3; font-size: .65rem; text-align: right; }
.ride-activity-chart-scroll { display: flex; align-items: flex-start; min-width: 0; flex: 1; overflow-x: auto; padding: .1rem .15rem 0 .45rem; background: repeating-linear-gradient(to bottom, #e4eeeb 0, #e4eeeb 1px, transparent 1px, transparent 33.333%); border-bottom: 1px solid #b9d2cc; }
.ride-activity-bars { display: flex; align-items: stretch; justify-content: space-around; gap: .35rem; min-width: 100%; height: 10.3rem; }
.ride-activity-bar { position: relative; display: block; flex: 1 0 1rem; max-width: 2rem; height: 10.3rem; padding: 0 .08rem; color: #668080; background: transparent; border: 0; font: inherit; cursor: pointer; }
.ride-activity-bar-fill { position: absolute; right: .08rem; bottom: 1.55rem; left: .08rem; display: block; height: 2px !important; min-height: 2px; background: #d8e8e3; border-radius: .35rem .35rem .15rem .15rem; transition: background .15s ease, transform .15s ease; }
.ride-activity-bar-level-1 .ride-activity-bar-fill { height: 8% !important; }
.ride-activity-bar-level-2 .ride-activity-bar-fill { height: 16% !important; }
.ride-activity-bar-level-3 .ride-activity-bar-fill { height: 24% !important; }
.ride-activity-bar-level-4 .ride-activity-bar-fill { height: 32% !important; }
.ride-activity-bar-level-5 .ride-activity-bar-fill { height: 40% !important; }
.ride-activity-bar-level-6 .ride-activity-bar-fill { height: 48% !important; }
.ride-activity-bar-level-7 .ride-activity-bar-fill { height: 56% !important; }
.ride-activity-bar-level-8 .ride-activity-bar-fill { height: 64% !important; }
.ride-activity-bar-level-9 .ride-activity-bar-fill { height: 72% !important; }
.ride-activity-bar-level-10 .ride-activity-bar-fill { height: 80% !important; }
.ride-activity-bar.has-rides .ride-activity-bar-fill { background: linear-gradient(180deg, #1a9677, #07564f); }
.ride-activity-bar:hover .ride-activity-bar-fill, .ride-activity-bar.is-selected .ride-activity-bar-fill { background: #ff9d28; transform: scaleX(1.08); }
.ride-activity-bar-label { position: absolute; right: 0; bottom: 0; left: 0; display: block; min-height: 1.25rem; color: #77918f; font-size: .62rem; line-height: 1.1; white-space: nowrap; }
.ride-activity-chart-shell[data-chart-mode="weeks"] .ride-activity-bar { flex-basis: 2.1rem; max-width: 3.2rem; }
.ride-activity-chart-shell[data-chart-mode="weeks"] .ride-activity-bar-label { font-size: .66rem; }
.ride-activity-chart-shell[data-chart-mode="weeks"] .ride-activity-bars { justify-content: flex-start; }
.ride-activity-chart-shell[data-chart-mode="weeks"] .ride-activity-bar { flex-grow: 0; }
.ride-activity-detail:empty { display: none; }
@media (max-width: 760px) {
    .ridecount-stat-strip { grid-template-columns: 1fr; gap: .8rem; padding: .9rem; }
    .ridecount-stat-context { padding: 0 0 .7rem; border-right: 0; border-bottom: 1px solid var(--wc-border, #d7e5e1); }
    .ridecount-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .8rem; }
    .ridecount-stat-grid article { padding: .1rem .7rem; }
    .ridecount-stat-grid article:nth-child(odd) { border-left: 0; }
    .ridecount-stat-grid article:nth-child(n+3) { padding-top: .8rem; border-top: 1px solid var(--wc-border, #d7e5e1); }
    .ridecount-filter-panel { grid-template-columns: 1fr 1fr; }
    .ridecount-filter-heading, .ridecount-filter-panel .ride-history-search, .ridecount-filter-panel .ride-history-custom-range { grid-column: 1 / -1; }
    .ridecount-filter-panel .btn { width: 100%; }
    .ridecount-filter-actions { grid-column: 1 / -1; justify-content: space-between; }
    .ride-activity-head { flex-direction: column; gap: .3rem; }
    .ride-activity-head-actions { width: 100%; justify-content: space-between; padding-top: 0; }
    .ride-activity-summary { justify-content: space-between; gap: .5rem; }
    .ride-activity-summary strong { font-size: 1.2rem; }
    .ride-activity-summary span { font-size: .68rem; }
    .ride-activity-chart-meta { margin-left: 0; font-size: .68rem; }
    .ride-activity-chart-shell { height: 11rem; }
    .ride-activity-chart-scale { flex-basis: 1.55rem; padding-bottom: 1.5rem; font-size: .58rem; }
    .ride-activity-chart-scroll { padding-left: .25rem; }
    .ride-activity-bars, .ride-activity-bar { height: 8.8rem; }
    .ride-activity-bar { flex-basis: .75rem; max-width: 1.35rem; }
    .ride-activity-chart-shell[data-chart-mode="weeks"] .ride-activity-bar { flex-basis: 1.75rem; max-width: 2.25rem; }
    .ride-activity-strongest li { grid-template-columns: 1.7rem minmax(5rem, 1fr) auto; gap: .45rem; }
    .ride-activity-strongest-meta { grid-column: 2 / -1; text-align: left; }
}

/* Leaderboard ties: one shared rank, compact continuation rows. */
.leaderboard-rank { flex-direction: row; flex-wrap: nowrap; white-space: nowrap; }
.leaderboard-rank small { display: inline; margin-left: .12rem; color: #78908a; font: 700 .62rem/1.15 "DM Sans", sans-serif; letter-spacing: 0; white-space: nowrap; }
.leaderboard-rank-tied { align-items: center; gap: .15rem; color: #78908a; font-size: .72rem; }
.leaderboard-rank-tied i { flex: 0 0 auto; font-size: .78rem; }
.leaderboard-rank-fallback { display: none; }
.leaderboard-rank-tied.is-search-first i,
.leaderboard-rank-tied.is-search-first small { display: none; }
.leaderboard-rank-tied.is-search-first .leaderboard-rank-fallback { display: block; color: inherit; font-size: inherit; }
.leaderboard-list article.is-tied { background: #fbfdfc; }
.leaderboard-list article.is-tied.is-current { background: #edf8f2; }
.leaderboard-details > span { min-width: 0; }
.leaderboard-own-tie { display: block; margin-top: .12rem; color: #0d6655; font-size: .68rem; font-weight: 750; }

@media (max-width: 767.98px) {
    .leaderboard-rank small { font-size: .58rem; }
    .leaderboard-rank-tied { justify-content: center; }
    .leaderboard-details { flex-wrap: nowrap; overflow: hidden; }
    .leaderboard-details > span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; }
}

/* RideCount collection redesign: one clear entry point, quiet surfaces and
   highlights that explain the collection without another chart to decode. */
.ridecount-collection-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem;
    margin-bottom: 1rem;
    padding: clamp(1.2rem, 2.6vw, 1.75rem);
    border-color: #c9e2db;
    background: linear-gradient(135deg, #f8fcfb 0%, #ffffff 68%);
}
.ridecount-collection-hero h2 { max-width: 42rem; margin-top: .35rem; font-size: clamp(1.45rem, 2.7vw, 2rem); letter-spacing: -.02em; }
.ridecount-collection-hero p:not(.eyebrow) { max-width: 38rem; font-size: .88rem; }
.ridecount-hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: .65rem; min-width: 10.5rem; }
.ridecount-hero-actions .btn { min-height: 46px; white-space: nowrap; }
.ridecount-subtle-link { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; color: var(--app-green, #0b7770); font-size: .78rem; font-weight: 750; text-decoration: none; }
.ridecount-subtle-link:hover { text-decoration: underline; }
.ridecount-back-link { display: inline-flex; align-items: center; gap: .4rem; margin: .1rem 0 .85rem; color: var(--app-green, #0b7770); font-size: .8rem; font-weight: 750; text-decoration: none; }
.ridecount-back-link:hover { text-decoration: underline; }

.ridecount-highlights { overflow: hidden; margin: 1rem 0; padding: 0; }
.member-panel.ridecount-highlights > .ridecount-highlights-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem .85rem; margin: 0; }
.ridecount-highlights-head .eyebrow { margin: 0 0 .2rem; }
.member-panel.ridecount-highlights > .ridecount-highlights-head h2 { margin: 0; font-size: 1.2rem; letter-spacing: -.01em; }
.ridecount-highlights-scope { color: var(--app-muted, #668080); font-size: .76rem; white-space: nowrap; }
.ridecount-highlight-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--app-line, #dce9e5); }
.ridecount-highlight-list article { display: flex; min-width: 0; gap: .7rem; padding: 1rem 1.25rem 1.15rem; }
.ridecount-highlight-list article + article { border-left: 1px solid var(--app-line, #dce9e5); }
.ridecount-highlight-icon { display: grid; width: 2.15rem; height: 2.15rem; flex: 0 0 auto; place-items: center; color: #0b7770; background: #e4f4ee; border-radius: 50%; }
.ridecount-highlight-icon i { font-size: .95rem; }
.ridecount-highlight-copy { display: grid; min-width: 0; gap: .12rem; align-content: start; }
.ridecount-highlight-copy strong { color: var(--app-ink, #082f34); font-size: .77rem; }
.ridecount-highlight-copy > span { overflow: hidden; color: var(--app-ink, #082f34); font-size: .92rem; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.ridecount-highlight-copy small { color: var(--app-muted, #668080); font-size: .73rem; line-height: 1.35; }

.ridecount-entry-dialog { width: min(92vw, 34rem); max-width: 34rem; padding: 0; border: 1px solid #c9e2db; border-radius: 1rem; background: #fff; box-shadow: 0 1.5rem 4rem rgba(7, 45, 48, .2); color: var(--app-ink, #082f34); }
.ridecount-entry-dialog::backdrop { background: rgba(3, 34, 38, .42); backdrop-filter: blur(2px); }
.ridecount-entry-dialog-shell { display: grid; }
.ridecount-entry-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--app-line, #dce9e5); }
.ridecount-entry-dialog-head .eyebrow { margin: 0 0 .2rem; }
.ridecount-entry-dialog-head h2 { margin: 0; font-size: 1.25rem; }
.ridecount-entry-dialog-head p:not(.eyebrow) { margin: .35rem 0 0; color: var(--app-muted, #668080); font-size: .8rem; }
.ridecount-dialog-close { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; color: var(--app-muted, #668080); border: 1px solid var(--app-line, #dce9e5); border-radius: 50%; background: #fff; cursor: pointer; }
.ridecount-dialog-close:hover { color: var(--app-ink, #082f34); background: #f3f9f7; }
.ridecount-entry-options { display: grid; gap: .5rem; padding: 1rem 1.25rem 1.25rem; }
.ridecount-entry-option { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; min-height: 4.1rem; padding: .65rem .7rem; color: var(--app-ink, #082f34); border: 1px solid var(--app-line, #dce9e5); border-radius: .7rem; background: #fff; text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.ridecount-entry-option:hover { border-color: #9bcfc1; background: #f5fbf8; transform: translateY(-1px); }
.ridecount-entry-option-primary { border-color: #a8dcca; background: #effaf5; }
.ridecount-entry-option-icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; color: #0b7770; border-radius: .65rem; background: #d9f1e7; }
.ridecount-entry-option strong, .ridecount-entry-option small { display: block; }
.ridecount-entry-option strong { font-size: .84rem; }
.ridecount-entry-option small { margin-top: .12rem; color: var(--app-muted, #668080); font-size: .73rem; line-height: 1.35; }
.ridecount-entry-option > i:last-child { color: var(--app-muted, #668080); }

@media (max-width: 760px) {
    .ridecount-collection-hero { grid-template-columns: 1fr; gap: 1rem; }
    .ridecount-hero-actions { min-width: 0; }
    .ridecount-hero-actions .btn { width: 100%; }
    .ridecount-subtle-link { justify-content: flex-start; }
    .member-panel.ridecount-highlights > .ridecount-highlights-head { align-items: flex-start; flex-direction: column; gap: .25rem; }
    .ridecount-highlight-list { grid-template-columns: 1fr; }
    .ridecount-highlight-list article { padding: .85rem 1rem; }
    .ridecount-highlight-list article + article { border-top: 1px solid var(--app-line, #dce9e5); border-left: 0; }
    .ridecount-entry-dialog { width: calc(100vw - 1.25rem); }
}