From 751af663f38e174203c10438e5ef36277e93cd68 Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Thu, 27 Aug 2026 16:41:28 +0200
Subject: Use radio inputs and collapsible curation on ride detail

Replace dropdowns with vertical radio groups for bike and ride type.
Make curation block collapsible (details/summary) collapsed by default
and expanded when both categories are empty.
---
 web/static/style.css | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

(limited to 'web/static')

diff --git a/web/static/style.css b/web/static/style.css
index 3c9c05b..755a5cb 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -157,15 +157,28 @@ select { border: 1px solid var(--color-input-border); border-radius: .55rem; pad
 .section-heading .eyebrow { margin-bottom: .2rem; }
 .section-heading h2 { margin: 0; font-size: 1.2rem; }
 .section-count { display: grid; place-items: center; min-width: 2rem; height: 2rem; border-radius: 999px; background: var(--color-secondary-surface); color: var(--color-forest); font-weight: 800; }
-.categories-panel { padding: 1rem 1.25rem; }
-.categories-layout { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }
+.categories-panel { padding: 0; overflow: hidden; }
+.categories-details { display: block; }
+.categories-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; }
+.categories-summary::-webkit-details-marker { display: none; }
+.categories-summary::marker { display: none; }
+.categories-summary:hover { background: var(--color-secondary-surface); }
+.categories-summary:focus-visible { outline: .2rem solid var(--color-focus); outline-offset: -.2rem; }
 .categories-heading { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
 .categories-heading .eyebrow { margin: 0; }
 .categories-heading h2 { margin: 0; font-size: 1.1rem; }
+.categories-chevron { color: var(--color-accent); font-size: 1.5rem; font-weight: 500; line-height: 1; transition: transform .2s; }
+.categories-details[open] .categories-chevron { transform: rotate(180deg); }
+.categories-details[open] .categories-summary { border-bottom: 1px solid var(--color-border-subtle); }
 .category-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .35rem .65rem; background: var(--color-notice-surface); color: var(--color-notice-text); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
-.category-form { display: flex; align-items: end; gap: .65rem; flex-wrap: wrap; margin-left: auto; }
-.category-form label { min-width: 8.5rem; }
-.category-form select { min-width: 8.5rem; }
+.category-form { display: flex; align-items: end; gap: 1rem 1.25rem; flex-wrap: wrap; padding: 1rem 1.25rem; }
+.category-fieldset { display: grid; gap: .35rem; margin: 0; padding: 0; border: 0; min-width: 0; }
+.category-fieldset legend { padding: 0; color: var(--color-muted); font-size: .85rem; font-weight: 650; }
+.category-options { display: grid; gap: .4rem; }
+.category-option { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--color-input-border); border-radius: 999px; padding: .4rem .65rem; background: var(--color-surface); color: var(--color-foreground); font-size: .85rem; font-weight: 650; cursor: pointer; }
+.category-option:has(input:checked) { border-color: var(--color-leaf); background: var(--color-secondary-surface); color: var(--color-forest); }
+.category-option input { accent-color: var(--color-accent); }
+.category-option:focus-within { outline: .2rem solid var(--color-focus); outline-offset: .1rem; }
 .category-form .button { align-self: end; padding: .55rem .9rem; }
 .data-quality-bulk { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
 .data-quality-bulk label { min-width: 8.5rem; }
-- 
cgit v1.3