# Challenge Floor PC Layout – Conversation Summary

## Project & Stack
- **Page:** `e:\AIFO\Project\aifo_web_page\aifo_portal_web\pages\Challenge desktop20260513.html`
- **Render JS:** `e:\AIFO\Project\aifo_web_page\aifo_portal_web\assets\js\challenge-floor-render.js`
- **Stack:** Bootstrap 4, jQuery, no React. Mobile must stay unchanged (`d-none d-lg-block` on metrics col).

## User Goals (PC ≥992px)
1. Left **metrics column** with: Account Size, middle parameter rows (with help icons), One-time Challenge Fee (no help on head/foot).
2. **Strict horizontal alignment** with card content:
   - Account Size ↔ `.account-head .size` ($10,000)
   - Daily Drawdown, Max Drawdown, Profit Target, etc. ↔ `.values .value-item` rows
   - **One-time** (first line of fee label) ↔ `.price-row .price` (e.g. $44.5 / $109)
3. Left column **gradient background** should match **pricing card height** (slightly higher at top only), not stretch full row/parent.
4. **5 cards:** metrics `padding-right: 20px`, `min-width: 223px`; cards **flex-fill** remaining width (not fixed 170px). JS class: `challenge-floor-row--five-cards-pc`.
5. **Profit Target:** keep existing `phase-target-row--1/2/3` + JS row-height sync (unchanged logic).

---

## HTML/JS Structure (desktop)

### `buildFloorHtml()` row classes (`challenge-floor-render.js` ~730–758)
- `challenge-floor-row--single-card` (1 card)
- `challenge-floor-row--five-cards-pc` (5 cards)
- `challenge-floor-row--four-cards-pc` (4 cards)
- `challenge-floor-row--instant-aifo-two-pc`, `challenge-floor-row--aifolite-24h-pc` (special layouts)

### Metrics column markup (`renderMetricsColumn`)
```
metrics-col.challenge-ladder
  ├── metric-item--ladder-head (Account Size + Component 34.svg)
  ├── metrics-col__body.challenge-ladder__body (middle .metric-item rows + help)
  └── challenge-ladder__foot-block
        ├── metric-item--ladder-foot-split (two-line fee label)
        └── challenge-ladder__foot-tail (empty spacer, filled by JS)
```

### `renderMetricsFootItem()` (not generic anchor for foot)
- Line 1: `ladder-foot-row-primary` = icon + `One-time`
- Line 2: `ladder-foot-line--secondary` = `Challenge Fee` with `padding-left: calc(18px + 8px)`

### Desktop cards: `account-card.challenge-ladder` with `challenge-ladder__head`, `values.challenge-ladder__body`, `price-area.challenge-ladder__foot`

---

## CSS Variables (`Challenge desktop20260513.html` :root / .challenge-floor)
- `--challenge-account-head-min-h: 92px`
- `--challenge-values-padding-top: 16px`
- `--challenge-ladder-row-gap: 12px`
- `--challenge-ladder-row-h: 30px`
- `--challenge-metrics-col-pad-left: 20px`
- `--challenge-metrics-col-pad-right: 28px` (28px general; **20px for 5-card row**)
- `--challenge-pc-card-max-w: 280.67px` (2–4 cards)
- `--challenge-pc-card-max-w-5: 170px` (defined but **5-card layout now uses flex: 1**, not fixed 170)
- `--challenge-best-tag-overhang: 16px` (cards-inner + metrics-col padding-top)

---

## Key PC CSS (`@media (min-width: 992px)`)

### Problematic stretch (causes tall gradient)
```css
#challenge-floor-mount > .row.no-gutters { align-items: stretch; }
.challenge-ladder { height: 100%; }
.metrics-col.challenge-ladder {
  align-self: stretch;
  background: linear-gradient(...);  /* gradient on full column */
  padding: var(--challenge-best-tag-overhang) ...;
}
.account-card.challenge-ladder { min-height: 100%; }
```

### Foot label styles
- `.ladder-foot-line { line-height: 30px; }`
- `.ladder-foot-row-primary { min-height: 30px; align-items: center; }`

### 5-card row overrides
- Metrics: `padding-right: 20px`, `min-width: 223px`
- Cards: `flex: 1 1 0%` on columns, scroll `overflow-x: hidden`, inner `width: 100%`

### 992–1200px grid
- `display: grid` for multi-card rows; five-cards uses `grid-template-columns: minmax(223px, max-content) minmax(0, 1fr)`

---

## JS: `syncChallengeDesktopLadderHeights()` (PC only, `isCompactChallengeFloorViewport()` returns early)

Resets and syncs:
1. **Head:** `metric-item--ladder-head` padded to align with `.account-head .size`; head bottom matched to `account-head` bottom.
2. **Body start:** `metrics-col__body` `padding-top` measured from card gap (account-head bottom → first value-item).
3. **Middle rows:** pairwise `minHeight`/`height` on `.metrics-col__body .metric-item` and `.value-item`; Profit Target uses `height: auto` + phase min-heights.
4. **Per-row `margin-top`** nudge so each label row top matches first card’s value row top.
5. **Foot:** `margin-top` on `$foot` so **`.ladder-foot-line--primary` vertical center** ↔ **`.price` vertical center** (not whole foot block).
6. **foot-tail:** sets height = `card.bottom - foot.bottom` → **extends metrics column to full card height including button area** → likely cause of **gradient too tall**.

---

## Resolved Issues
- Restored `price-area` / `price-row` original padding (removed overrides that zeroed `margin-bottom`).
- Middle row alignment via JS + `gap` on body.
- 5-card overlap: switched from fixed narrow width + scroll to flex-fill + metrics min-width.
- Fee label two-line layout + One-time/price alignment.

---

## OPEN TASK (latest user request, NOT implemented)

**Problem:** Left metrics **gradient background** is too tall—almost full parent height—visually much taller than pricing cards.

**User wants:**
1. Gradient must **not** fill entire container.
2. Height ≈ **right pricing card height**, only **slightly higher at top** (design balance).

**Likely fix direction:**
1. Remove or stop using **`foot-tail`** spacer that stretches column to `article.account-card` bottom (includes button + `price-area` padding).
2. Change `metrics-col` from `align-self: stretch` + `height: 100%` to **`align-self: flex-start`**; height = content or JS-set to card height.
3. Move gradient to **`::before`** on `.metrics-col` with height set via CSS variable from JS: `card.outerHeight()` (and optional small top offset), not `foot-tail` fill.
4. Row: `align-items: flex-start` instead of `stretch` if needed.
5. Re-verify alignments after height change (head, body rows, One-time ↔ price).

---

## Files to Edit
- `pages/Challenge desktop20260513.html` – PC `@media (min-width: 992px)` metrics-col / challenge-ladder / foot-tail rules
- `assets/js/challenge-floor-render.js` – `syncChallengeDesktopLadderHeights()` foot-tail block (~1166–1178); optionally add `syncMetricsColGradientHeight()`

## Do Not Break
- Mobile (`<992px`) and portrait tablet compact floor (`isCompactChallengeFloorViewport()`).
- `renderMobileAccountCard` / mobile metrics (unchanged).
- Profit Target phase row classes and sync branch.
- Existing business logic (tabs, pricing data, tooltips).

## Testing
- PC: 2 STEP with 5 cards, INSTANT 3 cards (screenshot context), single card, 992–1200px width.
- Hard refresh after CSS/JS changes; `syncChallengeDesktopLadderHeights` runs on render + resize (double rAF).