<!--
================================================================================
  FILE:     index.html
  PAGE:     PalmPoll — Poll Builder (Home Page)
  VERSION:  202604082030
  AUTHORS:  Palmdesk / Claude

================================================================================
  PURPOSE
  -------
  Landing page and primary poll creation tool.
  Entry screen presents 3 cards: AI creation | Manual build | Vote now.
  Selecting Card 2 (Manual) reveals the form builder below.
  Card 1 navigates to AI_Create.html. Card 3 navigates to Vote_Now.html.

  No authentication required to view or use the page.
  Auth is triggered only at Save and Publish button clicks.

================================================================================
  LAYOUT
  ------
  [Nav Bar]               — injected by cpbp-nav.js via cpbp-auth.js
  [Network Banner]        — fixed top, slides in on offline event
  [Entry Screen]          — 3-card welcome screen (Card 1 AI | Card 2 Manual | Card 3 Vote)
  [Small Trio]            — fixed top-right; visible when form builder is active
  [Form Builder Container]— hidden until Card 2 selected
    [Step 1 Label]        — "Step 1: Set Poll Go-Live Schedule and Duration"
    [Card 1 — Schedule]   — Start Date | Start Time | Duration | Schedule hint
    [Step 2 Label]        — "Step 2: Design poll Q&A"
    [Card 2 — Q&A]        — QType selector | Question textarea | Answer area
  [Page Footer]           — sticky bottom: pricing hint | Clear | Preview | Save | Publish
  [cpbpConfirmModal]      — reusable confirm dialog
  [indexSoonModal]        — Coming Soon for social sign-in triggers

================================================================================
  LOAD SEQUENCE
  -------------
  1. Supabase CDN script (supabase-js@2)
  2. window.cpbpNavConfig = { showMyPolls:true, showNewPoll:false }
  3. cpbp-auth.js loads
       └── internally loads cpbp-nav.js
             └── injects nav HTML + CSS immediately (before body renders)
       └── DOMContentLoaded: db.auth.getSession()
             ├── session found  → setAuthState(user) → nav shows avatar
             └── no session     → nav stays at Sign In state
  4. Body renders — all content visible immediately (no auth gate)
  5. _appInit() fires on DOMContentLoaded

================================================================================
  AUTH MODEL
  ----------
  - Page opens freely — no auth gate on load
  - Auth triggered ONLY at: Save button, Publish button
  - Session persists via Supabase JWT + refresh token (auto-refreshed by SDK)
  - 30-day inactivity timeout configured in Supabase dashboard (not in code)
  - Sign Out: manual only via nav dropdown → navLogOut() in cpbp-auth.js

================================================================================
  KEY DESIGN DECISIONS
  --------------------
  1. initDateTime() pre-fills today + Now() on fresh load. Time ticks live (SS visible).
     Poll goes live the moment author publishes — no buffer to debate.
     Author who wants a future schedule simply picks a date/time manually.
     Manually set time: static HH:MM. Live clock: HH:MM:SS ticking.
     Live clock also restarts (Trigger 2) if author's set time becomes stale.

  2. Schedule hint is ONE div — text + color swapped by _updateScheduleHint().
     2 states only (A1: draft toggle ON, A4: live clock ticking).
     All other valid schedule states show empty hint — nothing to say.

  3. Material Symbols Rounded (FILL=1, wght=400) throughout.
     Old Material Icons library NOT used anywhere on this page.

  4. Nav entirely owned by cpbp-nav.js — zero nav HTML in this file.
     cpbpNavConfig tells nav which pill buttons to show when signed in.

  5. Page background: #f8f9fa (std_design.md standard — matches Workspace visual language).

  6. All 4 footer buttons start inactive. updateFooterButtons() drives state.
     Inactive = opacity 0.4 only. Never hidden, never color-changed.

  7. _inFlight Map guards all 4 footer buttons against double-click.
     Save + Publish additionally guarded during async Cloudflare Worker call.

  8. poll_id generated SERVER-SIDE by Cloudflare Worker — not in browser.
     Browser receives poll_id in Worker response after successful publish.

================================================================================
  PRODUCTION WRITE PATH (Save + Publish)
  ----------------------------------------
  Browser → fetch(WORKER_URL + '/api/save' or '/api/publish')
              → Cloudflare Worker (edge, always warm, no cold starts)
                  → validates + sanitises input
                  → generates poll_id (server-side, collision-safe)
                  → pushes to Cloudflare Queue
                  → returns { success:true, pollId, internalId }
                             ↓
                       Queue Worker (async)
                             → bulk INSERT to Supabase Postgres
                             → updates schedule_today table
                             → handles 10M concurrent publishes without
                               saturating Postgres connection pool

================================================================================
  TRANSIT CONTAINER
  -----------------
  Key:     CPBP_INTERNAL_TRANSIT_CONTAINER (localStorage)
  Written: on Preview, Save, Publish (immediately before navigation)
  Read:    on return from Preview (?from=preview)
           on Edit (?edit=id) — prefill Q&A + schedule from Polls_List
           on Duplicate (?duplicate=id) — prefill Q&A only, schedule keeps initDateTime() defaults
  Schema:  id, authorEmail, created, savedAt, sample,
           question, type, options[], gridRows[], gridCols[],
           scaleMin, scaleMax, lblMin, lblMax,
           ratingType, ratingScale, npsMin, npsMax,
           dateVal, timeVal, durD, durH, durM,
           goLive, durationMins, expiresAt,
           status, deletedAt, responses, responseData[]

================================================================================
  COMPANION FILES
  ---------------
  cpbp-auth.js                  — auth module (OTP, session restore, setAuthState)
  cpbp-nav.js                   — nav module (injected by auth, never loaded directly)
  cpbp-actions.js               — shared Save + Publish actions (Worker calls, answer structure)
  Preview_unpublished_poll.html — Preview destination (?from=preview on return)
  Poll_Share.html               — Publish destination
  Polls_List.html               — Save destination + Edit/Duplicate source
  Vote_Now.html                 — Voter destination

================================================================================
  COLOUR PALETTE
  --------------
  #673ab7   Brand purple   — accent bars, logo icon, confirm modal icon
  #1a73e8   Google blue    — primary actions, active states, links
  #1557b0   Blue dark      — hover on blue buttons
  #202124   Near-black     — body text, headings
  #5f6368   Utility gray   — secondary text, icons, labels
  #9aa0a6   Hint gray      — placeholders, disabled text
  #dadce0   Border gray    — dividers, card borders
  #f8f9fa   Page bg        — body background
  #ffffff   White          — cards, modals, nav bar
  #d93025   Error red      — validation errors, danger actions
  #0f9d58   Success green  — loading complete, verified states
  #f4b400   Warning yellow — counter at-max state

================================================================================
  SECURITY NOTES (active threats — partially mitigated)
  -------------------------------------------------------
  XSS:          DOMPurify sanitization needed on all innerHTML injections.
                Currently safe — no user-generated content in answer area HTML
                until DB wiring. Wire DOMPurify at DB-wiring time.
  CSRF:         X-CSRF-Token header on all Cloudflare Worker calls.
                🧹 WIRE: Add to fetch() headers in _executeSave/_executePublish.
  Clickjacking: X-Frame-Options DENY at Cloudflare (CDN/edge config, not code).
  ID exposure:  poll_id is human-readable PLBP-XXXX-XXXX by design (voter UX).
                internal_id is UUID v4 — never exposed to users.
  Auth tokens:  JWT stored in localStorage by Supabase SDK default.
                Move to httpOnly cookie for production hardening.
                🧹 WIRE: Supabase SSR client config at security hardening pass.
  SRI:          Add subresource integrity hashes to Supabase CDN script tag.
                🧹 WIRE: At security hardening pass.

================================================================================
  GDPR / CCPA
  -----------
  Deferred to dedicated compliance session.
  🧹 WIRE: Cookie consent banner placement — above nav, z-index above modals.
           DSR endpoint activation — server-side Cloudflare Worker route.
           Privacy policy link — footer or nav.

================================================================================
  SCALING NOTES
  -------------
  Index is a creation tool — one author at a time. Not high-traffic.
  Scaling pressure is on Vote_Now.html and Polls_List.html, not here.
  Cloudflare Worker + Queue absorbs 10M concurrent publishes.
  Supabase PgBouncer connection pooler must be enabled in dashboard.
  See production write path above for full architecture.

================================================================================
  JS BLOCK MAP (26 blocks)
  ------------------------
  Block 1:   initDateTime()
  Block 2:   Entry screen (selectEntryCard, handleEntryCta, _entryHasFormData,
               _showFormBuilder, _hideFormBuilder, handleEntryPollIdInput,
               handleEntryPollIdKey, _updateEntryVoteBtn, submitEntryVote,
               _initEntryScrollListener)
  Block 3:   Step label activation (activateStep1, activateStep2)
  Block 4:   QType selector + renderAnswerArea() — all 16 QTypes
  Block 5:   Add/Remove option + grid item helpers
  Block 6:   Schedule input handlers (onDatePicked, validateDateTime)
  Block 7:   Question field validation (_qDirty state machine)
  Block 8:   Schedule hint (_updateScheduleHint — 2 states, 1 div)
  Block 9:   Footer button state (updateFooterButtons, _updateBtnTooltips)
  Block 10:  Scale + Rating live preview (updateScaleLabels, updateRatingPreview)
  Block 11:  Clear form (clearPollForm)
  Block 12:  Q&A validity + options guard (_qaIsValid, _warnIfTooManyOptions)
  Block 13:  Transit container (readTransit, writeTransit, clearTransit, _collectFromDOM)
  Block 14:  _inFlight double-click guard + WORKER_URL constant
  Block 14B: Preview (requireAuthThenPreview)
  Block 15:  Save (requireAuthThenSave → cpbpConfirm → _executeSave → Worker)
  Block 16:  Publish (requireAuthThenPublish → guard → cpbpConfirm → _executePublish → Worker)
  Block 17:  Page callbacks for cpbp-actions.js (cpbpGetTransit, cpbpOnSaveSuccess, cpbpOnPublishSuccess)
  Block 18:  Network error banner + offline detection + stale page toast
  Block 20A: Restore draft from Preview (restoreDraftIfReturning)
  Block 20B: Prefill from transit — Edit/Duplicate (_prefillFromTransit, _restoreFromTransitData)
  Block 21:  cpbpConfirm modal controller
  Block 22:  indexSoonModal (openIndexSoonModal, closeIndexSoonModal)
  Block 23:  Toast helper (showToast)
  Block 24:  Textarea auto-grow (autoGrow)
  Block 25:  App init (_appInit)
  Block 26:  Auth callbacks + window.* assignments

================================================================================
  🧹 WIRE CHECKLIST (remaining items before go-live)
  ---------------------------------------------------
  #1  JS Block 14   WORKER_URL → confirm live Cloudflare Worker URL
  #4  JS Block 18   Uncomment window.addEventListener('offline') listener
  #6  Footer HTML   Update pricing hint text when strategy finalised
  #7  Security      DOMPurify on innerHTML, CSRF header, SRI hashes, httpOnly JWT
  #8  GDPR          Cookie consent banner, DSR endpoint, privacy policy link
  #9  Supabase      Enable PgBouncer connection pooler in dashboard
  #10 Cloudflare    X-Frame-Options DENY at edge config

================================================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PalmPoll — Poll Builder</title>

    <!-- Material Symbols Rounded — FILL=1, wght=400. Only icon library used. -->
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">

    <!-- Google Sans + Roboto font stack -->
    <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

    <style>
    /* ============================================================
       CSS BLOCK 1: GLOBAL / BASE
       Page background: #f8f9fa (std_design.md standard).
       Font stack: Google Sans → Roboto → Arial.
       Near-black body text #202124.
       box-sizing border-box globally — prevents layout surprises.
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; }

    body {
        background-color: #f8f9fa;
        font-family: 'Google Sans', Roboto, Arial, sans-serif;
        margin: 0;
        padding: 0;
        color: #202124;
        font-size: 14px;
        line-height: 1.5;
    }

    /* Utility: make hidden element visible (toggled by JS) */
    .show { display: block !important; }

    /* Generic blue hyperlink — used inside answer area previews */
    .blue-link {
        color: #1a73e8;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
    }

    /* Thin HR divider — between QType groups in selector dropdown */
    hr.divider {
        border: 0;
        border-top: 1px solid #eee;
        margin: 4px 0;
    }


    /* ============================================================
       CSS BLOCK 2: PAGE LAYOUT — MAIN CONTENT COLUMN
       All content cards centered in a 750px column.
       On mobile: 95% width.
       Bottom padding 80px — clears the sticky footer buttons.
    ============================================================ */
    .section-container {
        width: 750px;
        margin: 0 auto;
        padding-bottom: 80px;   /* clears sticky footer */
    }


    /* ============================================================
       CSS BLOCK 3: SECTION DIVIDER + INTRO TEXT
       Purple accent bar: short 80px underline between sections.
       Intro heading: 28px light — "Wish to vote?" style.
       Intro subtext: 14px gray secondary.
    ============================================================ */
    .section-header-bar {
        margin: 32px 0 24px 0;
        padding-bottom: 2px;
        border-bottom: 4px solid #673ab7;
        width: 80px;
    }

    .intro-section {
        margin-bottom: 24px;
        text-align: left;
    }

    .intro-heading {
        font-size: 28px;
        font-weight: 400;
        color: #202124;
        margin: 0 0 8px 0;
    }

    .intro-subtext {
        font-size: 14px;
        color: #70757a;
        margin: 0;
        letter-spacing: 0.2px;
    }


    /* ============================================================
       CSS BLOCK 4: STEP LABELS
       "Step 1:" / "Step 2:" roadmap indicators above each card.
       Default: gray (inactive).
       On first user interaction: .active class added by JS → blue.
       Smooth color transition.
    ============================================================ */
    .step-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: #70757a;             /* gray = inactive */
        margin: 24px 0 8px 0;
        transition: color 0.3s ease;
    }

    .step-label.active { color: #1a73e8; }  /* blue = user engaged */


    /* ============================================================
       CSS BLOCK 5: CARD CONTAINER
       White card that wraps each form section.
       Subtle shadow lifts card off #f8f9fa background.
       Border radius 8px — Google Workspace standard.
       Shadow: 0.07 opacity — intentionally subtle (nearly flat).
    ============================================================ */
    .form-card {
        background: #ffffff;
        border-radius: 8px;
        width: 750px;
        padding: 24px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.07);
        border: 1px solid #dadce0;
        box-sizing: border-box;
        margin-bottom: 20px;
    }

    /* ============================================================
       CSS BLOCK 6: ENTRY SCREEN — 3-CARD LAYOUT
       Header, 3 equal-height cards, small trio, CTA button.
       Responsive: 3-col desktop → 1-col mobile (≤560px).

       ANIMATIONS:
         shake — poll ID input on invalid submit
         fadeIn — form builder reveal (280ms)
         fadeOut — form builder hide (280ms)

       SMALL TRIO:
         Fixed top-right (top:76px) — hides during scroll,
         reappears 300ms after scroll stops.
    ============================================================ */

    /* ── Header block ─────────────────────────────────────────── */
    .entry-header {
        padding: 32px 0 0 0;
    }

    .entry-title {
        font-size: 22px;
        font-weight: 500;
        color: #202124;
        margin: 0 0 4px 0;
    }

    .entry-punchline {
        font-size: 13px;
        color: #5f6368;
        margin: 0 0 16px 0;
    }

    .entry-divider {
        height: 0.5px;
        background: #dadce0;
        margin-bottom: 14px;
    }

    .entry-prompt {
        font-size: 14px;
        color: #202124;
        margin: 0 0 16px 0;
    }

    /* ── 3-card grid ──────────────────────────────────────────── */
    .entry-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-bottom: 16px;
    }

    .entry-card {
        background: #ffffff;
        border: 1.5px solid #dadce0;
        border-radius: 12px;
        padding: 20px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        transition: border-color 0.2s ease, background 0.2s ease;
        user-select: none;
    }

    .entry-card:hover {
        border-color: #bdc1c6;
        background: #fafafa;
    }

    .entry-card.entry-card-selected {
        border-color: #1a73e8;
        border-width: 2px;
        background: #f0f6ff;
    }

    /* Badge: "Recommended" pill */
    .entry-card-badge {
        display: inline-block;
        font-size: 11px;
        font-weight: 500;
        color: #1a73e8;
        background: #e8f0fe;
        border-radius: 20px;
        padding: 2px 10px;
        margin-bottom: 12px;
        align-self: flex-start;
    }

    /* Spacer — same height as badge, keeps icon aligned across cards */
    .entry-card-badge-spacer {
        height: 22px;
        margin-bottom: 12px;
    }

    /* Icon background circle */
    .entry-card-icon-wrap {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 14px;
        flex-shrink: 0;
    }

    .entry-card-icon-blue { background: #e8f0fe; }
    .entry-card-icon-gray { background: #f1f3f4; }
    .entry-card-icon-green { background: #e6f4ea; }

    .entry-card-icon {
        font-size: 22px;
        font-variation-settings: 'FILL' 1;
    }

    .entry-card-title {
        font-size: 14px;
        font-weight: 600;
        color: #202124;
        margin-bottom: 8px;
    }

    .entry-card-desc {
        font-size: 13px;
        color: #5f6368;
        line-height: 1.5;
    }

    /* ── Poll ID input (Card 3) ───────────────────────────────── */
    .entry-vote-input-wrap {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .entry-poll-id-row {
        display: flex;
        align-items: baseline;
        border-bottom: 2px solid #1a73e8;
        padding-bottom: 4px;
    }

    .entry-poll-id-prefix {
        font-size: 16px;
        font-family: 'Courier New', monospace;
        font-weight: 700;
        color: #9aa0a6;
        white-space: nowrap;
        user-select: none;
        flex-shrink: 0;
    }

    .entry-poll-id-field {
        border: none;
        outline: none;
        font-size: 16px;
        font-family: 'Courier New', monospace;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        background: transparent;
        color: #202124;
        width: 100%;
    }

    .entry-poll-id-field::placeholder {
        color: #9aa0a6;
        font-weight: 400;
        letter-spacing: 2px;
    }

    .entry-poll-id-row.entry-poll-id-shake {
        animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
    }

    /* Vote button inside Card 3 */
    .entry-vote-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: #ffffff;
        color: #202124;
        border: 1.5px solid #dadce0;
        border-radius: 6px;
        padding: 9px 16px;
        font-size: 13px;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        opacity: 0.4;
        transition: opacity 0.2s ease, border-color 0.2s ease;
        pointer-events: none;
    }

    .entry-vote-btn.entry-vote-btn-active {
        opacity: 1;
        pointer-events: auto;
        border-color: #202124;
    }

    .entry-vote-btn.entry-vote-btn-active:hover {
        background: #f1f3f4;
    }

    .entry-vote-btn .material-symbols-rounded { font-size: 16px; }

    /* ── CTA button (Card 1 / Card 2) ────────────────────────── */
    .entry-cta-row {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 32px;
    }

    .entry-cta-btn {
        display: none;  /* hidden until a card is selected */
        align-items: center;
        gap: 8px;
        background: #ffffff;
        color: #202124;
        border: 1.5px solid #202124;
        border-radius: 6px;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .entry-cta-btn.entry-cta-active {
        display: flex;
    }

    .entry-cta-btn:hover { background: #f1f3f4; }

    .entry-cta-btn .material-symbols-rounded { font-size: 16px; }

    /* ── Small trio (fixed top-right when form builder active) ── */
    .entry-small-trio {
        position: fixed;
        top: 76px;
        right: 16px;
        z-index: 200;
        display: flex;
        gap: 4px;
        opacity: 1;
        transition: opacity 150ms ease;
    }

    .entry-small-trio.entry-trio-hidden {
        opacity: 0;
        pointer-events: none;
    }

    .entry-small-card {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        border: 1.5px solid #dadce0;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: border-color 0.2s ease, background 0.2s ease;
    }

    .entry-small-card:hover {
        border-color: #bdc1c6;
        background: #f1f3f4;
    }

    .entry-small-card-active {
        border-color: #1a73e8;
        background: #e8f0fe;
    }

    .entry-small-icon {
        font-size: 18px;
        font-variation-settings: 'FILL' 1;
    }

    /* ── Form builder show/hide animations ───────────────────── */
    @keyframes fbFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    @keyframes fbFadeOut {
        from { opacity: 1; }
        to   { opacity: 0; }
    }

    #form-builder-container.fb-visible {
        animation: fbFadeIn 1000ms ease-out forwards;
    }

    #form-builder-container.fb-hiding {
        animation: fbFadeOut 1000ms ease-in forwards;
    }

    /* ── Shake animation (poll ID invalid submit) ─────────────── */
    @keyframes shake {
        10%, 90% { transform: translate3d(-1px,0,0); }
        20%, 80% { transform: translate3d(2px,0,0); }
        30%, 50%, 70% { transform: translate3d(-4px,0,0); }
        40%, 60% { transform: translate3d(4px,0,0); }
    }

    /* ── Responsive: mobile single column ────────────────────── */
    @media (max-width: 560px) {
        .entry-cards {
            grid-template-columns: 1fr;
        }
    }

    /* ── Desktop: 30% wider card grid (breakout from 750px column) ─ */
    @media (min-width: 1100px) {
        #entry-screen-container {
            width: 965px;
            margin-left: -107px;
        }
    }

    /* ── Desktop: 2x text sizes + bigger cards ────────────────── */
    @media (min-width: 768px) {
        .entry-title        { font-size: 44px; }
        .entry-punchline    { font-size: 26px; }
        .entry-prompt       { font-size: 28px; }
        .entry-card         { padding: 28px; }
        .entry-card-badge   { font-size: 22px; padding: 4px 14px; }
        .entry-card-badge-spacer { height: 36px; }
        .entry-card-icon-wrap { width: 56px; height: 56px; margin-bottom: 18px; }
        .entry-card-icon    { font-size: 30px; }
        .entry-card-title   { font-size: 28px; margin-bottom: 10px; }
        .entry-card-desc    { font-size: 26px; line-height: 1.4; }
        .entry-cta-btn      { font-size: 18px; padding: 12px 28px; }
        .entry-vote-btn     { font-size: 20px; padding: 11px 20px; }
        .entry-poll-id-prefix { font-size: 20px; }
        .entry-poll-id-field  { font-size: 20px; }
    }

    /* ── Entry screen pricing hint (visible on 3-card view) ───── */
    .entry-pricing-hint {
        text-align: center;
        font-size: 15px;
        font-weight: 500;
        color: #5f6368;
        margin-top: 8px;
        padding: 10px 0 24px 0;
        letter-spacing: 0.1px;
    }

    @media (min-width: 768px) {
        .entry-pricing-hint { font-size: 18px; }
    }

    /* ── Page footer: hidden on entry screen, shown by JS ──────── */
    .page-footer { display: none; }

    /* ============================================================
       CSS BLOCK 7: CARD 1 — SCHEDULE

       NEW LAYOUT — two-column grid:
         Left  — inline calendar widget (full height)
         Right — Start Time (top) + divider + Duration (bottom)

       Schedule hint sits flush at the bottom of the left column,
       below the calendar box. One hint visible at a time.

       START TIME DISPLAY:
         HH:MM are contenteditable spans (#startTimeH, #startTimeM).
         :SS is a plain read-only span (#startTimeS) — ticks automatically.
         HH:MM underlined signals editability. Click digit to edit directly.

       DURATION:
         Three text inputs in a row. Up/down adj arrows hidden by
         default, fade in on focus for that field only.
         On mobile: native number overlay via inputmode="numeric".

       MOBILE (≤768px):
         Single column: calendar → time → duration stacked.
         Natural vertical scroll — no horizontal overflow.
    ============================================================ */

    /* Two-column grid: calendar left, controls right */
    .card1-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        align-items: start;
    }

    /* Left column — calendar + hint pinned at bottom */
    .card1-left {
        display: flex;
        flex-direction: column;
    }

    /* Inline calendar widget */
    .cal-widget {
        background: #f5f5f0;
        border-radius: 12px;
        padding: 20px;
        user-select: none;
        flex: 1;
    }

    .cal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
    }

    .cal-month-label {
        font-size: 18px;
        font-weight: 600;
        color: #202124;
    }

    .cal-nav-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid #dadce0;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 16px;
        color: #5f6368;
        line-height: 1;
    }

    .cal-nav-btn:hover { background: #f1f3f4; }

    .cal-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
    }

    .cal-dow {
        font-size: 12px;
        text-align: center;
        color: #9aa0a6;
        font-weight: 600;
        padding: 6px 0;
    }

    .cal-day {
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        border-radius: 50%;
        cursor: pointer;
        color: #202124;
    }

    .cal-day:hover { background: #e8e8e2; }
    .cal-day.cal-today { background: transparent; color: #1a73e8; font-weight: 700; box-shadow: inset 0 0 0 2px #1a73e8; }
    .cal-day.cal-selected { background: #1a73e8; color: #ffffff; font-weight: 600; box-shadow: none; }
    .cal-day.cal-other { opacity: 0.25; }
    .cal-day.cal-past { opacity: 0.25; cursor: default; pointer-events: none; }

    /* Schedule hints — two separate positioned divs in right column.
       #hintA4 sits below the time block.
       #hintA1 sits below the toggle row.
       Both hidden by default — _updateScheduleHint() shows one or neither. */
    .sched-hint {
        font-size: 11px;
        font-weight: 500;
        margin-top: 6px;
        min-height: 14px;
        transition: color 0.2s ease;
        display: none;
    }

    .sched-hint.live { color: #1a73e8; display: block; }  /* blue — A4 */
    .sched-hint.info { color: #5f6368; display: block; }  /* gray — A1 */

    /* Right column */
    .card1-right {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .schedule-label {
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.7px;
        color: #9aa0a6;
        margin-bottom: 6px;
    }

    /* Time — HH:MM underlined = editable signal, :SS plain = auto */
    .time-hm {
        display: inline-flex;
        align-items: baseline;
        border-bottom: 1.5px solid #dadce0;
        padding-bottom: 2px;
        cursor: text;
        margin-top: 4px;
    }

    .time-hm:focus-within { border-bottom-color: #1a73e8; }

    .time-dig {
        font-size: 64px;
        font-weight: 400;
        font-variant-numeric: tabular-nums;
        color: #202124;
        line-height: 1;
        min-width: 78px;
        text-align: center;
        cursor: text;
        outline: none;
    }

    .time-dig:focus { color: #1a73e8; }

    .time-sep {
        font-size: 52px;
        font-weight: 300;
        color: #9aa0a6;
        line-height: 1;
        padding: 0 2px;
        user-select: none;
    }

    .time-sep-s {
        font-size: 24px;
        font-weight: 300;
        color: #9aa0a6;
        line-height: 1;
        margin-left: 4px;
        user-select: none;
    }

    .time-ss {
        font-size: 26px;
        color: #9aa0a6;
        font-family: 'Courier New', monospace;
        line-height: 1;
    }

    .card1-divider {
        height: 0.5px;
        background: #dadce0;
        margin: 14px 0 8px;
    }

    /* Duration — inline-flex, contenteditable spans, no inputs */
    .duration-group {
        display: flex;
        align-items: flex-end;
        gap: 0;
        margin-top: 4px;
    }

    .dur-unit {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .dur-dig {
        font-size: 56px;
        font-weight: 400;
        font-variant-numeric: tabular-nums;
        color: #202124;
        line-height: 1;
        min-width: 68px;
        text-align: center;
        cursor: text;
        outline: none;
    }

    .dur-dig:focus { color: #1a73e8; }

    .duration-sep {
        font-size: 40px;
        font-weight: 300;
        color: #9aa0a6;
        line-height: 1;
        margin-bottom: 20px;
        padding: 0 2px;
        user-select: none;
    }

    .duration-sublabel {
        font-size: 10px;
        color: #9aa0a6;
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: 0.3px;
        user-select: none;
    }

    /* Draft toggle */
    .draft-toggle-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 0.5px solid #dadce0;
    }

    .draft-toggle-label { font-size: 13px; color: #5f6368; }

    .toggle-wrap {
        position: relative;
        width: 36px;
        height: 20px;
        flex-shrink: 0;
    }

    .toggle-wrap input { opacity: 0; width: 0; height: 0; position: absolute; }

    .toggle-track {
        position: absolute;
        inset: 0;
        border-radius: 10px;
        background: #dadce0;
        cursor: pointer;
        transition: background 0.2s;
    }

    .toggle-wrap input:checked + .toggle-track { background: #1a73e8; }

    .toggle-thumb {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #ffffff;
        transition: transform 0.2s;
        pointer-events: none;
    }

    .toggle-wrap input:checked ~ .toggle-thumb { transform: translateX(16px); }

    /* Draft active — dim calendar, time, duration */
    .card1-left.draft-dim { opacity: 0.2; pointer-events: none; user-select: none; }
    #schedItemTime.draft-dim { opacity: 0.2; pointer-events: none; }
    .duration-group.draft-dim { opacity: 0.2; pointer-events: none; }

    /* Mobile — stack vertically */
    @media (max-width: 768px) {
        .card1-grid { grid-template-columns: 1fr; gap: 20px; }
    }

             icon + label + chevron
           .select-items                — floating dropdown panel
             div (each option)          — icon + label row
             hr.divider                 — group separator

       .select-items hidden by default. .show class makes it visible.
       Closes on outside click via window.onclick.
       QType selector sits ABOVE question textarea (column layout).
       Works on mobile without overflow.
    ============================================================ */

    /* QType selector — trigger row full width of card */
    .custom-select-container {
        width: 100%;
    }

    /* Trigger row */
    .select-selected {
        border: 1px solid #dadce0;
        border-radius: 4px;
        padding: 10px 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #ffffff;
        height: 48px;
        font-size: 14px;
        color: #202124;
        user-select: none;
        transition: border-color 0.2s;
    }

    .select-selected:hover { border-color: #1a73e8; }

    .select-selected-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .select-selected .material-symbols-rounded {
        font-size: 20px;
        color: #5f6368;
        flex-shrink: 0;
    }

    .select-chevron {
        font-size: 20px;
        color: #5f6368;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    /* Dropdown panel — position:fixed so it floats above all content,
       never pushes page layout, never inherits parent overflow.
       Position set by JS (positionDropdown) on open. */
    .select-items {
        position: fixed;
        background: #ffffff;
        z-index: 9999;
        border: 1px solid #dadce0;
        border-radius: 4px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        display: none;
        padding: 8px 0;
        max-height: 320px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .select-items.show { display: block; }

    .select-items div {
        padding: 10px 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        color: #202124;
        white-space: nowrap;
        transition: background 0.1s;
    }

    .select-items div:hover { background-color: #f1f3f4; }

    .select-items div .material-symbols-rounded {
        font-size: 18px;
        color: #5f6368;
        flex-shrink: 0;
    }

    /* ============================================================
       CSS BLOCK 9: CARD 2 — QUESTION TEXTAREA + VALIDATION

       Google Material Design dirty-state validation pattern:
         · Clean on first load — no red, field untouched
         · After user touches + leaves (blur) → red if < 10 chars
         · On Save/Preview/Publish attempt → forced red if invalid
         · Clears on QType change or Clear Form

       Structure:
         .question-field-wrap           — flex column wrapper
           textarea.question-input      — auto-grow textarea
           .question-helper-row         — hint (left) + counter (right)
             .question-hint             — red hint text, hidden until dirty+invalid
             .question-counter          — "n/200", gray → red under-min → yellow at-max

       .header-row: column layout — selector on top, question below.
       Gap 12px between selector and textarea.
    ============================================================ */

    /* Column layout: QType selector top, question textarea below */
    .header-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
    }

    /* Wrapper: holds textarea + helper row stacked vertically */
    .question-field-wrap {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }

    /* Question textarea — auto-grows with content via JS autoGrow().
       No border except bottom underline — matches Google Forms style.
       Light gray background signals editable area.
       Blue bottom border on focus. */
    .question-input {
        width: 100%;
        border: none;
        border-bottom: 1px solid #70757a;
        background: #f8f9fa;
        padding: 15px;
        font-size: 16px;
        font-family: inherit;
        color: #202124;
        outline: none;
        box-sizing: border-box;
        resize: none;
        overflow: hidden;       /* autoGrow handles height — no scrollbar */
        min-height: 52px;
        line-height: 1.5;
        transition: background 0.2s, border-color 0.2s;
    }

    .question-input:focus {
        background: #eeeeee;
        border-bottom: 2px solid #1a73e8;
        padding-bottom: 14px;   /* compensate for extra border pixel */
    }

    /* Red border state — applied by JS on blur if < MIN_Q_CHARS */
    .question-input.field-error {
        border-color: #d93025 !important;
        box-shadow: 0 0 0 1px #d93025;
    }

    /* NPS question — read-only, fixed standard text.
       Dimmed cursor signals non-editable. */
    .question-input[readonly] {
        color: #5f6368;
        cursor: default;
        background: #f8f9fa;
    }

    /* Helper row: hint text left, char counter right */
    .question-helper-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 4px;
        min-height: 16px;
        padding: 0 2px;
    }

    /* Hint text — hidden until dirty + invalid.
       opacity transition prevents jarring appearance. */
    .question-hint {
        font-size: 11px;
        font-weight: 500;
        color: #d93025;
        opacity: 0;
        transition: opacity 0.2s ease;
        line-height: 1.3;
    }

    .question-hint.visible { opacity: 1; }

    /* Character counter — "n/200"
       Gray normally. Red when under minimum. Yellow at max. */
    .question-counter {
        font-size: 11px;
        color: #9aa0a6;
        white-space: nowrap;
        margin-left: auto;
        padding-left: 8px;
        transition: color 0.2s ease;
    }

    .question-counter.under-min { color: #d93025; font-weight: 600; }
    .question-counter.at-max    { color: #f4b400; font-weight: 600; }

    /* ============================================================
       CSS BLOCK 10: CARD 2 — ANSWER AREA (all QTypes)

       Dynamic area populated by renderAnswerArea() in JS.
       One of 16 QType layouts rendered at a time.

       QType layouts covered:
         MC / Checkboxes / Dropdown  — .option-row + radio-dot/check-square
         Linear Scale                — .scale-config-row, dropdowns, label rows
         Rating                      — .rating-preview-row, star/heart/thumb icons
         NPS                         — .nps-container, circles, end labels
         MC Grid / CB Grid           — .grid-container, rows + cols sections
         Short Answer / Paragraph    — .short-answer-line dotted placeholder
         Number Only                 — numeric placeholder line
         Date / Time / DateTime      — reuses .native-picker-wrapper from Block 7
         Email                       — hint line only
         Location                    — .map-placeholder + location text input

       Answer hint: below answer area for choice/grid types.
         Gray normally → red only when user has started filling but count
         is still insufficient (never red on fresh untouched render).
    ============================================================ */

    /* Answer area container — top margin separates from question */
    .answer-area { margin-top: 20px; }

    /* ── Option rows (MC / Checkboxes / Dropdown) ── */

    /* One answer option row: icon + text input + remove button */
    .option-row {
        display: flex;
        align-items: center;
        padding: 8px 0;
        gap: 12px;
        font-size: 14px;
    }

    /* Radio button circle preview (unfilled) */
    .radio-dot {
        width: 18px;
        height: 18px;
        border: 2px solid #dadce0;
        border-radius: 50%;
        flex-shrink: 0;
    }

    /* Checkbox square preview (unfilled) */
    .check-square {
        width: 18px;
        height: 18px;
        border: 2px solid #dadce0;
        border-radius: 2px;
        flex-shrink: 0;
    }

    /* Editable option text input */
    .opt-input {
        border: none;
        border-bottom: 1px solid #dadce0;
        outline: none;
        font-size: 14px;
        font-family: inherit;
        color: #202124;
        background: transparent;
        padding: 2px 0;
        min-width: 120px;
        width: auto;
        flex: 1;
    }

    .opt-input:focus { border-bottom-color: #1a73e8; }
    .opt-input::placeholder { color: #9aa0a6; }

    /* ✕ Remove button per option */
    .opt-remove {
        font-size: 16px;
        color: #9aa0a6;
        cursor: pointer;
        line-height: 1;
        padding: 0 4px;
        user-select: none;
        flex-shrink: 0;
        transition: color 0.15s;
    }

    .opt-remove:hover { color: #d93025; }

    /* "+ Add option" row */
    .add-option-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 0;
        font-size: 14px;
        color: #1a73e8;
        cursor: pointer;
        user-select: none;
    }

    .add-option-row:hover { text-decoration: underline; }
    .add-option-row .material-symbols-rounded { font-size: 18px; }

    /* Hide native calendar/clock picker icon — overlay passes clicks through */
    input.ans-date::-webkit-calendar-picker-indicator,
    input.ans-time::-webkit-calendar-picker-indicator {
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    /* Date input webkit edit colour fix */
    input[type="date"]::-webkit-datetime-edit { color: #202124; }

    /* ── Short Answer / Paragraph ── */
    /* ── Date / Time / DateTime answer area inputs ──────────────
       Styled to match project design language — underline only,
       no browser-default full box border. Icon sits inline right. */
    .native-picker-wrapper {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-bottom: 1px solid #70757a;
        padding: 6px 2px;
        width: 180px;
    }

    .native-input {
        border: none;
        outline: none;
        background: transparent;
        font-size: 14px;
        font-family: inherit;
        color: #9aa0a6;
        flex: 1;
        min-width: 0;
        cursor: pointer;
    }

    .native-input:focus { color: #202124; }

    .short-answer-line {
        border-bottom: 1px dotted #70757a;
        width: 50%;
        color: #70757a;
        padding: 5px 0;
        font-size: 14px;
    }

    /* ── Location map placeholder (cosmetic WYSIWYG — no live API) ── */
    .loc-preview-search {
        display: flex;
        align-items: center;
        gap: 8px;
        border-bottom: 1.5px solid #e8e0f0;
        padding: 8px 0;
        opacity: 0.6;
    }
    .loc-preview-search .material-symbols-rounded {
        color: #5f6368;
        font-size: 20px;
        flex-shrink: 0;
    }
    .loc-preview-search span:last-child {
        color: #9aa0a6;
        font-size: 15px;
    }
    .map-placeholder {
        width: 100%;
        height: 150px;
        background-color: #f1f3f4;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #9aa0a6;
        font-size: 13px;
        border: 1px solid #e8e0f0;
        margin-top: 12px;
        gap: 6px;
    }

    .map-placeholder .material-symbols-rounded {
        font-size: 32px;
        color: #dadce0;
    }

    /* ── NPS (Net Promoter Score) ── */
    .nps-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 20px 0;
    }

    .nps-row {
        display: flex;
        gap: 8px;
        margin-bottom: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Individual NPS score circle (0–10) */
    .nps-circle {
        width: 36px;
        height: 36px;
        border: 1px solid #dadce0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #3c4043;
        flex-shrink: 0;
    }

    /* "Not at all likely" / "Extremely likely" end labels */
    .nps-labels {
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 480px;
        font-size: 12px;
        color: #70757a;
    }

    /* ── MC Grid / Checkbox Grid ── */
    .grid-container {
        display: flex;
        gap: 40px;
    }

    .grid-section { flex: 1; }

    .grid-title {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 10px;
        color: #202124;
    }

    /* One row in the grid builder: index + input + remove */
    .grid-row-item {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
    }

    .grid-index {
        font-size: 14px;
        color: #202124;
        min-width: 18px;
        flex-shrink: 0;
    }

    /* Grid row/col label input — reuses .opt-input base styles */
    .grid-item-input {
        border: none;
        border-bottom: 1px solid #dadce0;
        padding: 4px 0;
        width: 100%;
        font-size: 14px;
        font-family: inherit;
        outline: none;
        background: transparent;
        color: #202124;
    }

    .grid-item-input:focus { border-bottom: 2px solid #1a73e8; }

    /* "Add row" / "Add column" gray text link */
    .add-btn-gray {
        color: #70757a;
        cursor: pointer;
        font-size: 14px;
        padding: 4px 0;
    }

    /* ── Linear Scale ── */

    /* Row holding min/max range dropdowns */
    .scale-config-row {
        display: flex;
        align-items: center;
        gap: 30px;
        margin-bottom: 20px;
        font-size: 14px;
    }

    /* Wrapper for native select with overlay arrow icon */
    .dropdown-wrapper {
        display: flex;
        align-items: center;
        position: relative;
    }

    /* Scale range select — native appearance removed, styled manually */
    .scale-dropdown {
        -webkit-appearance: none;
        appearance: none;
        border: none;
        border-bottom: 1px solid transparent;
        padding: 4px 28px 4px 8px;
        background: transparent;
        cursor: pointer;
        outline: none;
        font-size: 18px;
        font-weight: 500;
        font-family: inherit;
        color: #202124;
    }

    .scale-dropdown:focus { border-bottom: 2px solid #202124; }

    /* Decorative arrow overlaid on select — not clickable */
    .dropdown-arrow {
        position: absolute;
        right: 4px;
        pointer-events: none;
        font-size: 20px;
        color: #5f6368;
    }

    /* Scale min/max label row: index number + optional text input */
    .scale-label-row {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 12px;
        font-size: 14px;
    }

    .scale-index {
        color: #70757a;
        width: 14px;
        flex-shrink: 0;
        text-align: right;
    }

    .scale-label-input {
        border: none;
        border-bottom: 1px solid #dadce0;
        padding: 4px;
        width: 250px;
        font-size: 14px;
        font-family: inherit;
        outline: none;
        background: transparent;
        color: #202124;
    }

    .scale-label-input:focus { border-bottom: 2px solid #1a73e8; }

    /* ── Rating ── */

    /* Row of rating icons (star / heart / thumb) */
    .rating-preview-row {
        display: flex;
        gap: 12px;
        margin-top: 20px;
        flex-wrap: wrap;
    }

    /* Rating icons use Material Symbols Rounded with color per type:
       star → #fbbc04 yellow, favorite → #ea4335 red, thumb_up → #1a73e8 blue */
    .rating-preview-row .material-symbols-rounded {
        font-size: 32px;
    }

    /* ============================================================
       CSS BLOCK 11: PAGE FOOTER — HINT + BUTTONS

       Sticky footer — always visible at bottom of viewport.
       Left: pricing hint text.
       Right: 4 action buttons — Clear | Preview | Save | Publish.

       Button styles (std_buttons.md):
         Underline style: Clear, Preview, Save
           — blue bottom-border only, hover fills light blue bg
         Filled style: Publish
           — solid blue bg, white text, hover darkens to #1557b0

       Inactive state (ALL buttons):
           — opacity 0.4 only. Never hide, never change color.
           — pointer-events: auto kept so title= tooltip fires on hover
           — cursor: not-allowed signals disabled without blocking hover

       Activation animation:
           — inactive → active: soft scale pop (1.0 → 1.04 → 1.0)
           — 150ms ease forwards

       Mobile: icon-only (btn-label hidden), hint hidden, buttons right-aligned.

       Footer sits OUTSIDE .section-container — full viewport width.
       Position sticky at bottom — always accessible without scrolling.
    ============================================================ */

    /* Footer bar — sticky at bottom, full width */
    .page-footer {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: #ffffff;
        border-top: 1px solid #dadce0;
        padding: 10px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        z-index: 100;
        box-sizing: border-box;
    }

    /* Pricing hint — left side, subtle gray */
    .footer-hint {
        font-size: 12px;
        color: #70757a;
        letter-spacing: 0.2px;
        white-space: nowrap;
    }

    /* Button group — right side */
    .footer-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Base button — shared by all 4 footer buttons */
    .btn-footer {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        background: none;
        border: none;
        padding: 6px 10px;
        text-decoration: none;
        border-radius: 4px;
        transition: color 200ms ease, background-color 200ms ease,
                    border-color 200ms ease, transform 150ms ease;
    }

    /* Underline style — Clear, Preview, Save
       Blue bottom-border only. Hover fills light blue bg. */
    .btn-footer.btn-underline {
        color: #1a73e8;
        border-bottom: 2px solid #1a73e8;
        border-radius: 4px 4px 0 0;
    }

    .btn-footer.btn-underline:hover:not(.btn-inactive) {
        background-color: #e8f0fe;
    }

    /* Filled style — Publish
       Solid blue bg, white text. Hover darkens. */
    .btn-footer.btn-filled {
        color: #ffffff;
        background-color: #1a73e8;
        border-radius: 4px;
        padding: 9px 18px;
    }

    .btn-footer.btn-filled:hover:not(.btn-inactive) {
        background-color: #1557b0;
    }

    /* Inactive state — ALL buttons.
       opacity: 0.4 fades natural color — consistent across underline + filled.
       pointer-events: auto kept so title= tooltip fires on hover.
       cursor: not-allowed signals disabled without blocking hover entirely. */
    .btn-footer.btn-inactive {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: auto !important;
    }

    /* Activation animation — inactive → active soft scale pop */
    @keyframes btn-activate-pop {
        0%   { transform: scale(1.00); }
        50%  { transform: scale(1.04); }
        100% { transform: scale(1.00); }
    }

    .btn-activating { animation: btn-activate-pop 150ms ease forwards; }

    /* Button icon size */
    .btn-footer .material-symbols-rounded { font-size: 18px; }
    .btn-footer.btn-filled .material-symbols-rounded { font-size: 20px; }

    /* Button label text — visible on desktop, hidden on mobile */
    .btn-label { display: inline; }

    /* ============================================================
       CSS BLOCK 12: NETWORK ERROR BANNER

       Fixed top bar — slides down from above viewport on offline.
       Red background, white text, wifi-off icon + Retry button.
       Triggered by window.addEventListener('offline') in JS Block 18,
       or by cpbp-actions.js on Worker call failure.
       z-index 8000 — above nav (200), above modals (500+).
    ============================================================ */

    /* ── A) NETWORK ERROR BANNER ── */

    .net-error-banner {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 8000;
        background: #d93025;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 10px 20px;
        font-size: 13px;
        font-weight: 500;
        transform: translateY(-100%);      /* hidden above viewport by default */
        transition: transform 0.3s ease;
    }

    /* Slides down into view */
    .net-error-banner.visible { transform: translateY(0); }

    .net-error-banner .material-symbols-rounded { font-size: 18px; }

    /* Retry button inside banner */
    .net-retry-btn {
        background: rgba(255,255,255,0.2);
        border: 1px solid rgba(255,255,255,0.5);
        color: #ffffff;
        border-radius: 4px;
        padding: 4px 12px;
        font-size: 12px;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        transition: background 0.15s;
        white-space: nowrap;
    }

    .net-retry-btn:hover { background: rgba(255,255,255,0.35); }

    /* ============================================================
       CSS BLOCK 13: MODALS — cpbpConfirmModal + indexSoonModal

       A) cpbpConfirmModal — reusable confirm dialog.
          Replaces window.confirm() across all pages.
          Used by: Save, Publish, Clear, 7+ options guard.
          Triggered by cpbpConfirm(opts). Never by direct DOM manipulation.
          Layout: icon + title | purple accent bar | message | Cancel + OK
          .modal-backdrop / .modal-card base CSS lives in cpbp-auth.js —
          cpbpConfirmModal piggybacks those shared classes for consistency.

       B) indexSoonModal — Coming Soon for index-specific triggers.
          Social sign-in buttons in auth modal call openIndexSoonModal().
          Nav Coming Soon uses navSoonModal in cpbp-nav.js instead.

       Both modals: semi-transparent backdrop, centered white card,
       slide-in animation, backdrop click closes, z-index 500+.
    ============================================================ */

    /* ── Shared modal backdrop — full screen dim overlay.
       Base .modal-backdrop CSS injected by cpbp-auth.js.
       indexSoonModal uses its own backdrop class for independence. ── */

    /* cpbpConfirmModal — hidden by default via inline style.
       Full positioning defined here — does not rely on cpbp-auth.js
       .modal-backdrop class for centering. */
    #cpbpConfirmModal {
        position: fixed;
        inset: 0;
        z-index: 600;
        background: rgba(60,64,67,0.5);
        align-items: center;
        justify-content: center;
        padding: 16px;
    }
    #cpbpConfirmModal.open { display: flex !important; }

    /* ── cpbpConfirmModal specific styles ── */

    /* Icon + title row at top of confirm card */
    .confirm-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
    }

    .confirm-header .material-symbols-rounded {
        font-size: 28px;
        color: #673ab7;
        flex-shrink: 0;
    }

    .confirm-title {
        font-size: 18px;
        font-weight: 500;
        color: #202124;
        margin: 0;
        line-height: 1.3;
    }

    /* Purple accent bar below title — matches auth modal accent */
    .confirm-accent {
        width: 48px;
        height: 4px;
        background: #673ab7;
        border-radius: 2px;
        margin-bottom: 16px;
    }

    /* Message body — white-space:pre-line renders \n as line breaks */
    .confirm-message {
        font-size: 14px;
        color: #3c4043;
        line-height: 1.6;
        margin-bottom: 24px;
        white-space: pre-line;
    }

    /* Button row — Cancel left, OK right.
       Cancel: underline style (secondary — lighter visual weight).
       OK/Proceed: filled blue (primary — heavier visual weight).
       Layout matches std_buttons.md Delete modal pattern:
       destructive/primary action on right, cancel on left. */
    .confirm-btn-row {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
    }

    /* Cancel — underline style */
    .confirm-btn-cancel {
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        background: none;
        border: none;
        border-bottom: 2px solid #1a73e8;
        border-radius: 4px 4px 0 0;
        padding: 6px 10px;
        color: #1a73e8;
        transition: background-color 0.2s;
    }

    .confirm-btn-cancel:hover { background-color: #e8f0fe; }

    /* OK / Proceed — filled blue */
    .confirm-btn-ok {
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        border: none;
        border-radius: 4px;
        padding: 9px 18px;
        color: #ffffff;
        background-color: #1a73e8;
        transition: background-color 0.2s;
    }

    .confirm-btn-ok:hover { background-color: #1557b0; }

    /* ── indexSoonModal — Coming Soon for social sign-in triggers ── */

    .index-soon-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 500;
        background: rgba(60,64,67,0.5);
        align-items: center;
        justify-content: center;
        padding: 16px;
    }

    .index-soon-backdrop.open { display: flex; }

    .index-soon-card {
        background: #ffffff;
        border-radius: 8px;
        padding: 28px 28px 20px;
        max-width: 380px;
        width: 100%;
        box-shadow: 0 4px 20px rgba(0,0,0,0.18);
        animation: modalSlideIn 0.22s ease-out;
    }

    @keyframes modalSlideIn {
        from { opacity: 0; transform: translateY(-14px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .index-soon-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    .index-soon-header .material-symbols-rounded {
        font-size: 28px;
        color: #1a73e8;
        flex-shrink: 0;
    }

    .index-soon-title {
        font-size: 17px;
        font-weight: 500;
        color: #202124;
    }

    .index-soon-msg {
        font-size: 14px;
        color: #5f6368;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .index-soon-footer { display: flex; justify-content: flex-end; }

    .index-soon-ok {
        font-size: 14px;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        border: none;
        padding: 9px 20px;
        color: #ffffff;
        background: #1a73e8;
        border-radius: 4px;
        transition: background 0.15s;
    }

    .index-soon-ok:hover { background: #1557b0; }

    /* ============================================================
       CSS BLOCK 14: RESPONSIVE — MOBILE (≤768px)

       Breakpoint: 768px — covers phones and small tablets.

       Changes at mobile:
         NAV:
           - Already handled by cpbp-nav.js (position:relative, scrolls away)

         LAYOUT:
           - .section-container: 95% width (was 750px fixed)
           - .form-card: 95% width (was 750px fixed)
           - .page-footer: 95% width, justify-content flex-end

         SCHEDULE CARD:
           - .card1-grid stacks to single column (already in card1-grid CSS)
           - Calendar full width, time below, duration below
           - Natural vertical scroll

         FOOTER BUTTONS:
           - .btn-label hidden — icon-only buttons on mobile
           - .footer-hint hidden — saves space
           - Tighter padding on underline buttons for icon-only

         NPS:
           - .nps-labels narrowed to fit screen

         GRID:
           - .grid-container wraps to column on very narrow screens

         MODALS:
           - Cards already use max-width + width:100% — auto-responsive
    ============================================================ */

    @media (max-width: 768px) {

        /* Layout — stretch cards to near full width */
        .section-container,
        .form-card {
            width: 95%;
        }

        /* Footer — full width, buttons right-aligned, hint hidden */
        .page-footer {
            width: 100%;
            padding: 10px 12px;
            justify-content: flex-end;
        }

        .footer-hint  { display: none; }
        .btn-label    { display: none; }   /* icon-only on mobile */

        /* Tighter padding for icon-only underline buttons */
        .btn-footer.btn-underline { padding: 8px 10px; }

        /* NPS labels — full width on mobile */
        .nps-labels { width: 100%; }

        /* Grid — stack columns vertically on narrow screens */
        .grid-container {
            flex-direction: column;
            gap: 24px;
        }

        /* Poll ID input wrapper — slightly smaller on mobile */
        .poll-id-prefix,
        .poll-id-sep,
        .poll-id-input {
            font-size: 16px;
        }

        .poll-id-input { width: 48px; }

        /* Vote input row — wraps on very narrow screens so Start button
           drops below the ID input instead of overflowing the card */
        .vote-input-container {
            flex-wrap: wrap;
        }

        /* Start button — full width when wrapped, tighter padding otherwise */
        .btn-start { padding: 10px 16px; }

    }

    </style>

    <!-- Supabase JS client — must load before cpbp-auth.js -->
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

    <!-- Nav config — tells cpbp-nav.js which pill buttons to show when signed in -->
    <script>
        window.cpbpNavConfig = {
            showMyPolls : true,   /* My Polls pill — visible when signed in */
            showNewPoll : false   /* +New Poll pill — not needed on index (already here) */
        };
    </script>

    <!-- Auth + Nav modules — cpbp-auth.js internally loads cpbp-nav.js -->
    <!-- Nav module — injects nav bar HTML+CSS into body -->
    <script src="/cpbp-nav.js"></script>

    <!-- Auth module — OTP, session restore, setAuthState -->
    <script src="/cpbp-auth.js"></script>

    <!-- Shared Save + Publish actions — owns Worker calls, answer structure,
         transition overlay. Both index and Preview_unpublished use this.
         Must load after cpbp-auth.js (needs window.db). -->
    <script src="/cpbp-actions.js"></script>

</head>
<body>


    <!-- ============================================================
         NETWORK ERROR BANNER
         Fixed top bar — slides down from above viewport on offline.
         Triggered by window.addEventListener('offline') in JS Block 18.
         Auto-hides after 4s on reconnect.
         z-index 8000 — above nav (200), above modals (500).
         🧹 WIRE: Uncomment window.addEventListener('offline') listener
                  in JS Block 18 when going live.
    ============================================================ -->
    <div class="net-error-banner" id="netErrorBanner" role="alert" aria-live="assertive">
        <span class="material-symbols-rounded">wifi_off</span>
        No internet connection — some features may be unavailable.
        <button class="net-retry-btn" onclick="window.location.reload()">Retry</button>
    </div>


    <!-- ============================================================
         MAIN CONTENT WRAPPER
         All page content centered in fixed-width column.
         750px desktop, 95% mobile (CSS Block 2 + Block 14).
    ============================================================ -->
    <div class="section-container">


        <!-- ============================================================
             ENTRY SCREEN — 3 CARD LAYOUT
             Three paths: AI creation | Manual build | Vote now
             Card 2 (Manual) reveals form builder below.
             Cards 1 & 3 navigate away (AI_Create.html / Vote_Now.html).
             Small trio appears fixed top-right when form builder is active.
        ============================================================ -->
        <div id="entry-screen-container">

            <!-- Header block -->
            <div class="entry-header">
                <h1 class="entry-title">Welcome to PalmPoll</h1>
                <p class="entry-punchline">Your most important question. Anonymous answers.</p>
                <div class="entry-divider"></div>
                <p class="entry-prompt">What would you like to do today?</p>
            </div>

            <!-- 3-card grid -->
            <div class="entry-cards" id="entryCards">

                <!-- Card 1: Design with AI -->
                <div class="entry-card" id="entryCard1" onclick="selectEntryCard(1)">
                    <div class="entry-card-badge">Recommended</div>
                    <div class="entry-card-icon-wrap entry-card-icon-blue">
                        <span class="material-symbols-rounded entry-card-icon" style="color:#1a73e8;">auto_awesome</span>
                    </div>
                    <div class="entry-card-title">Design your poll with AI</div>
                    <div class="entry-card-desc">Describe that one thing you want to find out — AI drafts your question, picks the right format, and sets everything up for you.</div>
                </div>

                <!-- Card 2: Design manually -->
                <div class="entry-card" id="entryCard2" onclick="selectEntryCard(2)">
                    <div class="entry-card-badge-spacer"></div>
                    <div class="entry-card-icon-wrap entry-card-icon-gray">
                        <span class="material-symbols-rounded entry-card-icon" style="color:#5f6368;">handyman</span>
                    </div>
                    <div class="entry-card-title">Design poll manually</div>
                    <div class="entry-card-desc">Jump straight into the form builder and craft every detail exactly the way you want.</div>
                </div>

                <!-- Card 3: Vote now -->
                <div class="entry-card" id="entryCard3" onclick="selectEntryCard(3)" title="Need a valid poll ID to start voting">
                    <div class="entry-card-badge-spacer"></div>
                    <div class="entry-card-icon-wrap entry-card-icon-green">
                        <span class="material-symbols-rounded entry-card-icon" style="color:#34a853;">how_to_vote</span>
                    </div>
                    <div class="entry-card-title">Have your say. Vote now.</div>
                    <div class="entry-card-desc">Enter a Poll ID shared with you. Jump straight in and cast your vote.</div>

                    <!-- Poll ID input — revealed when Card 3 selected -->
                    <div class="entry-vote-input-wrap" id="entryVoteInputWrap" style="display:none;">
                        <div class="entry-poll-id-row">
                            <span class="entry-poll-id-prefix">PLBP-</span>
                            <input
                                type="text"
                                id="entryPollIdInput"
                                class="entry-poll-id-field"
                                placeholder="XXXX-XXXX"
                                maxlength="9"
                                autocomplete="off"
                                autocorrect="off"
                                autocapitalize="characters"
                                spellcheck="false"
                                oninput="handleEntryPollIdInput(event)"
                                onkeydown="handleEntryPollIdKey(event)"
                                aria-label="Poll ID">
                        </div>
                        <button class="entry-vote-btn" id="entryVoteBtn"
                                onclick="submitEntryVote()">
                            <span class="material-symbols-rounded">arrow_forward</span>
                            Start voting
                        </button>
                    </div>

                </div>

            </div>
            <!-- /entry-cards -->

            <!-- CTA button — Card 1 and Card 2 only -->
            <div class="entry-cta-row">
                <button class="entry-cta-btn" id="entryCta" onclick="handleEntryCta()">
                    Design with AI
                    <span class="material-symbols-rounded">arrow_forward</span>
                </button>
            </div>

            <!-- Pricing hint — visible on entry screen, hidden in form builder -->
            <div class="entry-pricing-hint">
                Currently free — unlimited polls during our growth phase.
            </div>

        </div>
        <!-- /entry-screen-container -->


        <!-- Small trio — fixed top-right, visible when form builder is active -->
        <div class="entry-small-trio" id="entrySmallTrio" style="display:none;">
            <div class="entry-small-card" id="entrySmallCard1" onclick="selectEntryCard(1)" title="Design with AI">
                <span class="material-symbols-rounded entry-small-icon" style="color:#1a73e8;">auto_awesome</span>
            </div>
            <div class="entry-small-card entry-small-card-active" id="entrySmallCard2" onclick="selectEntryCard(2)" title="Design manually">
                <span class="material-symbols-rounded entry-small-icon" style="color:#1a73e8;">handyman</span>
            </div>
            <div class="entry-small-card" id="entrySmallCard3" onclick="selectEntryCard(3)" title="Vote now">
                <span class="material-symbols-rounded entry-small-icon" style="color:#34a853;">how_to_vote</span>
            </div>
        </div>
        <!-- /entry-small-trio -->


        <!-- Form builder container — hidden until Card 2 selected -->
        <div id="form-builder-container" style="display:none;">

        <!-- ============================================================
             STEP 1 LABEL
             Gray by default. Turns blue (.active) on first interaction
             with any schedule field. Activated by JS activateStep1().
        ============================================================ -->
        <div class="step-label" id="step1Label">
            Step 1: Set Poll Go-Live Schedule and Duration
        </div>


        <!-- ============================================================
             CARD 1 — SCHEDULE
             Two-column layout: inline calendar (left) + time/duration (right).

             LEFT COLUMN:
               Inline calendar widget — always visible, no click to open.
               Cal navigation: ‹ Month Year › arrows.
               Today highlighted blue. Selected date filled blue.
               Past dates dimmed. onCalDayPicked() on each day click.
               Schedule hint pinned flush below calendar box.

             RIGHT COLUMN (top → bottom):
               Start Time label + Live badge (when live clock active)
               Time display div — HH:MM static or HH:MM:SS ticking
               Time sub-hint row — live dot + "Voting opens instantly"
               Divider
               Duration label
               D : H : M inputs with adj arrows (focus-reveal pattern)

             MOBILE (≤768px):
               Single column — calendar → time → duration stacked.
             ============================================================ -->
        <div class="form-card" id="card1Schedule">

            <div class="card1-grid">

                <!-- ── LEFT: inline calendar + schedule hint ── -->
                <div class="card1-left">

                    <span class="schedule-label">Start Date</span>

                    <!-- Inline calendar widget -->
                    <div class="cal-widget" id="calWidget">
                        <!-- Populated by renderCalendar() on load + nav -->
                    </div>

                    <!-- Hidden native date picker — value store only -->
                    <input type="date"
                           id="_datePicker"
                           style="position:absolute;opacity:0;pointer-events:none;width:0;height:0;"
                           onchange="onDatePicked(this.value)"
                           min=""
                           aria-hidden="true">

                    <!-- Hidden value store -->
                    <input type="hidden" id="_dateVal">

                </div>
                <!-- /card1-left -->


                <!-- ── RIGHT: time + duration ── -->
                <div class="card1-right">

                    <!-- Start Time — HH:MM contenteditable, :SS auto-ticking -->
                    <div id="schedItemTime">
                        <span class="schedule-label">Start Time</span>

                        <div style="display:flex;align-items:baseline;margin-top:4px;">
                            <!-- HH:MM underlined — click to edit directly -->
                            <div class="time-hm" id="timeHm">
                                <span class="time-dig"
                                      id="startTimeH"
                                      contenteditable="true"
                                      aria-label="Hour"
                                      onfocus="onTimeDigitFocus(this,'h')"
                                      onblur="onTimeDigitBlur(this,'h')"
                                      onkeydown="onTimeDigitKey(event,this,'h')">00</span>
                                <span class="time-sep">:</span>
                                <span class="time-dig"
                                      id="startTimeM"
                                      contenteditable="true"
                                      aria-label="Minute"
                                      onfocus="onTimeDigitFocus(this,'m')"
                                      onblur="onTimeDigitBlur(this,'m')"
                                      onkeydown="onTimeDigitKey(event,this,'m')">00</span>
                            </div>
                            <!-- :SS — auto-ticking, not editable -->
                            <span class="time-sep-s">:</span>
                            <span class="time-ss" id="startTimeS">00</span>
                        </div>

                        <!-- Hidden value store — HH:MM for collect/restore -->
                        <input type="hidden" id="_timeVal">

                    </div>

                    <!-- A4 hint — shown when live clock ticking -->
                    <div class="sched-hint" id="hintA4"></div>

                    <!-- /schedItemTime -->

                    <div class="card1-divider"></div>

                    <!-- Duration — contenteditable spans, no input borders -->
                    <div id="schedItemDuration">
                        <span class="schedule-label">Duration</span>

                        <div class="duration-group" id="durationGroup">

                            <div class="dur-unit">
                                <span class="dur-dig"
                                      id="durD"
                                      contenteditable="true"
                                      aria-label="Duration days"
                                      onfocus="onDurFocus(this)"
                                      onblur="onDurBlur(this,99)"
                                      onkeydown="onDurKey(event,this,99)">00</span>
                                <span class="duration-sublabel">Days</span>
                            </div>

                            <span class="duration-sep">:</span>

                            <div class="dur-unit">
                                <span class="dur-dig"
                                      id="durH"
                                      contenteditable="true"
                                      aria-label="Duration hours"
                                      onfocus="onDurFocus(this)"
                                      onblur="onDurBlur(this,23)"
                                      onkeydown="onDurKey(event,this,23)">00</span>
                                <span class="duration-sublabel">Hrs</span>
                            </div>

                            <span class="duration-sep">:</span>

                            <div class="dur-unit">
                                <span class="dur-dig"
                                      id="durM"
                                      contenteditable="true"
                                      aria-label="Duration minutes"
                                      onfocus="onDurFocus(this)"
                                      onblur="onDurBlur(this,59)"
                                      onkeydown="onDurKey(event,this,59)">15</span>
                                <span class="duration-sublabel">Min</span>
                            </div>

                        </div>
                        <!-- /duration-group -->
                    </div>
                    <!-- /schedItemDuration -->

                    <!-- Draft toggle — toggle + label left aligned -->
                    <div class="draft-toggle-row">
                        <label class="toggle-wrap">
                            <input type="checkbox"
                                   id="draftToggle"
                                   onchange="onDraftToggle()"
                                   aria-label="Save as draft">
                            <div class="toggle-track"></div>
                            <div class="toggle-thumb"></div>
                        </label>
                        <span class="draft-toggle-label">Save as draft</span>
                    </div>

                    <!-- A1 hint — shown when draft toggle ON -->
                    <div class="sched-hint" id="hintA1"></div>

                </div>
                <!-- /card1-right -->

            </div>
            <!-- /card1-grid -->


        </div>
        <!-- /card1Schedule -->


        <!-- ============================================================
             STEP 2 LABEL
             Gray by default. Turns blue (.active) on first interaction
             with question textarea or QType selector.
             Activated by JS activateStep2().
        ============================================================ -->
        <div class="step-label" id="step2Label">
            Step 2: Design poll Q&amp;A
        </div>


        <!-- ============================================================
             CARD 2 — Q&A
             Two parts stacked vertically (.header-row):
               TOP:    QType selector (custom dropdown, 16 types)
               BOTTOM: Question textarea + helper row (hint + counter)
             Below header-row: dynamic answer area (renderAnswerArea()).

             QTYPE SELECTOR:
               Custom dropdown replaces native &lt;select&gt;.
               Trigger row shows current type icon + label + chevron.
               Floating panel lists all 16 types in 5 groups separated
               by hr.divider lines.
               selectType(val, text, iconName) — updates trigger + renders answer area.
               toggleDropdown() — shows/hides panel.
               window.onclick closes panel on outside click.

             QUESTION TEXTAREA:
               Auto-grows with content via autoGrow(el).
               Min 10 chars, max 200 chars for publish validity.
               Dirty-state validation: red border + hint only after blur.
               NPS type: readonly, fixed standard question text.
               oninput: activateStep2() + autoGrow() + updateFooterButtons() + _qOnInput()
               onblur:  _qOnBlur()

             ANSWER AREA:
               Empty div populated by renderAnswerArea(type) on QType change.
               Each QType renders its own HTML structure inside this div.
               Answer hint injected below this div for choice/grid types.

             16 QTYPES in 5 groups:
               Group 1 — Text:    Short answer, Paragraph, Number only
               Group 2 — Choice:  Multiple choice, Checkboxes, Dropdown
               Group 3 — Scale:   Linear scale, Rating, NPS
               Group 4 — Grid:    Multiple choice grid, Checkbox grid
               Group 5 — Special: Date, Time, Date &amp; Time, Email, Location
        ============================================================ -->
        <div class="form-card" id="card2QA">

            <!-- header-row: QType selector top, question textarea below -->
            <div class="header-row">

                <!-- ── QTYPE SELECTOR ──────────────────────────────── -->
                <div class="custom-select-container" id="qtypeSelector">

                    <!-- Trigger row — shows currently selected type -->
                    <div class="select-selected" id="selectedType" onclick="toggleDropdown()">
                        <div class="select-selected-left">
                            <span class="material-symbols-rounded" id="currentIcon">radio_button_checked</span>
                            <span id="currentText">Multiple choice</span>
                        </div>
                        <span class="material-symbols-rounded select-chevron">arrow_drop_down</span>
                    </div>

                    <!-- Floating dropdown panel — 16 types in 5 groups -->
                    <div class="select-items" id="dropdownList">

                        <!-- Group 1: Text types -->
                        <div onclick="selectType('short-answer','Short answer','short_text')">
                            <span class="material-symbols-rounded">short_text</span>
                            Short answer
                        </div>
                        <div onclick="selectType('paragraph','Paragraph','subject')">
                            <span class="material-symbols-rounded">subject</span>
                            Paragraph
                        </div>
                        <div onclick="selectType('number-only','Number only','pin')">
                            <span class="material-symbols-rounded">pin</span>
                            Number only
                        </div>

                        <hr class="divider">

                        <!-- Group 2: Choice types -->
                        <div onclick="selectType('multiple-choice','Multiple choice','radio_button_checked')">
                            <span class="material-symbols-rounded">radio_button_checked</span>
                            Multiple choice
                        </div>
                        <div onclick="selectType('checkboxes','Checkboxes','check_box')">
                            <span class="material-symbols-rounded">check_box</span>
                            Checkboxes
                        </div>
                        <div onclick="selectType('dropdown','Dropdown','arrow_drop_down_circle')">
                            <span class="material-symbols-rounded">arrow_drop_down_circle</span>
                            Dropdown
                        </div>

                        <hr class="divider">

                        <!-- Group 3: Scale types -->
                        <div onclick="selectType('linear-scale','Linear scale','linear_scale')">
                            <span class="material-symbols-rounded">linear_scale</span>
                            Linear scale
                        </div>
                        <div onclick="selectType('star-rating','Rating','star')">
                            <span class="material-symbols-rounded">star</span>
                            Rating
                        </div>
                        <div onclick="selectType('nps','Net Promoter Score','insights')">
                            <span class="material-symbols-rounded">insights</span>
                            NPS
                        </div>

                        <hr class="divider">

                        <!-- Group 4: Grid types -->
                        <div onclick="selectType('mc-grid','Multiple choice grid','apps')">
                            <span class="material-symbols-rounded">apps</span>
                            Multiple choice grid
                        </div>
                        <div onclick="selectType('cb-grid','Checkbox grid','view_module')">
                            <span class="material-symbols-rounded">view_module</span>
                            Checkbox grid
                        </div>

                        <hr class="divider">

                        <!-- Group 5: Special types -->
                        <div onclick="selectType('date','Date','event')">
                            <span class="material-symbols-rounded">event</span>
                            Date
                        </div>
                        <div onclick="selectType('time','Time','schedule')">
                            <span class="material-symbols-rounded">schedule</span>
                            Time
                        </div>
                        <div onclick="selectType('datetime','Date &amp; Time','calendar_today')">
                            <span class="material-symbols-rounded">calendar_today</span>
                            Date &amp; Time
                        </div>

                        <hr class="divider">

                        <div onclick="selectType('email','Email','email')">
                            <span class="material-symbols-rounded">email</span>
                            Email
                        </div>
                        <div onclick="selectType('location','Location','place')">
                            <span class="material-symbols-rounded">place</span>
                            Location
                        </div>

                    </div>
                    <!-- /dropdownList -->

                </div>
                <!-- /qtypeSelector -->


                <!-- ── QUESTION TEXTAREA + HELPER ROW ──────────────── -->
                <!-- .question-field-wrap: holds textarea + hint/counter row -->
                <div class="question-field-wrap">

                    <!-- Auto-grow textarea.
                         oninput: step activation + grow + footer update + validation.
                         onblur:  marks dirty, applies red border if invalid.
                         NPS: set to readonly with fixed text by selectType(). -->
                    <textarea
                        class="question-input"
                        id="questionInput"
                        placeholder="Untitled Question"
                        rows="1"
                        maxlength="200"
                        oninput="activateStep2(); autoGrow(this); updateFooterButtons(); _qOnInput(this);"
                        onblur="_qOnBlur(this);"
                        aria-label="Poll question text"
                        aria-describedby="questionHint questionCounter"></textarea>

                    <!-- Helper row: hint text (left) + char counter (right).
                         Hint: hidden until dirty + invalid (opacity transition).
                         Counter: visible once typing starts, color changes by state. -->
                    <div class="question-helper-row" id="questionHelperRow">
                        <span class="question-hint" id="questionHint" role="alert">
                            Please enter at least 10 characters
                        </span>
                        <span class="question-counter" id="questionCounter" aria-live="polite"></span>
                    </div>

                </div>
                <!-- /question-field-wrap -->

            </div>
            <!-- /header-row -->


            <!-- Answer area — populated dynamically by renderAnswerArea().
                 Empty on load. Filled immediately by _appInit() →
                 renderAnswerArea('multiple-choice') as default.
                 Cleared and re-rendered on every QType change. -->
            <div id="answer-container" class="answer-area" aria-live="polite"></div>

        </div>
        <!-- /card2QA -->

        </div>
        <!-- /form-builder-container -->

    </div>
    <!-- /section-container -->


    <!-- ============================================================
         PAGE FOOTER
         Sticky at bottom of viewport — always accessible without scrolling.
         Left:  pricing hint text.
         Right: Clear | Preview | Save | Publish buttons.

         BUTTON STATES (all driven by updateFooterButtons()):
           Clear   — active when any field has content
           Preview — active when Q&A is valid (question ≥10 chars + options if needed)
           Save    — active when Q&A valid AND date NOT set (draft flow)
           Publish — active when Q&A valid AND date + time + duration all set

           Inactive = opacity 0.4. Never hidden. Never color-changed.
           pointer-events:auto kept on inactive so title= tooltip fires on hover.

         BUTTON TOOLTIPS (title= on inactive):
           Save    inactive → "Q&A needed, date & time must be empty"
           Publish inactive → "Q&A + date, time & duration needed"

         ACTIVATION ANIMATION:
           inactive → active: soft scale pop (btn-activating class, 150ms).
           Triggered by setBtn() in updateFooterButtons().

         _inFlight GUARD (double-click prevention):
           All 4 buttons guarded by _inFlight Map in JS Block 14.
           Mutating actions (Save, Publish) additionally guarded during
           async API call — key deleted only after Worker responds.

         MOBILE:
           .btn-label hidden — icon-only buttons.
           .footer-hint hidden — saves space.
           Buttons right-aligned.

         PRICING HINT:
           Current strategy: free during growth phase.
           🧹 WIRE: Update text when pricing strategy is finalised.
           Ref: pricing discussion — free-during-growth, freemium later,
           paid tiers based on features not per-poll charges.
    ============================================================ -->
    <div class="page-footer">

        <!-- Left: pricing hint -->
        <span class="footer-hint">
            Currently free — unlimited polls during our growth phase.
        </span>

        <!-- Right: action buttons -->
        <div class="footer-actions">

            <!-- CLEAR — underline style.
                 Active when any field has content.
                 Resets all fields to fresh state via clearPollForm(). -->
            <button class="btn-footer btn-underline btn-inactive"
                    id="btnClear"
                    onclick="clearPollForm()"
                    title="Clear all fields"
                    aria-label="Clear form">
                <span class="material-symbols-rounded">cleaning_services</span>
                <span class="btn-label">Clear</span>
            </button>


            <!-- PREVIEW — underline style.
                 Active when Q&A is valid.
                 Writes transit container, navigates to Preview_unpublished_poll.html. -->
            <button class="btn-footer btn-underline btn-inactive"
                    id="btnPreview"
                    onclick="requireAuthThenPreview()"
                    title="Preview your poll"
                    aria-label="Preview poll">
                <span class="material-symbols-rounded">visibility</span>
                <span class="btn-label">Preview</span>
            </button>


            <!-- SAVE — underline style.
                 Active when Q&A valid AND date is NOT set (draft flow).
                 Pre-filled date means Save starts inactive — by design.
                 Author who wants draft consciously clears the date first.
                 cpbpConfirm → auth gate → _executeSave() → Polls_List.html -->
            <button class="btn-footer btn-underline btn-inactive"
                    id="btnSave"
                    onclick="requireAuthThenSave()"
                    title="Draft switch ON and Q&amp;A defined"
                    aria-label="Save as draft">
                <span class="material-symbols-rounded">save</span>
                <span class="btn-label">Save</span>
            </button>


            <!-- PUBLISH — filled style (primary action, dominant visual weight).
                 Active when Q&A valid AND date + time + duration all set.
                 _warnIfTooManyOptions() → cpbpConfirm → auth gate
                 → _executePublish() → Poll_Share.html -->
            <button class="btn-footer btn-filled btn-inactive"
                    id="btnPublish"
                    onclick="requireAuthThenPublish()"
                    title="Q&amp;A + date, time &amp; duration needed"
                    aria-label="Publish poll">
                <span class="material-symbols-rounded">cell_tower</span>
                <span class="btn-label">Publish</span>
            </button>

        </div>
        <!-- /footer-actions -->

    </div>
    <!-- /page-footer -->


    <!-- ============================================================
         CPBP CONFIRM MODAL
         Reusable custom confirm dialog. Replaces window.confirm()
         across all pages. Never use alert/confirm/prompt — ever.

         TRIGGERED BY: cpbpConfirm(opts) in JS Block 21.
         USED FOR:
           - Save as Draft confirmation
           - Publish Poll confirmation (with go-live countdown message)
           - Clear Form confirmation
           - 7+ options guard warning before publish
           - Any future confirm action on this page

         STRUCTURE:
           .modal-backdrop (full-screen dim — base CSS from cpbp-auth.js)
             .modal-card (white card, max-width 400px — base CSS from cpbp-auth.js)
               .confirm-header    — icon + title
               .confirm-accent    — purple 4px bar
               .confirm-message   — body text (white-space:pre-line for \n)
               .confirm-btn-row   — Cancel (underline) | OK/Proceed (filled)

         BUTTON LAYOUT (std_buttons.md Delete modal pattern):
           Cancel: LEFT  — underline style (lighter visual weight)
           OK:     RIGHT — filled blue (heavier visual weight, primary action)
           Cancel has MORE visual weight than OK for destructive actions —
           intentional friction to prevent accidental irreversible actions.

         ICON: driven by opts.icon (Material Symbols Rounded name).
           Default: 'info' (purple). Publish: 'event_available'. Save: 'description'.

         BACKDROP CLICK: closes modal + fires onCancel callback.
    ============================================================ -->
    <div class="modal-backdrop" id="cpbpConfirmModal" style="display:none;">
        <div class="modal-card" style="max-width:400px;">

            <!-- Icon + title row -->
            <div class="confirm-header">
                <span class="material-symbols-rounded" id="cpbpConfirmIcon"
                      style="font-size:28px;color:#673ab7;flex-shrink:0;">info</span>
                <div class="confirm-title" id="cpbpConfirmTitle"></div>
            </div>

            <!-- Purple accent bar -->
            <div class="confirm-accent"></div>

            <!-- Message body — white-space:pre-line renders \n as line breaks.
                 Dynamic content set by cpbpConfirm(opts.message). -->
            <div class="confirm-message" id="cpbpConfirmMessage"></div>

            <!-- Button row: Cancel left, OK/Proceed right -->
            <div class="confirm-btn-row">

                <!-- Cancel — underline style, lighter visual weight -->
                <button class="confirm-btn-cancel" id="cpbpConfirmCancel"
                        aria-label="Cancel">
                    Cancel
                </button>

                <!-- OK / Proceed — filled blue, heavier visual weight.
                     Label set dynamically by opts.okLabel. -->
                <button class="confirm-btn-ok" id="cpbpConfirmOk"
                        aria-label="Confirm action">
                    Proceed
                </button>

            </div>
            <!-- /confirm-btn-row -->

        </div>
        <!-- /modal-card -->
    </div>
    <!-- /cpbpConfirmModal -->


    <!-- ============================================================
         INDEX SOON MODAL
         Coming Soon modal for index-specific triggers.
         Social sign-in buttons (Apple/FB/Google/LinkedIn/Microsoft)
         in cpbp-auth.js auth modal call openIndexSoonModal(title, msg).

         SEPARATE from navSoonModal (in cpbp-nav.js) — nav dropdown
         Coming Soon items use that one instead.

         TRIGGERED BY: openIndexSoonModal(title, msg) in JS Block 22.
         DISMISSED BY: closeIndexSoonModal() or backdrop click or OK button.

         Visual language matches navSoonModal:
           Blue info icon + title + message + single OK button.
    ============================================================ -->
    <div class="index-soon-backdrop" id="indexSoonModal"
         onclick="if(event.target===this) closeIndexSoonModal()">
        <div class="index-soon-card">

            <!-- Blue info icon + title -->
            <div class="index-soon-header">
                <span class="material-symbols-rounded">info</span>
                <div class="index-soon-title" id="indexSoonTitle"></div>
            </div>

            <!-- Message body -->
            <div class="index-soon-msg" id="indexSoonMsg"></div>

            <!-- OK button — dismisses modal -->
            <div class="index-soon-footer">
                <button class="index-soon-ok"
                        onclick="closeIndexSoonModal()"
                        aria-label="OK, close this message">
                    OK
                </button>
            </div>

        </div>
        <!-- /index-soon-card -->
    </div>
    <!-- /indexSoonModal -->


    <!-- ============================================================
         MAIN SCRIPT
    ============================================================ -->
    <script>
    /* Version: index_202604082030 */

    /* ============================================================
       SUPABASE CLIENT REF
       window.db is set by cpbp-auth.js (loaded in head).
       Always reference as window.db at call time — never cache
       in a var at script parse time (auth may not be ready yet).
    ============================================================ */

    /* ============================================================
       JS BLOCK 1: DATE / TIME DEFAULTS
       ─────────────────────────────────────────────────────────────
       initDateTime() — called once by _appInit() on DOMContentLoaded.

       PRE-FILLS on fresh load:
         Start Date → today (DD / MM / YYYY display, YYYY-MM-DD internal)
         Start Time → Now() — live clock starts immediately (see Block 1B)
         Duration   → 00 : 00 : 15 (15 minutes minimum)

       DESIGN INTENT:
         Default = instant publish. Poll goes live the moment author hits
         Publish. No buffer to debate — author who wants a future schedule
         simply picks a date/time manually.
         Live clock (ticking SS) communicates this without any label.

       HIDDEN VALUE STORES:
         _dateVal — YYYY-MM-DD — used by all schedule logic
         _timeVal — HH:MM      — updated every second by live clock
         _datePicker.min = today — prevents selecting past dates

       NOTE: initDateTime() does NOT activate the step label — that only
       happens on user interaction. It also does NOT call _updateScheduleHint()
       because _appInit() calls that explicitly after initDateTime().
    ============================================================ */
    function initDateTime() {

        var now   = new Date();
        var today = now.toISOString().split('T')[0];   /* YYYY-MM-DD */

        /* ── Start Date — pre-fill today ────────────────────── */
        /* Calendar renders via renderCalendar() called by _appInit().
           Just set the hidden value stores here. */
        document.getElementById('_datePicker').value = today;
        document.getElementById('_datePicker').min   = today;
        document.getElementById('_dateVal').value    = today;

        /* ── Start Time — pre-fill Now() and start live clock ── */
        /* Default = right now. Live clock ticks every second so the
           go-live time stays honest. Poll goes live the moment author
           publishes — no artificial buffer to debate. */
        var nowH = String(now.getHours()).padStart(2, '0');
        var nowM = String(now.getMinutes()).padStart(2, '0');

        document.getElementById('_timeVal').value = nowH + ':' + nowM;

        /* Start the live SS clock */
        _startLiveClock();

        /* ── Duration — pre-fill 00:00:15 ───────────────────── */
        var dD = document.getElementById('durD');
        var dH = document.getElementById('durH');
        var dM = document.getElementById('durM');
        if (dD) dD.textContent = '00';
        if (dH) dH.textContent = '00';
        if (dM) dM.textContent = '15';

        /* Time section always visible on init — draft toggle controls dimming */

    }

    /* ── renderCalendar() — builds inline calendar widget HTML ──
       Called on load, month navigation, and after date selection.
       Reads _calYear/_calMonth for current view month.
       Highlights today (blue ring) and selected date (filled blue).
       Past dates dimmed and non-clickable. */

    var _calYear  = new Date().getFullYear();
    var _calMonth = new Date().getMonth();
    var _CAL_MONTHS = ['January','February','March','April','May','June',
                       'July','August','September','October','November','December'];
    var _CAL_DOWS   = ['S','M','T','W','T','F','S'];

    function renderCalendar() {

        var widget = document.getElementById('calWidget');
        if (!widget) return;

        var y  = _calYear;
        var mo = _calMonth;
        var first = new Date(y, mo, 1).getDay();
        var days  = new Date(y, mo + 1, 0).getDate();
        var today = new Date();
        var selVal = (document.getElementById('_dateVal') || {}).value || '';

        var prevY = mo === 0 ? y - 1 : y;
        var prevM = mo === 0 ? 11 : mo - 1;
        var nextY = mo === 11 ? y + 1 : y;
        var nextM = mo === 11 ? 0 : mo + 1;

        var html = '<div class="cal-header">' +
            '<div class="cal-nav-btn" onclick="navCalendar(' + prevY + ',' + prevM + ')">&#8249;</div>' +
            '<span class="cal-month-label">' + _CAL_MONTHS[mo] + ' ' + y + '</span>' +
            '<div class="cal-nav-btn" onclick="navCalendar(' + nextY + ',' + nextM + ')">&#8250;</div>' +
            '</div><div class="cal-grid">';

        _CAL_DOWS.forEach(function(d) { html += '<div class="cal-dow">' + d + '</div>'; });

        for (var i = 0; i < first; i++) html += '<div class="cal-day cal-other"></div>';

        for (var d = 1; d <= days; d++) {
            var dateStr = y + '-' + String(mo + 1).padStart(2,'0') + '-' + String(d).padStart(2,'0');
            var isToday = (d === today.getDate() && mo === today.getMonth() && y === today.getFullYear());
            var isSel   = (dateStr === selVal);
            var isPast  = new Date(y, mo, d) < new Date(today.getFullYear(), today.getMonth(), today.getDate());
            var cls = 'cal-day' + (isSel ? ' cal-selected' : isToday ? ' cal-today' : '') + (isPast ? ' cal-past' : '');
            html += '<div class="' + cls + '" onclick="onCalDayPicked(\'' + dateStr + '\')">' + d + '</div>';
        }

        html += '</div>';
        widget.innerHTML = html;
    }

    function navCalendar(y, m) {
        _calYear  = y;
        _calMonth = m;
        renderCalendar();
    }

    /* Calendar day click — feeds into existing onDatePicked() */
    function onCalDayPicked(dateStr) {
        document.getElementById('_datePicker').value = dateStr;
        onDatePicked(dateStr);
    }

    /* ── Duration adj arrows — show/hide on field focus ── */


    /* ============================================================
       JS BLOCK 1B: LIVE CLOCK — TICKING SS DISPLAY
       ─────────────────────────────────────────────────────────────
       The live clock runs when go-live = Now():
         Trigger 1 — fresh load / duplicate: time defaults to Now().
         Trigger 2 — author's set time became stale (now in the past),
                     auto-reset to real Now().

       While ticking:
         - #startTimeH/M show current HH:MM (contenteditable spans)
         - #startTimeS ticks every second (read-only span)
         - _timeVal updated every tick — source of truth for _collectFromDOM
         - Schedule hint shows State 3A (blue "goes live on publish")

       Stops when:
         - Author manually picks a time → _stopLiveClock()
         - Date is cleared → _stopLiveClock()
         - Date changed to future → _stopLiveClock()
         - clearPollForm() → _stopLiveClock() via initDateTime restart

       _timeIsLiveClock — module-level flag. Read by:
         _updateScheduleHint() — to show State 3A
         _collectFromDOM()     — to capture Now() at publish moment
    ============================================================ */

    var _timeIsLiveClock    = false;   /* true while SS is ticking */
    var _liveClockInterval  = null;    /* setInterval handle */
    var _timeManualEdited   = false;   /* true when author has set a specific time */
    var _timeDigitEditing   = false;   /* true while HH or MM contenteditable is focused */


    function _startLiveClock() {

        _stopLiveClock();
        _timeIsLiveClock   = true;
        _timeManualEdited  = false;
        _tickLiveClock();
        _liveClockInterval = setInterval(_tickLiveClock, 1000);
    }


    function _stopLiveClock() {

        if (_liveClockInterval) {
            clearInterval(_liveClockInterval);
            _liveClockInterval = null;
        }
        _timeIsLiveClock = false;

        /* Freeze SS at 00 when clock stops */
        var ssEl = document.getElementById('startTimeS');
        if (ssEl) ssEl.textContent = '00';

        _updateScheduleHint();
    }


    function _tickLiveClock() {

        /* Don't overwrite while author is editing a digit */
        if (_timeDigitEditing) return;

        var now  = new Date();
        var nowH = String(now.getHours()).padStart(2, '0');
        var nowM = String(now.getMinutes()).padStart(2, '0');
        var nowS = String(now.getSeconds()).padStart(2, '0');

        /* Update hidden value store — HH:MM */
        var tvEl = document.getElementById('_timeVal');
        if (tvEl) tvEl.value = nowH + ':' + nowM;

        /* Update contenteditable digit spans */
        var hEl = document.getElementById('startTimeH');
        var mEl = document.getElementById('startTimeM');
        var sEl = document.getElementById('startTimeS');
        if (hEl && document.activeElement !== hEl) hEl.textContent = nowH;
        if (mEl && document.activeElement !== mEl) mEl.textContent = nowM;
        if (sEl) sEl.textContent = nowS;

        _updateScheduleHint();
    }


    /*  FUNCTIONS:
         selectEntryCard(n) — handles card selection state, CTA label,
           vote input reveal, form builder transitions.
         handleEntryCta() — CTA button click for Card 1/Card 2.
         _entryHasFormData() — checks if form builder has any user data.
         _showFormBuilder() — reveals form builder, shows small trio.
         _hideFormBuilder() — hides form builder, returns to entry screen.
         handleEntryPollIdInput(e) — single-field poll ID: uppercase,
           A-Z/0-9 only, auto-dash at position 4, max 8 chars + dash.
         handleEntryPollIdKey(e) — backspace over dash skip.
         _updateEntryVoteBtn() — activates vote button at exactly 8 valid chars.
         submitEntryVote() — validates + navigates to Vote_Now.html.
         _initEntryScrollListener() — hides/shows small trio on scroll.

       STATE:
         _entrySelectedCard (1, 2, 3, or null)
         _entryFormBuilderVisible (boolean)
         _entryScrollTimer (setTimeout handle)

       POLL ID FORMAT:
         Display: PLBP- XXXX-XXXX (prefix hardcoded, user types 8 chars)
         Stored field value: XXXX-XXXX (with auto-dash after char 4)
         Valid chars: A-Z, 0-9. Dash auto-inserted, never user-typed.
         Navigation: Vote_Now.html?id=PLBP-XXXXXXXX
    ============================================================ */


    var _entrySelectedCard       = null;
    var _entryFormBuilderVisible = false;
    var _entryScrollTimer        = null;


    function selectEntryCard(n) {

        /* If Card 2 already selected and form builder visible — ignore re-click */
        if (_entryFormBuilderVisible && n === 2) { return; }

        _entryDoSelectCard(n);

        /* If switching away from form builder to Card 1 or 3 — hide form builder */
        if (_entryFormBuilderVisible && n !== 2) {
            _hideFormBuilder();
        }
    }


    function _entryDoSelectCard(n) {

        _entrySelectedCard = n;

        /* Update card selected styles */
        [1, 2, 3].forEach(function(i) {
            var card = document.getElementById('entryCard' + i);
            if (card) card.classList.toggle('entry-card-selected', i === n);
        });

        /* Card 3 tooltip: show when not selected, remove when selected */
        var card3 = document.getElementById('entryCard3');
        if (card3) {
            card3.title = (n === 3) ? '' : 'Need a valid poll ID to start voting';
        }

        /* Vote input: show only for Card 3 */
        var voteWrap = document.getElementById('entryVoteInputWrap');
        if (voteWrap) voteWrap.style.display = (n === 3) ? '' : 'none';

        /* Auto-focus poll ID input when Card 3 selected */
        if (n === 3) {
            setTimeout(function() {
                var inp = document.getElementById('entryPollIdInput');
                if (inp) inp.focus();
            }, 50);
        }

        /* CTA button: Cards 1 & 2 only */
        var cta = document.getElementById('entryCta');
        if (cta) {
            if (n === 3) {
                cta.classList.remove('entry-cta-active');
            } else {
                cta.classList.add('entry-cta-active');
                cta.innerHTML = (n === 1
                    ? 'Design with AI <span class="material-symbols-rounded">arrow_forward</span>'
                    : 'Open form builder <span class="material-symbols-rounded">arrow_forward</span>');
            }
        }
    }


    function handleEntryCta() {

        if (_entrySelectedCard === 1) {
            if (_entryHasFormData()) {
                cpbpConfirm({
                    title   : 'Leave form builder?',
                    message : 'You\'ll lose your poll data. Continue?',
                    icon    : 'warning',
                    okLabel : 'Continue',
                    onOk    : function() { window.location.href = 'AI_Create.html'; },
                    onCancel: function() {}
                });
                return;
            }
            window.location.href = 'AI_Create.html';

        } else if (_entrySelectedCard === 2) {
            _showFormBuilder();
        }
    }


    function _entryHasFormData() {

        /* Question field */
        var qEl = document.getElementById('questionText');
        if (qEl && qEl.value && qEl.value.trim().length > 0) { return true; }

        /* Answer area — options, labels, grid items */
        var ansArea = document.getElementById('answer-container');
        if (!ansArea) { return false; }

        var optInputs = ansArea.querySelectorAll('.option-text-input');
        for (var i = 0; i < optInputs.length; i++) {
            if (optInputs[i].value && optInputs[i].value.trim().length > 0) { return true; }
        }

        var lblMin = ansArea.querySelector('#lblMin');
        var lblMax = ansArea.querySelector('#lblMax');
        if (lblMin && lblMin.value && lblMin.value.trim().length > 0) { return true; }
        if (lblMax && lblMax.value && lblMax.value.trim().length > 0) { return true; }

        var gridInputs = ansArea.querySelectorAll('.grid-row-input, .grid-col-input');
        for (var j = 0; j < gridInputs.length; j++) {
            if (gridInputs[j].value && gridInputs[j].value.trim().length > 0) { return true; }
        }

        return false;
    }


    function _showFormBuilder() {

        _entryFormBuilderVisible = true;

        /* Hide entry screen */
        var entryScreen = document.getElementById('entry-screen-container');
        if (entryScreen) entryScreen.style.display = 'none';

        /* Show + animate form builder */
        var fb = document.getElementById('form-builder-container');
        if (fb) {
            fb.style.display = 'block';
            fb.classList.remove('fb-hiding');
            void fb.offsetWidth; /* force reflow so animation fires */
            fb.classList.add('fb-visible');
        }

        /* Show footer */
        var footer = document.querySelector('.page-footer');
        if (footer) footer.style.display = '';

        /* Show small trio */
        var trio = document.getElementById('entrySmallTrio');
        if (trio) {
            trio.style.display = 'flex';
            [1, 2, 3].forEach(function(i) {
                var sc = document.getElementById('entrySmallCard' + i);
                if (sc) sc.classList.toggle('entry-small-card-active', i === 2);
            });
        }
    }


    function _hideFormBuilder() {

        _entryFormBuilderVisible = false;

        var fb = document.getElementById('form-builder-container');
        if (fb) {
            fb.classList.remove('fb-visible');
            fb.classList.add('fb-hiding');
            setTimeout(function() {
                fb.style.display = 'none';
                fb.classList.remove('fb-hiding');
            }, 1000);
        }

        /* Hide footer */
        var footer = document.querySelector('.page-footer');
        if (footer) footer.style.display = 'none';

        var trio = document.getElementById('entrySmallTrio');
        if (trio) trio.style.display = 'none';

        var entryScreen = document.getElementById('entry-screen-container');
        if (entryScreen) entryScreen.style.display = '';
    }


    function handleEntryPollIdInput(event) {

        var inp = event.target;
        /* Strip invalid chars; keep only A-Z 0-9 */
        var digits = inp.value.replace(/[^A-Za-z0-9]/g, '').toUpperCase();
        if (digits.length > 8) { digits = digits.substring(0, 8); }

        /* Auto-insert dash after char 4 */
        inp.value = digits.length > 4
            ? digits.substring(0, 4) + '-' + digits.substring(4)
            : digits;

        _updateEntryVoteBtn();
    }


    function handleEntryPollIdKey(event) {

        var allowed = ['Backspace','Delete','ArrowLeft','ArrowRight','Tab','Enter'];
        if (allowed.indexOf(event.key) === -1 && !/^[A-Za-z0-9]$/.test(event.key)) {
            event.preventDefault();
            return;
        }

        /* Backspace over auto-dash — skip to char before dash */
        if (event.key === 'Backspace') {
            var inp = event.target;
            var cur = inp.selectionStart;
            if (cur === 5 && inp.value.charAt(4) === '-') {
                event.preventDefault();
                inp.value = inp.value.substring(0, 4);
                _updateEntryVoteBtn();
            }
        }
    }


    function _updateEntryVoteBtn() {

        var inp = document.getElementById('entryPollIdInput');
        var btn = document.getElementById('entryVoteBtn');
        if (!inp || !btn) { return; }
        var valid = /^[A-Z0-9]{4}-[A-Z0-9]{4}$/.test(inp.value);
        btn.classList.toggle('entry-vote-btn-active', valid);
    }


    function submitEntryVote() {

        var inp = document.getElementById('entryPollIdInput');
        var val = inp ? inp.value : '';

        if (!/^[A-Z0-9]{4}-[A-Z0-9]{4}$/.test(val)) {
            var row = document.querySelector('.entry-poll-id-row');
            if (row) {
                row.classList.add('entry-poll-id-shake');
                setTimeout(function() { row.classList.remove('entry-poll-id-shake'); }, 400);
            }
            return;
        }

        window.location.href = 'Vote_Now.html?id=PLBP-' + val;
    }


    function _initEntryScrollListener() {

        window.addEventListener('scroll', function() {
            var trio = document.getElementById('entrySmallTrio');
            if (!trio || trio.style.display === 'none') { return; }
            trio.classList.add('entry-trio-hidden');
            clearTimeout(_entryScrollTimer);
            _entryScrollTimer = setTimeout(function() {
                trio.classList.remove('entry-trio-hidden');
            }, 300);
        }, { passive: true });
    }

    /* ============================================================
       JS BLOCK 3: STEP LABEL ACTIVATION
       ─────────────────────────────────────────────────────────────
       Step labels start gray (inactive) and turn blue on first
       user interaction with that section's fields.

       activateStep1() — called by duration field oninput.

         Date and time pickers activate via onDatePicked/onTimePicked
         which already call updateFooterButtons() — step1 activated
         there too for consistency.

       activateStep2() — called by:
         - question textarea oninput
         - selectType() on QType change

       Once activated, labels stay blue for the session.
       clearPollForm() deactivates both (resets to gray).
    ============================================================ */


    function activateStep1() {
        var el = document.getElementById('step1Label');
        if (el) el.classList.add('active');
    }


    function activateStep2() {
        var el = document.getElementById('step2Label');
        if (el) el.classList.add('active');
    }

    /* ============================================================
       JS BLOCK 4: QTYPE SELECTOR + renderAnswerArea()
       ─────────────────────────────────────────────────────────────
       _currentQTypeVal — module-level tracker. Single source of truth
         for the currently selected question type. Used by:
           updateFooterButtons(), _qaIsValid(), _collectFromDOM(),
           _warnIfTooManyOptions(), restoreDraftIfReturning().

       toggleDropdown() — shows/hides the floating QType panel.
         window.onclick closes panel on any outside click.

       selectType(val, text, iconName) — called by each dropdown option.
         1. Resets question field validation (_qReset)
         2. Updates _currentQTypeVal
         3. Updates trigger row (icon + label text)
         4. Closes dropdown
         5. Activates step 2 label
         6. NPS special case: replaces textarea with fixed readonly text
         7. All other types: restores textarea to editable if previously NPS
         8. Calls renderAnswerArea(val)
         9. Calls updateFooterButtons()

       renderAnswerArea(type) — dynamically builds answer area HTML
         for each of the 16 question types. Sets container.innerHTML.
         After render, injects answer hint div for choice/grid types.

       ANSWER HINT:
         Injected below #answer-container for MC/CB/DD/Grid types.
         "At least two options required" or "At least two rows and
         two columns required". Color: gray normally, red if insufficient.
         Driven by updateFooterButtons().

       RATING ICONS (Material Symbols Rounded, FILL=1):
         star     → color #fbbc04 Google yellow
         favorite → color #ea4335 Google red
         thumb_up → color #1a73e8 Google blue
         updateRatingPreview() in Block 10 renders the icon row.

       INTERNAL TYPE VALUES vs DISPLAY:
         'star-rating' is the internal key used by renderAnswerArea()
         and selectType() for the Rating QType. _collectFromDOM()
         normalises it to 'rating' before writing transit/Supabase.
         This keeps renderAnswerArea() logic simple while storing the
         canonical DB value 'rating' everywhere else.
    ============================================================ */


    /* Module-level QType tracker — updated by selectType() */
    var _currentQTypeVal = 'multiple-choice';


    function toggleDropdown() {
        var panel = document.getElementById('dropdownList');
        var isOpen = panel.classList.contains('show');

        /* Close if already open */
        if (isOpen) {
            panel.classList.remove('show');
            return;
        }

        /* Position panel using fixed coordinates from trigger rect.
           position:fixed means coords are relative to viewport —
           panel floats above all content, never pushes page layout. */
        var trigger = document.getElementById('selectedType');
        var rect    = trigger.getBoundingClientRect();
        var vpH     = window.innerHeight;
        var footer  = document.querySelector('.page-footer');
        var boundary = footer ? footer.getBoundingClientRect().top : vpH;

        /* Width matches trigger */
        panel.style.width = rect.width + 'px';
        panel.style.left  = rect.left + 'px';

        /* Flip up if not enough space below */
        var spaceBelow = boundary - rect.bottom - 8;
        var panelH     = Math.min(320, 16 * 40); /* max-height vs 16 rows */

        if (spaceBelow < panelH && rect.top > panelH) {
            /* Open upward */
            panel.style.top    = '';
            panel.style.bottom = (vpH - rect.top + 4) + 'px';
        } else {
            /* Open downward */
            panel.style.bottom = '';
            panel.style.top    = (rect.bottom + 4) + 'px';
        }

        panel.classList.add('show');
    }

    /* Close dropdown on outside click — must use window.onclick not
       addEventListener to avoid double-close conflict with toggleDropdown */
    window.onclick = function(event) {
        if (!event.target.closest('.custom-select-container')) {
            var dl = document.getElementById('dropdownList');
            if (dl) dl.classList.remove('show');
        }
    };


    function selectType(val, text, iconName) {

        /* Reset question field validation state on type change */
        _qReset();

        /* Update module-level tracker */
        _currentQTypeVal = val;

        /* Update trigger row — icon + label */
        document.getElementById('currentText').innerText = text;
        document.getElementById('currentIcon').innerText = iconName;

        /* Close dropdown */
        document.getElementById('dropdownList').classList.remove('show');

        /* Activate step 2 label */
        activateStep2();

        /* NPS special case: replace textarea with fixed standard question */
        var qInput = document.getElementById('questionInput');
        if (val === 'nps') {
            qInput.value      = 'How likely is it that you would recommend us to a friend or colleague?';
            qInput.readOnly   = true;
            qInput.style.color  = '#5f6368';
            qInput.style.cursor = 'default';
            autoGrow(qInput);
        } else {
            /* Restore editable textarea if switching away from NPS */
            if (qInput.readOnly) {
                qInput.value        = '';
                qInput.readOnly     = false;
                qInput.style.color  = '';
                qInput.style.cursor = '';
                autoGrow(qInput);
            }
        }

        renderAnswerArea(val);
        updateFooterButtons();
    }


    function renderAnswerArea(type) {

        var container = document.getElementById('answer-container');
        if (!container) return;

        var html = '';


        /* ── Helper: one editable option row ─────────────────────
           Used by MC, Checkboxes, Dropdown.
           iconHtml: radio dot / checkbox square / numbered index.
           idx: row index for remove button.
           placeholder: "Option 1", "Option 2" etc. */
        function optRow(iconHtml, idx, placeholder) {
            return '<div class="option-row" id="optRow_' + idx + '">' +
                       iconHtml +
                       '<input class="opt-input" type="text"' +
                           ' placeholder="' + placeholder + '"' +
                           ' oninput="updateFooterButtons()"' +
                           ' onkeydown="if(event.key===\'Enter\'){addOption(\'' + type + '\');}">' +
                       '<span class="opt-remove" title="Remove"' +
                           ' onclick="removeOption(' + idx + ')">✕</span>' +
                   '</div>';
        }


        /* ── Multiple Choice ────────────────────────────────────── */
        /* Default 2 rows — minimum 2 required, show structure immediately */
        if (type === 'multiple-choice') {
            html = '<div id="optionsList">' +
                       optRow('<div class="radio-dot"></div>', 0, 'Option 1') +
                       optRow('<div class="radio-dot"></div>', 1, 'Option 2') +
                   '</div>' +
                   '<div class="add-option-row" onclick="addOption(\'multiple-choice\')">' +
                       '<span class="material-symbols-rounded">add</span>Add option' +
                   '</div>';


        /* ── Checkboxes ─────────────────────────────────────────── */
        /* Default 2 rows — minimum 2 required */
        } else if (type === 'checkboxes') {
            html = '<div id="optionsList">' +
                       optRow('<div class="check-square"></div>', 0, 'Option 1') +
                       optRow('<div class="check-square"></div>', 1, 'Option 2') +
                   '</div>' +
                   '<div class="add-option-row" onclick="addOption(\'checkboxes\')">' +
                       '<span class="material-symbols-rounded">add</span>Add option' +
                   '</div>';


        /* ── Dropdown ───────────────────────────────────────────── */
        /* Default 2 rows — minimum 2 required */
        } else if (type === 'dropdown') {
            html = '<div id="optionsList">' +
                       optRow('<span style="color:#70757a;min-width:18px;flex-shrink:0;">1.</span>', 0, 'Option 1') +
                       optRow('<span style="color:#70757a;min-width:18px;flex-shrink:0;">2.</span>', 1, 'Option 2') +
                   '</div>' +
                   '<div class="add-option-row" onclick="addOption(\'dropdown\')">' +
                       '<span class="material-symbols-rounded">add</span>Add option' +
                   '</div>';


        /* ── Linear Scale ───────────────────────────────────────── */
        } else if (type === 'linear-scale') {
            html = '<div class="scale-config-row">' +
                       '<div class="dropdown-wrapper">' +
                           '<select class="scale-dropdown" id="minRange" onchange="updateScaleLabels()">' +
                               '<option value="0">0</option>' +
                               '<option value="1" selected>1</option>' +
                           '</select>' +
                           '<span class="material-symbols-rounded dropdown-arrow">arrow_drop_down</span>' +
                       '</div>' +
                       '<span style="font-size:14px;color:#5f6368;">to</span>' +
                       '<div class="dropdown-wrapper">' +
                           '<select class="scale-dropdown" id="maxRange" onchange="updateScaleLabels()">' +
                               '<option value="2">2</option><option value="3">3</option>' +
                               '<option value="4">4</option><option value="5" selected>5</option>' +
                               '<option value="6">6</option><option value="7">7</option>' +
                               '<option value="8">8</option><option value="9">9</option>' +
                               '<option value="10">10</option>' +
                           '</select>' +
                           '<span class="material-symbols-rounded dropdown-arrow">arrow_drop_down</span>' +
                       '</div>' +
                   '</div>' +
                   '<div class="scale-label-row">' +
                       '<span class="scale-index" id="lblMin">1</span>' +
                       '<input type="text" class="scale-label-input" id="scaleMinLabel" placeholder="Label (optional)">' +
                   '</div>' +
                   '<div class="scale-label-row">' +
                       '<span class="scale-index" id="lblMax">5</span>' +
                       '<input type="text" class="scale-label-input" id="scaleMaxLabel" placeholder="Label (optional)">' +
                   '</div>';


        /* ── Rating (star / heart / thumb) ─────────────────────── */
        } else if (type === 'star-rating') {
            var levelOptions = [3,4,5,6,7,8,9,10]
                .map(function(v) {
                    return '<option value="' + v + '"' + (v === 5 ? ' selected' : '') + '>' + v + '</option>';
                }).join('');
            html = '<div class="scale-config-row">' +
                       '<div class="dropdown-wrapper">' +
                           '<select class="scale-dropdown" id="ratingLevels"' +
                               ' onchange="updateRatingPreview(); updateFooterButtons();">' +
                               levelOptions +
                           '</select>' +
                           '<span class="material-symbols-rounded dropdown-arrow">arrow_drop_down</span>' +
                       '</div>' +
                       '<div class="dropdown-wrapper">' +
                           '<select class="scale-dropdown" id="ratingIcon"' +
                               ' onchange="updateRatingPreview(); updateFooterButtons();">' +
                               '<option value="star">★ Star</option>' +
                               '<option value="favorite">❤ Heart</option>' +
                               '<option value="thumb_up">👍 Thumbs Up</option>' +
                           '</select>' +
                           '<span class="material-symbols-rounded dropdown-arrow">arrow_drop_down</span>' +
                       '</div>' +
                   '</div>' +
                   /* Live icon preview row — no min/max labels for Rating */
                   '<div id="ratingPreview" class="rating-preview-row"></div>';
            /* Render icon preview after DOM settles */
            setTimeout(updateRatingPreview, 0);


        /* ── NPS (Net Promoter Score) ────────────────────────────
           Fixed 0–10 scale. No author config needed.
           Question textarea replaced with fixed text by selectType(). */
        } else if (type === 'nps') {
            var circles = '';
            for (var i = 0; i <= 10; i++) {
                circles += '<div class="nps-circle">' + i + '</div>';
            }
            html = '<div class="nps-container">' +
                       '<div class="nps-row">' + circles + '</div>' +
                       '<div class="nps-labels">' +
                           '<span>Not at all likely</span>' +
                           '<span>Extremely likely</span>' +
                       '</div>' +
                   '</div>';


        /* ── Multiple Choice Grid ────────────────────────────────── */
        } else if (type === 'mc-grid') {
            html = _buildGridHtml('radio_button_unchecked');


        /* ── Checkbox Grid ───────────────────────────────────────── */
        } else if (type === 'cb-grid') {
            html = _buildGridHtml('check_box_outline_blank');


        /* ── Short Answer ────────────────────────────────────────── */
        } else if (type === 'short-answer') {
            html = '<div class="short-answer-line">Short answer text</div>';


        /* ── Paragraph ───────────────────────────────────────────── */
        } else if (type === 'paragraph') {
            html = '<div class="short-answer-line" style="width:75%;">Long answer text</div>';


        /* ── Number Only ─────────────────────────────────────────── */
        } else if (type === 'number-only') {
            html = '<div style="margin-top:8px;">' +
                       '<input type="text" readonly' +
                           ' style="border:none;border-bottom:1px dotted #70757a;' +
                                   'width:50%;font-size:14px;color:#c5c5c5;' +
                                   'background:transparent;outline:none;' +
                                   'padding:5px 0;font-family:inherit;letter-spacing:1px;"' +
                           ' placeholder="12345.00">' +
                   '</div>';


        /* ── Date ────────────────────────────────────────────────── */
        } else if (type === 'date') {
            html = '<div class="native-picker-wrapper">' +
                       '<input type="date" class="native-input ans-date"' +
                           ' style="color:#9aa0a6;position:relative;z-index:1;">' +
                       '<span class="material-symbols-rounded"' +
                           ' style="pointer-events:none;color:#5f6368;font-size:18px;">event</span>' +
                   '</div>';


        /* ── Time ────────────────────────────────────────────────── */
        } else if (type === 'time') {
            html = '<div class="native-picker-wrapper" style="width:140px;gap:4px;">' +
                       '<input type="time" class="native-input ans-time" id="ansTimeInput"' +
                           ' style="color:#9aa0a6;position:relative;z-index:1;"' +
                           ' onchange="this.style.color=this.value?\'#202124\':\'#9aa0a6\';' +
                                      'document.getElementById(\'ansClearTime\').style.display=this.value?\'inline\':\'none\';">' +
                       '<span class="material-symbols-rounded"' +
                           ' style="pointer-events:none;color:#5f6368;font-size:18px;">schedule</span>' +
                       '<span id="ansClearTime"' +
                           ' style="font-size:13px;color:#9aa0a6;cursor:pointer;display:none;padding:0 2px;"' +
                           ' title="Clear time"' +
                           ' onclick="document.getElementById(\'ansTimeInput\').value=\'\';' +
                                     'document.getElementById(\'ansTimeInput\').style.color=\'#9aa0a6\';' +
                                     'this.style.display=\'none\';">✕</span>' +
                   '</div>';


        /* ── Date + Time ─────────────────────────────────────────── */
        } else if (type === 'datetime') {
            html = '<div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;">' +
                       '<div class="native-picker-wrapper">' +
                           '<input type="date" class="native-input ans-date"' +
                               ' style="color:#9aa0a6;position:relative;z-index:1;">' +
                           '<span class="material-symbols-rounded"' +
                               ' style="pointer-events:none;color:#5f6368;font-size:18px;">event</span>' +
                       '</div>' +
                       '<div class="native-picker-wrapper" style="width:140px;gap:4px;">' +
                           '<input type="time" class="native-input ans-time" id="ansDtTimeInput"' +
                               ' style="color:#9aa0a6;position:relative;z-index:1;"' +
                               ' onchange="this.style.color=this.value?\'#202124\':\'#9aa0a6\';' +
                                          'document.getElementById(\'ansDtClearTime\').style.display=this.value?\'inline\':\'none\';">' +
                           '<span class="material-symbols-rounded"' +
                               ' style="pointer-events:none;color:#5f6368;font-size:18px;">schedule</span>' +
                           '<span id="ansDtClearTime"' +
                               ' style="font-size:13px;color:#9aa0a6;cursor:pointer;display:none;padding:0 2px;"' +
                               ' title="Clear time"' +
                               ' onclick="document.getElementById(\'ansDtTimeInput\').value=\'\';' +
                                         'document.getElementById(\'ansDtTimeInput\').style.color=\'#9aa0a6\';' +
                                         'this.style.display=\'none\';">✕</span>' +
                       '</div>' +
                   '</div>';


        /* ── Email ───────────────────────────────────────────────── */
        } else if (type === 'email') {
            html = '<div class="short-answer-line" style="width:60%;">name@example.com</div>' +
                   '<div style="font-size:11px;color:#9aa0a6;margin-top:6px;' +
                               'display:flex;align-items:center;gap:4px;">' +
                       '<span class="material-symbols-rounded"' +
                           ' style="font-size:13px;color:#9aa0a6;">info</span>' +
                       'Voter must enter a valid email address' +
                   '</div>';


        /* ── Location ────────────────────────────────────────────── */
        } else if (type === 'location') {
            html = '<div class="loc-preview-search">' +
                       '<span class="material-symbols-rounded">place</span>' +
                       '<span>Search for a location...</span>' +
                   '</div>' +
                   '<div class="map-placeholder">' +
                       '<span class="material-symbols-rounded">map</span>' +
                       'Map preview appears after voter selects' +
                   '</div>';
        }


        /* Set answer area HTML */
        container.innerHTML = html;


        /* ── Answer hint — injected below answer area for choice/grid types.
           Shows minimum requirement. Color driven by updateFooterButtons().
           Reuse existing hint div if present, create if not. */
        var needsHint = ['multiple-choice','checkboxes','dropdown',
                         'mc-grid','cb-grid'].indexOf(type) !== -1;
        var hintDiv = document.getElementById('answerHint');

        if (!hintDiv) {
            hintDiv = document.createElement('div');
            hintDiv.id = 'answerHint';
            hintDiv.style.cssText = 'font-size:11px;color:#9aa0a6;margin-top:8px;';
            container.parentNode.insertBefore(hintDiv, container.nextSibling);
        }

        hintDiv.textContent = needsHint
            ? (['mc-grid','cb-grid'].indexOf(type) !== -1
                ? 'At least two rows and two columns required'
                : 'At least two options required')
            : '';

        updateFooterButtons();
    }


    /* ── _buildGridHtml — shared by mc-grid and cb-grid ──────────
       iconName: 'radio_button_unchecked' for MC grid,
                 'check_box_outline_blank' for CB grid.
       Default: 2 rows + 2 columns — minimum required, show structure
       immediately so author sees the grid pattern on first render. */
    function _buildGridHtml(iconName) {

        /* Helper: one grid row item */
        function gridRow(containerId, index, label, iconHtml) {
            return '<div class="grid-row-item">' +
                       iconHtml +
                       '<input type="text" class="grid-item-input opt-input"' +
                           ' placeholder="' + label + ' ' + index + '"' +
                           ' oninput="updateFooterButtons()">' +
                       '<span class="opt-remove"' +
                           ' onclick="removeGridItem(\'' + containerId + '\',this)">✕</span>' +
                   '</div>';
        }

        return '<div class="grid-container">' +

            /* Rows section — 2 rows by default */
            '<div class="grid-section">' +
                '<div class="grid-title">Rows</div>' +
                '<div id="gridRows">' +
                    gridRow('gridRows', 1, 'Row', '<span class="grid-index">1.</span>') +
                    gridRow('gridRows', 2, 'Row', '<span class="grid-index">2.</span>') +
                '</div>' +
                '<div class="add-option-row" onclick="addGridItem(\'gridRows\',\'Row\')">' +
                    '<span class="material-symbols-rounded">add</span>Add row' +
                '</div>' +
            '</div>' +

            /* Columns section — 2 columns by default */
            '<div class="grid-section">' +
                '<div class="grid-title">Columns</div>' +
                '<div id="gridCols">' +
                    gridRow('gridCols', 1, 'Column',
                        '<span class="material-symbols-rounded"' +
                            ' style="font-size:18px;color:#dadce0;">' + iconName + '</span>') +
                    gridRow('gridCols', 2, 'Column',
                        '<span class="material-symbols-rounded"' +
                            ' style="font-size:18px;color:#dadce0;">' + iconName + '</span>') +
                '</div>' +
                '<div class="add-option-row" onclick="addGridItem(\'gridCols\',\'Col\')">' +
                    '<span class="material-symbols-rounded">add</span>Add column' +
                '</div>' +
            '</div>' +

        '</div>';
    }

    /* ============================================================
       JS BLOCK 5: ADD / REMOVE OPTION + GRID ITEM HELPERS
       ─────────────────────────────────────────────────────────────
       addOption(type)      — adds a new option row to #optionsList.
       removeOption(idx)    — removes option row by index.
                              Minimum 1 visible row. Validity is based
                              on FILLED count — updateFooterButtons() counts.
       addGridItem(containerId, label) — adds row to #gridRows or #gridCols.
       removeGridItem(containerId, el) — removes grid row/col.
                              Minimum 1 visible row/col. Same filled-count rule.

       MINIMUM VISIBLE ROW = 1:
         Author can remove down to 1 visible row.
         Validity (≥2 filled) is enforced by updateFooterButtons() counting
         non-empty inputs — not by the number of visible rows.
         Showing 2 rows by default is a UX convenience, not a hard lock.

       FOCUS:
         New row gets immediate focus — author can type right away.
         No extra click needed.

       INDEX NUMBERING:
         Dropdown rows show "1. 2. 3." numbered index in their icon slot.
         MC/CB rows show radio dot / checkbox square.
         Grid rows show "1. 2. 3." in the index span.
         Grid col rows show the type icon (radio/checkbox) instead.
         Numbers reflect visual position — purely cosmetic, not stored.
    ============================================================ */


    function addOption(type) {

        var list = document.getElementById('optionsList');
        if (!list) return;

        var count = list.children.length;

        /* Build icon HTML based on QType */
        var icon;
        if (type === 'multiple-choice') {
            icon = '<div class="radio-dot"></div>';
        } else if (type === 'checkboxes') {
            icon = '<div class="check-square"></div>';
        } else {
            /* Dropdown — numbered index */
            icon = '<span style="color:#70757a;min-width:18px;flex-shrink:0;">' + (count + 1) + '.</span>';
        }

        var row = document.createElement('div');
        row.className = 'option-row';
        row.id = 'optRow_' + count;
        row.innerHTML =
            icon +
            '<input class="opt-input" type="text"' +
                ' placeholder="Option ' + (count + 1) + '"' +
                ' oninput="updateFooterButtons()"' +
                ' onkeydown="if(event.key===\'Enter\'){addOption(\'' + type + '\');}">' +
            '<span class="opt-remove" title="Remove"' +
                ' onclick="removeOption(' + count + ')">✕</span>';

        list.appendChild(row);

        /* Focus the new input — author types immediately */
        var input = row.querySelector('input');
        if (input) input.focus();

        updateFooterButtons();
        _scrollAnswerAreaIntoView();
    }


    function removeOption(idx) {

        var list = document.getElementById('optionsList');
        if (!list) return;

        /* Minimum 1 visible row — validity is based on FILLED count,
           not visible row count. updateFooterButtons() counts filled inputs. */
        if (list.children.length <= 1) return;

        var row = document.getElementById('optRow_' + idx);
        if (row) row.remove();

        updateFooterButtons();
    }


    function addGridItem(containerId, label) {

        var cont = document.getElementById(containerId);
        if (!cont) return;

        var count    = cont.querySelectorAll('.grid-row-item').length + 1;
        var isCol    = (containerId === 'gridCols');

        /* Columns show QType icon, rows show numbered index */
        var iconHtml = isCol
            ? '<span class="material-symbols-rounded"' +
                  ' style="font-size:18px;color:#dadce0;">' +
                  (_currentQTypeVal === 'cb-grid'
                      ? 'check_box_outline_blank'
                      : 'radio_button_unchecked') +
              '</span>'
            : '<span class="grid-index">' + count + '.</span>';

        var row = document.createElement('div');
        row.className = 'grid-row-item';
        row.innerHTML =
            iconHtml +
            '<input type="text" class="grid-item-input opt-input"' +
                ' placeholder="' + label + ' ' + count + '"' +
                ' oninput="updateFooterButtons()">' +
            '<span class="opt-remove"' +
                ' onclick="removeGridItem(\'' + containerId + '\',this)">✕</span>';

        cont.appendChild(row);

        /* Focus the new input */
        var input = row.querySelector('input');
        if (input) input.focus();

        updateFooterButtons();
        _scrollAnswerAreaIntoView();
    }


    function removeGridItem(containerId, el) {

        var cont = document.getElementById(containerId);
        if (!cont) return;

        /* Minimum 1 visible row/col — validity is based on FILLED count,
           not visible row count. updateFooterButtons() counts filled inputs. */
        if (cont.querySelectorAll('.grid-row-item').length <= 1) return;

        el.closest('.grid-row-item').remove();

        updateFooterButtons();
    }

    /* ============================================================
       JS BLOCK 1C: TIME DIGIT + DURATION CONTENTEDITABLE HANDLERS
       ─────────────────────────────────────────────────────────────
       Time (HH:MM):
         onTimeDigitFocus — pauses live clock, selects all text
         onTimeDigitBlur  — clamps value, writes _timeVal, marks manual
         onTimeDigitKey   — digits only, Enter/Tab to commit, Esc to cancel

       Duration (DD:HH:MM):
         onDurFocus — selects all text
         onDurBlur  — clamps, pads, updates footer buttons + hint
         onDurKey   — digits only, Enter/Tab to commit

       Draft toggle:
         onDraftToggle — dims/restores calendar + time + duration,
                         stops/starts clock, NULLs schedule on draft
    ============================================================ */

    function selAllContent(el) {
        var r = document.createRange();
        r.selectNodeContents(el);
        var s = window.getSelection();
        s.removeAllRanges();
        s.addRange(r);
    }

    function onTimeDigitFocus(el) {
        _timeDigitEditing = true;
        activateStep1();
        selAllContent(el);
    }

    function onTimeDigitBlur(el, part) {
        _timeDigitEditing = false;
        var max = (part === 'h') ? 23 : 59;
        var v   = parseInt(el.textContent) || 0;
        if (v < 0) v = 0;
        if (v > max) v = max;
        el.textContent = String(v).padStart(2, '0');

        /* Write to hidden value store */
        var hEl = document.getElementById('startTimeH');
        var mEl = document.getElementById('startTimeM');
        var hv  = hEl ? hEl.textContent : '00';
        var mv  = mEl ? mEl.textContent : '00';
        var tvEl = document.getElementById('_timeVal');
        if (tvEl) tvEl.value = hv + ':' + mv;

        /* Mark as manually edited — stop live clock */
        _timeManualEdited = true;
        _timeIsLiveClock  = false;
        if (_liveClockInterval) {
            clearInterval(_liveClockInterval);
            _liveClockInterval = null;
        }

        /* Freeze SS at 00 */
        var ssEl = document.getElementById('startTimeS');
        if (ssEl) ssEl.textContent = '00';

        activateStep1();
        _updateScheduleHint();
        updateFooterButtons();
    }

    function onTimeDigitKey(event, el, part) {
        if (event.key === 'Enter' || event.key === 'Tab') {
            event.preventDefault();
            el.blur();
            /* Tab — move to next field */
            if (event.key === 'Tab') {
                var next = (part === 'h')
                    ? document.getElementById('startTimeM')
                    : document.getElementById('durD');
                if (next) { next.focus(); selAllContent(next); }
            }
            return;
        }
        if (event.key === 'Escape') {
            event.preventDefault();
            _timeManualEdited = false;
            el.blur();
            /* If today is selected, resume live clock */
            var dateVal  = (document.getElementById('_dateVal') || {}).value || '';
            var todayStr = new Date().toISOString().split('T')[0];
            if (dateVal === todayStr) _startLiveClock();
            return;
        }
        /* Digits, backspace, delete, arrows only */
        if (!/[0-9]/.test(event.key) &&
            !['Backspace','Delete','ArrowLeft','ArrowRight'].includes(event.key)) {
            event.preventDefault();
        }
    }

    function onDurFocus(el) {
        activateStep1();
        selAllContent(el);
    }

    function onDurBlur(el, max) {
        var v = parseInt(el.textContent) || 0;
        if (v < 0) v = 0;
        if (v > max) v = max;
        el.textContent = String(v).padStart(2, '0');
        activateStep1();
        _updateScheduleHint();
        updateFooterButtons();
    }

    function onDurKey(event, el, max) {
        if (event.key === 'Enter') { event.preventDefault(); el.blur(); return; }
        if (event.key === 'Tab') {
            event.preventDefault();
            el.blur();
            var nextMap = { durD: 'durH', durH: 'durM' };
            var nextId  = nextMap[el.id];
            if (nextId) {
                var next = document.getElementById(nextId);
                if (next) { next.focus(); selAllContent(next); }
            }
            return;
        }
        if (!/[0-9]/.test(event.key) &&
            !['Backspace','Delete','ArrowLeft','ArrowRight'].includes(event.key)) {
            event.preventDefault();
        }
    }

    function onDraftToggle() {
        var isDraft = document.getElementById('draftToggle').checked;

        /* Dim/restore calendar */
        var calLeft = document.querySelector('.card1-left');
        if (calLeft) calLeft.classList.toggle('draft-dim', isDraft);

        /* Dim/restore time section */
        var timeSection = document.getElementById('schedItemTime');
        if (timeSection) timeSection.classList.toggle('draft-dim', isDraft);

        /* Dim/restore duration */
        var durGroup = document.getElementById('durationGroup');
        if (durGroup) durGroup.classList.toggle('draft-dim', isDraft);

        /* Clock */
        if (isDraft) {
            _stopLiveClock();
        } else {
            /* Restore — if today is selected, restart clock */
            var dateVal  = (document.getElementById('_dateVal') || {}).value || '';
            var todayStr = new Date().toISOString().split('T')[0];
            if (!_timeManualEdited && dateVal === todayStr) {
                _startLiveClock();
            }
        }

        _updateScheduleHint();
        updateFooterButtons();
    }

    /* ============================================================
       JS BLOCK 6: SCHEDULE INPUT HANDLERS
       ─────────────────────────────────────────────────────────────
       Manages the three schedule fields: Start Date, Start Time,
       Duration (D:H:M). All changes feed into updateFooterButtons()
       and _updateScheduleHint() to drive button states + hint text.

       DATE PICKER:
         onDatePicked(v)     — fires on native picker change.
           Enforces min = today (rejects past dates).
           Formats DD / MM / YYYY for display input.
           Writes YYYY-MM-DD to _dateVal hidden store.
           Shows clear button. Activates time field.
           If date = today, enforces time min = now.
           If date changes to future, clears time min constraint.

         clearScheduleDate() — clears date AND time (time requires date).
           Deactivates time field. Hides clear buttons.

       TIME PICKER:
         _startTimeClick()   — guard: time picker only opens if date set.
           If no date: pulses date field red for 1s as visual hint.

         onTimePicked(v)     — fires on native picker change.
           If date = today and time < now: resets to Now() and restarts live clock.
           Formats HH : MM for display input.
           Writes HH:MM to _timeVal hidden store.
           Shows clear button.

         clearScheduleTime() — clears time only. Date stays.
           Hides time clear button.

         setTimeFieldState(active) — dims/enables the time field.
           active=false: 0.35 opacity, pointer-events none (gated).
           active=true:  full opacity, interactive.

       DURATION:
         durationFocus(el)   — selects all text on focus for easy overwrite.
         validateAndPad(el, max) — on blur: clamps to max, pads to 2 digits.
           If field emptied but siblings have values: defaults to '00'.
           If all duration fields empty: allows empty state.
           Calls enforceDurationMin() after padding.
         enforceDurationMin()— enforces total duration ≥ 15 minutes.
           If total < 15min and any field has a value: resets to 00:00:15.
         isNumber(evt)       — keypress guard: digits only (0-9).

       DATETIME VALIDATION:
         validateDateTime()  — if date = today and time is in the past,
           pushes time forward 5 minutes. Called after date/time changes.
    ============================================================ */


    function onDatePicked(v) {

        if (!v) return;

        /* Enforce min = today — reject past dates */
        var todayStr = new Date().toISOString().split('T')[0];
        if (v < todayStr) {
            v = todayStr;
            document.getElementById('_datePicker').value = todayStr;
        }

        /* Write to hidden value store */
        document.getElementById('_dateVal').value = v;

        /* Activate step 1 label */
        activateStep1();

        /* Re-render calendar to show selection highlight */
        _calYear  = parseInt(v.split('-')[0]);
        _calMonth = parseInt(v.split('-')[1]) - 1;
        renderCalendar();

        /* Time handling on date change */
        var now = new Date();
        if (v === todayStr) {
            /* Today selected — discard any previously stored time, restart live clock */
            document.getElementById('_timeVal').value = '';
            _timeManualEdited = false;
            _startLiveClock();
        } else {
            /* Future date — stop live clock */
            _stopLiveClock();
        }

        _updateScheduleHint();
        validateDateTime();
        updateFooterButtons();
    }


    function isNumber(evt) {
        /* Keypress guard — digits only (0-9). Blocks letters and symbols. */
        var charCode = evt.which ? evt.which : evt.keyCode;
        return !(charCode > 31 && (charCode < 48 || charCode > 57));
    }


    function validateDateTime() {
        /* If date = today and stored time is now stale — restart live clock.
           onTimePicked() handles this on manual pick. This catches the edge
           case where date was changed back to today with an existing time. */
        var dateEl   = document.getElementById('_dateVal');
        var timeEl   = document.getElementById('_timeVal');
        var now      = new Date();
        var todayStr = now.toISOString().split('T')[0];

        if (dateEl.value === todayStr && timeEl.value && !_timeIsLiveClock) {
            var nowTime = String(now.getHours()).padStart(2, '0') + ':' +
                          String(now.getMinutes()).padStart(2, '0');
            if (timeEl.value < nowTime) {
                showToast('Scheduled time passed — resetting to now');
                _startLiveClock();
            }
        }

        updateFooterButtons();
    }

    /* ============================================================
       JS BLOCK 7: QUESTION FIELD VALIDATION
       ─────────────────────────────────────────────────────────────
       Google Material Design dirty-state validation pattern.
       Field is CLEAN on first load — no red shown until user touches it.

       STATE MACHINE:
         _qDirty = false  → field never touched. No red shown ever.
         _qDirty = true   → user has blurred at least once.
                            Live feedback active from that point onward.

       CONSTANTS:
         MIN_Q_CHARS = 10  — minimum chars for a valid question
         MAX_Q_CHARS = 200 — maximum chars (enforced by maxlength attr)

       FUNCTIONS:
         _qOnInput(el)   — every keystroke:
                           updates char counter (n/200, color by state)
                           applies live red border if already dirty

         _qOnBlur(el)    — user leaves field:
                           if field empty → stay clean (no red)
                           if field has content → mark dirty, apply state

         _qMarkDirty()   — called on Save/Preview/Publish attempt:
                           forces dirty state regardless of user interaction
                           scrolls to field + focuses if invalid
                           NPS readonly field: always skipped (always valid)

         _qApplyState(el, valid) — applies/removes:
                           .field-error class on textarea (red border)
                           .visible class on hint text

         _qReset()       — called on QType change + Clear Form:
                           resets _qDirty to false
                           removes red border + hint
                           clears counter text
                           does NOT clear textarea value (selectType does)

       CHARACTER COUNTER STATES:
         No text typed:   counter hidden (empty string)
         Typing (< min):  red   + "n/200"  (.under-min)
         Typing (≥ min):  gray  + "n/200"  (normal)
         At max (= 200):  yellow+ "200/200"(.at-max)
    ============================================================ */


    var _qDirty    = false;
    var MIN_Q_CHARS = 10;
    var MAX_Q_CHARS = 200;


    function _qOnInput(el) {

        var len   = el.value.length;
        var valid = el.readOnly || len >= MIN_Q_CHARS;

        /* Update character counter */
        var counter = document.getElementById('questionCounter');
        if (counter) {
            if (len > 0) {
                counter.textContent = len + '/' + MAX_Q_CHARS;
                counter.className   = 'question-counter' +
                    (len < MIN_Q_CHARS  ? ' under-min' :
                     len >= MAX_Q_CHARS ? ' at-max'    : '');
            } else {
                counter.textContent = '';
                counter.className   = 'question-counter';
            }
        }

        /* Live validation feedback — only if field already dirty */
        if (_qDirty) _qApplyState(el, valid);
    }


    function _qOnBlur(el) {

        /* Field empty on blur — stay clean, no red shown */
        if (el.value.length === 0) return;

        var valid = el.readOnly || el.value.trim().length >= MIN_Q_CHARS;
        _qDirty = true;
        _qApplyState(el, valid);
    }


    function _qMarkDirty() {

        /* Called on Save/Preview/Publish attempt.
           Forces visible error state if question is too short.
           NPS textarea is readonly — always valid, skip. */
        var el = document.getElementById('questionInput');
        if (!el || el.readOnly) return;

        var valid = el.value.trim().length >= MIN_Q_CHARS;
        _qDirty = true;
        _qApplyState(el, valid);

        /* Scroll to field and focus if invalid */
        if (!valid) {
            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
            el.focus();
        }
    }


    function _qApplyState(el, valid) {

        /* Red border — .field-error class */
        el.classList.toggle('field-error', !valid);

        /* Red hint text — .visible class */
        var hint = document.getElementById('questionHint');
        if (hint) hint.classList.toggle('visible', !valid);
    }


    function _qReset() {

        /* Reset to clean state — called on QType change + Clear Form */
        _qDirty = false;

        var el = document.getElementById('questionInput');
        if (el) {
            el.classList.remove('field-error');
            el.value        = '';
            el.readOnly     = false;
            el.style.color  = '';
            el.style.cursor = '';
        }

        var hint = document.getElementById('questionHint');
        if (hint) hint.classList.remove('visible');

        var counter = document.getElementById('questionCounter');
        if (counter) {
            counter.textContent = '';
            counter.className   = 'question-counter';
        }
    }

    /* ============================================================
       JS BLOCK 8: SCHEDULE HINT
       ─────────────────────────────────────────────────────────────
       _updateScheduleHint() — drives the single #scheduleHint div.
       ONE div, text + color swapped in place. Never multiple hints.

       Called by:
         onDatePicked(), clearScheduleDate()
         onTimePicked(), clearScheduleTime()
         validateAndPad(), _appInit()

       FIVE STATES (one visible at a time):
         State 1 — no date:
           color: gray (#5f6368)
           text:  "No schedule set — poll will be saved as draft"

         State 2 — date set, no time:
           color: red (#d93025)

         State 3 — date + future time + valid duration:
           color: gray (#5f6368) — informational, not an error
           text:  "Poll will automatically close after the set duration"
           CSS:   .info class applied

         State 3A — live clock ticking + valid duration:
           color: blue (#1a73e8) — action signal, goes live on publish
           text:  "Poll will go live immediately on publish"
           CSS:   .live class applied

         State 4 — date + time set, duration invalid (<15min):
           color: red (#d93025)
           text:  "Set a duration of at least 15 minutes to publish"

       className set directly (not classList) to cleanly swap between
       all three colour states (default/info/live) in one assignment.
    ============================================================ */


    function _updateScheduleHint() {

        var hintA4 = document.getElementById('hintA4');
        var hintA1 = document.getElementById('hintA1');

        /* Reset both — hide all first */
        if (hintA4) { hintA4.textContent = ''; hintA4.className = 'sched-hint'; }
        if (hintA1) { hintA1.textContent = ''; hintA1.className = 'sched-hint'; }

        /* A1 — draft toggle ON: shown below toggle row */
        var draftToggleEl = document.getElementById('draftToggle');
        if (draftToggleEl && draftToggleEl.checked) {
            if (hintA1) {
                hintA1.textContent = 'Saved as draft — will not go live until published';
                hintA1.className   = 'sched-hint info';
            }
            return;
        }

        /* A4 — live clock ticking: shown below time block */
        if (_timeIsLiveClock) {
            if (hintA4) {
                hintA4.textContent = 'With Date=Today & Time=Now, Voting opens instantly';
                hintA4.className   = 'sched-hint live';
            }
            return;
        }

        /* Future date+time — nothing to show */
    }

    /* ============================================================
       JS BLOCK 9: FOOTER BUTTON STATE
       ─────────────────────────────────────────────────────────────
       updateFooterButtons() — single function that drives all 4
       footer button active/inactive states. Called after every
       field change that could affect button eligibility.

       BUTTON CONDITIONS:
         canClear   — any field has content (question, options, schedule)
         canPreview — Q&A valid (question ≥10 chars + options if needed)
         canSave    — Q&A valid AND date NOT set (draft flow)
         canPublish — Q&A valid AND date set AND time set AND dur ≥15min

       INACTIVE STATE:
         opacity: 0.4 only. Never hidden, never color-changed.
         pointer-events: auto kept so title= tooltip fires on hover.
         cursor: not-allowed signals disabled state.

       ACTIVATION ANIMATION:
         inactive → active transition plays btn-activate-pop (150ms scale).
         setBtn() handles the transition detection and animation trigger.
         Animation class removed after animationend to allow re-triggering.

       ANSWER HINT COLOR:
         #answerHint div color driven here — red when options insufficient,
         gray when valid. Only colored if hint has text content.

       BUTTON TOOLTIPS:
         _updateBtnTooltips(canSave, canPublish) — sets title= on
         inactive Save and Publish buttons. Cleared when active.
         Tooltip text is short and actionable:
           Save    inactive: "Q&A needed, date & time must be empty"
           Publish inactive: "Q&A + date, time & duration needed"

       Q&A VALIDITY:
         hasQuestion — question ≥ MIN_Q_CHARS OR NPS (always valid)
         hasOptions  — for MC/CB/DD: ≥2 filled .opt-input values
                       for Grid: ≥2 filled rows AND ≥2 filled cols
                       for all other types: always true
    ============================================================ */


    function _updateBtnTooltips(canSave, canPublish) {

        var saveBtn    = document.getElementById('btnSave');
        var publishBtn = document.getElementById('btnPublish');

        if (saveBtn) {
            saveBtn.title = canSave
                ? ''
                : 'Draft switch ON and Q&A defined';
        }

        if (publishBtn) {
            publishBtn.title = canPublish
                ? ''
                : 'Q&A + date, time & duration needed';
        }
    }


    function updateFooterButtons() {

        /* ── Schedule values ──────────────────────────────────── */
        var dateVal = (document.getElementById('_dateVal') || {}).value || '';
        var timeVal = (document.getElementById('_timeVal') || {}).value || '';
        var dateSet = dateVal.length === 10;
        var timeSet = timeVal.length === 5;

        /* ── Duration validity ────────────────────────────────── */
        var d = parseInt((document.getElementById('durD') || {}).textContent) || 0;
        var h = parseInt((document.getElementById('durH') || {}).textContent) || 0;
        var m = parseInt((document.getElementById('durM') || {}).textContent) || 0;
        var durValid = (d * 24 * 60 + h * 60 + m) >= 15;

        /* ── Q&A validity ─────────────────────────────────────── */
        var qEl      = document.getElementById('questionInput');
        var qText    = qEl ? qEl.value.trim() : '';
        var isNps    = (_currentQTypeVal === 'nps');
        var hasQuestion = isNps ? true : qText.length >= MIN_Q_CHARS;

        var optsList    = document.getElementById('optionsList');
        var gridRowsEl  = document.getElementById('gridRows');
        var gridColsEl  = document.getElementById('gridCols');
        var hasOptions  = true;
        var hintText    = '';

        var filledOpts = 0, filledRows = 0, filledCols = 0;

        if (optsList) {
            /* MC / Checkboxes / Dropdown — count filled .opt-input values */
            filledOpts = Array.from(optsList.querySelectorAll('.opt-input'))
                              .filter(function(i) { return i.value.trim(); }).length;
            hasOptions = filledOpts >= 2;
            hintText   = 'At least two options required';

        } else if (gridRowsEl && gridColsEl) {
            /* MC Grid / CB Grid — count filled rows AND cols separately */
            filledRows = Array.from(gridRowsEl.querySelectorAll('.opt-input'))
                              .filter(function(i) { return i.value.trim(); }).length;
            filledCols = Array.from(gridColsEl.querySelectorAll('.opt-input'))
                              .filter(function(i) { return i.value.trim(); }).length;
            hasOptions = filledRows >= 2 && filledCols >= 2;
            hintText   = 'At least two rows and two columns required';
        }

        /* Answer hint color:
           Gray  — untouched (all options empty) OR already valid (≥2 filled).
           Red   — user has started filling but count is still insufficient.
           Never red on fresh/untouched render — that would feel like an error
           before the author has had a chance to do anything. */
        var hintEl = document.getElementById('answerHint');
        if (hintEl && hintEl.textContent) {
            var anyFilled = optsList
                ? filledOpts > 0
                : (filledRows > 0 || filledCols > 0);
            var showRed = anyFilled && !hasOptions;
            hintEl.style.color = showRed ? '#d93025' : '#9aa0a6';
        }

        var qaValid = hasQuestion && hasOptions;

        /* ── Button conditions ────────────────────────────────── */
        var isDraft = !!(document.getElementById('draftToggle') || {}).checked;

        var canClear   = qaValid || dateSet || timeSet ||
                         (document.getElementById('durD') || {}).textContent !== '00' ||
                         (document.getElementById('durH') || {}).textContent !== '00' ||
                         (document.getElementById('durM') || {}).textContent !== '15';
        var canPreview = qaValid;
        var canSave    = qaValid && (!dateSet || isDraft);   /* draft toggle also enables Save */
        var canPublish = qaValid && dateSet && timeSet && durValid && !isDraft;

        /* ── Apply state with activation animation ────────────── */
        function setBtn(id, active) {
            var btn = document.getElementById(id);
            if (!btn) return;
            var wasActive = !btn.classList.contains('btn-inactive');
            var changing  = wasActive !== active;

            if (active) {
                btn.classList.remove('btn-inactive');
                if (changing) {
                    /* Play activation pop animation */
                    btn.classList.remove('btn-activating');
                    void btn.offsetWidth;   /* force reflow to restart animation */
                    btn.classList.add('btn-activating');
                    btn.addEventListener('animationend', function() {
                        btn.classList.remove('btn-activating');
                    }, { once: true });
                }
            } else {
                btn.classList.remove('btn-activating');
                btn.classList.add('btn-inactive');
            }
        }

        setBtn('btnClear',   canClear);
        setBtn('btnPreview', canPreview);
        setBtn('btnSave',    canSave);
        setBtn('btnPublish', canPublish);

        /* Update inactive button tooltips */
        _updateBtnTooltips(canSave, canPublish);
    }

    /* ============================================================
       JS BLOCK 10: SCALE + RATING LIVE PREVIEW
       ─────────────────────────────────────────────────────────────
       updateScaleLabels()   — Linear Scale: updates #lblMin / #lblMax
                               index numbers when min/max dropdowns change.

       updateRatingPreview() — Rating: re-renders the icon preview row
                               when scale count or icon type changes.
                               Also updates #ratingLblMaxIndex to match
                               the selected scale count.

       RATING ICON COLOURS (Material Symbols Rounded FILL=1):
         star     → #fbbc04  Google yellow
         favorite → #ea4335  Google red
         thumb_up → #1a73e8  Google blue

       RATING CONFIG FIELDS:
         #ratingLevels   — scale count (3–10). Default 5.
         #ratingIcon     — icon type (star/favorite/thumb_up). Default star.
         #ratingLblMin   — min label text (optional). e.g. "Poor"
         #ratingLblMax   — max label text (optional). e.g. "Excellent"
         #ratingLblMaxIndex — span showing the max scale number next to label

       LINEAR SCALE CONFIG FIELDS:
         #minRange  — min value (0 or 1)
         #maxRange  — max value (2–10)
         #lblMin    — span showing min value number next to label input
         #lblMax    — span showing max value number next to label input
    ============================================================ */


    function updateScaleLabels() {

        var minEl = document.getElementById('minRange');
        var maxEl = document.getElementById('maxRange');
        var lblMin = document.getElementById('lblMin');
        var lblMax = document.getElementById('lblMax');

        if (minEl && lblMin) lblMin.innerText = minEl.value;
        if (maxEl && lblMax) lblMax.innerText = maxEl.value;
    }


    function updateRatingPreview() {

        var levelsEl  = document.getElementById('ratingLevels');
        var iconEl    = document.getElementById('ratingIcon');
        var preview   = document.getElementById('ratingPreview');
        var maxIndex  = document.getElementById('ratingLblMaxIndex');

        if (!levelsEl || !preview) return;

        var levels = parseInt(levelsEl.value) || 5;
        var icon   = iconEl ? iconEl.value : 'star';

        /* Icon colour per type */
        var colorMap = {
            'star'     : '#fbbc04',   /* Google yellow */
            'favorite' : '#ea4335',   /* Google red    */
            'thumb_up' : '#1a73e8'    /* Google blue   */
        };
        var color = colorMap[icon] || '#fbbc04';

        /* Build icon row — one icon per scale level */
        var html = '';
        for (var i = 0; i < levels; i++) {
            html += '<span class="material-symbols-rounded"' +
                        ' style="color:' + color + ';font-size:32px;">' +
                        icon +
                    '</span>';
        }
        preview.innerHTML = html;

        /* Update max label index to match scale count */
        if (maxIndex) maxIndex.innerText = levels;
    }

    /* ============================================================
       JS BLOCK 11: CLEAR FORM
       ─────────────────────────────────────────────────────────────
       clearPollForm() — resets ALL fields to fresh load state.
       Called by Clear button onclick.
       Guarded by _inFlight Map (Block 14) against double-click.

       WHAT GETS CLEARED:
         1. Question field — _qReset() handles validation state too
         2. QType — resets to Multiple Choice (default)
         3. Answer area — re-renders MC with 2 empty rows
         4. Schedule — date + time cleared via clearScheduleDate()
         5. Duration — reset to 00:00:15 (minimum valid)
         6. Step labels — deactivated (back to gray)
         7. Transit container — cleared so no stale data bleeds forward
         8. Vote history (testing aid) — clears snappoll_voted_* from localStorage

       WHAT DOES NOT GET CLEARED:
         Auth state — user stays signed in
         Nav state  — avatar stays visible if signed in

       TRANSITION:
         No navigation — stays on index.html.
         updateFooterButtons() called at end to reset all button states.
         Buttons return to initial inactive state (Clear inactive,
         Preview/Save/Publish all inactive).

       NOTE: clearPollForm() does NOT show a confirm modal.
         The Clear button is only active when there is content to clear.
         If author accidentally clears, they can just retype.
         No destructive data loss — nothing is saved to DB on Clear.
    ============================================================ */


    function clearPollForm() {

        /* ── 1. Question field + validation state ─────────────── */
        _qReset();


        /* ── 2. Poll ID input — clear voter entry field ────────── */
        var entryPollId = document.getElementById('entryPollIdInput');
        if (entryPollId) { entryPollId.value = ''; _updateEntryVoteBtn(); }


        /* ── 3. QType — reset to Multiple Choice ──────────────── */
        selectType('multiple-choice', 'Multiple choice', 'radio_button_checked');
        /* selectType calls renderAnswerArea + updateFooterButtons */


        /* ── 4. Schedule — re-init to defaults ─────────────────── */
        initDateTime();

        /* ── 4B. Draft toggle — reset to off ───────────────────── */
        var draftEl = document.getElementById('draftToggle');
        if (draftEl) draftEl.checked = false;
        /* Remove any dim classes left by draft mode */
        var calLeft = document.querySelector('.card1-left');
        if (calLeft) calLeft.classList.remove('draft-dim');
        var timeSection = document.getElementById('schedItemTime');
        if (timeSection) timeSection.classList.remove('draft-dim');
        var durGroup = document.getElementById('durationGroup');
        if (durGroup) durGroup.classList.remove('draft-dim');


        /* ── 5. Step labels — deactivate both ─────────────────── */
        var s1 = document.getElementById('step1Label');
        var s2 = document.getElementById('step2Label');
        if (s1) s1.classList.remove('active');
        if (s2) s2.classList.remove('active');


        /* ── 6. Transit container — clear stale data ───────────── */
        clearTransit();


        /* ── 7. Vote history — testing aid ─────────────────────── */
        /* Removes all snappoll_voted_* keys so same device can vote
           again during testing without server-side duplicate check. */
        try {
            Object.keys(localStorage)
                .filter(function(k) { return k.indexOf('snappoll_voted_') === 0; })
                .forEach(function(k) { localStorage.removeItem(k); });
        } catch(e) {}


        /* ── 8. Update schedule hint + footer buttons ───────────── */
        _updateScheduleHint();
        updateFooterButtons();
    }

    /* ============================================================
       JS BLOCK 12: Q&A VALIDITY + OPTIONS GUARD
       ─────────────────────────────────────────────────────────────
       _qaIsValid() — lightweight boolean gate used by all four
         action buttons before proceeding. Mirrors updateFooterButtons()
         logic but returns true/false with no side effects.
         Called by: requireAuthThenPreview, requireAuthThenSave,
                    requireAuthThenPublish, clearPollForm (implicit).

       _warnIfTooManyOptions(onProceed) — publish-time guard.
         Warns author if answer options exceed MAX_OPTS (7).
         Called only from requireAuthThenPublish(), AFTER _qaIsValid().
         If count ≤ MAX_OPTS: calls onProceed() immediately (silent).
         If count > MAX_OPTS: shows cpbpConfirm warning modal.
           Author can proceed anyway or cancel.
         Applies to: MC, Checkboxes, Dropdown (options count),
                     MC Grid, CB Grid (row count OR col count).

       WHY 7 OPTIONS MAX:
         More than 7 options makes charts harder to read and voters
         less likely to engage. It's a soft warning, not a hard block.
         Author can override and publish anyway.

       NPS SPECIAL CASE:
         NPS question is always valid — fixed readonly text, no options.
         _qaIsValid() always returns true for NPS regardless of textarea.
    ============================================================ */


    function _qaIsValid() {

        var qEl   = document.getElementById('questionInput');
        var qText = qEl ? qEl.value.trim() : '';
        var isNps = (_currentQTypeVal === 'nps');
        var hasQ  = isNps ? true : qText.length >= MIN_Q_CHARS;

        var optsList   = document.getElementById('optionsList');
        var gridRowsEl = document.getElementById('gridRows');
        var gridColsEl = document.getElementById('gridCols');
        var hasOpts    = true;

        if (optsList) {
            /* MC / Checkboxes / Dropdown — count filled .opt-input values */
            var filled = Array.from(optsList.querySelectorAll('.opt-input'))
                              .filter(function(i) { return i.value.trim(); }).length;
            hasOpts = filled >= 2;

        } else if (gridRowsEl && gridColsEl) {
            /* MC Grid / CB Grid — need ≥2 filled rows AND ≥2 filled cols */
            var filledR = Array.from(gridRowsEl.querySelectorAll('.opt-input'))
                               .filter(function(i) { return i.value.trim(); }).length;
            var filledC = Array.from(gridColsEl.querySelectorAll('.opt-input'))
                               .filter(function(i) { return i.value.trim(); }).length;
            hasOpts = filledR >= 2 && filledC >= 2;
        }

        return hasQ && hasOpts;
    }


    function _warnIfTooManyOptions(onProceed) {

        var MAX_OPTS   = 7;
        var optsList   = document.getElementById('optionsList');
        var gridRowsEl = document.getElementById('gridRows');
        var gridColsEl = document.getElementById('gridCols');
        var over       = false;
        var count      = 0;

        if (optsList) {
            /* MC / Checkboxes / Dropdown */
            count = Array.from(optsList.querySelectorAll('.opt-input'))
                         .filter(function(i) { return i.value.trim(); }).length;
            over  = count > MAX_OPTS;

        } else if (gridColsEl) {
            /* MC Grid / CB Grid — only check COLUMNS > MAX_OPTS.
               Rows scroll vertically — manageable. Columns cause horizontal
               cramping and chart readability issues — that is what we warn on.
               Rows are not restricted. */
            var cCount = Array.from(gridColsEl.querySelectorAll('.opt-input'))
                              .filter(function(i) { return i.value.trim(); }).length;
            over  = cCount > MAX_OPTS;
            count = cCount;
        }

        /* Under limit — proceed silently */
        if (!over) { onProceed(); return; }

        /* Over limit — warn author with confirm modal */
        var isGrid    = !!gridColsEl;
        var typeLabel = isGrid ? ' (Columns)' : '';
        cpbpConfirm({
            title   : 'Too Many Options',
            message : 'You have more than ' + MAX_OPTS + ' answer options' + typeLabel + '.\n\n' +
                      'Polls with many options can be harder for voters to engage ' +
                      'with and may affect chart readability.\n\n' +
                      'Consider reducing to ' + MAX_OPTS + ' or fewer' + typeLabel + ' for best results.',
            icon    : 'warning',
            okLabel : 'Publish Anyway',
            onOk    : onProceed
        });
    }

    /* ============================================================
       JS BLOCK 13: TRANSIT CONTAINER
       ─────────────────────────────────────────────────────────────
       Single localStorage key carries the full poll object between
       all author pages. Every page reads → updates own fields →
       writes entire container before navigation.

       KEY: CPBP_INTERNAL_TRANSIT_CONTAINER

       LIFECYCLE:
         Written: immediately before navigation (Preview, Save, Publish)
         Read:    on DOMContentLoaded of destination page
         Cleared: by receiver page after successful read (single-use)
                  by clearPollForm() on index
                  by navLogOut() in cpbp-auth.js on sign-out

       SCHEMA FIELDS:
         id/internalId  — set by Cloudflare Worker on save/publish
         authorEmail    — from auth session
         created/savedAt— ISO timestamps
         question/type  — Q&A core fields
         options[]      — MC/CB/DD options
         gridRows/Cols[]— Grid fields
         scaleMin/Max, lblMin/Max — Linear scale
         ratingType/Scale/LblMin/Max — Rating
         npsMin/Max     — NPS end labels
         dateVal/timeVal/durD/H/M — raw schedule fields
         goLive/durationMins/expiresAt — computed on Publish, null on Save
         status/deletedAt/responses/responseData — lifecycle fields

       NOTE ON SAVE vs PUBLISH SCHEDULE FIELDS:
         On Save (draft):  goLive/durationMins/expiresAt = null.
         On Publish:       computed from dateVal+timeVal+durD/H/M.
         Raw fields always collected — needed for Preview round-trip.
    ============================================================ */


    var TRANSIT_KEY = 'CPBP_INTERNAL_TRANSIT_CONTAINER';


    function readTransit() {
        /* Read current container or return empty shell. */
        try {
            var raw = localStorage.getItem(TRANSIT_KEY);
            if (raw) return JSON.parse(raw);
        } catch(e) {}
        return {};
    }


    function writeTransit(obj) {
        /* Write full container. Always stamps savedAt.
           Returns true on success, false on storage error. */
        obj.savedAt = new Date().toISOString();
        try {
            localStorage.setItem(TRANSIT_KEY, JSON.stringify(obj));
            return true;
        } catch(e) {
            openIndexSoonModal(
                'Storage Error',
                'Could not save — browser storage is unavailable. ' +
                'Please check your browser settings and try again.'
            );
            return false;
        }
    }


    function clearTransit() {
        try { localStorage.removeItem(TRANSIT_KEY); } catch(e) {}
    }


    function _collectFromDOM() {
        /* Collect all author-owned fields from DOM.
           Always starts from existing container so non-owned
           fields from other pages survive the round-trip. */

        var t = readTransit();


        /* ── Question + QType ──────────────────────────────────── */
        var qEl = document.getElementById('questionInput');
        /* Normalise: internal 'star-rating' stored as 'rating' in DB + transit */
        var qTypeNorm = (_currentQTypeVal === 'star-rating')
            ? 'rating' : _currentQTypeVal;

        t.question = qEl ? qEl.value.trim() : (t.question || '');
        t.type     = qTypeNorm;


        /* ── Options (MC / Checkboxes / Dropdown) ──────────────── */
        var options = [];
        document.querySelectorAll('#optionsList .opt-input').forEach(function(i) {
            if (i.value.trim()) options.push(i.value.trim());
        });
        t.options = options;


        /* ── Grid rows + cols ───────────────────────────────────── */
        var gridRows = [], gridCols = [];
        document.querySelectorAll('#gridRows .opt-input').forEach(function(i) {
            if (i.value.trim()) gridRows.push(i.value.trim());
        });
        document.querySelectorAll('#gridCols .opt-input').forEach(function(i) {
            if (i.value.trim()) gridCols.push(i.value.trim());
        });
        t.gridRows = gridRows;
        t.gridCols = gridCols;


        /* ── Linear scale ───────────────────────────────────────── */
        var minRangeEl     = document.getElementById('minRange');
        var maxRangeEl     = document.getElementById('maxRange');
        var scaleLblMinEl  = document.getElementById('scaleMinLabel');  /* text input */
        var scaleLblMaxEl  = document.getElementById('scaleMaxLabel');  /* text input */
        t.scaleMin    = minRangeEl    ? minRangeEl.value           : (t.scaleMin    || null);
        t.scaleMax    = maxRangeEl    ? maxRangeEl.value           : (t.scaleMax    || null);
        t.lblMin      = scaleLblMinEl ? scaleLblMinEl.value.trim() : (t.lblMin      || '');
        t.lblMax      = scaleLblMaxEl ? scaleLblMaxEl.value.trim() : (t.lblMax      || '');


        /* ── Rating ─────────────────────────────────────────────── */
        var ratingIconEl   = document.getElementById('ratingIcon');
        var ratingLvlEl    = document.getElementById('ratingLevels');
        var ratingLblMinEl = document.getElementById('ratingLblMin');
        var ratingLblMaxEl = document.getElementById('ratingLblMax');
        t.ratingType   = ratingIconEl   ? ratingIconEl.value           : (t.ratingType   || '');
        t.ratingScale  = ratingLvlEl    ? parseInt(ratingLvlEl.value)  : (t.ratingScale  || null);
        t.ratingLblMin = ratingLblMinEl ? ratingLblMinEl.value.trim()  : (t.ratingLblMin || '');
        t.ratingLblMax = ratingLblMaxEl ? ratingLblMaxEl.value.trim()  : (t.ratingLblMax || '');


        /* ── NPS labels ─────────────────────────────────────────── */
        var npsMinEl = document.getElementById('npsLblMin');
        var npsMaxEl = document.getElementById('npsLblMax');
        t.npsMin = npsMinEl ? npsMinEl.innerText : (t.npsMin || '');
        t.npsMax = npsMaxEl ? npsMaxEl.innerText : (t.npsMax || '');


        /* ── Schedule raw fields ────────────────────────────────── */
        var dateValEl = document.getElementById('_dateVal');
        var timeValEl = document.getElementById('_timeVal');
        var durDEl    = document.getElementById('durD');
        var durHEl    = document.getElementById('durH');
        var durMEl    = document.getElementById('durM');

        var dateVal = dateValEl ? dateValEl.value : '';
        var durD    = durDEl    ? durDEl.textContent.trim() : '';
        var durH    = durHEl    ? durHEl.textContent.trim() : '';
        var durM    = durMEl    ? durMEl.textContent.trim() : '';

        /* When live clock is ticking, capture precise Now() at this exact
           moment — _timeVal is only updated every second so could be stale
           by up to 999ms. Fresh Now() is more accurate for the Worker. */
        var timeVal;
        if (_timeIsLiveClock) {
            var snap = new Date();
            timeVal  = String(snap.getHours()).padStart(2, '0') + ':' +
                       String(snap.getMinutes()).padStart(2, '0');
        } else {
            timeVal  = timeValEl ? timeValEl.value : '';
        }

        t.dateVal = dateVal;
        t.timeVal = timeVal;
        t.durD    = durD;
        t.durH    = durH;
        t.durM    = durM;

        /* Computed schedule — for transit Preview round-trip.
           On Save:    _executeSave() overrides goLive/expiresAt to null.
           On Publish: _executePublish() recomputes from raw fields.
           Worker decides live vs scheduled based on how close goLive is to now. */
        var goLive  = (dateVal && timeVal)
            ? new Date(dateVal + 'T' + timeVal + ':00').toISOString()
            : null;
        var durMins = ((parseInt(durD) || 0) * 24 * 60) +
                      ((parseInt(durH) || 0) * 60) +
                       (parseInt(durM) || 0);
        var expiresAt = (goLive && durMins > 0)
            ? new Date(new Date(goLive).getTime() + durMins * 60000).toISOString()
            : null;

        t.goLive       = goLive;
        t.durationMins = durMins > 0 ? durMins : null;
        t.expiresAt    = expiresAt;


        /* ── Identity fields — set only if not already present ─── */
        if (!t.id)           t.id          = null;
        if (!t.internalId)   t.internalId  = null;
        if (!t.authorEmail)  t.authorEmail = (typeof window.cpbpAuthEmail === 'function' ? window.cpbpAuthEmail() : '') || '';
        if (!t.created)      t.created     = new Date().toISOString();
        if (t.sample === undefined) t.sample = false;
        if (!t.responses)    t.responses   = 0;
        if (!t.responseData) t.responseData = [];
        if (!t.deletedAt)    t.deletedAt   = null;
        t.status = t.status || 'draft';

        /* If draft toggle is on — override schedule fields to null.
           */
        var draftToggleEl = document.getElementById('draftToggle');
        if (draftToggleEl && draftToggleEl.checked) {
            t.dateVal      = '';
            t.timeVal      = '';
            t.goLive       = null;
            t.durationMins = null;
            t.expiresAt    = null;
            t.status       = 'draft';
        }

        return t;
    }

    /* ============================================================
       JS BLOCK 14: _inFlight DOUBLE-CLICK GUARD + WORKER URL
       ─────────────────────────────────────────────────────────────
       _inFlight Map prevents double-clicks on all 4 footer buttons.
       Each action checks before running, deletes key after completing.

       WORKER_URL — single constant for all Cloudflare Worker calls.
         🧹 WIRE: Replace placeholder with live Worker URL when deployed.
         Worker build session follows immediately after index build.

       PATTERN:
         if (_inFlight.has('save')) return;
         _inFlight.set('save', true);
         try { ... } finally { _inFlight.delete('save'); }

       WHY ALL 4 BUTTONS:
         Save + Publish — async API calls. Without guard: double requests,
           duplicate DB rows, double charges.
         Preview — DOM collection + navigation. Without guard: race condition
           if user clicks twice rapidly before navigation fires.
         Clear — DOM reset. Without guard: clears mid-render on slow devices,
           leaving DOM in inconsistent state.

       NOTE: Publish + Save also disable their buttons during the transition
       overlay (_showTransitionThen) which adds visual reinforcement.
       _inFlight provides the programmatic guarantee.
    ============================================================ */


    /* Single Map instance — shared across all button guards */
    var _inFlight = new Map();


    /* WORKER_URL — single place to update when Worker is deployed.
       🧹 WIRE: Replace with live Cloudflare Worker URL before go-live.
                Format: 'https://workers.palmdesk.com'
                Worker build session follows immediately after index build. */
    var WORKER_URL = 'https://workers.palmdesk.com';   /* 🧹 WIRE */


    /* ============================================================
       JS BLOCK 14B: PREVIEW
       ─────────────────────────────────────────────────────────────
       requireAuthThenPreview() — validates Q&A, writes transit
         container, navigates to Preview_unpublished_poll.html.

       Auth NOT required for Preview — author can preview without
       signing in. Preview is a read-only view of what they've built.

       Flow:
         1. _inFlight guard
         2. _qMarkDirty() — show red border if question too short
         3. _qaIsValid() gate — abort if invalid
         4. _collectFromDOM() → set status='draft' → writeTransit()
         5. history.replaceState — marks return URL as ?from=preview
         6. Navigate to Preview_unpublished_poll.html
    ============================================================ */


    function requireAuthThenPreview() {

        /* _inFlight guard — prevent double-click */
        if (_inFlight.has('preview')) return;
        _inFlight.set('preview', true);

        try {

            /* Mark question dirty — show red if < 10 chars */
            _qMarkDirty();

            /* Gate — abort if Q&A not valid */
            if (!_qaIsValid()) {
                _inFlight.delete('preview');
                return;
            }

            /* Collect DOM → write transit container */
            var _t      = _collectFromDOM();
            _t.status   = 'draft';
            if (!writeTransit(_t)) {
                _inFlight.delete('preview');
                return;
            }

            /* Mark return URL so _appInit() knows we came from Preview */
            history.replaceState(null, '', 'index.html?from=preview');

            /* Navigate — _inFlight key intentionally NOT deleted here.
               Navigation fires immediately. Key is cleared on page unload. */
            window.location.href = 'Preview_Unpublished_Poll.html';

        } catch(e) {
            _inFlight.delete('preview');
            console.error('[requireAuthThenPreview]', e);
        }
    }

    /* ============================================================
       JS BLOCK 15: SAVE (DRAFT)
       ─────────────────────────────────────────────────────────────
       requireAuthThenSave() — entry point for Save button.
         1. _inFlight guard
         2. _qMarkDirty() — show red if question too short
         3. _qaIsValid() gate — abort if invalid
         4. cpbpConfirm() — inform author poll saves as draft, no voters
         5. Auth gate — if not signed in: queue action, open auth modal
         6. _showTransitionThen('save') — branded overlay → _executeSave()

       _executeSave() — called by _showTransitionThen after overlay.
         Owned by cpbp-actions.js. Index provides window.cpbpGetTransit()
         and window.cpbpOnSaveSuccess() as page-specific callbacks.

       SAVE RULES (locked):
         - Save only available when date NOT set (draft = no schedule)
         - goLive / durationMins / expiresAt always null on Save
         - poll_id NOT assigned on Save — drafts have no public ID
         - internal_id assigned by Supabase on INSERT (auto UUID)
         - On re-save of existing draft: UPDATE via internal_id
         - After save: navigate to Polls_List.html

       WORKER CALL (cpbp-actions.js):
         POST WORKER_URL + '/api/save'
         Body: poll row with null schedule fields
         Response: { success:true, internalId }

       TIMEOUT + ERROR HANDLING (cpbp-actions.js):
         15s timeout — show error modal if Worker does not respond.
         503/429 — rate limit / overload — friendly modal, no navigate.
         Network error — caught, friendly modal shown.
    ============================================================ */


    function requireAuthThenSave() {

        /* _inFlight guard */
        if (_inFlight.has('save')) return;
        _inFlight.set('save', true);

        /* Mark question dirty */
        _qMarkDirty();

        /* Gate — abort if Q&A not valid */
        if (!_qaIsValid()) {
            _inFlight.delete('save');
            return;
        }

        /* Auth gate FIRST — open modal if not signed in */
        if (typeof window.cpbpAuthEmail !== "function" || !window.cpbpAuthEmail()) {
            window.cpbpSetPendingAction('save');
            _inFlight.delete('save');
            openAuthModal();
            return;
        }

        /* Signed in — show confirm then save */
        cpbpConfirm({
            title   : 'Save as Draft',
            message : 'No schedule set.\n\n' +
                      'This poll will be saved as a draft. ' +
                      'Voters cannot see or vote on this poll until it is published.',
            icon    : 'description',
            okLabel : 'Save Draft',
            onOk    : function() {
                _inFlight.delete('save');
                window._showTransitionThen('save');
            },
            onCancel: function() {
                _inFlight.delete('save');
            }
        });
    }

    /* ============================================================
       JS BLOCK 16: PUBLISH
       ─────────────────────────────────────────────────────────────
       requireAuthThenPublish() — entry point for Publish button.
         1. _inFlight guard
         2. _qMarkDirty() — show red if question too short
         3. _qaIsValid() gate — abort if invalid
         4. _warnIfTooManyOptions() — soft 7+ options warning (Block 12)
         5. cpbpConfirm() — shows go-live countdown + duration
         6. Auth gate — if not signed in: queue action, open auth modal
         7. _showTransitionThen('publish') → _executePublish() in cpbp-actions.js

       _executePublish() lives in cpbp-actions.js. It:
         - Calls window.cpbpGetTransit() to get poll data
         - Sets status = 'scheduled'
         - POSTs to Cloudflare Worker /api/publish
         - Worker generates poll_id server-side (collision-safe)
         - Worker returns { success:true, pollId, internalId }
         - Writes pollId + internalId back to transit container
         - Calls window.cpbpOnPublishSuccess() → navigates to Poll_Share

       _buildPublishConfirmMsg() — builds the dynamic confirm message.
         Shows: "goes live in X days Y hours Z minutes from now"
                "will remain live for voting for X days Y hours Z minutes"
         Both computed from current DOM values at confirm time.
         Registered on window so cpbp-actions.js can call it too.

       PUBLISH RULES (locked):
         - poll_id generated SERVER-SIDE by Cloudflare Worker
         - goLive / durationMins / expiresAt computed from raw fields
         - status = 'scheduled' (not 'live' — scheduler flips at go-live time)
         - After publish: navigate to Poll_Share.html

       WORKER CALL (cpbp-actions.js):
         POST WORKER_URL + '/api/publish'
         Body: full poll row with computed schedule fields
         Response: { success:true, pollId, internalId }

       TIMEOUT + ERROR HANDLING (cpbp-actions.js):
         15s timeout — show error modal if Worker does not respond.
         503/429 — rate limit / overload — friendly modal, no navigate.
         Network error — caught, friendly modal shown.
    ============================================================ */


    function requireAuthThenPublish() {

        /* _inFlight guard */
        if (_inFlight.has('publish')) return;
        _inFlight.set('publish', true);

        /* Mark question dirty */
        _qMarkDirty();

        /* Gate — abort if Q&A not valid */
        if (!_qaIsValid()) {
            _inFlight.delete('publish');
            return;
        }

        /* Auth gate FIRST — open modal if not signed in */
        if (typeof window.cpbpAuthEmail !== "function" || !window.cpbpAuthEmail()) {
            window.cpbpSetPendingAction('publish');
            _inFlight.delete('publish');
            openAuthModal();
            return;
        }

        /* Signed in — 7+ options soft warning then confirm */
        _warnIfTooManyOptions(function() {

            var msg = _buildPublishConfirmMsg();

            cpbpConfirm({
                title   : 'Publish Poll',
                message : msg,
                icon    : 'cell_tower',
                okLabel : 'Publish',
                onOk    : function() {
                    _inFlight.delete('publish');
                    /* Flag tells _showTransitionThen wrapper that guards
                       already ran — skip them to prevent double popup. */
                    window._guardsAlreadyRan = true;
                    window._showTransitionThen('publish');
                },
                onCancel: function() {
                    _inFlight.delete('publish');
                }
            });
        });
    }


    /* ── _buildPublishConfirmMsg ──────────────────────────────────
       Builds the publish confirmation message dynamically.
       Shows go-live countdown AND poll duration — both human-readable.
       Registered on window so cpbp-actions.js can call it if needed. */
    function _buildPublishConfirmMsg() {

        var durD = parseInt((document.getElementById('durD') || {}).textContent) || 0;
        var durH = parseInt((document.getElementById('durH') || {}).textContent) || 0;
        var durM = parseInt((document.getElementById('durM') || {}).textContent) || 0;

        function fmtParts(d, h, m) {
            var parts = [];
            if (d > 0) parts.push(d + ' day'    + (d !== 1 ? 's' : ''));
            if (h > 0) parts.push(h + ' hour'   + (h !== 1 ? 's' : ''));
            if (m > 0) parts.push(m + ' minute' + (m !== 1 ? 's' : ''));
            if (parts.length === 0) return 'less than a minute';
            if (parts.length === 1) return parts[0];
            return parts.slice(0, -1).join(', ') + ' and ' + parts[parts.length - 1];
        }

        var liveFor = fmtParts(durD, durH, durM);

        /* Live clock active — poll goes live the moment author publishes */
        if (_timeIsLiveClock) {
            return 'This poll will go live immediately and remain open for ' +
                   liveFor + '.\n\nProceed?';
        }

        /* Check if frozen time has already passed — stale but not yet caught
           by the 60s watcher (author clicked Publish within that window) */
        var dateVal  = document.getElementById('_dateVal').value;
        var timeVal  = document.getElementById('_timeVal').value;
        var todayStr = new Date().toISOString().split('T')[0];
        if (dateVal === todayStr && timeVal) {
            var now     = new Date();
            var nowTime = String(now.getHours()).padStart(2,'0') + ':' +
                          String(now.getMinutes()).padStart(2,'0');
            if (timeVal < nowTime) {
                return 'The scheduled start time has passed. This poll will go ' +
                       'live immediately and remain open for ' + liveFor + '.\n\nProceed?';
            }
        }

        /* Normal scheduled path */
        var goLiveMs    = new Date(dateVal + 'T' + timeVal + ':00').getTime() - Date.now();
        if (goLiveMs < 0) goLiveMs = 0;
        var glTotalMins = Math.floor(goLiveMs / 60000);
        var glDays      = Math.floor(glTotalMins / (24 * 60));
        var glHours     = Math.floor((glTotalMins % (24 * 60)) / 60);
        var glMins      = glTotalMins % 60;
        var liveIn      = fmtParts(glDays, glHours, glMins);

        return 'This poll is scheduled to go live in ' + liveIn +
               ' from now, and will remain live for ' + liveFor + '.\n\nProceed?';
    }
    window._buildPublishConfirmMsg = _buildPublishConfirmMsg;

    /* ============================================================
       JS BLOCK 17: PAGE CALLBACKS FOR cpbp-actions.js
       ─────────────────────────────────────────────────────────────
       cpbp-actions.js owns _showTransitionThen(), _executeSave(),
       _executePublish(), _buildAnswerStructure(), WORKER_URL.

       index.html provides three page-specific callbacks that
       cpbp-actions.js calls at key moments:

         window.cpbpGetTransit()
           Called by cpbp-actions.js to collect poll data before
           writing to Worker. On index: collects from live DOM fields.
           On Preview_unpublished: reads from transit localStorage.

         window.cpbpOnSaveSuccess(result)
           Called after Worker confirms save.
           result = { internalId } returned by Worker.
           On index: navigate to Polls_List.html.
           On Preview_unpublished: same destination.

         window.cpbpOnPublishSuccess(result)
           Called after Worker confirms publish.
           result = { pollId, internalId } returned by Worker.
           Writes pollId + internalId back into transit so
           Poll_Share.html can read them immediately.
           On index: navigate to Poll_Share.html.
           On Preview_unpublished: same destination.

       REGISTRATION:
         These must be registered BEFORE cpbp-actions.js needs them.
         Registered here in the main script — cpbp-actions.js is loaded
         in &lt;head&gt; but only calls these callbacks at action time
         (well after DOMContentLoaded), so timing is safe.

       NOTE: _showTransitionThen() is called from requireAuthThenSave()
       and requireAuthThenPublish() (Blocks 15+16). It lives in
       cpbp-actions.js and is exposed on window by that module.
    ============================================================ */


    /* ── cpbpGetTransit — collect poll data from live DOM ─────── */
    window.cpbpGetTransit = function() {
        return _collectFromDOM();
    };


    /* ── cpbpOnSaveSuccess — after Worker confirms draft saved ─── */
    window.cpbpOnSaveSuccess = function(result) {

        /* result.internalId — UUID assigned by Worker/Supabase.
           Write back into transit so it survives further navigation
           (e.g. if author comes back to edit the same draft). */
        if (result && result.internalId) {
            var t = readTransit();
            t.internalId = result.internalId;
            writeTransit(t);
        }

        /* Navigate to Polls List */
        window.location.href = 'Polls_List.html';
    };


    /* ── cpbpOnPublishSuccess — after Worker confirms published ── */
    window.cpbpOnPublishSuccess = function(result) {

        var t = _collectFromDOM();

        if (result) {
            if (result.pollId)     t.id         = result.pollId;
            if (result.internalId) t.internalId = result.internalId;
            /* Worker returns status: 'live' (goLive ≤ now+60s)
               or 'scheduled' (goLive > now+60s). Write to transit
               so Poll_Share shows the correct chip immediately. */
            if (result.status)     t.status     = result.status;
        }

        writeTransit(t);
        window.location.href = 'Poll_Share.html';
    };

    /* ============================================================
       JS BLOCK 18: NETWORK ERROR BANNER + OFFLINE DETECTION
       ─────────────────────────────────────────────────────────────
       showNetworkError()     — slides red banner in, stays until online.
       hideNetworkError()     — slides banner back up immediately.
       showNetworkErrorTemp() — slides in for 4s then auto-hides.
                                Called by cpbp-actions.js on Worker failure.

       TWO TRIGGER PATHS:
         A) window 'offline' event — banner stays until 'online' fires.
            🧹 WIRE: Uncomment offline/online listeners before go-live.
         B) Worker call failure — cpbp-actions.js calls showNetworkErrorTemp().

       STALE PAGE TOAST:
         Tab idle > 4 hours → soft toast "Page may be outdated".
         Never auto-reloads — user decides when to refresh.
    ============================================================ */


    function showNetworkError() {
        var banner = document.getElementById('netErrorBanner');
        if (!banner) return;
        banner.classList.add('visible');
    }


    function hideNetworkError() {
        var banner = document.getElementById('netErrorBanner');
        if (!banner) return;
        banner.classList.remove('visible');
    }


    function showNetworkErrorTemp() {
        /* Show banner for 4s then auto-hide — used by Worker error path */
        showNetworkError();
        setTimeout(hideNetworkError, 4000);
    }


    /* Register on window so cpbp-actions.js can call it */
    window.showNetworkError     = showNetworkError;
    window.showNetworkErrorTemp = showNetworkErrorTemp;


    /* ── Offline / Online listeners + page-load check ───────────
       🧹 WIRE: Uncomment before go-live.
       Currently commented — file:// protocol triggers false offline.

    window.addEventListener('offline', showNetworkError);
    window.addEventListener('online',  hideNetworkError);

    document.addEventListener('DOMContentLoaded', function() {
        if (!navigator.onLine) showNetworkError();
    });

    ── */


    /* ── Stale page toast ────────────────────────────────────────
       Tab idle > 4 hours — soft toast "Page may be outdated".
       Fires on visibilitychange when tab becomes visible again
       after being hidden for more than 4 hours.
       Never auto-reloads — user decides when to refresh. */
    var _lastActiveTime = Date.now();
    var STALE_THRESHOLD = 4 * 60 * 60 * 1000;   /* 4 hours in ms */

    document.addEventListener('visibilitychange', function() {
        if (document.visibilityState === 'hidden') {
            /* Record when tab was hidden */
            _lastActiveTime = Date.now();
        } else {
            /* Tab became visible — check if stale */
            if (Date.now() - _lastActiveTime > STALE_THRESHOLD) {
                showToast('Page may be outdated — consider refreshing.');
            }
        }
    });

    /* ── _scrollAnswerAreaIntoView ────────────────────────────────
       Scrolls page so the answer area (options list / grid) is
       visible above the sticky footer. Called after addOption()
       and addGridItem() so newly added rows are always visible.
       Uses smooth scroll for a polished feel. */
    function _scrollAnswerAreaIntoView() {
        var footer   = document.querySelector('.page-footer');
        var ansArea  = document.getElementById('answerArea');
        if (!ansArea || !footer) return;

        /* Check if bottom of answer area is hidden behind footer */
        var ansBottom    = ansArea.getBoundingClientRect().bottom;
        var footerTop    = footer.getBoundingClientRect().top;
        var footerHeight = footer.getBoundingClientRect().height;

        if (ansBottom > footerTop - 16) {
            /* Scroll down by the overlap + 16px breathing room */
            var overlap = ansBottom - footerTop + 16;
            window.scrollBy({ top: overlap, behavior: 'smooth' });
        }
    }


    /* ============================================================
       JS BLOCK 20A: RESTORE DRAFT (returning from Preview)
       ─────────────────────────────────────────────────────────────
       restoreDraftIfReturning() — called by _appInit() when URL
       contains ?from=preview. Reads transit container and restores
       all fields so author sees exactly what they had before Preview.

       WHY NEEDED:
         _appInit() normally calls renderAnswerArea('multiple-choice')
         as the default. If we returned from Preview with a grid or
         rating QType, that default render would overwrite the DOM
         before _prefillFromTransit could restore it.
         restoreDraftIfReturning() renders the correct QType FIRST,
         then fills in the values — no stale MC DOM interference.

       RETURNS true if restored, false if no transit data found.
       _appInit() skips default renderAnswerArea if this returns true.

       RESTORATION ORDER (must match renderAnswerArea DOM structure):
         1. QType — renders correct answer area from scratch
         2. Question text
         3. Options (MC/CB/DD)
         4. Grid rows
         5. Grid cols
         6. Linear scale
         7. Rating icon + scale + labels
         8. Schedule — date (only if user had set one)
         9. Schedule — time (only if user had set one)
         10. Duration
    ============================================================ */


    /* Label + icon maps — used by both restore functions */
    var QTYPE_LABEL_MAP = {
        'short-answer'   : 'Short answer',
        'paragraph'      : 'Paragraph',
        'number-only'    : 'Number only',
        'multiple-choice': 'Multiple choice',
        'checkboxes'     : 'Checkboxes',
        'dropdown'       : 'Dropdown',
        'linear-scale'   : 'Linear scale',
        'rating'         : 'Rating',
        'nps'            : 'Net Promoter Score',
        'mc-grid'        : 'Multiple choice grid',
        'cb-grid'        : 'Checkbox grid',
        'date'           : 'Date',
        'time'           : 'Time',
        'datetime'       : 'Date & Time',
        'email'          : 'Email',
        'location'       : 'Location'
    };

    var QTYPE_ICON_MAP = {
        'short-answer'   : 'short_text',
        'paragraph'      : 'subject',
        'number-only'    : 'pin',
        'multiple-choice': 'radio_button_checked',
        'checkboxes'     : 'check_box',
        'dropdown'       : 'arrow_drop_down_circle',
        'linear-scale'   : 'linear_scale',
        'rating'         : 'star',
        'nps'            : 'insights',
        'mc-grid'        : 'apps',
        'cb-grid'        : 'view_module',
        'date'           : 'event',
        'time'           : 'schedule',
        'datetime'       : 'calendar_today',
        'email'          : 'email',
        'location'       : 'place'
    };


    function restoreDraftIfReturning() {

        var params = new URLSearchParams(window.location.search);
        if (params.get('from') !== 'preview') return false;

        var d = readTransit();
        if (!d || !d.type) return false;

        _restoreFromTransitData(d, 'preview');
        setTimeout(function() { showToast('Draft restored'); }, 400);
        return true;
    }


    /* ============================================================
       JS BLOCK 20B: PREFILL FROM TRANSIT (Edit / Duplicate)
       ─────────────────────────────────────────────────────────────
       _prefillFromTransit(mode) — called by _appInit() when URL
       contains ?edit=id or ?duplicate=id.
       Transit written by Polls_List editPoll() / duplicatePoll().

       mode='edit':
         Restores Q&A + schedule. internalId in transit tells
         _executeSave/_executePublish to UPDATE the existing row.

       mode='duplicate':
         Restores Q&A only. Schedule keeps initDateTime() defaults
         (today + Now() live clock + 00:00:15) — fresh start, minimum friction.
         No internalId → INSERT new row on Save/Publish.

       RETURNS true if transit found, false if stale/missing.
    ============================================================ */


    function _prefillFromTransit(mode) {

        var d = readTransit();
        if (!d || !d.question) return false;

        _restoreFromTransitData(d, mode);

        var label = (mode === 'edit')
            ? 'Poll loaded for editing'
            : 'Poll duplicated — edit and publish as new poll';
        setTimeout(function() { showToast(label); }, 400);

        /* Focus cursor at question field */
        setTimeout(function() {
            var q = document.getElementById('questionInput');
            if (q) { q.focus(); q.setSelectionRange(q.value.length, q.value.length); }
        }, 300);

        return true;
    }


    /* ── _restoreFromTransitData ──────────────────────────────────
       Shared restoration engine used by both restore functions.
       Renders correct QType, then fills all fields from transit obj.
       mode: 'preview' | 'edit' | 'duplicate' */
    function _restoreFromTransitData(d, mode) {

        /* ── Step 1: QType ──────────────────────────────────────── */
        var qType = d.type || 'multiple-choice';
        _currentQTypeVal = qType;

        var ctEl = document.getElementById('currentText');
        var ciEl = document.getElementById('currentIcon');
        if (ctEl) ctEl.innerText = QTYPE_LABEL_MAP[qType] || qType;
        if (ciEl) ciEl.innerText = QTYPE_ICON_MAP[qType]  || 'help_outline';

        /* 'rating' in transit → 'star-rating' for renderAnswerArea */
        var renderKey = (qType === 'rating') ? 'star-rating' : qType;
        renderAnswerArea(renderKey);

        /* NPS: apply fixed readonly question — renderAnswerArea() does not set
           readOnly or fill question text. selectType() normally handles this
           but _restoreFromTransitData() bypasses selectType(). */
        if (qType === 'nps') {
            var npsQ = document.getElementById('questionInput');
            if (npsQ) {
                npsQ.value      = 'How likely is it that you would recommend us to a friend or colleague?';
                npsQ.readOnly   = true;
                npsQ.style.color  = '#5f6368';
                npsQ.style.cursor = 'default';
                autoGrow(npsQ);
            }
        }


        /* ── Step 2: Question text ──────────────────────────────── */
        var qEl = document.getElementById('questionInput');
        if (qEl && d.question && qType !== 'nps') {
            qEl.value = d.question;
            autoGrow(qEl);
        }


        /* ── Step 3: Options (MC / Checkboxes / Dropdown) ──────── */
        if (d.options && d.options.length) {
            d.options.forEach(function(val, i) {
                var inputs = document.querySelectorAll('#optionsList .opt-input');
                if (inputs[i]) {
                    inputs[i].value = val;
                } else {
                    addOption(qType);
                    var fresh = document.querySelectorAll('#optionsList .opt-input');
                    if (fresh[i]) fresh[i].value = val;
                }
            });
        }


        /* ── Step 4: Grid rows ──────────────────────────────────── */
        if (d.gridRows && d.gridRows.length) {
            d.gridRows.forEach(function(val, i) {
                var inputs = document.querySelectorAll('#gridRows .opt-input');
                if (inputs[i]) {
                    inputs[i].value = val;
                } else {
                    addGridItem('gridRows', 'Row');
                    var fresh = document.querySelectorAll('#gridRows .opt-input');
                    if (fresh[i]) fresh[i].value = val;
                }
            });
        }


        /* ── Step 5: Grid cols ──────────────────────────────────── */
        if (d.gridCols && d.gridCols.length) {
            d.gridCols.forEach(function(val, i) {
                var inputs = document.querySelectorAll('#gridCols .opt-input');
                if (inputs[i]) {
                    inputs[i].value = val;
                } else {
                    addGridItem('gridCols', 'Column');
                    var fresh = document.querySelectorAll('#gridCols .opt-input');
                    if (fresh[i]) fresh[i].value = val;
                }
            });
        }


        /* ── Step 6: Linear scale ───────────────────────────────── */
        if (d.scaleMin != null) {
            var mn = document.getElementById('minRange');
            if (mn) { mn.value = d.scaleMin; updateScaleLabels(); }
        }
        if (d.scaleMax != null) {
            var mx = document.getElementById('maxRange');
            if (mx) { mx.value = d.scaleMax; updateScaleLabels(); }
        }
        /* lblMin/lblMax = label text inputs (not the scale-number spans #lblMin/#lblMax) */
        if (d.lblMin) { var sln = document.getElementById('scaleMinLabel'); if (sln) sln.value = d.lblMin; }
        if (d.lblMax) { var slx = document.getElementById('scaleMaxLabel'); if (slx) slx.value = d.lblMax; }


        /* ── Step 7: Rating ─────────────────────────────────────── */
        if (d.ratingType)  { var ri = document.getElementById('ratingIcon');    if (ri) ri.value = d.ratingType; }
        if (d.ratingScale) { var rl = document.getElementById('ratingLevels');  if (rl) rl.value = d.ratingScale; }
        if (d.ratingLblMin){ var rln = document.getElementById('ratingLblMin'); if (rln) rln.value = d.ratingLblMin; }
        if (d.ratingLblMax){ var rlx = document.getElementById('ratingLblMax'); if (rlx) rlx.value = d.ratingLblMax; }
        if (d.ratingType || d.ratingScale) updateRatingPreview();


        /* ── Step 8: Schedule — date ────────────────────────────── */
        if (mode === 'edit' && d.dateVal) {
            /* Edit mode: restore schedule exactly as author had it */
            onCalDayPicked(d.dateVal);
        } else if (mode === 'duplicate') {
            /* Duplicate: Q&A only. Schedule keeps initDateTime() defaults
               (today + Now() live clock + 00:00:15). Do NOT override. */
        } else if (!d.dateVal) {
            /* Draft with no date — keep initDateTime() defaults (today + live clock) */
        } else if (mode === 'preview' && d.dateVal) {
            /* Preview return: restore only if user had explicitly set a date */
            onCalDayPicked(d.dateVal);
        }


        /* ── Step 9: Schedule — time ────────────────────────────── */
        /* Duplicate: skip — initDateTime() already started live clock. */
        if (d.timeVal && d.dateVal && mode !== 'duplicate') {
            var parts = d.timeVal.split(':');
            var hEl = document.getElementById('startTimeH');
            var mEl = document.getElementById('startTimeM');
            var tvEl = document.getElementById('_timeVal');
            if (hEl) hEl.textContent = (parts[0] || '00').padStart(2,'0');
            if (mEl) mEl.textContent = (parts[1] || '00').padStart(2,'0');
            if (tvEl) tvEl.value = d.timeVal;
            _timeManualEdited = true;
            _stopLiveClock();
        }


        /* ── Step 10: Duration ──────────────────────────────────── */
        /* Duplicate: skip — initDateTime() already set 00:00:15 default. */
        if (mode !== 'duplicate') {
            ['durD', 'durH', 'durM'].forEach(function(id) {
                var val = d[id] || '';
                var el  = document.getElementById(id);
                if (el && val !== '') {
                    el.textContent = val;  /* contenteditable span, not input */
                }
            });
        }

        /* ── Step 11: Draft toggle ───────────────────────────────── */
        /* If transit data has status=draft AND no goLive, switch toggle on.
           This restores draft state correctly when editing a saved draft.
           DUPLICATE: always force toggle OFF — author starts fresh, they
           decide whether to publish or save. Never inherit draft toggle. */
        var draftToggleEl = document.getElementById('draftToggle');
        if (draftToggleEl) {
            var isDraftStatus = (mode !== 'duplicate') && (d.status === 'draft' && !d.goLive);
            draftToggleEl.checked = isDraftStatus;
            if (isDraftStatus) {
                /* Apply dim classes */
                var calLeft = document.querySelector('.card1-left');
                if (calLeft) calLeft.classList.add('draft-dim');
                var timeSection = document.getElementById('schedItemTime');
                if (timeSection) timeSection.classList.add('draft-dim');
                var durGroup = document.getElementById('durationGroup');
                if (durGroup) durGroup.classList.add('draft-dim');
                _stopLiveClock();
            }
        }

        updateFooterButtons();
        activateStep2();
    }

    /* ============================================================
       JS BLOCK 21: CPBP CONFIRM MODAL CONTROLLER
       ─────────────────────────────────────────────────────────────
       cpbpConfirm(opts) — opens the reusable confirm dialog.
       Replaces window.confirm() everywhere. Never use native dialogs.

       opts OBJECT:
         title    {string}   — modal heading text
         message  {string}   — body text. \n renders as line break
                               (white-space:pre-line in CSS)
         icon     {string}   — Material Symbols Rounded icon name
                               default: 'info' (purple)
         okLabel  {string}   — OK button label. default: 'Proceed'
         onOk     {function} — called when user clicks OK/Proceed
         onCancel {function} — called when user clicks Cancel
                               or backdrop. optional.

       USAGE:
         cpbpConfirm({
             title  : 'Delete Poll',
             message: 'This cannot be undone.\n\nProceed?',
             icon   : 'delete',
             okLabel: 'Delete',
             onOk   : function() { softDelete(id); }
         });

       BUTTON LAYOUT (std_buttons.md):
         Cancel LEFT  — underline style (lighter visual weight)
         OK     RIGHT — filled blue (heavier visual weight)
         Intentional: Cancel has more visual weight than a destructive OK.
         This slows users down on irreversible actions.

       setTimeout(0) ON OK CALLBACK:
         Lets modal fully close before callback fires.
         Required for chained cpbpConfirm calls (e.g. 7+ options guard
         → publish confirm) so second modal opens on clean DOM.

       BACKDROP CLICK:
         Fires onCancel callback (if provided) and closes modal.
         Consistent with auth modal behaviour.
    ============================================================ */


    /* Callback holders — set by cpbpConfirm(), cleared after use */
    var _cpbpConfirmOkCb     = null;
    var _cpbpConfirmCancelCb = null;


    function cpbpConfirm(opts) {

        var title   = opts.title   || 'Confirm';
        var message = opts.message || '';
        var icon    = opts.icon    || 'info';
        var okLabel = opts.okLabel || 'Proceed';

        _cpbpConfirmOkCb     = opts.onOk     || null;
        _cpbpConfirmCancelCb = opts.onCancel  || null;

        /* Set modal content */
        document.getElementById('cpbpConfirmTitle').textContent   = title;
        document.getElementById('cpbpConfirmMessage').textContent = message;
        document.getElementById('cpbpConfirmIcon').textContent    = icon;
        document.getElementById('cpbpConfirmOk').textContent      = okLabel;

        /* Open modal */
        document.getElementById('cpbpConfirmModal').classList.add('open');
    }


    function _cpbpConfirmClose() {
        document.getElementById('cpbpConfirmModal').classList.remove('open');
    }


    /* Wire event listeners after DOM ready */
    document.addEventListener('DOMContentLoaded', function() {

        var okBtn     = document.getElementById('cpbpConfirmOk');
        var cancelBtn = document.getElementById('cpbpConfirmCancel');
        var modal     = document.getElementById('cpbpConfirmModal');

        /* OK / Proceed button */
        okBtn.addEventListener('click', function() {
            _cpbpConfirmClose();
            /* setTimeout(0) — modal fully closes before callback fires.
               Required for chained confirms (e.g. 7+ options → publish). */
            var cb = _cpbpConfirmOkCb;
            _cpbpConfirmOkCb = null;
            if (cb) setTimeout(cb, 0);
        });

        /* Cancel button */
        cancelBtn.addEventListener('click', function() {
            _cpbpConfirmClose();
            var cb = _cpbpConfirmCancelCb;
            _cpbpConfirmCancelCb = null;
            if (cb) cb();
        });

        /* Backdrop click — same as Cancel */
        modal.addEventListener('click', function(e) {
            if (e.target === this) {
                _cpbpConfirmClose();
                var cb = _cpbpConfirmCancelCb;
                _cpbpConfirmCancelCb = null;
                if (cb) cb();
            }
        });

        /* Button hover states — inline style transitions */
        okBtn.addEventListener('mouseenter', function() {
            this.style.backgroundColor = '#1557b0';
        });
        okBtn.addEventListener('mouseleave', function() {
            this.style.backgroundColor = '#1a73e8';
        });
        cancelBtn.addEventListener('mouseenter', function() {
            this.style.backgroundColor = '#e8f0fe';
        });
        cancelBtn.addEventListener('mouseleave', function() {
            this.style.backgroundColor = 'transparent';
        });

    });

    /* ============================================================
       JS BLOCK 22: INDEX SOON MODAL
       ─────────────────────────────────────────────────────────────
       openIndexSoonModal(title, msg) — opens the Coming Soon modal
         for index-specific triggers. Specifically called by social
         sign-in buttons (Apple/FB/Google/LinkedIn/Microsoft) in the
         auth modal injected by cpbp-auth.js.

       SEPARATE from navSoonModal (cpbp-nav.js) which handles
       nav dropdown Coming Soon items (Wallet, Profile, Help).

       ALSO USED FOR:
         - Storage errors (writeTransit failure)
         - Worker call failures surfaced from cpbp-actions.js
         - Any other index-specific informational modal needs

       Registered on window so cpbp-auth.js social sign-in buttons
       and cpbp-actions.js can call it directly.
    ============================================================ */


    function openIndexSoonModal(title, msg) {
        var m = document.getElementById('indexSoonModal');
        if (!m) return;
        document.getElementById('indexSoonTitle').textContent = title;
        document.getElementById('indexSoonMsg').textContent   = msg;
        m.classList.add('open');
    }


    function closeIndexSoonModal() {
        var m = document.getElementById('indexSoonModal');
        if (m) m.classList.remove('open');
    }


    /* Register on window — called by cpbp-auth.js + cpbp-actions.js */
    window.openIndexSoonModal  = openIndexSoonModal;
    window.closeIndexSoonModal = closeIndexSoonModal;

    /* ============================================================
       JS BLOCK 23: TOAST HELPER
       ─────────────────────────────────────────────────────────────
       showToast(msg) — brief non-blocking message at bottom of screen.
       Auto-dismisses after 3 seconds. No user action required.

       USED FOR:
         "Draft restored"           — returning from Preview
         "Poll loaded for editing"  — from Polls_List edit
         "Poll duplicated"          — from Polls_List duplicate
         "Page may be outdated"     — stale page detection (Block 18)

       DESIGN:
         Dark rounded pill (#323232 bg, white text) — Google Material
         toast pattern. Centered horizontally, 80px from bottom
         (clears sticky footer). Fade in/out via opacity transition.

       IMPLEMENTATION:
         Toast div created once on first call, reused on subsequent.
         clearTimeout prevents overlapping fade-outs on rapid calls.
    ============================================================ */


    function showToast(msg) {

        /* Create toast div once — reuse on all subsequent calls */
        var t = document.getElementById('_cpbpToast');
        if (!t) {
            t = document.createElement('div');
            t.id = '_cpbpToast';
            t.style.cssText = 'position:fixed;bottom:80px;left:50%;' +
                'transform:translateX(-50%);background:#323232;color:#ffffff;' +
                'padding:10px 20px;border-radius:24px;font-size:13px;' +
                'font-family:inherit;z-index:9999;opacity:0;' +
                'transition:opacity 0.3s ease;pointer-events:none;' +
                'white-space:nowrap;max-width:90vw;' +
                'text-overflow:ellipsis;overflow:hidden;';
            document.body.appendChild(t);
        }

        /* Set message and show */
        t.textContent   = msg;
        t.style.opacity = '1';

        /* Clear any pending hide timer — prevents overlap on rapid calls */
        clearTimeout(t._timer);

        /* Auto-dismiss after 3 seconds */
        t._timer = setTimeout(function() {
            t.style.opacity = '0';
        }, 3000);
    }

    /* ============================================================
       JS BLOCK 24: TEXTAREA AUTO-GROW
       ─────────────────────────────────────────────────────────────
       autoGrow(el) — makes the question textarea grow vertically
       with its content. No scrollbar ever appears.

       TECHNIQUE:
         Set height to 'auto' first to shrink — then set to
         scrollHeight. This handles both growth AND shrinkage
         (e.g. when user deletes text).

       CALLED BY:
         - question textarea oninput (every keystroke)
         - selectType() on QType change (NPS sets fixed text)
         - _restoreFromTransitData() after restoring question text
         - clearPollForm() via _qReset() → textarea value = ''

       CSS REQUIREMENT:
         .question-input must have:
           overflow: hidden    — no scrollbar
           resize: none        — no manual resize handle
           min-height: 52px    — minimum one-line height
    ============================================================ */


    function autoGrow(el) {
        el.style.height = 'auto';
        el.style.height = el.scrollHeight + 'px';
    }

    /* ============================================================
       JS BLOCK 25: APP INIT
       ─────────────────────────────────────────────────────────────
       _appInit() — master initialisation function.
       Fires on DOMContentLoaded. Wires everything together.

       SEQUENCE:
         1. initDateTime() — pre-fill schedule defaults
         2. _updateScheduleHint() — set initial hint text
         3. URL param routing:
              ?from=preview  → restoreDraftIfReturning()
              ?edit=id       → _prefillFromTransit('edit')
              ?duplicate=id  → _prefillFromTransit('duplicate')
              (none)         → fresh load, clearTransit(), default MC render
         4. updateFooterButtons() — set initial button states
         5. db.auth.getSession() — async session check
              → session found: setAuthState(user)
              → nav updates to signed-in state

       URL PARAM ROUTING:
         ?from=preview  — author clicked Back from Preview_unpublished.
                          restoreDraftIfReturning() reads transit and
                          restores all fields. Returns true if found.
         ?edit=id       — author clicked Edit in Polls_List.
                          _prefillFromTransit('edit') restores Q&A + schedule.
                          Returns true if transit found.
         ?duplicate=id  — author clicked Duplicate in Polls_List.
                          _prefillFromTransit('duplicate') restores Q&A only.
                          Schedule keeps initDateTime() defaults (today + Now()
                          live clock + 00:00:15) so author can publish immediately.
                          Returns true if transit found.
         (fresh load)   — clearTransit() + renderAnswerArea('multiple-choice').
                          Every fresh Index session = clean slate.

       TRANSIT STALE GUARD:
         If ?edit or ?duplicate present but transit is missing/stale
         (e.g. stale bookmark), clearTransit() + default render.
         Author sees clean form rather than broken prefill.

       NOTE: window.onAuthStateRestored (Block 26) also fires from
       cpbp-auth.js after getSession resolves — updateFooterButtons()
       called there too for belt-and-suspenders safety.
    ============================================================ */


    function _appInit() {

        /* ── Step 1: Schedule defaults ──────────────────────────── */
        initDateTime();
        _updateScheduleHint();
        renderCalendar();


        /* ── Step 2: URL param routing ──────────────────────────── */
        var params   = new URLSearchParams(window.location.search);
        var editId   = params.get('edit');
        var dupId    = params.get('duplicate');
        var fromPrev = params.get('from') === 'preview';

        if (fromPrev) {
            var restored = restoreDraftIfReturning();
            if (!restored) { clearTransit(); renderAnswerArea('multiple-choice'); }

        } else if (editId || dupId) {
            var prefilled = _prefillFromTransit(editId ? 'edit' : 'duplicate');
            if (!prefilled) { clearTransit(); renderAnswerArea('multiple-choice'); }

        } else {
            clearTransit();
            renderAnswerArea('multiple-choice');
        }


        /* ── Step 3: Initial button states ─────────────────────── */
        updateFooterButtons();

        /* ── Step 3C: Entry screen scroll listener ──────────────── */
        _initEntryScrollListener();

        /* ── Step 3D: If returning from preview / edit / duplicate →
           auto-open form builder (Card 2 path) ──────────────────── */
        if (fromPrev || editId || dupId) {
            _entryDoSelectCard(2);
            _showFormBuilder();
        }

        /* ── Step 3B: Stale-time watcher ───────────────────────────
           Checks every 60s: if date=today and stored time < now and
           live clock not running → stale frozen time — restart clock.
           Handles the case where author set a future time, walked away,
           and came back after that time passed without touching the field. */
        setInterval(function() {
            if (_timeIsLiveClock) return;   /* already live — nothing to do */
            var dateVal = (document.getElementById('_dateVal') || {}).value || '';
            var timeVal = (document.getElementById('_timeVal') || {}).value || '';
            if (!dateVal || !timeVal) return;
            var todayStr = new Date().toISOString().split('T')[0];
            if (dateVal !== todayStr) return;
            var now     = new Date();
            var nowTime = String(now.getHours()).padStart(2,'0') + ':' +
                          String(now.getMinutes()).padStart(2,'0');
            if (timeVal < nowTime) {
                showToast('Scheduled time passed — resetting to now');
                _startLiveClock();
            }
        }, 60000);


        /* ── Step 4: Session check ──────────────────────────────────── */
        var _db = window.db;
        if (!_db || !_db.auth) {
            console.warn('[_appInit] Supabase db not ready — skipping session check');
            return;
        }
        _db.auth.getSession().then(function(result) {
            var session = result.data && result.data.session;
            if (session && session.user && session.user.email) {
                if (typeof window.setAuthState === 'function') {
                    window.setAuthState({ email: session.user.email, isPro: false });
                }
            }
        }).catch(function(e) {
            console.warn('[_appInit] Session check failed:', e);
        });
    }


    /* Fire on DOMContentLoaded — more reliable than window.onload.
       If DOM already ready (e.g. deferred script), call immediately. */
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', _appInit);
    } else {
        _appInit();
    }

    /* ============================================================
       JS BLOCK 26: AUTH CALLBACKS + WINDOW.* ASSIGNMENTS
       ─────────────────────────────────────────────────────────────
       AUTH CALLBACKS:

       window.onAuthSuccess(email)
         Called by cpbp-auth.js after successful OTP sign-in.
         At this point user is fully authenticated.
         If a pending action was queued (_pendingAuthAction),
         execute it now via _showTransitionThen().
         _pendingAuthAction set by requireAuthThenSave/Publish
         when user clicked Save/Publish while not signed in.

       window.onAuthStateRestored(email)
         Called by cpbp-auth.js on page load if a Supabase session
         already exists (returning user, session < 30 days old).
         Update footer buttons — some button states depend on
         whether user is authenticated (belt-and-suspenders).

       WINDOW.* ASSIGNMENTS:
         ALL functions called from inline onclick handlers MUST be
         on window.*. This is the single place all assignments live.

         RULE: window assignments MUST be at the very END of the
         script — after all function declarations. Assigning before
         declaration assigns undefined (var hoisting does not apply
         to the assignment itself for function expressions).

         Functions defined with function declarations (not expressions)
         are hoisted — but window.fn = fn before the declaration
         still assigns the value at assignment time, which is
         undefined for function expressions. Safe practice: always
         assign at the bottom regardless of declaration style.
    ============================================================ */


    /* ── Auth callbacks ─────────────────────────────────────────── */

    window.onAuthSuccess = function(email) {
        /* Fires after OTP sign-in completes.
           cpbp-auth.js already calls _showTransitionThen for pending
           save/publish actions. This callback handles any other
           post-auth UI updates needed on this page. */
        updateFooterButtons();
    };


    /* ── _showTransitionThen wrapper — publish guard intercept ──────
       cpbp-auth.js calls window._showTransitionThen('publish') directly
       after OTP completes, bypassing requireAuthThenPublish() and its
       guards (_warnIfTooManyOptions + cpbpConfirm). This wrapper
       intercepts the publish action and re-runs those guards first.
       Save action passes through unchanged — no guards needed.

       TIMING: cpbp-actions.js sets window._showTransitionThen when it
       loads. This wrapper runs after DOMContentLoaded (main script),
       which is after cpbp-actions.js loads — so _origShowTransition
       always captures the real function correctly.

       WHY HERE and not in cpbp-auth.js:
       cpbp-auth.js has no knowledge of page-level guards. Keeping
       guard logic in index.html keeps cpbp-auth.js clean and reusable.
    ── */
    var _origShowTransition = window._showTransitionThen;

    window._showTransitionThen = function(action) {

        /* Save — no guards needed, pass straight through */
        if (action !== 'publish') {
            if (typeof _origShowTransition === 'function') {
                _origShowTransition(action);
            }
            return;
        }

        /* If requireAuthThenPublish() already ran guards (author was signed in),
           skip them here to prevent double popup A-B-A-B sequence. */
        if (window._guardsAlreadyRan) {
            window._guardsAlreadyRan = false;
            if (typeof _origShowTransition === 'function') {
                _origShowTransition('publish');
            }
            return;
        }

        /* Post-auth path — author was not signed in, guards not yet run.
           Run them now before executing the transition. */
        _warnIfTooManyOptions(function() {
            var msg = _buildPublishConfirmMsg();
            cpbpConfirm({
                title   : 'Publish Poll',
                message : msg,
                icon    : 'cell_tower',
                okLabel : 'Publish',
                onOk    : function() {
                    if (typeof _origShowTransition === 'function') {
                        _origShowTransition('publish');
                    }
                },
                onCancel: function() {
                    /* Author cancelled — nothing to clean up */
                }
            });
        });
    };

    window.onAuthStateRestored = function(email) {
        /* Fires on page load if existing session found.
           Refresh button states — auth state affects canSave/canPublish. */
        if (typeof updateFooterButtons === 'function') {
            updateFooterButtons();
        }
    };


    /* ══════════════════════════════════════════════════════════════
       WINDOW.* ASSIGNMENTS
       Every function called from an inline onclick= handler.
       Alphabetical within each group for easy scanning.
    ══════════════════════════════════════════════════════════════ */

    /* ── Entry screen ─────────────────────────────────────────── */
    window.handleEntryCta           = handleEntryCta;
    window.handleEntryPollIdInput   = handleEntryPollIdInput;
    window.handleEntryPollIdKey     = handleEntryPollIdKey;
    window.selectEntryCard          = selectEntryCard;
    window.submitEntryVote          = submitEntryVote;


    /* ── Schedule (Card 1) ────────────────────────────────────── */
    window.onDatePicked         = onDatePicked;
        window._startLiveClock      = _startLiveClock;
    window._stopLiveClock       = _stopLiveClock;
    window.navCalendar          = navCalendar;
    window.onCalDayPicked       = onCalDayPicked;
    window.onTimeDigitFocus     = onTimeDigitFocus;
    window.onTimeDigitBlur      = onTimeDigitBlur;
    window.onTimeDigitKey       = onTimeDigitKey;
    window.onDurFocus           = onDurFocus;
    window.onDurBlur            = onDurBlur;
    window.onDurKey             = onDurKey;
    window.onDraftToggle        = onDraftToggle;
    window.activateStep1        = activateStep1;


    /* ── Q&A (Card 2) ─────────────────────────────────────────── */
    window.toggleDropdown       = toggleDropdown;
    window.selectType           = selectType;
    window.updateScaleLabels    = updateScaleLabels;
    window.updateRatingPreview  = updateRatingPreview;
    window.addOption            = addOption;
    window.removeOption         = removeOption;
    window.addGridItem          = addGridItem;
    window.removeGridItem       = removeGridItem;
    window.activateStep2        = activateStep2;
    window.autoGrow             = autoGrow;
    window._qOnInput            = _qOnInput;
    window._qOnBlur             = _qOnBlur;


    /* ── Footer buttons ───────────────────────────────────────── */
    window.clearPollForm           = clearPollForm;
    window.requireAuthThenPreview  = requireAuthThenPreview;
    window.requireAuthThenSave     = requireAuthThenSave;
    window.requireAuthThenPublish  = requireAuthThenPublish;


    /* ── Modals ───────────────────────────────────────────────── */
    window.cpbpConfirm          = cpbpConfirm;
    window.openIndexSoonModal   = openIndexSoonModal;
    window.closeIndexSoonModal  = closeIndexSoonModal;

    </script>

</body>
</html>