Initial commit: Tina Barcelona trip picker

Static Cloudflare Pages site + KV-backed Pages Function for jointly
planning Tina's Barcelona visit (7 Jul - 18 Aug 2026). List and calendar
views share one client state; dated evening events are radio groups to
prevent double-booking, multi-night shows live once in TRIP_DATA.spanning
instead of being duplicated per day, and undated collections get
optionally date-tagged when picked from the calendar view.

Includes a client-side-only password gate and an instructions page.
Live at https://summeroffun.hortal.me.

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

public/instructions.html

@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>How this page works</title>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header class="page-header">
+    <h1>How this page works</h1>
+    <p class="subtitle">A quick guide to picking your way through Tina's lovely summer in Barcelona.</p>
+  </header>
+
+  <main class="instructions">
+    <section class="instr-section">
+      <h2>The basics</h2>
+      <p>Every date with something specific on (a concert, a festival night, a booked event) shows a set of round buttons — pick <strong>one</strong> per evening. That's on purpose: it keeps you from accidentally double-booking a night, so you don't need to think about clashes at all.</p>
+      <p>Anything marked with a ✅ is already confirmed and booked — there's nothing to choose there, it's just shown so you know the evening's spoken for.</p>
+    </section>
+
+    <section class="instr-section">
+      <h2>Two ways to browse</h2>
+      <p>Use the <strong>List / Calendar</strong> toggle near the top:</p>
+      <ul>
+        <li><strong>List</strong> — every day, one after another, so you can scroll through the whole trip in one go. Undated things (exhibitions, restaurants, evening extras) are grouped in their own sections further down.</li>
+        <li><strong>Calendar</strong> — one day at a time, with a small month grid to jump around. A filled dot means that day already has something picked; an empty dot means it's still open.</li>
+      </ul>
+      <p>Both views are just two windows onto the same picks — anything chosen in one shows up correctly in the other.</p>
+    </section>
+
+    <section class="instr-section">
+      <h2>Shows that run more than one night</h2>
+      <p>A few things (like a play with a two-night run) are valid on either of two dates. They show up as a normal choice on both nights — but once you pick one night, the other night shows it as <em>"already picked — [date]"</em> instead, so you can't accidentally book it twice.</p>
+    </section>
+
+    <section class="instr-section">
+      <h2>Exhibitions, restaurants, and other "anytime" things</h2>
+      <p>These don't compete for one of your evening picks — tick as many as you like. In the calendar view, if you tick one while looking at a particular day, it gets tagged to that day; every other day will then show it as already picked, so you always know when you've actually planned to do it.</p>
+      <p>If you tick one from the list view instead, it's just marked as "want to do this" without a specific date yet — that's fine, it'll show up in your shortlist as unscheduled.</p>
+    </section>
+
+    <section class="instr-section">
+      <h2>The ⓘ icon</h2>
+      <p>Tap it to open more information (official page, tickets, menu, etc.) in a new tab. It's deliberately separate from the tick/radio button next to it, so opening a link never accidentally selects or deselects anything.</p>
+    </section>
+
+    <section class="instr-section">
+      <h2>Your shortlist</h2>
+      <p>Everything picked so far is collected at the bottom of the page, in date order, so you can see the whole plan taking shape at a glance.</p>
+    </section>
+
+    <section class="instr-section">
+      <h2>Sharing</h2>
+      <p>Everything saves automatically as you tap — no submit button needed. Anyone with the link sees the same shared picks, so you and Roberto can both browse and tick things whenever suits, from any device.</p>
+    </section>
+
+    <p><a href="index.html" class="how-it-works">← Back to the picker</a></p>
+  </main>
+</body>
+</html>