/**
 * walkthrough.css — reusable animated step-by-step kit.
 *
 * Scope: every rule in this file lives under `.hp-walk` so the kit can
 * be imported anywhere without leaking into surrounding chrome. Consumed
 * by:
 *   • lib/faq-walkthroughs.js — inline expandable walkthroughs inside
 *     templated-club-site FAQ answers (loaded via faq.html)
 *   • (future) /help topic pages once the topic router lands
 *
 * Design principles
 *   1. Every animation gated on the ancestor <details> being open, so
 *      collapsed walkthroughs consume zero CPU.
 *   2. Every colour references a --hp-* CSS custom property with a
 *      dark-friendly default; consuming pages can override at the
 *      .hp-walk container level.
 *   3. prefers-reduced-motion: reduce → animations short-circuit to
 *      their end state; no bouncing / typing / pulsing.
 *   4. Container-query sizing (`container-type: inline-size`) so the
 *      mock UI scales to whatever accordion / card width contains it.
 *   5. No JS. Native <details> handles collapse; @keyframes handle
 *      motion; CSS counters handle numbering.
 *
 * Class prefix `hp-` matches the /help page kit so a future extraction
 * can adopt these rules without a class rename.
 */

.hp-walk {
    /* Palette — day mode uses the templated site's navy hero as the
       kit's dark surface (contrast against the light FAQ page). Night
       mode swaps to true black to MATCH the templated site's own
       night-mode nav/footer (see eldoraigne.css `html.night-mode
       .el-nav { background: #000000 }` at ~line 3386). Without the
       swap the walkthrough reads as navy-on-black in night mode. */
    --hp-accent: var(--el-accent, #5eb0ff);
    --hp-accent-strong: var(--el-hero, #001a4d);
    --hp-surface: var(--el-hero, #001a4d);
    --hp-surface-alt: rgba(255, 255, 255, 0.06);
    --hp-border: rgba(255, 255, 255, 0.12);
    --hp-text: var(--el-text-inv, #f5faff);
    --hp-text-muted: rgba(245, 250, 255, 0.7);
    --hp-radius: 14px;
    --hp-radius-sm: 8px;
    --hp-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);

    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 12px 0 4px;
    padding: 16px;
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    color: var(--hp-text);
    container-type: inline-size;
}
/* Night mode — swap navy → black so the walkthrough card doesn't sit
   as a navy island on a black page. All mock-UI backgrounds inherit
   via --hp-accent-strong. */
html.night-mode .hp-walk {
    --hp-accent-strong: #050505;
    --hp-surface: #050505;
    --hp-surface-alt: rgba(255, 255, 255, 0.04);
    --hp-border: rgba(255, 255, 255, 0.08);
}
/* Make the summary pill also night-mode-aware. */
html.night-mode .hp-walk-wrap[open] > .hp-walk-summary {
    color: #050505;
}

/* Wrapping <details><summary> */
.hp-walk-wrap {
    margin: 12px 0;
}
.hp-walk-wrap > .hp-walk-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(94, 176, 255, 0.14);
    border: 1px dashed var(--el-accent, #5eb0ff);
    border-radius: 999px;
    cursor: pointer;
    color: var(--el-accent, #5eb0ff);
    font-weight: 700;
    font-size: 0.9rem;
    list-style: none;
    user-select: none;
    transition: background 0.15s, transform 0.15s;
}
.hp-walk-wrap > .hp-walk-summary::-webkit-details-marker { display: none; }
.hp-walk-wrap > .hp-walk-summary:hover {
    background: rgba(94, 176, 255, 0.22);
    transform: translateY(-1px);
}
.hp-walk-wrap[open] > .hp-walk-summary {
    background: var(--el-accent, #5eb0ff);
    color: var(--el-hero, #001a4d);
    border-style: solid;
}
.hp-walk-wrap:not([open]) .hp-walk { display: none; } /* belt-and-braces — details already hides children */

/* Step cards — vertical stack, numbered via CSS counter. */
.hp-walk-steps {
    list-style: none;
    counter-reset: hp-step;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.hp-step {
    counter-increment: hp-step;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 14px;
    background: var(--hp-surface-alt);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-sm);
    align-items: start;
}
.hp-step-number {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    background: var(--hp-accent);
    color: var(--hp-accent-strong);
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.9rem;
    flex: 0 0 auto;
}
.hp-step-number::before { content: counter(hp-step); }
.hp-step-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.hp-step-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--hp-text);
    line-height: 1.3;
    margin: 0;
}
.hp-step-prose {
    font-size: 0.9rem;
    color: var(--hp-text-muted);
    line-height: 1.55;
    margin: 0;
}
.hp-step-prose strong { color: var(--hp-text); }
.hp-step-mock {
    margin-top: 6px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-sm);
    padding: 10px;
    position: relative;
    overflow: hidden;
}

/* ── Mock nav (phone-nav kind) ───────────────────────────────────────
   Matches the templated club-site's actual nav feel — text-link style
   with a home icon on the left + a highlighted target item. Not pill
   buttons on every item (that was the earlier version) — the real nav
   uses flat text with letter-spacing + only the ACTIVE / target item
   gets a bg pill. */
.hp-mock-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 10px;
    background: var(--hp-accent-strong);
    border-radius: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.hp-mock-nav::-webkit-scrollbar { display: none; }
.hp-mock-nav-item {
    padding: 8px 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    border-radius: 4px;
    line-height: 1;
}
.hp-mock-nav-item.hp-mock-nav-home {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px;
    padding: 0;
    background: rgba(255, 255, 255, 0.06);
    color: var(--hp-text);
    font-size: 0.95rem;
}
.hp-mock-nav-item.is-target {
    background: rgba(94, 176, 255, 0.16);
    color: var(--hp-accent);
    box-shadow: 0 0 0 2px rgba(94, 176, 255, 0.35);
}

/* ── Mock day-picker header (phone-booking-daychips kind) ───────────── */
.hp-mock-daybar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--hp-accent-strong);
    border-radius: 6px;
}
.hp-mock-daybar-btn {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: grid; place-items: center;
    color: var(--hp-text-muted);
    font-size: 0.8rem;
}
.hp-mock-daybar-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(94, 176, 255, 0.16);
    border: 1px solid var(--hp-accent);
    border-radius: 999px;
    color: var(--hp-accent);
    font-size: 0.8rem;
    font-weight: 700;
    animation: hp-flash 2.5s ease-in-out infinite;
}

/* ── Mock booking grid (phone-booking-grid kind) ─────────────────────
   Compact court×time grid. Highlighted cells "tap in" with a pulse. */
.hp-mock-grid {
    display: grid;
    grid-template-columns: 34px repeat(5, 1fr);
    gap: 3px;
    background: var(--hp-accent-strong);
    padding: 6px;
    border-radius: 6px;
}
.hp-mock-grid-corner,
.hp-mock-grid-col-hd,
.hp-mock-grid-row-hd,
.hp-mock-grid-cell {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    min-height: 22px;
    display: grid; place-items: center;
    font-size: 0.68rem;
    color: var(--hp-text-muted);
    font-weight: 700;
}
.hp-mock-grid-col-hd {
    background: rgba(255, 255, 255, 0.12);
    color: var(--hp-text);
}
.hp-mock-grid-row-hd {
    background: rgba(255, 255, 255, 0.08);
}
.hp-mock-grid-cell.is-selected {
    background: rgba(94, 176, 255, 0.35);
    border: 1.5px solid var(--hp-accent);
    box-shadow: inset 0 0 0 1px rgba(94, 176, 255, 0.4);
    animation: hp-cell-pop 0.4s ease-out;
}
.hp-mock-grid-cell.is-selected[data-order="1"] { animation-delay: 0.1s; animation-fill-mode: both; }
.hp-mock-grid-cell.is-selected[data-order="2"] { animation-delay: 0.4s; animation-fill-mode: both; }
.hp-mock-grid-cell.is-selected[data-order="3"] { animation-delay: 0.7s; animation-fill-mode: both; }
.hp-mock-grid-cell.is-selected[data-order="4"] { animation-delay: 1.0s; animation-fill-mode: both; }

/* Confirm pill floating at the bottom of the mock — used with grid. */
.hp-mock-confirm-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px auto 2px;
    padding: 8px 18px;
    background: var(--hp-accent);
    color: var(--hp-accent-strong);
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.8rem;
    box-shadow: 0 0 0 6px rgba(94, 176, 255, 0.14);
    animation: hp-pulse-soft 2s ease-in-out infinite;
}

/* ── Mock confirm modal (phone-booking-confirm kind) ─────────────────── */
.hp-mock-modal {
    max-width: min(320px, 92%);
    margin: 0 auto;
    background: var(--hp-accent-strong);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hp-mock-modal-title {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--hp-text);
    text-align: center;
    margin: 0;
}
.hp-mock-modal-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    color: var(--hp-text-muted);
    font-size: 0.75rem;
}
.hp-mock-modal-tabs {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
}
.hp-mock-modal-tab {
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hp-border);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--hp-text-muted);
}
.hp-mock-modal-tab.is-active {
    background: rgba(94, 176, 255, 0.16);
    border-color: var(--hp-accent);
    color: var(--hp-accent);
}
.hp-mock-modal-member-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px auto 0;
    padding: 5px 12px 5px 8px;
    background: rgba(94, 176, 255, 0.18);
    border: 1px solid var(--hp-accent);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--hp-accent);
    animation: hp-slide-in 0.5s ease-out both;
    animation-delay: 0.4s;
}
.hp-mock-modal-member-chip::before {
    content: '👤';
    font-size: 0.9em;
}
.hp-mock-modal-cta {
    display: block;
    margin-top: 8px;
    padding: 10px;
    background: var(--hp-accent);
    color: var(--hp-accent-strong);
    text-align: center;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.8rem;
    animation: hp-pulse-soft 2s ease-in-out infinite;
    animation-delay: 1s;
}

/* ── Pulse ring — overlays on top of anything for a "tap here" hint ── */
.hp-pulse {
    position: absolute;
    width: 30px; height: 30px;
    pointer-events: none;
    border-radius: 50%;
    top: 0; left: 0;
}
.hp-pulse::before,
.hp-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--hp-accent);
    animation: hp-pulse-ring 2.2s ease-out infinite;
}
.hp-pulse::after { animation-delay: 1.1s; }

/* ── Animations ─────────────────────────────────────────────────────── */
@keyframes hp-pulse-ring {
    0%   { transform: scale(0.6); opacity: 0.9; }
    80%  { transform: scale(2.2); opacity: 0; }
    100% { transform: scale(2.2); opacity: 0; }
}
@keyframes hp-pulse-soft {
    0%, 100% { box-shadow: 0 0 0 6px rgba(94, 176, 255, 0.14); transform: scale(1); }
    50%      { box-shadow: 0 0 0 10px rgba(94, 176, 255, 0.06); transform: scale(1.03); }
}
@keyframes hp-cell-pop {
    0%   { transform: scale(0.8); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}
@keyframes hp-flash {
    0%, 100% { background: rgba(94, 176, 255, 0.16); }
    50%      { background: rgba(94, 176, 255, 0.32); }
}
@keyframes hp-slide-in {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Auto-pause every animation when the details is closed — belt-and-
   braces (details hides children with display:none, but if a future
   consumer overrides display, animation-play-state saves CPU). */
.hp-walk-wrap:not([open]) .hp-walk *,
.hp-walk-wrap:not([open]) .hp-walk *::before,
.hp-walk-wrap:not([open]) .hp-walk *::after {
    animation-play-state: paused !important;
}

/* Reduced-motion: skip animations, jump to end state. */
@media (prefers-reduced-motion: reduce) {
    .hp-walk *,
    .hp-walk *::before,
    .hp-walk *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Narrow accordion body — stack step cards edge-to-edge with tighter
   internal padding so nothing horizontally clips inside a 320px FAQ. */
@container (max-width: 400px) {
    .hp-step { padding: 10px; gap: 8px; }
    .hp-step-number { width: 26px; height: 26px; font-size: 0.8rem; }
    .hp-mock-nav-item { padding: 5px 8px; font-size: 0.65rem; }
    .hp-mock-grid-col-hd, .hp-mock-grid-row-hd, .hp-mock-grid-cell { min-height: 18px; font-size: 0.62rem; }
}