From a6bcc1c088cdcf89159f3a27e0f1e87273970c0f Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 22 Apr 2026 16:08:14 -0400
Subject: [PATCH] feat(modal): fandom picker markup + styles

HTML/CSS for the inline fandom picker that slides in below the add-tag
input. JS wiring in the next commit.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 app/static/style.css              | 33 +++++++++++++++++++++++++++++++
 app/templates/_gallery_modal.html | 11 +++++++++++
 2 files changed, 44 insertions(+)

diff --git a/app/static/style.css b/app/static/style.css
index af100a2..84c4227 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -3032,3 +3032,36 @@ body.select-mode .gallery-infinite-container {
   border-radius: 0.2rem;
   cursor: help;
 }
+
+/* Fandom picker (Task 22 - fandom association during character tag creation) */
+.fandom-picker-wrapper {
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: max-height 180ms ease-out, opacity 180ms ease-out;
+  margin-top: 0;
+}
+.fandom-picker-wrapper.visible {
+  max-height: 16rem;
+  opacity: 1;
+  margin-top: 0.5rem;
+}
+.fandom-picker-label {
+  display: block;
+  font-size: 0.85rem;
+  color: var(--muted, #888);
+  margin-bottom: 0.25rem;
+}
+.fandom-picker-input-row {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+.fandom-picker-input {
+  flex: 1;
+  padding: 0.4rem 0.6rem;
+  background: var(--input-bg, #111);
+  border: 1px solid var(--input-border, #333);
+  border-radius: 0.25rem;
+  color: var(--fg, #eee);
+}
diff --git a/app/templates/_gallery_modal.html b/app/templates/_gallery_modal.html
index 961bfd3..fb568b8 100644
--- a/app/templates/_gallery_modal.html
+++ b/app/templates/_gallery_modal.html
@@ -61,6 +61,17 @@
             </div>
             <button type="submit">Add</button>
           </form>
+          <div id="fandomPickerWrapper" class="fandom-picker-wrapper" aria-hidden="true">
+            <label class="fandom-picker-label" for="fandomPickerInput">Fandom</label>
+            <div class="fandom-picker-input-row">
+              <input type="text" id="fandomPickerInput" class="fandom-picker-input"
+                     placeholder="Pick or create fandom (optional)" autocomplete="off">
+              <button type="button" id="fandomPickerClear" class="btn-small"
+                      aria-label="Clear fandom" title="Clear fandom">×</button>
+            </div>
+            <div id="fandomPickerAutocomplete"
+                 class="tag-autocomplete tag-autocomplete-inline" aria-live="polite"></div>
+          </div>
           <div id="tagAutocomplete" class="tag-autocomplete tag-autocomplete-inline" aria-live="polite"></div>
           <span id="tagActionFeedback" class="tag-feedback tag-feedback-inline"></span>
         </div>