The guide's filters as pill toggles, labelled (#40)

ddiff --git a/public/css/fun.css b/public/css/fun.css
iindex ecd4506..508ce54 100644
---- a/public/css/fun.css
++++ b/public/css/fun.css
@@@ -36,6 +36,20 @@ html, body { margin: 0; background: var(--bg-primary, #0a0f1c); color: var(--tex
  
  .fu-card { padding: 18px; border-radius: 18px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); }
  .fu-form { display: grid; gap: 14px; }
++/* Toggles: a checkbox in a pill, the whole pill its target; a checked one fills with the room's colour (the guide's
++   four filters wrapped mid-row as bare browser checkboxes; domain sweep, 2026-11-01). */
++.fu-checks { display: flex; flex-wrap: wrap; gap: 8px; }
++.fu-checks-label { flex-basis: 100%; font-size: .82rem; font-weight: 700; color: var(--text-secondary, #96a7c2); }
++.fu-checks > label, .fu-check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 11px; border-radius: 999px;
++    border: 1px solid var(--border, #1f2d47); background: color-mix(in srgb, var(--text-primary, #fff) 4%, transparent); color: var(--text-secondary, #96a7c2);
++    font-size: .9rem; font-weight: 600; line-height: 1.2; cursor: pointer; user-select: none;
++    transition: border-color var(--ov-dur-1, .12s) var(--ov-ease-out, ease), background var(--ov-dur-1, .12s) var(--ov-ease-out, ease), color var(--ov-dur-1, .12s) var(--ov-ease-out, ease); }
++.fu-check { justify-self: start; }
++.fu-checks input, .fu-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--room-accent); }
++.fu-checks > label:hover, .fu-check:hover { border-color: var(--room-accent); color: var(--text-primary, #e6edf7); }
++.fu-checks > label:has(input:checked), .fu-check:has(input:checked) { border-color: var(--room-accent); background: color-mix(in srgb, var(--room-accent) 16%, transparent); color: var(--text-primary, #e6edf7); }
++.fu-checks > label:has(input:focus-visible), .fu-check:has(input:focus-visible) { outline: 2px solid var(--room-accent); outline-offset: 2px; }
++@media (pointer: coarse) { .fu-checks > label, .fu-check { min-height: 44px; } }
  .fu-field { display: grid; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--text-secondary, #96a7c2); min-width: 0; }
  .fu-field input, .fu-field select, .fu-field textarea { width: 100%; min-height: 42px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--border, #1f2d47); background: var(--bg-input, var(--bg-primary, #0a0f1c)); color: var(--text-primary, #e6edf7); font: inherit; font-size: .95rem; font-weight: 500; }
  .fu-field input:focus, .fu-field select:focus, .fu-field textarea:focus { outline: 2px solid var(--room-accent); outline-offset: 1px; border-color: transparent; }
ddiff --git a/server/views/index.js b/server/views/index.js
iindex 3172ed4..3a53ab3 100644
---- a/server/views/index.js
++++ b/server/views/index.js
@@@ -165,7 +165,7 @@ function guide({ values = {}, result = null, error = null } = {}) {
  <label class="fu-field"><span>Where?</span><input name="q" type="text" maxlength="200" value="${esc(v.q)}" placeholder="Portland, Oregon" required></label>
  <label class="fu-field"><span>What kind?</span><select name="kind">${Object.entries(KIND_LABEL).map(([k, l]) => `<option value="${esc(k)}"${v.kind === k ? ' selected' : ''}>${esc(l)}</option>`).join('')}</select></label>
  <label class="fu-field"><span>How far? (km)</span><input name="radius" type="number" min="1" max="50" step="1" value="${esc(v.radius)}" placeholder="5"></label>
--<div class="fu-checks"><label><input type="checkbox" name="accessible" value="1"${v.accessible ? ' checked' : ''}> Step-free only</label><label><input type="checkbox" name="rainy" value="1"${v.rainy ? ' checked' : ''}> Rainy day (inside)</label><label><input type="checkbox" name="kids" value="1"${v.kids ? ' checked' : ''}> With kids</label><label><input type="checkbox" name="cheap" value="1"${v.cheap ? ' checked' : ''}> Free only</label></div>
++<div class="fu-checks" role="group" aria-labelledby="fu-narrow"><span class="fu-checks-label" id="fu-narrow">Narrow it down</span><label><input type="checkbox" name="accessible" value="1"${v.accessible ? ' checked' : ''}> Step-free only</label><label><input type="checkbox" name="rainy" value="1"${v.rainy ? ' checked' : ''}> Rainy day (inside)</label><label><input type="checkbox" name="kids" value="1"${v.kids ? ' checked' : ''}> With kids</label><label><input type="checkbox" name="cheap" value="1"${v.cheap ? ' checked' : ''}> Free only</label></div>
  <div class="fu-actions"><button class="fu-btn" type="submit">Find something</button></div>
  <p class="fu-fine">Places © OpenStreetMap contributors, ODbL. Cached for seven days; one request a second to each OSM host.</p>
  </form>