Handle links properly.

index.html

@@ -48,7 +48,16 @@
             pointer-events: none;
             z-index: -1;
         }
+        a {
+            color: var(--accent-primary);
+            text-decoration: underline;
+        }
 
+        .idea-description a,
+        .tour-info a {
+            /* ensure they stand out against the dark bg */
+            color: var(--accent-primary);
+        }
         .container {
             max-width: 1200px;
             margin: 0 auto;
@@ -110,17 +119,26 @@
         }
 
         .date-row {
-            display: -webkit-flex;
             display: flex;
             gap: 24px;
         }
         
         .date-row .form-group {
-            -webkit-flex: 0 0 calc((100% - 42px) / 2);
+            width: calc((100% - 42px) / 2);
-            flex: 0 0 calc((100% - 42px) / 2);
             min-width: 0;
         }
 
+        @media (max-width: 600px) {
+            .date-row {
+                flex-direction: column;
+                gap: 20px;
+            }
+
+            .date-row .form-group {
+                flex: 1;
+            }
+        }
+
         /* Forms */
         .form-group {
             margin-bottom: 20px;
@@ -503,6 +521,21 @@
             // Listen for hash changes
             window.addEventListener('hashchange', checkForTourId);
         }
+
+        function linkify(text) {
+            if (!text) return '';
+            return text.replace(
+                /(\[([^\]]+)\]\((https?:\/\/[^\s)]+)\))|(https?:\/\/[^\s]+)/g,
+                (match, mdFull, mdLabel, mdUrl, plainUrl) => {
+                    if (mdUrl) {
+                        // matched [label](url)
+                        return `<a href="${mdUrl}" target="_blank" rel="noopener">${mdLabel}</a>`;
+                    }
+                    // matched a bare URL
+                    return `<a href="${plainUrl}" target="_blank" rel="noopener">${plainUrl}</a>`;
+                }
+            );
+        }
         
         // Create new tour
         async function createTour(e) {
@@ -695,7 +728,7 @@
             tourInfo.innerHTML = `
                 <h2 class="tour-title">${currentTour.name}</h2>
                 ${dateHTML}
-                <p style="margin-top: 12px;">${currentTour.description}</p>
+                <p style="margin-top: 12px;">${linkify(currentTour.description)}</p>
             `;
             
             renderIdeas();
@@ -763,7 +796,7 @@
                 card.innerHTML = `
                     <h3 class="idea-title">${idea.name}</h3>
                     ${timeBadge}
-                    <p class="idea-description" style="margin-top: 8px;">${idea.description}</p>
+                    <p class="idea-description" style="margin-top: 8px;">${linkify(idea.description)}</p>
                     <div class="vote-section">
                         <span class="vote-count">👍 ${idea.voters.length} votes</span>
                         <button class="btn btn-secondary btn-small" onclick="voteForIdea('${idea.id}')">Vote</button>