My Sea form col + SPREAD dropdown w. 3-card/6-card section dividers — Sprint 5 iter 3 of My Sea roadmap — TDD

Picker phase form col: SPREAD combobox w. 6 spread options under 2 horizontal section dividers ("3-card spreads" / "6-card spreads"), reversal-% caption, GRAVITY + LEVITY deck swatches, LOCK HAND + DEL btns. Default = Situation, Action, Outcome (a 3-card spread). Selecting a 6-card spread (Celtic Cross Waite-Smith or Escape Velocity) swaps `.my-sea-cross[data-spread-shape]` from `three-card` to `six-card` — revealing the crown / lay / cross cells that the default 3-card variants hide.

Naming correction (user-locked): the spread itself is a "three-card spread" not a "three-card cross" — "cross" stays scoped to the Celtic Cross variants (6-card spreads). CSS class `.my-sea-cross` carries grid-container semantics regardless of which spread shape is active; the spread-vs-cross distinction lives at the spread-name layer only.

- **View** (gameboard/views.py): `my_sea` adds `default_spread = "situation-action-outcome"` + `reversals_pct = 25` context keys.
- **Template** (my_sea.html): renders all 7 cross cells (crown/leave/core+cover+cross/loom/lay) unconditionally + adds `data-spread-shape="three-card"` to `.my-sea-cross`. Form col DRY-reuses gameroom `_sea_overlay.html`'s `.sea-form-col` shape — `.sea-form-main` w. `.sea-field` (SPREAD label + reversal hint + custom combobox) + `.sea-stacks` (GRAVITY + LEVITY swatches) + `.sea-form-actions` (LOCK HAND + DEL). 6 options + 2 dividers in the combobox `<ul>`; dividers are `role="presentation"` so `combobox.js` skips them naturally. Inline IIFE listens for the hidden `<input id="id_sea_spread">`'s `change` event + sets `.my-sea-cross`'s `data-spread-shape` based on whether the value is in `['waite-smith', 'escape-velocity']`. No new combobox.js wiring — the existing module's `change`-bubbling contract feeds straight in.
- **SCSS** (_gameboard.scss):
  - `.my-sea-cross[data-spread-shape="three-card"]` — single-row `"leave core loom"` grid + `display: none` on crown/lay/cross.
  - `.my-sea-cross[data-spread-shape="six-card"]` — inherits the gameroom `.sea-cross`'s 3×3 grid + reveals all cells.
  - `.sea-select-divider` — section header style mirrors `.kit-bag-label`'s small-uppercase-underlined-letter-spaced --quaUser/0.75 treatment but HORIZONTAL (kit-bag uses `writing-mode: vertical-rl`; dropdown menus are flat). `pointer-events: none` belt-and-braces against accidental click/hover.
  - `.my-sea-form-col` — width-constrains the form col so the picker's cross + form sit side-by-side.

**Iter-2 contract updated** (cells in DOM, hidden via CSS for 3-card default):

- FT `test_picker_does_not_render_forsaken_positions` → renamed to `test_picker_hides_six_card_only_positions_by_default` — asserts the 3 cells are in the DOM but `is_displayed() == False` so iter-3's spread switch can reveal them via CSS without re-rendering.
- IT `test_picker_does_not_render_forsaken_positions` → renamed to `test_picker_renders_six_card_only_positions_for_spread_switch` — assertContains the classes (server now renders them unconditionally).

**Tests**:

- 4 FTs in new `MySeaSpreadFormTest`: combobox renders 6 options + 2 dividers w. correct labels, default is Situation/Action/Outcome (hidden input value + visible current-label span + cross's data-spread-shape), picking Celtic Cross flips data-spread-shape to six-card + reveals crown/lay/cross, form col carries DECKS swatches + LOCK HAND + DEL + reversal-% caption. Combobox `<li>` options are inside `aria-expanded='false'` listbox → use `get_attribute("textContent")` not `.text` (which returns "" for Selenium-hidden elements).
- 7 ITs in new `MySeaSpreadFormTemplateTest`: default_spread + reversals_pct context keys, all 6 options + both labels render, 2 dividers render w. expected text, default option carries aria-selected="true", cross's initial data-spread-shape="three-card", form col DECKS + buttons + reversal hint render.

Tests: 32/32 FT green across test_bill_my_sign + test_game_my_sea; 1048/1048 IT/UT green in 52s.

Card-draw mechanics (clicking a deck swatch deposits a card into the next empty slot; LOCK HAND commits the draw) defer to iter 4 — this iter ships the spread-selection + layout-shape switch UI; the buttons are stubs (LOCK HAND starts disabled, DEL is a placeholder).

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>

src/static_src/scss/_gameboard.scss

@@ -282,13 +282,53 @@ body.page-gameboard {
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: 1rem;
 }
 
-// Three-cell horizontal row (leave | core | loom) — strips the crown
-// + lay rows from `.sea-cross`'s 3×3 grid template, leaving only the
-// middle row. Cover stays nested inside `.sea-pos-core` (absolutely
-// positioned overlay handled by _card-deck.scss line 1310-1331).
-.my-sea-cross {
-    grid-template-areas: "leave core loom";
+// .my-sea-cross renders all 6 surrounding positions (crown/lay/cross
+// PLUS leave/loom/cover) so the SPREAD dropdown can toggle 3-card vs
+// 6-card layout via a single data-attribute swap (no DOM mutation).
+// Default `three-card` hides the 3 forsaken positions via `display:
+// none`; `six-card` (Celtic Cross variants) renders all 7 cells.
+// Cover always shows (it's part of both shapes — overlaid on sig).
+.my-sea-cross[data-spread-shape="three-card"] {
+    grid-template-areas:
+        "leave core loom";
     grid-template-rows: auto;
+
+    .sea-pos-crown,
+    .sea-pos-lay,
+    .sea-pos-cross { display: none; }
+}
+
+.my-sea-cross[data-spread-shape="six-card"] {
+    // Inherits `.sea-cross`'s 3×3 template from _card-deck.scss line 1189-
+    // 1200; nothing to override layout-wise. All cells visible.
+}
+
+// Section dividers inside the SPREAD combobox — labels "3-card spreads"
+// / "6-card spreads" separating the option groups. Styled to echo the
+// `.kit-bag-label` treatment (small uppercase underlined letter-spaced
+// --quaUser) but horizontal rather than vertical (kit-bag uses writing-
+// mode: vertical-rl; this is a flat dropdown).
+.sea-select-list .sea-select-divider {
+    font-size: 0.55rem;
+    text-transform: uppercase;
+    text-decoration: underline;
+    letter-spacing: 0.12em;
+    color: rgba(var(--quaUser), 0.75);
+    padding: 0.4rem 0.6rem 0.2rem;
+    pointer-events: none;     // not selectable; combobox.js skips it
+                              // (no role=option), but belt-and-braces
+                              // against accidental hover/click styles.
+    list-style: none;
+}
+
+// Form col on my-sea — same DRY treatment as the gameroom sea-overlay
+// `.sea-form-col` (handled in _card-deck.scss) but sits next to the
+// picker's cross on a `--duoUser` page. Just constrain the width so it
+// doesn't fight the cross for horizontal space.
+.my-sea-form-col {
+    flex: 0 0 16rem;
+    max-width: 16rem;
 }