Track detail: fold the segment list into an accordion so action buttons stay reachable

docs/session-logs/2026-09-14_ridden-roads-walk.md

@@ -56,6 +56,14 @@
   `localStorage.baldav_share_fields`. Проверено на десктопе (Xvfb): галочки рисуются, перерисовка
   и адаптив работают, «Закрыть» возвращает в деталь без листания.
 
+## Аккордеон сегментов (деталь трека)
+- Список сегментов (до 71 шт) разворачивал пол-экрана, до кнопок внизу было долго листать.
+  Секцию «Сегменты» завернул в нативный `<details class="sd-accordion">` со `<summary>` -
+  свёрнута по умолчанию, клик по заголовку разворачивает/сворачивает (шеврон крутится,
+  рядом счётчик N). Кнопки (Похвастаться, Экспорт, Удалить и т.д.) теперь сразу видны.
+- Проверено на десктопе (Xvfb): свёрнуто по умолчанию, «СЕГМЕНТЫ 71» + блок велосипеда и
+  кнопки сразу под ним; клик разворачивает список, шеврон ▸ -> ▾.
+
 ## Замечания на будущее
 - Ридден-нога без высот (тонкая); при желании нести среднюю высоту узла для оковки.
 - `walk` на десктопе не заполнен (не пересчитывал) - граф пока включает все точки; на реальном

frontend/css/styles.css

@@ -1514,6 +1514,34 @@ body.dark-map .poi-badge { background: #111; border-color: #eee; }
   font-weight: 600;
 }
 
+/* Collapsible section (native <details>): header stays visible, body folds away
+   so the action buttons below aren't buried under a long segment list. */
+.sd-acc-title {
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  user-select: none;
+  padding: 6px 0;
+}
+.sd-acc-title::-webkit-details-marker { display: none; }
+.sd-acc-title::before {
+  content: "\25B8"; /* ▸ */
+  display: inline-block;
+  transition: transform 0.15s;
+  font-size: 11px;
+}
+.sd-accordion[open] .sd-acc-title::before { transform: rotate(90deg); }
+.sd-acc-count {
+  background: var(--border);
+  color: var(--on-bg);
+  border-radius: 10px;
+  padding: 1px 8px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
 .sd-row {
   display: flex;
   gap: 8px;

frontend/js/main.js

@@ -5212,8 +5212,8 @@ async function showSessionDetail(sessionId) {
     </div>` : ""}
 
     ${(stats.segments && stats.segments.length > 1) ? `
-    <div class="sd-section">
-      <div class="sd-title">Сегменты</div>
+    <details class="sd-section sd-accordion">
+      <summary class="sd-title sd-acc-title">Сегменты <span class="sd-acc-count">${stats.segments.length}</span></summary>
       <div class="climb-segments">
         ${stats.segments.map(seg => {
           let icon = seg.type === "climb" ? "^" : seg.type === "descent" ? "v" : "-";
@@ -5229,7 +5229,7 @@ async function showSessionDetail(sessionId) {
           </div>`;
         }).join("")}
       </div>
-    </div>` : ""}
+    </details>` : ""}
 
     <div class="sd-section" id="sd-goals-section" style="display:none">
       <div class="sd-title">Цели</div>