feat(web): add ride library filtersHEADmain

1 files changed, 26 insertions, 1 deletions

diff --git a/web/static/style.css b/web/static/style.css
index b984da8..ef6348b 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -86,6 +86,30 @@ th { color: var(--color-subtle); font-size: .78rem; letter-spacing: .08em; text-
 .sort-indicator { display: inline-block; margin-left: .2rem; }
 .numeric { text-align: right; white-space: nowrap; }
 .empty { padding: 2.5rem 1rem; text-align: center; color: var(--color-subtle); }
+.ride-filters-panel { margin-top: 1.25rem; }
+.ride-filters { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
+.ride-filters > .section-heading { flex-wrap: wrap; }
+.ride-filter-ranges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.5rem; }
+.ride-filter-group { min-width: 0; margin: 0; padding: 0; border: 0; }
+.ride-filter-group legend { padding: 0; color: var(--color-forest); font-size: .9rem; font-weight: 750; }
+.range-values { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-top: .45rem; color: var(--color-muted); font-size: .85rem; }
+.range-values output { color: var(--color-foreground); font-weight: 700; }
+.range-control { position: relative; height: 2rem; margin: .35rem .55rem 0; }
+.range-track { position: absolute; top: 50%; right: 0; left: 0; height: .35rem; transform: translateY(-50%); border-radius: 999px; background: linear-gradient(to right, var(--color-border-subtle) 0%, var(--color-border-subtle) var(--range-start, 0%), var(--color-accent) var(--range-start, 0%), var(--color-accent) var(--range-end, 100%), var(--color-border-subtle) var(--range-end, 100%), var(--color-border-subtle) 100%); pointer-events: none; }
+.range-input { position: absolute; inset: 0; width: 100%; height: 2rem; margin: 0; padding: 0; border: 0; background: transparent; outline: none; pointer-events: none; touch-action: none; }
+.range-input-min { z-index: 2; }
+.range-input-max { z-index: 1; }
+.range-input::-webkit-slider-runnable-track { height: .35rem; background: transparent; }
+.range-input::-moz-range-track { height: .35rem; background: transparent; }
+.range-input::-webkit-slider-thumb { width: 1rem; height: 1rem; margin-top: -.325rem; border: 2px solid var(--color-surface); border-radius: 50%; background: var(--color-accent); box-shadow: 0 .15rem .4rem var(--color-panel-shadow); appearance: none; pointer-events: auto; cursor: pointer; }
+.range-input::-moz-range-thumb { width: 1rem; height: 1rem; border: 2px solid var(--color-surface); border-radius: 50%; background: var(--color-accent); box-shadow: 0 .15rem .4rem var(--color-panel-shadow); appearance: none; pointer-events: auto; cursor: pointer; }
+.range-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 .2rem var(--color-focus); }
+.range-input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 .2rem var(--color-focus); }
+.ride-filter-meta { display: grid; grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr); align-items: end; gap: 1rem; }
+.date-filter-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .5rem; }
+.route-filter { align-self: end; }
+select { border: 1px solid var(--color-input-border); border-radius: .55rem; padding: .65rem .7rem; font: inherit; color: inherit; background: var(--color-surface); }
+.ride-filter-actions { display: flex; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; }
 .map-panel { padding: 0; overflow: hidden; }
 .ride-map { min-height: 24rem; height: min(65vh, 40rem); }
 .ride-map-pass-icon { display: grid; place-items: center; width: 1.75rem !important; height: 1.75rem !important; border: 2px solid var(--color-surface); border-radius: 50%; background: var(--color-leaf); color: var(--color-on-dark); box-shadow: 0 .15rem .4rem var(--color-panel-shadow); }
@@ -159,4 +183,5 @@ dt { color: var(--color-subtle); font-size: .78rem; font-weight: 700; letter-spa
 dd { margin: .25rem 0 0; font-size: 1.2rem; font-weight: 700; }
 @media (width <= 900px) { .ride-detail-columns { grid-template-columns: 1fr; } }
 @media (width <= 700px) { .container { width: min(100% - 1rem, 70rem); padding-top: 1.5rem; } .site-header { padding-inline: 1rem; } th:nth-child(n+4), td:nth-child(n+4) { display: none; } .panel { padding: .8rem; } }
-@media (width <= 500px) { dl { grid-template-columns: repeat(2, 1fr); } .official-climb-summary-stats { gap: .55rem; } .official-climb-card-title { display: block; } }
+@media (width <= 700px) { .ride-filter-ranges, .ride-filter-meta { grid-template-columns: 1fr; } }
+@media (width <= 500px) { dl { grid-template-columns: repeat(2, 1fr); } .official-climb-summary-stats { gap: .55rem; } .official-climb-card-title { display: block; } .date-filter-inputs { grid-template-columns: 1fr; } }