Reclaim the sidebar's vertical space

The right column ran past the viewport with nothing selected. Five changes, none
of which remove functionality.

The five daily MA periods now share one line. 10px gaps and a 22px indent had
pushed 200 onto a row by itself; nowrap, 7px gaps and 12px boxes fit all five
with room to spare. Auto trendlines becomes a parenthetical on the Manual lines
row instead of owning one — it is disabled until M8, so a full row overstated
it. The alert log becomes a collapsible section like Confluence zones, closed by
default with its count in the summary, so activity stays visible while it is
shut and the banner, sound and phone push are untouched.

Tools becomes a collapsible section as well, open by default, and each tool's
panel is now bound to armedTool: the label, colour, width and side controls
appear only for the tool actually armed. armTool already toggled and allowed one
armed tool at a time, so the panels follow it with no new state.

Layers moves above Tools and starts collapsed. The zeroed top margin moves from
a Tools-specific class to .sidebar-section:first-of-type, so reordering again
cannot reintroduce a gap above the first section.

Measured with nothing armed: 1110px of content down to 900px, inside the
viewport rather than past it. Verified in a browser — arming each tool reveals
that tool's panel and no other, disarming hides both, Tools opens by default,
Layers starts closed and still lays its periods out on one line when opened.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

docs/IMPLEMENTATION_PLAN.md

@@ -1425,3 +1425,22 @@ owning a row, which suits a control that is disabled until M8. The alert log
 becomes a `<details>` like Confluence zones, closed by default with its count in
 the summary — collapsed by default is the point, since leaving it open would
 save nothing, and the count means activity is still visible while closed.
+
+**Sidebar vertical space.** The right column was taller than the viewport with
+nothing selected. Five changes, no functionality removed:
+
+- The five daily MA periods fit one line (`flex-wrap:nowrap`, tighter gaps, 12px
+  boxes); 10px gaps and a 22px indent had pushed 200 onto a row of its own.
+- Auto trendlines becomes a parenthetical `(auto)` on the Manual lines row
+  rather than owning one, which suits a control disabled until M8.
+- Alert log becomes a `<details>` like Confluence zones, closed by default with
+  its count in the summary so activity still shows while shut.
+- Tools becomes a `<details>` too, open by default, and each tool's panel is
+  bound to `armedTool` — only the armed tool shows its label, colour, width and
+  side controls. `armTool` already toggles and permits one armed tool at a time,
+  so the panels follow it exactly.
+- Order is Layers, Tools, then the rest, with Layers collapsed by default.
+
+Measured with nothing armed: 1110px of content down to 900px, which is inside
+the viewport rather than past it. `.sidebar-section:first-of-type` carries the
+zeroed top margin so reordering cannot reintroduce a gap at the top.

static/index.html

@@ -35,13 +35,30 @@
         </div>
       </section>
       <aside>
-        <h2>Tools</h2>
+        <details class="sidebar-section">
+          <summary>Layers</summary>
+          <div class="layer-group">
+            <label class="master"><input type="checkbox" :checked="allEnabled('1d')" @change="toggleGroup('1d', $event.target.checked)"><span class="swatch tf-1d"></span>Daily MAs</label>
+            <div class="periods"><label v-for="period in [10,20,50,100,200]" :key="period"><input type="checkbox" :value="period" v-model="prefs.enabled.ma['1d']">{{ period }}</label></div>
+          </div>
+          <div class="layer-group">
+            <label><input type="checkbox" v-model="prefs.enabled.horizontal"><span class="swatch horizontal"></span>Prior day H/L/C</label>
+            <label><input type="checkbox" v-model="prefs.enabled.vwap"><span class="swatch vwap"></span>Session VWAP</label>
+          </div>
+          <div class="layer-group layer-inline">
+            <label><input type="checkbox" v-model="prefs.enabled.manual"><span class="swatch manual"></span>Manual lines</label>
+            <label class="disabled" title="Automatic trendline detection is not built yet">(<input type="checkbox" disabled>auto)</label>
+          </div>
+          <label class="score-hidden"><input type="checkbox" v-model="prefs.hidden_levels_score">Hidden levels still count toward confluence</label>
+        </details>
+        <details class="sidebar-section tools-section" open>
+          <summary>Tools</summary>
         <div class="tool" :class="{armed: armedTool === 'trendline'}">
           <button class="tool-head" @click="armTool('trendline')" :aria-pressed="armedTool === 'trendline'">
             <span class="tool-glyph"><i class="fa-solid fa-arrow-trend-up"></i></span>Trendline
             <span class="tool-state">{{ armedTool === 'trendline' ? 'drag on chart' : '' }}</span>
           </button>
-          <div class="tool-body">
+          <div class="tool-body" v-show="armedTool === 'trendline'">
             <label>Label<input v-model.trim="drawName" placeholder="optional" aria-label="Trendline label"></label>
             <div class="row">
               <label>Colour<input type="color" v-model="drawColor" aria-label="Trendline colour"></label>
@@ -58,7 +75,7 @@
             <span class="tool-glyph"><i class="fa-solid fa-minus"></i></span>Price level
             <span class="tool-state">{{ armedTool === 'level' ? 'click on chart' : '' }}</span>
           </button>
-          <div class="tool-body">
+          <div class="tool-body" v-show="armedTool === 'level'">
             <label>Label<input v-model.trim="alertNote" placeholder="optional" aria-label="Level label"></label>
             <div class="row">
               <label>Colour<input type="color" v-model="levelColor" aria-label="Level colour"></label>
@@ -71,21 +88,6 @@
             <p class="hint">Drag on the chart, or type an exact price. Alerts whenever price reaches it, whatever the confluence score.</p>
           </div>
         </div>
-        <details class="sidebar-section" open>
-          <summary>Layers</summary>
-          <div class="layer-group">
-            <label class="master"><input type="checkbox" :checked="allEnabled('1d')" @change="toggleGroup('1d', $event.target.checked)"><span class="swatch tf-1d"></span>Daily MAs</label>
-            <div class="periods"><label v-for="period in [10,20,50,100,200]" :key="period"><input type="checkbox" :value="period" v-model="prefs.enabled.ma['1d']">{{ period }}</label></div>
-          </div>
-          <div class="layer-group">
-            <label><input type="checkbox" v-model="prefs.enabled.horizontal"><span class="swatch horizontal"></span>Prior day H/L/C</label>
-            <label><input type="checkbox" v-model="prefs.enabled.vwap"><span class="swatch vwap"></span>Session VWAP</label>
-          </div>
-          <div class="layer-group layer-inline">
-            <label><input type="checkbox" v-model="prefs.enabled.manual"><span class="swatch manual"></span>Manual lines</label>
-            <label class="disabled" title="Automatic trendline detection is not built yet">(<input type="checkbox" disabled>auto)</label>
-          </div>
-          <label class="score-hidden"><input type="checkbox" v-model="prefs.hidden_levels_score">Hidden levels still count toward confluence</label>
         </details>
         <details class="sidebar-section" open>
           <summary>Lines &amp; levels ({{ manualLines.length }})</summary>

static/style.css

@@ -17,7 +17,7 @@ button { border:1px solid var(--line); background:transparent; color:var(--muted
 .chart-context-menu { position:absolute; z-index:8; width:165px; padding:4px; border:1px solid var(--line); background:var(--panel); box-shadow:0 5px 18px color-mix(in srgb,var(--fg) 15%,transparent); }.chart-context-menu[hidden] { display:none; }.chart-context-menu button { width:100%; padding:6px 8px; text-align:left; color:var(--fg); font-size:10px; }
 .statusbar { min-height:34px; display:flex; align-items:center; gap:24px; padding:6px 13px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }.statusbar b { color:var(--fg); text-transform:uppercase; }
 aside { padding:16px; }h2 { margin:0 0 12px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:1.3px; }h2:not(:first-child) { margin-top:30px; }.empty { border-left:2px solid var(--line); padding:10px 12px; color:var(--muted); font-size:11px; }
-.sidebar-section { margin-top:30px; }.sidebar-section summary { margin-bottom:12px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:1.3px; cursor:pointer; user-select:none; }.sidebar-section:not([open]) summary { margin-bottom:0; }
+.sidebar-section { margin-top:30px; }.sidebar-section:first-of-type { margin-top:0; }.sidebar-section summary { margin-bottom:12px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:1.3px; cursor:pointer; user-select:none; }.sidebar-section:not([open]) summary { margin-bottom:0; }
 .trendline-actions { display:flex; gap:5px; margin-bottom:7px; }.trendline-actions button { flex:1; padding:4px; font-size:9px; }.trendline-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:5px 8px; padding:7px; border:1px solid transparent; }.trendline-row.selected { border-color:var(--accent); }.trendline-row>.line-select { align-self:center; accent-color:var(--accent); }.trendline-row>input:not(.line-select) { min-width:0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--fg); font:inherit; font-size:11px; }.trendline-row span { grid-column:2; color:var(--muted); font-size:9px; text-transform:uppercase; }.trendline-row button { grid-column:3; grid-row:1; padding:3px 6px; font-size:9px; }.line-style-controls { grid-column:3; display:flex; align-items:center; gap:4px; }.line-style-controls input { width:24px; height:20px; padding:0; border:0; background:transparent; }.line-style-controls select { border:1px solid var(--line); background:var(--panel); color:var(--fg); font-size:9px; }
 .layer-group { padding:9px 0; border-bottom:1px solid var(--line); display:grid; gap:7px; }.layer-group label,.score-hidden { display:flex; align-items:center; gap:7px; font-size:11px; cursor:pointer; }.layer-group input,.score-hidden input { accent-color:var(--accent); }.periods { display:flex; flex-wrap:nowrap; gap:7px; padding-left:20px; }.periods label { color:var(--muted); gap:4px; }.periods input { width:12px; height:12px; margin:0; flex:none; }.layer-inline { display:flex; align-items:center; gap:12px; }.layer-inline .disabled { gap:2px; }.swatch { width:13px; height:3px; display:inline-block; background:var(--muted); }.tf-1d { background:#d96073; }.tf-1h { background:#efb643; }.manual { background:#65b7cf; }.vwap { background:#b07ad6; }.horizontal { background:#9fb0c4; }
 .hint { margin:6px 0 2px; font-size:10px; color:var(--muted); line-height:1.35; }