<!--
================================================================================
  FILE:     index.html
  PAGE:     PalmPoll — Home (Entry Screen)
  VERSION:  202604172215
  AUTHORS:  Palmdesk / Claude

================================================================================
  PURPOSE
  -------
  Home page and primary entry point for all PalmPoll users.
  Presents two paths:

    Card 1 (Design a poll)  — two-step: select card → click button →
                              navigates to Select_QType_18_Expanding_Cards.html
    Card 2 (Vote now)       — two-step: select card → type poll ID → submit →
                              navigates to Vote_Now.html?id=PLBP-XXXX-XXXX

  No authentication required to view or use this page.
  Auth is accessible via nav bar only (sign in / sign out).

================================================================================
  LAYOUT
  ------
  [Fallback Nav]        — visible only if cpbp-auth.js fails to load
  [Live Nav Bar]        — injected by cpbp-nav.js via cpbp-auth.js
  [Back Button]         — fixed top-left, hidden on this page (home = no back)
  [Main Container]      — page heading + description + two-card entry screen
  [Action Buttons Card] — empty shell, no action buttons on this page
  [Next Button]         — fixed bottom-right, hidden on this page

================================================================================
  LOAD SEQUENCE
  -------------
  CRITICAL — Do not reorder. Breaking this sequence breaks the nav.

  1. Google Fonts (CSS — Roboto + Material Symbols + Google Sans)
  2. Supabase SDK (synchronous CDN — must fully execute before cpbp-auth.js)
  3. window.cpbpNavConfig (inline script — MUST be before cpbp-auth.js)
  4. cpbp-auth.js (loads cpbp-nav.js internally → injects nav HTML + CSS)
  5. Body renders — page content visible
  6. DOMContentLoaded fires — page init runs

================================================================================
  AUTH MODEL
  ----------
  Open page — no auth gate on load.
  Auth accessible via nav bar only.
  No auth-triggered actions exist on this page.

================================================================================
  KEY DESIGN DECISIONS
  --------------------
  1. Template #backBtn and #nextBtn are kept in HTML per template standard
     but hidden on page load — home page has no previous or next page in flow.

  2. Card selection is a two-step interaction: click card to highlight and
     reveal the action element, then act. Gives user a moment to confirm.

  3. Poll ID field uses type="text" with no inputmode — ID is alphanumeric
     (A-Z0-9). PalmPoll standard: never type="number" for constrained inputs.

  4. Poll ID format: PLBP-XXXX-XXXX. Prefix "PLBP-" rendered as static text.
     User types only the 9-character variable segment (XXXX-XXXX).

================================================================================
  COMPANION FILES
  ---------------
  cpbp-auth.js                          — auth module (OTP, session, nav callbacks)
  cpbp-nav.js                           — nav module (injected by auth, never direct)
  Select_QType_18_Expanding_Cards.html  — Card 1 destination
  Vote_Now.html                         — Card 2 destination

================================================================================
  GDPR / CCPA
  -----------
  Deferred to dedicated compliance session across all pages.

================================================================================
  Z-INDEX HIERARCHY
  -----------------
    0 / auto   Page content (default)
    200        .top-nav-container (nav bar)
    300        #backBtn, #nextBtn (both hidden on this page)
    400        .nav-dropdown (account dropdown — owned by cpbp-nav.js)
    1000+      Modals

================================================================================
  COLOUR PALETTE
  --------------
  var(--clr-blue)   Google blue    — primary actions, active states, poll ID underline
  var(--clr-blue-dark)   Blue dark      — hover on blue elements
  var(--clr-near-black)   Near-black     — body text, headings, active button borders
  var(--clr-gray-utility)   Utility gray   — secondary text, icons
  var(--clr-gray-hint)   Hint gray      — placeholders, disabled text, poll ID prefix
  var(--clr-gray-border)   Border gray    — card borders, inactive button borders
  var(--clr-page-bg)   Page bg        — body background
  var(--clr-bg-hover)   Light gray     — card hover background, button hover
  var(--clr-bg-faint)   Off-white      — card hover background (unselected)
  var(--clr-bg-blue-tint)   Tint blue      — selected card background
  var(--clr-bg-green-tint)   Tint green     — vote card icon background
  var(--clr-green)   Google green   — vote card icon colour
  var(--clr-white)   White          — cards, nav bar

================================================================================
  JS BLOCK MAP
  ------------
  Block T1:  isLocalStorageAvailable() — localStorage check
  Block T2:  Nav error handler — shows fallback nav if cpbp-auth.js fails
  Block T3:  Nav fallback hide — hides fallback nav when live nav loads
  Block T4:  FloatingButtonNextPageVisibilityLogic() — hides #nextBtn
  Block T5:  FloatingButtonNextPageActionLogic() — unused, kept per template
  Block T6:  FloatingButtonPreviousPageVisibilityLogic() — hides #backBtn
  Block T7:  FloatingButtonPreviousPageActionLogic() — unused, kept per template
  Block T8:  onAuthSuccess(email) — no-op on this page
  Block T9:  onAuthStateRestored(email) — no-op on this page
  Block T10: DOMContentLoaded — page init entry point

  Block 1:   selectPollActionCard(cardId) — card highlight + reveal action element
  Block 2:   goToQuestionTypeSelector() — Card 1 button navigation
  Block 3:   Vote Now poll ID handlers:
               handlePollIdInput(event)
               handlePollIdKeydown(event)
               _updateVoteSubmitButtonState()
               submitPollIdAndGoToVote()

================================================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Ask your most important question. Get anonymous answers instantly.">
    <link rel="icon" href="data:,"><!-- Suppresses browser /favicon.ico request until a real icon is ready -->
    <title>PalmPoll — Home</title>


    <!-- ═══════════════════════════════════════════════════════════════════
         FONTS
         Two fonts loaded. Each serves a different role — do not remove either.
         See FONT NOTES in page template for full explanation.

         Roboto               — page body content
         Google Sans          — nav bar (injected by cpbp-nav.js)
         Material Symbols     — icons across nav and page elements
    ═══════════════════════════════════════════════════════════════════ -->

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <!-- Combined font request — Roboto, Google Sans, Material Symbols in one round trip -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Google+Sans:wght@400;500;700&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block" rel="stylesheet">


    <!-- ═══════════════════════════════════════════════════════════════════
         LOAD SEQUENCE — CRITICAL ORDER. DO NOT REORDER THESE THREE SCRIPTS.
    ═══════════════════════════════════════════════════════════════════ -->

    <!-- Supabase SDK — loaded synchronously (no async, no defer).
         cpbp-auth.js calls window.supabase.createClient() immediately on load.
         Supabase must be fully executed first. async caused a race condition. -->
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.103.0/dist/umd/supabase.min.js"></script>

    <script>
        /* Home page: show My Polls when signed in.
           No New Poll button — user is already on the page to start one. */
        window.cpbpNavConfig = { showNewPoll: false, showMyPolls: true };
    </script>

    <script>
        /* cpbpNavReady — defined here in <head> before cpbp-auth.js loads.
           cpbp-nav.js calls this immediately on injection. If defined in
           <body> it does not exist yet when cpbp-nav.js executes from <head>.
           Hides fallback nav as soon as live nav injection succeeds. */
        window.cpbpNavReady = function() {
            var fallback = document.getElementById('cpbpNavFallback');
            if (fallback) fallback.style.display = 'none';
            var navBar = document.getElementById('cpbpNavBar');
            if (navBar) navBar.style.display = '';
        };
    </script>

    <script src="cpbp-auth.js"></script>


    <style>

        :root {
            /* ── Core palette — matches COLOUR PALETTE in file header ── */
            --clr-brand-purple:    #673ab7;   /* accent bars, logo icon */
            --clr-blue:            #1a73e8;   /* primary actions, active states, links */
            --clr-blue-dark:       #1557b0;   /* hover on blue buttons */
            --clr-near-black:      #202124;   /* body text, headings */
            --clr-gray-utility:    #5f6368;   /* secondary text, icons, labels */
            --clr-gray-hint:       #9aa0a6;   /* placeholders, disabled text */
            --clr-gray-border:     #dadce0;   /* dividers, card borders */
            --clr-page-bg:         #f8f9fa;   /* body background */
            --clr-white:           #ffffff;   /* cards, modals, nav bar */
            --clr-error:           #d93025;   /* validation errors, danger actions */
            --clr-success:         #0f9d58;   /* loading complete, verified states */
            --clr-warning:         #f4b400;   /* counter at-max state */
            /* ── Extended palette ── */
            --clr-green:           #34a853;   /* vote card icon */
            --clr-purple-light:    #7c4dff;   /* logo gradient end */
            --clr-bg-hover:        #f1f3f4;   /* card/button hover background */
            --clr-bg-faint:        #fafafa;   /* unselected card hover */
            --clr-bg-blue-tint:    #f0f6ff;   /* selected card background */
            --clr-bg-green-tint:   #e6f4ea;   /* vote card icon background */
            --clr-bg-blue-light:   #e8f0fe;   /* badge/pill background */
            --clr-border-hover:    #bdc1c6;   /* card border on hover (unselected) */
            --clr-border-dark:     #d0d0d0;   /* action buttons card border */
            --clr-gray-medium:     #70757a;   /* mid-tone gray text */
            /* ── Back button ── */
            --clr-back-btn-bg:     #f0f4ff;
            --clr-back-btn-hover:  #dce8ff;
            --clr-back-btn-border: #c5d3f0;
            /* ── Template scaffold labels — remove before deploying ── */
            --clr-scaffold-bg:     #fff3cd;
            --clr-scaffold-border: #ffc107;
            --clr-scaffold-text:   #856404;
            /* ── Layout ── */
            --nav-height: 64px;   /* height of .top-nav-container — used by margin-top calc */
        }

        /* ═══════════════════════════════════════════════════════════════════
           BASE RESET & BODY
           Body font is Roboto (page content only).
           Nav bar uses Google Sans — owned by cpbp-nav.js, not here.
        ═══════════════════════════════════════════════════════════════════ */

        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Roboto', Arial, sans-serif;
            background-color: var(--clr-page-bg);
            color: var(--clr-near-black);
        }


        /* ═══════════════════════════════════════════════════════════════════
           FALLBACK NAV
           Shown only if cpbp-auth.js fails to load.
           Hidden by default. Nav error handler reveals it on failure.
        ═══════════════════════════════════════════════════════════════════ */

        #cpbpNavFallback {
            display: none;
            height: 64px;
            background-color: var(--clr-white);
            border-bottom: 1px solid var(--clr-gray-border);
            position: sticky;
            top: 0;
            z-index: 200;
        }

        #cpbpNavFallback .nav-fallback-container {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            box-sizing: border-box;
        }

        #cpbpNavFallback .nav-fallback-logo {
            display: flex;
            align-items: center;
            gap: 9px;
            text-decoration: none;
            cursor: pointer;
            flex-shrink: 0;
        }

        #cpbpNavFallback .nav-fallback-logo-icon {
            width: 33px;
            height: 33px;
            background: linear-gradient(135deg, var(--clr-blue), var(--clr-purple-light));
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 18px;
            color: var(--clr-white);
            font-weight: 700;
        }

        #cpbpNavFallback .nav-fallback-logo-text {
            font-size: 16px;
            font-weight: 700;
            color: var(--clr-near-black);
            white-space: nowrap;
            letter-spacing: -0.3px;
        }

        #cpbpNavFallback .nav-fallback-logo-text span { color: var(--clr-blue); }

        #cpbpNavFallback .nav-fallback-status {
            font-size: 12px;
            color: var(--clr-gray-hint);
            white-space: nowrap;
        }

        @media (max-width: 768px) {
            #cpbpNavFallback .nav-fallback-status { display: none; }
        }


        /* ═══════════════════════════════════════════════════════════════════
           BACK BUTTON — part of the standard page template.
           Not relevant for this page. Kept in HTML per template standard.
           Hidden on page load via FloatingButtonPreviousPageVisibilityLogic().
        ═══════════════════════════════════════════════════════════════════ */

        #backBtn {
            position: fixed;
            top: 84px;
            left: 16px;
            z-index: 300;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 14px 7px 10px;
            background: var(--clr-back-btn-bg);
            border: 1px solid var(--clr-back-btn-border);
            border-radius: 20px;
            font-family: 'Roboto', Arial, sans-serif;
            font-size: 13px;
            font-weight: 500;
            color: var(--clr-blue);
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.18);
            transition: background 150ms, box-shadow 150ms;
        }

        #backBtn:hover {
            background: var(--clr-back-btn-hover);
            box-shadow: 0 4px 12px rgba(0,0,0,0.22);
        }

        #backBtn .material-symbols-rounded { font-size: 18px; }


        /* ═══════════════════════════════════════════════════════════════════
           MAIN CONTAINER — centered column, clears the 64px nav bar.
        ═══════════════════════════════════════════════════════════════════ */

        #main-container {
            margin-top: 8px;   /* small gap below sticky nav — nav takes its own space in flow */
            padding: 32px 24px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
            box-sizing: border-box;
        }

        .page-heading {
            font-size: 28px;
            font-weight: 500;
            color: var(--clr-near-black);
            margin-bottom: 8px;
        }

        .page-subtext {
            font-size: 14px;
            color: var(--clr-gray-utility);
            margin-bottom: 32px;
            line-height: 1.5;
        }


        /* ═══════════════════════════════════════════════════════════════════
           ACTION BUTTONS CARD — part of the standard page template.
           No action buttons on this page. Shell kept per template standard.
        ═══════════════════════════════════════════════════════════════════ */

        .action-buttons-card {
            display: none; /* No action buttons on this page */
            border: 1px solid var(--clr-border-dark);
            border-radius: 8px;
            background: var(--clr-white);
            padding: 32px 24px;
            margin-bottom: 32px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
            box-sizing: border-box;
        }


        /* ═══════════════════════════════════════════════════════════════════
           NEXT BUTTON — part of the standard page template.
           Not relevant for this page. Kept in HTML per template standard.
           Hidden on page load via FloatingButtonNextPageVisibilityLogic().
        ═══════════════════════════════════════════════════════════════════ */

        #nextBtn {
            position: fixed;
            bottom: 32px;
            right: 32px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: var(--clr-blue);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            transition: background 150ms, transform 150ms, box-shadow 150ms;
            z-index: 300;
            color: var(--clr-white);
        }

        #nextBtn:hover:not(.disabled) {
            background: var(--clr-blue-dark);
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }

        #nextBtn.disabled {
            background: var(--clr-gray-border);
            cursor: not-allowed;
            opacity: 0.5;
        }

        #nextBtn .material-symbols-rounded { font-size: 24px; }


        /* ═══════════════════════════════════════════════════════════════════
           HOME OPENING LINE
           The prompt text above the two cards: "What would you like to do today?"
        ═══════════════════════════════════════════════════════════════════ */

        .home-opening-line {
            font-size: 14px;
            color: var(--clr-near-black);
            margin-bottom: 16px;
        }


        /* ═══════════════════════════════════════════════════════════════════
           TWO-CARD GRID
           2-column equal-width layout on desktop.
           Collapses to single column on mobile (≤ 560px).
        ═══════════════════════════════════════════════════════════════════ */

        .two-card-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            align-items: stretch;
            gap: 16px;
        }

        @media (max-width: 560px) {
            .two-card-grid { grid-template-columns: 1fr; }
        }


        /* ═══════════════════════════════════════════════════════════════════
           POLL ACTION CARD — shared base style for both entry cards.
        ═══════════════════════════════════════════════════════════════════ */

        .poll-action-card {
            background: var(--clr-white);
            border: 1.5px solid var(--clr-gray-border);
            border-radius: 12px;
            padding: 20px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
            user-select: none;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        }

        .poll-action-card:focus {
            outline: 2px solid var(--clr-blue);
            outline-offset: 2px;
        }

        .poll-action-card:focus:not(:focus-visible) {
            outline: none; /* suppress focus ring on mouse click, keep for keyboard */
        }

        .poll-action-card:hover {
            border-color: var(--clr-border-hover);
            background: var(--clr-bg-faint);
        }

        .poll-action-card-selected,
        .poll-action-card-selected:hover {
            border-color: var(--clr-blue);
            border-width: 2px;
            background: var(--clr-bg-blue-tint);
        }

        /* Spacer — keeps icon vertically aligned across cards */
        .poll-action-card-badge-spacer {
            height: 22px;
            margin-bottom: 12px;
        }

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

        .poll-action-card-icon-wrap-gray  { background: var(--clr-bg-hover); }
        .poll-action-card-icon-wrap-green { background: var(--clr-bg-green-tint); }

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

        .poll-action-card-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--clr-near-black);
            margin-bottom: 8px;
        }

        .poll-action-card-desc {
            font-size: 13px;
            color: var(--clr-gray-utility);
            line-height: 1.5;
        }


        /* ═══════════════════════════════════════════════════════════════════
           CARD DESIGN A POLL — CTA button (revealed when card is selected)
        ═══════════════════════════════════════════════════════════════════ */

        .card-design-a-poll-cta-wrap {
            margin-top: auto;   /* pushes arrow to bottom of flex card */
            padding-top: 16px;
            display: flex;
            justify-content: flex-end;
        }

        /* Blue circle arrow button — icon only CTA on both cards */
        .card-arrow-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--clr-blue);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--clr-white);
            transition: background 0.2s ease, transform 0.15s ease;
            flex-shrink: 0;
        }

        .card-arrow-btn .material-symbols-rounded { font-size: 20px; }

        .card-arrow-btn:hover {
            background: var(--clr-blue-dark);
            transform: scale(1.08);
        }

        .card-arrow-btn:disabled {
            background: var(--clr-gray-border);
            cursor: not-allowed;
            opacity: 0.4;
            transform: none;
        }


        /* ═══════════════════════════════════════════════════════════════════
           CARD VOTE NOW — poll ID input and submit button
                           (both revealed when card is selected)
        ═══════════════════════════════════════════════════════════════════ */

        .card-vote-now-input-section {
            margin-top: 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* Poll ID row: static "PLBP-" prefix + user-typed segment */
        .vote-now-poll-id-row {
            display: flex;
            align-items: baseline;
            border-bottom: 2px solid var(--clr-blue);
            padding-bottom: 4px;
        }

        .vote-now-poll-id-prefix {
            font-size: 16px;
            font-family: 'Courier New', monospace;
            font-weight: 700;
            color: var(--clr-gray-hint);
            white-space: nowrap;
            user-select: none;
            flex-shrink: 0;
        }

        .vote-now-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: var(--clr-near-black);
            width: 100%;
        }

        .vote-now-poll-id-field::placeholder {
            color: var(--clr-gray-hint);
            font-weight: 400;
            letter-spacing: 2px;
        }

        /* Shake animation — fires when user submits an incomplete poll ID */
        @keyframes vote-now-poll-id-shake {
            0%, 100% { transform: translateX(0); }
            20%       { transform: translateX(-6px); }
            40%       { transform: translateX(6px); }
            60%       { transform: translateX(-4px); }
            80%       { transform: translateX(4px); }
        }

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

        /* Reduced motion — replace shake with a red border flash for users
           who have set prefers-reduced-motion in their OS/browser settings. */
        @media (prefers-reduced-motion: reduce) {
            .vote-now-poll-id-row-shaking {
                animation: none;
                border-color: var(--clr-error);
            }
        }

        /* vote-now-submit-btn — disabled/enabled states handled by .card-arrow-btn base.
           Only override needed: position within the vote-now input section. */
        .vote-now-submit-btn {
            align-self: flex-end;
        }


        /* ═══════════════════════════════════════════════════════════════════
           RESPONSIVE
        ═══════════════════════════════════════════════════════════════════ */

        @media (max-width: 768px) {

            #main-container {
                padding: 16px 12px;
            }

            .page-heading { font-size: 20px; }

            .page-subtext { font-size: 13px; }

            #nextBtn {
                bottom: 16px;
                right: 16px;
                width: 48px;
                height: 48px;
            }

            #nextBtn .material-symbols-rounded { font-size: 20px; }

        }

    </style>

</head>
<body>


    <!-- ═══════════════════════════════════════════════════════════════════
         FALLBACK NAV — visible only if cpbp-auth.js fails to load.
         Do not modify or remove this block.
    ═══════════════════════════════════════════════════════════════════ -->

    <div id="cpbpNavFallback">
        <div class="nav-fallback-container">
            <a class="nav-fallback-logo" href="index.html" title="PalmPoll — Home">
                <div class="nav-fallback-logo-icon">
                    <span class="material-symbols-rounded" style="font-variation-settings:'FILL' 1;">bolt</span>
                </div>
                <div class="nav-fallback-logo-text">Palm<span>Poll</span></div>
            </a>
            <div class="nav-fallback-status">(Auth unavailable — refresh page)</div>
        </div>
    </div>


    <!-- ═══════════════════════════════════════════════════════════════════
         NAV_BODY — cpbp-nav.js injects the live nav bar here.
         Keep the inner div empty. cpbp-nav.js replaces it with nav HTML.
    ═══════════════════════════════════════════════════════════════════ -->

    <div id="NAV_BODY">
        <div class="top-nav-container" id="cpbpNavBar" style="display:none;"></div>
    </div>


    <!-- ═══════════════════════════════════════════════════════════════════
         BACK BUTTON — part of the standard page template.
         Not relevant for this page (home page has no previous page).
         Kept in HTML per template standard. Hidden on load via JS.
    ═══════════════════════════════════════════════════════════════════ -->

    <button id="backBtn" onclick="FloatingButtonPreviousPageActionLogic()">
        <span class="material-symbols-rounded">arrow_back</span>
        Back
    </button>


    <!-- ═══════════════════════════════════════════════════════════════════
         MAIN CONTAINER
    ═══════════════════════════════════════════════════════════════════ -->

    <section id="main-container">

        <h1 id="PAGE_HEADING" class="page-heading">Welcome to PalmPoll</h1>

        <p id="PAGE_DESCRIPTION" class="page-subtext">Your most important question. Anonymous answers.</p>

        <div id="PAGE_MAIN_BODY">

            <p class="home-opening-line">What would you like to do today?</p>

            <div class="two-card-grid" id="two-card-grid">


                <!-- ── CARD: DESIGN A POLL ───────────────────────────────────
                     Clicking the card highlights it and reveals the CTA button.
                     Clicking the CTA button navigates to the question type selector.
                ─────────────────────────────────────────────────────────────── -->

                <div class="poll-action-card"
                     id="card-design-a-poll"
                     role="button"
                     tabindex="0"
                     aria-pressed="false">

                    <div class="poll-action-card-badge-spacer"></div>

                    <div class="poll-action-card-icon-wrap poll-action-card-icon-wrap-gray">
                        <span class="material-symbols-rounded poll-action-card-icon"
                              style="color:var(--clr-gray-utility);">create</span>
                    </div>

                    <div class="poll-action-card-title">Design a poll</div>

                    <div class="poll-action-card-desc">
                        Select from 18 question types and craft your poll with our intuitive builder.
                    </div>

                    <!-- CTA button — hidden until card is selected -->
                    <div class="card-design-a-poll-cta-wrap"
                         id="card-design-a-poll-cta-wrap"
                         style="display:none;">
                        <button class="card-arrow-btn card-design-a-poll-cta-btn"
                                id="card-design-a-poll-cta-btn"
                                type="button"
                                aria-label="Select question type">
                            <span class="material-symbols-rounded">arrow_forward</span>
                        </button>
                    </div>

                </div>
                <!-- /card-design-a-poll -->


                <!-- ── CARD: VOTE NOW ────────────────────────────────────────
                     Clicking the card highlights it and reveals the poll ID input.
                     User types their poll ID and clicks Start voting (or presses Enter).
                ─────────────────────────────────────────────────────────────── -->

                <div class="poll-action-card"
                     id="card-vote-now"
                     role="button"
                     tabindex="0"
                     aria-pressed="false">

                    <div class="poll-action-card-badge-spacer"></div>

                    <div class="poll-action-card-icon-wrap poll-action-card-icon-wrap-green">
                        <span class="material-symbols-rounded poll-action-card-icon"
                              style="color:var(--clr-green);">how_to_vote</span>
                    </div>

                    <div class="poll-action-card-title">Have your say. Vote now.</div>

                    <div class="poll-action-card-desc">
                        Enter a Poll ID shared with you. Jump straight in and cast your vote.
                    </div>

                    <!-- Poll ID input + submit — hidden until card is selected -->
                    <div class="card-vote-now-input-section"
                         id="card-vote-now-input-section"
                         style="display:none;">

                        <div class="vote-now-poll-id-row" id="vote-now-poll-id-row">
                            <span class="vote-now-poll-id-prefix">PLBP-</span>
                            <input
                                type="text"
                                id="vote-now-poll-id-field"
                                class="vote-now-poll-id-field"
                                placeholder="XXXX-XXXX"
                                maxlength="9"
                                autocomplete="off"
                                autocorrect="off"
                                autocapitalize="characters"
                                spellcheck="false"
                                aria-label="Poll ID">
                        </div>

                        <button class="card-arrow-btn vote-now-submit-btn"
                                id="vote-now-submit-btn"
                                type="button"
                                aria-label="Start voting"
                                disabled>
                            <span class="material-symbols-rounded">arrow_forward</span>
                        </button>

                    </div>
                    <!-- /card-vote-now-input-section -->

                </div>
                <!-- /card-vote-now -->


            </div>
            <!-- /two-card-grid -->

        </div>
        <!-- /PAGE_MAIN_BODY -->

    </section>


    <!-- ═══════════════════════════════════════════════════════════════════
         ACTION BUTTONS CARD — part of the standard page template.
         No action buttons on this page. Shell kept per template standard.
    ═══════════════════════════════════════════════════════════════════ -->

    <div id="ACTION_BUTTONS_CARD" class="action-buttons-card">
        <!-- No action buttons on this page -->
    </div>


    <!-- ═══════════════════════════════════════════════════════════════════
         NEXT BUTTON — part of the standard page template.
         Not relevant for this page. Kept in HTML per template standard.
         Hidden on load via JS.
    ═══════════════════════════════════════════════════════════════════ -->

    <button id="nextBtn" onclick="FloatingButtonNextPageActionLogic()">
        <span class="material-symbols-rounded">arrow_forward</span>
    </button>


    <!-- ═══════════════════════════════════════════════════════════════════
         SCRIPT BLOCK T1 — localStorage Availability Check
    ═══════════════════════════════════════════════════════════════════ -->
    <script>

        function isLocalStorageAvailable() {
            try {
                const test = '__localStorage_test__';
                localStorage.setItem(test, test);
                localStorage.removeItem(test);
                return true;
            } catch(e) {
                return false;
            }
        }

        if (!isLocalStorageAvailable()) {
            console.warn('⚠️  localStorage unavailable. Auth session will not persist.');
            console.log('Cause: Private/Incognito browsing, or localStorage disabled in browser settings.');
        }

    </script>


    <!-- ═══════════════════════════════════════════════════════════════════
         SCRIPT BLOCK T2 — Nav Error Handler
         Two mechanisms to catch nav injection failure and show fallback nav.

         Mechanism 1 — window error listener:
           Fires when cpbp-auth.js or Supabase CDN fails to load or throws
           a runtime error. e.filename identifies the source file — not
           e.message, which is empty on script load failures.

         Mechanism 2 — DOMContentLoaded safety net:
           If window._cpbpNavInjected was never set by load time, nav
           injection never happened for any reason (including silent failures
           that threw no catchable error). Show fallback as a last resort.
           _cpbpNavInjected is set by cpbp-nav.js immediately after injection.
    ═══════════════════════════════════════════════════════════════════ -->
    <script>

        /* Mechanism 1 — script load / runtime error on cpbp-auth.js or Supabase */
        window.addEventListener('error', function(e) {
            const src = e.filename || '';
            if (src.includes('cpbp-auth') || src.includes('supabase')) {
                console.error('NAV LOADING FAILED:', src);
                console.log('Check DevTools Network tab — did cpbp-auth.js load with 200 OK?');
                const fallback = document.getElementById('cpbpNavFallback');
                if (fallback) fallback.style.display = 'block';
            }
        });

        /* Mechanism 2 — safety net: nav never injected.
           cpbp-nav.js is loaded dynamically so it does not block
           DOMContentLoaded. Poll for _cpbpNavInjected up to 3000ms
           before concluding nav failed and showing fallback.
           🧹 REMOVE this comment after nav loading is confirmed stable. */
        document.addEventListener('DOMContentLoaded', function() {
            var elapsed = 0;
            var interval = 50;
            var limit = 3000;
            (function checkNav() {
                if (window._cpbpNavInjected) return; /* nav loaded — all good */
                if (elapsed >= limit) {
                    console.warn('NAV INJECTION MISSED — showing fallback nav.');
                    const fallback = document.getElementById('cpbpNavFallback');
                    if (fallback) fallback.style.display = 'block';
                    return;
                }
                elapsed += interval;
                setTimeout(checkNav, interval);
            })();
        });

    </script>


    <!-- ═══════════════════════════════════════════════════════════════════
         SCRIPT BLOCK T3 — Nav Fallback Hide
         cpbp-nav.js calls window.cpbpNavReady() synchronously at the exact
         moment nav injection succeeds. This is the correct point to hide
         the fallback nav — not DOMContentLoaded, which fires before auth
         resolves and before the nav bar has any children.
    ═══════════════════════════════════════════════════════════════════ -->
    <script>

        /* cpbpNavReady already defined in <head> before cpbp-auth.js —
           do not redefine here or it overwrites the head definition
           after nav has already injected. */

    </script>


    <!-- ═══════════════════════════════════════════════════════════════════
         SCRIPT BLOCK T4 + T5 — Floating Next Button Logic
         #nextBtn is part of the standard page template.
         It is not relevant for this page so kept unused/inactive.
    ═══════════════════════════════════════════════════════════════════ -->
    <script>

        function FloatingButtonNextPageVisibilityLogic() {
            /* #nextBtn is not used on this page — hidden on load. */
            document.getElementById('nextBtn').style.display = 'none';
        }

        function FloatingButtonNextPageActionLogic() {
            /* #nextBtn is not used on this page — no action defined. */
        }

    </script>


    <!-- ═══════════════════════════════════════════════════════════════════
         SCRIPT BLOCK T6 + T7 — Floating Back Button Logic
         #backBtn is part of the standard page template.
         It is not relevant for this page so kept unused/inactive.
    ═══════════════════════════════════════════════════════════════════ -->
    <script>

        function FloatingButtonPreviousPageVisibilityLogic() {
            /* #backBtn is not used on this page — hidden on load. */
            document.getElementById('backBtn').style.display = 'none';
        }

        function FloatingButtonPreviousPageActionLogic() {
            /* #backBtn is not used on this page — no action defined. */
        }

    </script>


    <!-- ═══════════════════════════════════════════════════════════════════
         SCRIPT BLOCK T8 + T9 — Auth Callbacks
         cpbp-auth.js calls these on auth state changes.
         No auth-triggered UI updates are needed on this page.
    ═══════════════════════════════════════════════════════════════════ -->
    <script>

        window.onAuthSuccess = function(email) {
            /* No auth-triggered UI updates needed on this page. */
        };

        window.onAuthStateRestored = function(email) {
            /* No auth-triggered UI updates needed on this page. */
        };

    </script>


    <!-- ═══════════════════════════════════════════════════════════════════
         SCRIPT BLOCK T10 — Page Initialisation + Event Wiring
         All event listeners are registered here — no inline onclick/oninput
         handlers in HTML. Functions do not need window.* exports.
    ═══════════════════════════════════════════════════════════════════ -->
    <script>

        document.addEventListener('DOMContentLoaded', function() {

            FloatingButtonNextPageVisibilityLogic();
            FloatingButtonPreviousPageVisibilityLogic();

            /* ── Cache vote-now DOM refs ─────────────────────────── */
            _voteNowPollIdField = document.getElementById('vote-now-poll-id-field');
            _voteNowSubmitBtn   = document.getElementById('vote-now-submit-btn');
            _voteNowPollIdRow   = document.getElementById('vote-now-poll-id-row');

            /* ── Card selection ──────────────────────────────────── */
            document.getElementById('card-design-a-poll')
                .addEventListener('click', function() {
                    selectPollActionCard('design-a-poll');
                });

            document.getElementById('card-vote-now')
                .addEventListener('click', function() {
                    selectPollActionCard('vote-now');
                });

            /* ── Design a poll CTA button ────────────────────────── */
            document.getElementById('card-design-a-poll-cta-btn')
                .addEventListener('click', function(event) {
                    event.stopPropagation(); /* prevent card click firing */
                    goToQuestionTypeSelector();
                });

            /* ── Vote now: poll ID field + submit button ─────────── */
            _voteNowPollIdField.addEventListener('input',   handlePollIdInput);
            _voteNowPollIdField.addEventListener('keydown', handlePollIdKeydown);
            _voteNowSubmitBtn.addEventListener('click',     submitPollIdAndGoToVote);

        });

    </script>


    <!-- ═══════════════════════════════════════════════════════════════════
         SCRIPT BLOCK 1 — Card Selection
         selectPollActionCard(cardId)
           Highlights the selected card and reveals its action element.
           Deselects the other card and hides its action element.
           Focuses the poll ID field immediately when Vote Now is selected.

         cardId values:  'design-a-poll'  |  'vote-now'
    ═══════════════════════════════════════════════════════════════════ -->
    <script>

        function selectPollActionCard(cardId) {

            const cardConfig = [
                {
                    id        : 'design-a-poll',
                    actionElId: 'card-design-a-poll-cta-wrap',
                    showAs    : 'flex'
                },
                {
                    id        : 'vote-now',
                    actionElId: 'card-vote-now-input-section',
                    showAs    : 'flex'
                }
            ];

            const clickedCardEl    = document.getElementById('card-' + cardId);
            const alreadySelected  = clickedCardEl.classList.contains('poll-action-card-selected');

            cardConfig.forEach(function(card) {
                const cardEl   = document.getElementById('card-' + card.id);
                const actionEl = document.getElementById(card.actionElId);

                if (card.id === cardId && !alreadySelected) {
                    /* Select this card */
                    cardEl.classList.add('poll-action-card-selected');
                    cardEl.setAttribute('aria-pressed', 'true');
                    if (actionEl) actionEl.style.display = card.showAs;

                    /* Focus poll ID field after the next paint cycle —
                       rAF waits for the browser to render the revealed
                       input before focusing, avoiding the 50ms timing hack. */
                    if (card.id === 'vote-now') {
                        if (_voteNowPollIdField) requestAnimationFrame(function() { _voteNowPollIdField.focus(); });
                    }

                } else {
                    /* Deselect — covers: the clicked card when already selected,
                       and the other card in all cases */
                    cardEl.classList.remove('poll-action-card-selected');
                    cardEl.setAttribute('aria-pressed', 'false');
                    if (actionEl) actionEl.style.display = 'none';
                }
            });

        }

    </script>


    <!-- ═══════════════════════════════════════════════════════════════════
         SCRIPT BLOCK 2 — Design a Poll Navigation
         goToQuestionTypeSelector()
           Called by the CTA button on the Design a Poll card.
           Navigates to the question type selection page.
    ═══════════════════════════════════════════════════════════════════ -->
    <script>

        function goToQuestionTypeSelector() {
            window.location.href = 'Select_QType_18_Expanding_Cards.html';
        }

    </script>


    <!-- ═══════════════════════════════════════════════════════════════════
         SCRIPT BLOCK 3 — Vote Now: Poll ID Input Handling

         DOM references for vote-now elements are cached once at
         DOMContentLoaded into module-level consts and reused by all
         functions — no repeated getElementById on every keystroke.

         handlePollIdInput(event)
           Fires on every keystroke in the poll ID field.
           Strips non-alphanumeric characters, uppercases the value,
           inserts a hyphen after the first 4 characters.
           Updates submit button active state after each change.

         handlePollIdKeydown(event)
           Fires on keydown in the poll ID field.
           Submits on Enter if the poll ID is complete.

         _updateVoteSubmitButtonState()
           Enables the submit button when exactly 8 alphanumeric characters
           are present. Disables (fades) it otherwise.

         submitPollIdAndGoToVote()
           Validates the typed poll ID.
           On incomplete ID: shakes the input row as a visual error signal.
           On complete ID: navigates to Vote_Now.html?id=PLBP-XXXX-XXXX.
    ═══════════════════════════════════════════════════════════════════ -->
    <script>

        /* Cached DOM references — assigned at DOMContentLoaded in Block T10.
           Used by handlePollIdInput, _updateVoteSubmitButtonState,
           submitPollIdAndGoToVote, and selectPollActionCard (rAF focus). */
        let _voteNowPollIdField  = null;
        let _voteNowSubmitBtn    = null;
        let _voteNowPollIdRow    = null;


        function handlePollIdInput(event) {

            const field = event.target;
            const raw   = field.value.toUpperCase().replace(/[^A-Z0-9]/g, '');

            /* Auto-insert hyphen after first 4 characters */
            if (raw.length > 4) {
                field.value = raw.slice(0, 4) + '-' + raw.slice(4, 8);
            } else {
                field.value = raw;
            }

            _updateVoteSubmitButtonState();
        }


        function handlePollIdKeydown(event) {
            if (event.key === 'Enter') {
                event.preventDefault();
                submitPollIdAndGoToVote();
            }
        }


        function _updateVoteSubmitButtonState() {
            if (!_voteNowPollIdField || !_voteNowSubmitBtn) return;

            /* Complete segment = exactly 8 alphanumeric characters.
               Toggle native disabled attribute — handles pointer-events,
               keyboard activation, and screen reader announcement correctly. */
            const isComplete = _voteNowPollIdField.value.replace(/[^A-Z0-9]/g, '').length === 8;
            _voteNowSubmitBtn.disabled = !isComplete;
        }


        function submitPollIdAndGoToVote() {

            if (!_voteNowPollIdField) return;

            const segment = _voteNowPollIdField.value.replace(/[^A-Z0-9]/g, '');

            if (segment.length !== 8) {
                /* Shake the poll ID row to signal incomplete entry */
                if (_voteNowPollIdRow) {
                    _voteNowPollIdRow.classList.remove('vote-now-poll-id-row-shaking');
                    void _voteNowPollIdRow.offsetWidth; /* force reflow to restart animation */
                    _voteNowPollIdRow.classList.add('vote-now-poll-id-row-shaking');
                    _voteNowPollIdRow.addEventListener('animationend', function() {
                        _voteNowPollIdRow.classList.remove('vote-now-poll-id-row-shaking');
                    }, { once: true });
                }
                return;
            }

            /* Build full poll ID including the static prefix */
            const fullPollId = 'PLBP-' + segment.slice(0, 4) + '-' + segment.slice(4, 8);
            window.location.href = 'Vote_Now.html?id=' + encodeURIComponent(fullPollId);
        }


    </script>


</body>
</html>