<!--
==========================================================
SUPABASE SQL — run once in the Supabase SQL editor
==========================================================

CREATE TABLE IF NOT EXISTS public.belt_history (
  id          uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id     uuid REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
  belt        text NOT NULL,
  stripes     int  NOT NULL DEFAULT 0,
  date_awarded date,
  notes       text,
  created_at  timestamptz DEFAULT now()
);

ALTER TABLE public.belt_history ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users manage own belt history"
  ON public.belt_history
  USING (auth.uid() = user_id)
  WITH CHECK (auth.uid() = user_id);

-- Also add new columns to sessions if they don't exist:
ALTER TABLE public.sessions
  ADD COLUMN IF NOT EXISTS class_type        text,
  ADD COLUMN IF NOT EXISTS sweeps            int  DEFAULT 0,
  ADD COLUMN IF NOT EXISTS escapes           int  DEFAULT 0,
  ADD COLUMN IF NOT EXISTS submissions_used  text[] DEFAULT '{}',
  ADD COLUMN IF NOT EXISTS submissions_against text[] DEFAULT '{}';

-- Add strength_flag to sessions:
ALTER TABLE public.sessions
  ADD COLUMN IF NOT EXISTS strength_flag text;

-- Admin stats RPC (run once):
CREATE OR REPLACE FUNCTION get_admin_stats()
RETURNS json
LANGUAGE plpgsql
SECURITY DEFINER
SET search_path = public
AS $$
DECLARE result json;
BEGIN
  SELECT json_build_object(
    'total_sessions',  (SELECT COUNT(*)::int FROM sessions),
    'total_users',     (SELECT COUNT(DISTINCT user_id)::int FROM sessions),
    'sessions_7d',     (SELECT COUNT(*)::int FROM sessions WHERE created_at > NOW() - INTERVAL '7 days'),
    'sessions_30d',    (SELECT COUNT(*)::int FROM sessions WHERE created_at > NOW() - INTERVAL '30 days'),
    'ai_sessions',     (SELECT COUNT(*)::int FROM sessions WHERE source = 'ai'),
    'manual_sessions', (SELECT COUNT(*)::int FROM sessions WHERE source = 'manual'),
    'weakness_flags', (
      SELECT COALESCE(json_agg(json_build_object('flag', weakness_flag, 'count', cnt) ORDER BY cnt DESC), '[]'::json)
      FROM (SELECT weakness_flag, COUNT(*)::int as cnt FROM sessions WHERE weakness_flag IS NOT NULL AND weakness_flag <> '' GROUP BY weakness_flag ORDER BY cnt DESC LIMIT 60) t
    ),
    'strength_flags', (
      SELECT COALESCE(json_agg(json_build_object('flag', strength_flag, 'count', cnt) ORDER BY cnt DESC), '[]'::json)
      FROM (SELECT strength_flag, COUNT(*)::int as cnt FROM sessions WHERE strength_flag IS NOT NULL AND strength_flag <> '' GROUP BY strength_flag ORDER BY cnt DESC LIMIT 60) t
    ),
    'positions', (
      SELECT COALESCE(json_agg(json_build_object('position', position, 'count', cnt) ORDER BY cnt DESC), '[]'::json)
      FROM (SELECT position, COUNT(*)::int as cnt FROM sessions WHERE position IS NOT NULL AND position <> '' GROUP BY position ORDER BY cnt DESC LIMIT 20) t
    ),
    'class_types', (
      SELECT COALESCE(json_agg(json_build_object('type', COALESCE(class_type,'unspecified'), 'count', cnt) ORDER BY cnt DESC), '[]'::json)
      FROM (SELECT class_type, COUNT(*)::int as cnt FROM sessions GROUP BY class_type) t
    ),
    'submissions_used', (
      SELECT COALESCE(json_agg(json_build_object('sub', sub, 'count', cnt) ORDER BY cnt DESC), '[]'::json)
      FROM (SELECT sub, COUNT(*)::int as cnt FROM sessions, unnest(submissions_used) sub GROUP BY sub ORDER BY cnt DESC LIMIT 15) t
    ),
    'submissions_against', (
      SELECT COALESCE(json_agg(json_build_object('sub', sub, 'count', cnt) ORDER BY cnt DESC), '[]'::json)
      FROM (SELECT sub, COUNT(*)::int as cnt FROM sessions, unnest(submissions_against) sub GROUP BY sub ORDER BY cnt DESC LIMIT 15) t
    ),
    'sessions_by_week', (
      SELECT COALESCE(json_agg(json_build_object('week', week, 'count', cnt) ORDER BY week), '[]'::json)
      FROM (SELECT DATE_TRUNC('week', created_at)::date as week, COUNT(*)::int as cnt FROM sessions GROUP BY week ORDER BY week DESC LIMIT 16) t
    )
  ) INTO result;
  RETURN result;
END;
$$;

GRANT EXECUTE ON FUNCTION get_admin_stats() TO authenticated;

-- Nemesis feature (run once):
CREATE TABLE IF NOT EXISTS public.nemesis (
  id          uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id     uuid REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
  name        text NOT NULL,
  belt        text DEFAULT 'unknown',
  type        text NOT NULL DEFAULT 'training_partner',
  gym         text,
  notes       text,
  created_at  timestamptz DEFAULT now()
);
ALTER TABLE public.nemesis ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Users manage own nemesis" ON public.nemesis USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id);

CREATE TABLE IF NOT EXISTS public.nemesis_rolls (
  id          uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id     uuid REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
  nemesis_id  uuid REFERENCES public.nemesis(id) ON DELETE CASCADE NOT NULL,
  date        date DEFAULT CURRENT_DATE,
  result      text NOT NULL,
  notes       text,
  created_at  timestamptz DEFAULT now()
);
ALTER TABLE public.nemesis_rolls ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Users manage own nemesis rolls" ON public.nemesis_rolls USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id);

==========================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <title>Flowmora</title>
  <script>
    // PostHog analytics — manual events only (no autocapture noise)
    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once unregister identify alias reset group people.set people.set_once".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
    posthog.init('phc_DoUJRcnDpaeXfunhRNr62VDDYUmD94d6xtcgAgfCYRT6', {
      api_host: 'https://us.i.posthog.com',
      autocapture: false,
      capture_pageview: false,
      capture_exceptions: true,
      persistence: 'localStorage'
    });
  </script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preload" as="image" href="/hero.jpg" fetchpriority="high">
  <link href="https://fonts.googleapis.com/css2?family=Shojumaru&display=swap" rel="stylesheet">
  <!-- Bundled, not CDN: these block startup, and a failed CDN fetch on bad
       gym Wi-Fi left the app frozen on its splash screen. Same builds as the
       former jsDelivr / d3js.org URLs. -->
  <script src="vendor/supabase-2.105.4.js"></script>
  <script src="vendor/d3-7.9.0.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    /* ── Global 3D / Holographic system ───────────────────── */
    @keyframes holoFloat {
      0%, 100% { transform: translateY(0px); filter: drop-shadow(0 0 8px rgba(230,59,48,0.15)); }
      50% { transform: translateY(-4px); filter: drop-shadow(0 0 14px rgba(230,59,48,0.28)); }
    }
    @keyframes holoGlow {
      0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 24px rgba(0,0,0,0.55), 0 0 20px rgba(230,59,48,0.08); }
      50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 32px rgba(0,0,0,0.5), 0 0 36px rgba(230,59,48,0.18); }
    }
    @keyframes scanLine {
      0% { transform: translateY(-100%); opacity: 0; }
      10% { opacity: 0.6; }
      90% { opacity: 0.6; }
      100% { transform: translateY(400%); opacity: 0; }
    }
    @keyframes borderGlow {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

    html { overflow-x: hidden; width: 100%; }
    body {
      background: #05040c;
      color: #f0f0f0;
      font-family: system-ui, sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
      width: 100%;
      max-width: 100%;
      position: relative;
    }
    /* Atmospheric grid mesh — visible perspective grid */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -2;
      background-image:
        linear-gradient(rgba(230,59,48,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(230,59,48,0.07) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    /* Ambient red glow blobs */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(ellipse 60% 45% at 5% 0%, rgba(200,30,10,0.28) 0%, transparent 50%),
        radial-gradient(ellipse 45% 30% at 95% 100%, rgba(140,15,5,0.18) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(10,6,20,0.6) 0%, transparent 100%);
      pointer-events: none;
    }
    #bgImage { display: none; }
    .app { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 1.5rem calc(80px + env(safe-area-inset-bottom, 0px)); }

    /* ── Header ─────────────────────────────────────────── */
    .header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: linear-gradient(180deg, rgba(8,4,4,0.97) 0%, rgba(5,3,3,0.92) 100%);
      backdrop-filter: blur(32px);
      -webkit-backdrop-filter: blur(32px);
      border-bottom: 0.5px solid rgba(255,255,255,0.06);
      box-shadow: 0 1px 0 rgba(230,59,48,0.08), 0 4px 40px rgba(0,0,0,0.7), 0 0 60px rgba(100,0,0,0.15);
      margin: 0 -1.5rem 2.5rem;
      /* Top padding reserves the iPhone status bar / Dynamic Island zone */
      padding: calc(1.25rem + env(safe-area-inset-top, 0px)) 1.5rem 1.25rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .logo-block { display: flex; align-items: center; gap: 12px; }
    .logo-img { height: 132px; object-fit: contain; }
    .brand-block { display: flex; flex-direction: column; justify-content: center; line-height: 1; }
    .brand-name { font-family: 'Shojumaru', cursive; font-size: 26px; color: #f0f0f0; letter-spacing: 1px; text-transform: uppercase; line-height: 1; margin-bottom: 6px; }
    .brand-tagline { font-family: system-ui, sans-serif; font-size: 8px; color: #e63b30; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; }
    .tagline { font-size: 12px; color: #666; margin-top: 0.2rem; }
    .header-controls { display: flex; align-items: center; gap: 12px; }
    .voice-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #555; cursor: pointer; }
    .toggle-track { width: 32px; height: 18px; background: #2a2a2a; border-radius: 9px; position: relative; transition: background 0.2s; }
    .toggle-track.on { background: #e63b30; }
    .toggle-thumb { width: 14px; height: 14px; background: white; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: left 0.2s; }
    .toggle-track.on .toggle-thumb { left: 16px; }
    .user-display { display: flex; align-items: center; gap: 8px; }

    /* Phone-width header: compact logo so the controls (voice, belt,
       settings gear) actually fit on screen instead of clipping off-edge */
    @media (max-width: 560px) {
      .header { padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 1rem 0.75rem; }
      .logo-block { gap: 8px; }
      .logo-img { height: 64px; }
      .brand-name { font-size: 17px; margin-bottom: 3px; }
      .brand-tagline { font-size: 6px; letter-spacing: 2px; }
      .header-controls { gap: 8px; flex-shrink: 0; }
      #voiceLabel { display: none; }
    }

    /* ── Bottom nav ──────────────────────────────────────── */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: linear-gradient(180deg, rgba(6,4,4,0.9) 0%, rgba(4,3,3,0.97) 100%);
      backdrop-filter: blur(32px);
      -webkit-backdrop-filter: blur(32px);
      border-top: 0.5px solid rgba(255,255,255,0.06);
      box-shadow: 0 -1px 0 rgba(230,59,48,0.07), 0 -8px 40px rgba(0,0,0,0.6);
      display: flex;
      justify-content: space-around;
      align-items: stretch;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 10px 0 12px;
      cursor: pointer;
      border: none;
      background: none;
      color: #444;
      font-family: inherit;
      font-size: 11px;
      letter-spacing: 0.3px;
      transition: color 0.2s;
      -webkit-tap-highlight-color: transparent;
      position: relative;
    }
    .nav-item svg { width: 22px; height: 22px; fill: currentColor; transition: filter 0.2s; }
    .nav-item.active { color: #e63b30; }
    .nav-item.active svg { filter: drop-shadow(0 0 6px rgba(230,59,48,0.7)); }
    .nav-item.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: #e63b30; border-radius: 0 0 2px 2px; box-shadow: 0 0 8px rgba(230,59,48,0.8); }
    .nav-item:not(.active):hover { color: #777; }
    .user-email { font-size: 12px; color: #555; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .signout-btn { background: none; border: 0.5px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 0.3rem 0.75rem; font-size: 12px; color: #555; cursor: pointer; }
    .signout-btn:hover { border-color: #e63b30; color: #e63b30; }

    /* ── Cards (3D glassmorphism) ───────────────────────── */
    .card {
      background: linear-gradient(160deg, rgba(24,15,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      border: 1px solid rgba(230,59,48,0.22);
      border-top-color: rgba(230,80,68,0.35);
      border-radius: 18px;
      padding: 1.5rem;
      margin-bottom: 1rem;
      box-shadow:
        inset 0 1px 0 rgba(255,120,100,0.12),
        0 4px 8px rgba(0,0,0,0.6),
        0 20px 60px rgba(0,0,0,0.75),
        0 0 30px rgba(230,59,48,0.08);
      position: relative;
      overflow: hidden;
      transition: box-shadow 0.25s, border-color 0.25s;
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 0.6s;
    }
    .card:nth-child(2) { animation-delay: 2.1s; }
    .card:nth-child(3) { animation-delay: 3.6s; }
    .card:nth-child(4) { animation-delay: 1.3s; }
    .card:nth-child(5) { animation-delay: 4.2s; }
    .card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 5%, rgba(255,120,100,0.3) 40%, rgba(255,80,60,0.2) 60%, transparent 95%);
      border-radius: 18px 18px 0 0;
      pointer-events: none;
    }
    .card-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; }
    textarea {
      width: 100%;
      background: rgba(255,255,255,0.04);
      border: 0.5px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 0.875rem 1rem;
      font-size: 14px;
      color: #e0e0e0;
      resize: none;
      font-family: inherit;
      line-height: 1.6;
    }
    textarea:focus { outline: none; border-color: #e63b30; }
    textarea::placeholder { color: #444; }
    .input-row { position: relative; }
    .mic-btn { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; background: rgba(230,59,48,0.12); border: 0.5px solid #e63b30; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; }
    .mic-btn:hover { background: rgba(230,59,48,0.22); }
    .mic-btn.listening { background: #e63b30; animation: micPulse 1s infinite; }
    .mic-btn svg { width: 14px; height: 14px; fill: #e63b30; }
    .mic-btn.listening svg { fill: white; }
    @keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(230,59,48,0.4); } 50% { box-shadow: 0 0 0 6px rgba(230,59,48,0); } }
    .listening-indicator { font-size: 12px; color: #e63b30; margin-top: 0.5rem; display: none; }
    .listening-indicator.active { display: block; }
    .submit-btn { width: 100%; background: linear-gradient(135deg, #e63b30 0%, #c92b22 100%); border: none; border-radius: 10px; padding: 0.875rem; font-size: 15px; font-weight: 600; color: white; cursor: pointer; margin-top: 0.75rem; transition: all 0.2s; box-shadow: 0 4px 20px rgba(230,59,48,0.4), inset 0 1px 0 rgba(255,150,140,0.3), 0 1px 0 rgba(0,0,0,0.5); letter-spacing: 0.3px; }
    .submit-btn:hover { background: linear-gradient(135deg, #f04540 0%, #d93028 100%); box-shadow: 0 6px 28px rgba(230,59,48,0.55), inset 0 1px 0 rgba(255,150,140,0.4); transform: translateY(-1px); }
    .submit-btn:active { transform: translateY(0); }
    .submit-btn:disabled { background: rgba(255,255,255,0.06); color: #444; cursor: not-allowed; box-shadow: none; }
    .section-title { font-size: 10px; color: #666; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 0.75rem; margin-top: 1.5rem; font-weight: 700; }

    /* ── Flow cards ─────────────────────────────────────── */
    .flow-card {
      background: linear-gradient(160deg, rgba(22,12,16,0.92) 0%, rgba(10,7,14,0.97) 100%);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(230,59,48,0.2);
      border-radius: 16px;
      padding: 1.25rem;
      margin-bottom: 0.75rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 20px rgba(0,0,0,0.55), 0 12px 40px rgba(0,0,0,0.3);
      position: relative;
      overflow: hidden;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .flow-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 20px rgba(0,0,0,0.55), 0 0 30px rgba(230,59,48,0.1); }
    .flow-chain { border-left: 2px solid #e63b30; padding-left: 1rem; margin-bottom: 0.75rem; }
    .flow-title { font-size: 13px; font-weight: 500; color: #ffa5a0; margin-bottom: 0.4rem; }
    .flow-body { font-size: 14px; color: #aaa; line-height: 1.6; }
    .deeper-btn { background: rgba(230,59,48,0.1); border: 0.5px solid #e63b30; border-radius: 6px; padding: 0.4rem 0.875rem; font-size: 12px; color: #e63b30; cursor: pointer; transition: all 0.15s; }
    .deeper-btn:hover { background: rgba(230,59,48,0.2); }
    .deeper-response { background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.07); border-radius: 8px; padding: 1rem; margin-top: 0.75rem; font-size: 14px; color: #ccc; line-height: 1.7; display: none; }

    /* ── Drills ─────────────────────────────────────────── */
    .drill-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 0.5px solid rgba(255,255,255,0.05); }
    .drill-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .drill-num { background: rgba(230,59,48,0.12); color: #e63b30; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; flex-shrink: 0; margin-top: 2px; }
    .drill-content { flex: 1; }
    .drill-text { font-size: 14px; color: #aaa; line-height: 1.6; margin-bottom: 0.5rem; }
    .drill-rating { display: flex; gap: 4px; margin-bottom: 0.5rem; }
    .star { font-size: 18px; cursor: pointer; color: #333; transition: color 0.1s; }
    .star.active { color: #e63b30; }
    .drill-notes { width: 100%; background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.07); border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 13px; color: #aaa; font-family: inherit; resize: none; }
    .drill-notes:focus { outline: none; border-color: #e63b30; }
    .drill-notes::placeholder { color: #333; }
    .save-drill-btn { background: none; border: 0.5px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 0.3rem 0.75rem; font-size: 12px; color: #555; cursor: pointer; margin-top: 0.4rem; transition: all 0.15s; }
    .save-drill-btn:hover { border-color: #e63b30; color: #e63b30; }
    .saved-badge { font-size: 11px; color: #4ade80; margin-left: 8px; display: none; }

    /* ── Video cards ─────────────────────────────────────── */
    .video-card { background: rgba(10,10,10,0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 0.5px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 0.875rem 1rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 12px; cursor: pointer; }
    .video-card:hover { border-color: #e63b30; }
    .video-thumb { width: 40px; height: 40px; background: #e63b30; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .video-info { flex: 1; min-width: 0; }
    .video-title { font-size: 13px; color: #e0e0e0; margin-bottom: 2px; }
    .video-sub { font-size: 11px; color: #555; }
    .verified-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #e63b30; background: rgba(230,59,48,0.12); border: 0.5px solid rgba(230,59,48,0.35); border-radius: 20px; padding: 1.5px 7px; vertical-align: middle; white-space: nowrap; }
    .video-thumb-img { width: 100px; height: 56px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
    .video-thumb-shimmer { width: 100px; height: 56px; background: rgba(255,255,255,0.07); border-radius: 6px; flex-shrink: 0; animation: shimmer 1.5s ease-in-out infinite; }
    @keyframes shimmer { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } }

    /* ── Chat ────────────────────────────────────────────── */
    .chat-section { margin-top: 1.5rem; }
    .chat-messages { background: rgba(6,6,6,0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 0.5px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 1rem; margin-bottom: 0.75rem; max-height: 300px; overflow-y: auto; }
    .chat-msg { margin-bottom: 1rem; }
    .chat-msg:last-child { margin-bottom: 0; }
    .chat-msg.user .bubble { background: rgba(230,59,48,0.15); border: 0.5px solid rgba(230,59,48,0.3); border-radius: 8px 8px 2px 8px; padding: 0.75rem 1rem; font-size: 14px; color: #ffa5a0; display: inline-block; max-width: 85%; }
    .chat-msg.assistant .bubble { background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 8px 8px 8px 2px; padding: 0.75rem 1rem; font-size: 14px; color: #ccc; line-height: 1.7; display: inline-block; max-width: 95%; }
    .chat-msg.user { text-align: right; }
    .chat-input-row { display: flex; gap: 8px; align-items: center; }
    .chat-input-wrap { flex: 1; position: relative; }
    .chat-input { width: 100%; background: rgba(8,8,8,0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 0.75rem 2.5rem 0.75rem 1rem; font-size: 14px; color: #e0e0e0; font-family: inherit; }
    .chat-input:focus { outline: none; border-color: #e63b30; }
    .chat-input::placeholder { color: #444; }
    .chat-mic { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; background: rgba(230,59,48,0.1); border: 0.5px solid #e63b30; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .chat-mic.listening { background: #e63b30; animation: micPulse 1s infinite; }
    .chat-mic svg { width: 12px; height: 12px; fill: #e63b30; }
    .chat-mic.listening svg { fill: white; }
    .chat-send { background: #e63b30; border: none; border-radius: 8px; padding: 0.75rem 1.25rem; color: white; font-size: 14px; cursor: pointer; flex-shrink: 0; }
    .chat-send:hover { background: #cc2f25; }
    .chat-send:disabled { background: rgba(255,255,255,0.06); color: #444; cursor: not-allowed; }
    .speaking-indicator { font-size: 12px; color: #e63b30; margin-top: 0.4rem; display: none; }

    /* ── Weakness flag ───────────────────────────────────── */
    .weakness-flag { background: rgba(26,18,8,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 0.5px solid #854f0b; border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 13px; color: #ef9f27; }
    .weakness-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #854f0b; margin-bottom: 0.25rem; }
    .strength-flag { background: rgba(74,222,128,0.08); border-left: 2px solid #4ade80; border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; font-size: 13px; color: #d0ffd0; margin-top: 0.5rem; margin-bottom: 1rem; }
    .strength-label { font-size: 10px; color: #4ade80; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; margin-bottom: 0.25rem; }

    /* ── Loading ─────────────────────────────────────────── */
    .loading { display: flex; align-items: center; gap: 8px; color: #555; font-size: 14px; padding: 1rem 0; }
    .dot { width: 6px; height: 6px; background: #e63b30; border-radius: 50%; animation: pulse 1.2s infinite; }
    .dot:nth-child(2) { animation-delay: 0.2s; }
    .dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

    /* ── Progress view ───────────────────────────────────── */
    .progress-view { display: none; }
    .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 1rem; }
    .stat-card {
      background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(230,59,48,0.2);
      border-top-color: rgba(230,80,60,0.35);
      border-radius: 14px;
      padding: 1rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.3);
      position: relative; overflow: hidden;
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 0.3s;
    }
    .stat-card:nth-child(2) { animation-delay: 1.8s; }
    .stat-card:nth-child(3) { animation-delay: 3.3s; }
    .stat-card:nth-child(4) { animation-delay: 4.8s; }
    .stat-card::after { content:''; position:absolute; top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); pointer-events:none; }
    .stat-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.25rem; }
    .stat-value { font-size: 24px; font-weight: 600; color: #f0f0f0; text-shadow: 0 0 20px rgba(230,59,48,0.2); }
    .stat-sub { font-size: 12px; color: #555; margin-top: 0.25rem; }
    .session-item {
      background: linear-gradient(160deg, rgba(22,12,16,0.92) 0%, rgba(10,7,14,0.97) 100%);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(230,59,48,0.18);
      border-top-color: rgba(230,80,60,0.3);
      border-radius: 14px;
      padding: 1rem 1.25rem;
      margin-bottom: 0.5rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 6px 24px rgba(0,0,0,0.65);
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 0.5s;
    }
    .session-item:nth-child(2) { animation-delay: 2.0s; }
    .session-item:nth-child(3) { animation-delay: 3.5s; }
    .session-item:nth-child(4) { animation-delay: 1.1s; }
    .session-item:nth-child(5) { animation-delay: 4.4s; }
    .session-item:nth-child(6) { animation-delay: 2.7s; }
    .session-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
    .session-pos { font-size: 13px; font-weight: 500; color: #ffa5a0; }
    .session-date { font-size: 11px; color: #555; }
    .session-problem { font-size: 13px; color: #888; line-height: 1.5; margin-bottom: 0.25rem; }
    .session-meta { display: flex; gap: 12px; font-size: 12px; color: #555; }
    .pos-bar-item { display: flex; align-items: center; gap: 10px; margin-bottom: 0.75rem; }
    .pos-bar-item:last-child { margin-bottom: 0; }
    .pos-bar-label { font-size: 13px; color: #aaa; width: 110px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pos-bar-track { flex: 1; background: rgba(255,255,255,0.05); border-radius: 4px; height: 6px; }
    .pos-bar-fill { background: linear-gradient(90deg, #c92b22, #e63b30); border-radius: 4px; height: 6px; transition: width 0.3s; box-shadow: 0 0 8px rgba(230,59,48,0.4); }
    .pos-bar-count { font-size: 12px; color: #555; width: 24px; text-align: right; flex-shrink: 0; }
    .weak-item { background: rgba(26,18,8,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 0.5px solid #854f0b; border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 0.5rem; font-size: 13px; color: #ef9f27; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; animation: holoFloat 5s ease-in-out infinite; animation-delay: 1.4s; }
    .weak-item:nth-child(2) { animation-delay: 2.9s; }
    .weak-item:nth-child(3) { animation-delay: 4.3s; }
    .weak-text { flex: 1; line-height: 1.5; }
    .weak-count { font-size: 11px; color: #854f0b; background: rgba(133,79,11,0.2); border-radius: 10px; padding: 1px 7px; flex-shrink: 0; margin-top: 1px; }
    .empty-state { text-align: center; padding: 3rem 1rem; color: #444; font-size: 14px; }
    .progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
    .log-btn { background: linear-gradient(135deg, #e63b30 0%, #c92b22 100%); border: none; border-radius: 8px; padding: 0.5rem 1rem; font-size: 13px; font-weight: 600; color: white; cursor: pointer; box-shadow: 0 3px 12px rgba(230,59,48,0.4), inset 0 1px 0 rgba(255,150,140,0.25); transition: all 0.2s; }
    .log-btn:hover { box-shadow: 0 5px 20px rgba(230,59,48,0.55); transform: translateY(-1px); }
    .session-item.clickable { cursor: pointer; }
    .session-item.clickable:hover { border-color: #e63b30; }
    .session-chevron { color: #555; font-size: 18px; line-height: 1; }
    .source-tag { font-size: 10px; background: rgba(230,59,48,0.12); color: #e63b30; border-radius: 4px; padding: 2px 6px; }
    .ai-tag { background: rgba(74,222,128,0.1); color: #4ade80; }

    /* ── Collapsible sections ────────────────────────────── */
    .collapsible-section { margin-bottom: 1rem; }
    .collapsible-header { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 0.35rem 0; user-select: none; }
    .collapsible-header .section-title { margin: 0; }
    .collapsible-pill { font-size: 11px; background: rgba(255,255,255,0.07); color: #555; border-radius: 10px; padding: 1px 7px; }
    .collapsible-chev { color: #555; font-size: 16px; margin-left: auto; transition: transform 0.2s; display: inline-block; }
    .collapsible-chev.open { transform: rotate(90deg); }
    .collapsible-body { display: none; padding-top: 0.5rem; }
    .collapsible-body.open { display: block; }

    /* ── Session filter row ──────────────────────────────── */
    .session-filter-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; gap: 8px; }
    .session-filter-select { background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 0.35rem 0.75rem; font-size: 13px; color: #aaa; font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; }
    .session-filter-select:focus { outline: none; border-color: #e63b30; }
    .session-count-label { font-size: 12px; color: #555; white-space: nowrap; }

    /* ── Session detail ──────────────────────────────────── */
    .detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
    .back-btn { background: none; border: 0.5px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 0.4rem 0.875rem; font-size: 13px; color: #888; cursor: pointer; }
    .back-btn:hover { border-color: #e63b30; color: #e63b30; }
    .delete-btn { background: none; border: 0.5px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 0.4rem 0.875rem; font-size: 13px; color: #555; cursor: pointer; }
    .delete-btn:hover { border-color: #e24b4a; color: #e24b4a; }
    .detail-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
    .detail-pos { font-size: 18px; font-weight: 500; color: #ffa5a0; }
    .detail-date { font-size: 13px; color: #555; }
    .round-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 1.25rem; text-align: center; }
    .round-num { font-size: 28px; font-weight: 500; color: #f0f0f0; }
    .round-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
    .round-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 0.75rem; }
    .round-input-group label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 4px; }
    .round-input { width: 100%; background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 0.5rem; font-size: 16px; color: #e0e0e0; text-align: center; font-family: inherit; }
    .round-input:focus { outline: none; border-color: #e63b30; }

    /* ── Log modal form ──────────────────────────────────── */
    .log-form-wrap { position: relative; z-index: 1; width: 100%; max-width: 480px; background: rgba(8,8,8,0.92); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border: 0.5px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 1.5rem; }
    .log-form-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
    .form-group { margin-bottom: 1rem; }
    .form-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 0.4rem; }
    .log-input { width: 100%; background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 0.75rem 1rem; font-size: 14px; color: #e0e0e0; font-family: inherit; resize: none; }
    .log-input:focus { outline: none; border-color: #e63b30; }
    .form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

    /* ── Video modal ─────────────────────────────────────── */
    .video-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem 1rem calc(68px + env(safe-area-inset-bottom, 0px) + 1rem); }
    .video-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.92); cursor: pointer; }
    .video-player-wrap { position: relative; z-index: 1; width: 100%; max-width: 640px; }
    .video-close { position: absolute; top: -38px; right: 0; background: none; border: none; color: #aaa; font-size: 20px; cursor: pointer; padding: 4px 10px; }
    .video-close:hover { color: #fff; }
    .video-ratio { position: relative; padding-bottom: 56.25%; border-radius: 10px; overflow: hidden; background: #000; }
    .video-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

    /* ── Auth modal ──────────────────────────────────────── */
    .auth-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0,0,0,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    .auth-card { width: 100%; max-width: 400px; background: linear-gradient(145deg, rgba(20,12,12,0.96) 0%, rgba(10,8,12,0.99) 100%); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 0.5px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 2.25rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 24px 80px rgba(0,0,0,0.8), 0 0 60px rgba(100,0,0,0.15); }
    .auth-logo-img { height: 84px; object-fit: contain; display: block; margin: 0 auto 0.35rem; }
    .auth-tagline { font-size: 13px; color: #555; text-align: center; margin-bottom: 2rem; }
    .auth-tabs { display: flex; gap: 4px; background: rgba(255,255,255,0.05); border-radius: 8px; padding: 3px; margin-bottom: 1.5rem; }
    .auth-tab { flex: 1; padding: 0.5rem; border-radius: 6px; font-size: 13px; color: #666; cursor: pointer; border: none; background: none; transition: all 0.15s; }
    .auth-tab.active { background: #e63b30; color: white; }
    .auth-error { color: #e24b4a; font-size: 13px; margin-bottom: 1rem; display: none; }
    .age-guardian { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: #aaa; line-height: 1.4; margin-top: 0.6rem; cursor: pointer; }
    .age-guardian input { margin-top: 2px; accent-color: #e63b30; flex-shrink: 0; }
    .auth-success { color: #4ade80; font-size: 13px; margin-top: 1rem; text-align: center; display: none; }

    /* ── Belt badge ─────────────────────────────────────── */
    .belt-badge { font-size: 11px; border-radius: 6px; padding: 3px 8px; cursor: pointer; border: none; font-family: inherit; font-weight: 500; letter-spacing: 0.3px; transition: opacity 0.15s; }
    .belt-badge:hover { opacity: 0.8; }
    .belt-white  { background: rgba(255,255,255,0.12); color: #ccc; border: 0.5px solid rgba(255,255,255,0.2); }
    .belt-blue   { background: rgba(59,100,230,0.18); color: #7ba4ff; border: 0.5px solid rgba(59,100,230,0.35); }
    .belt-purple { background: rgba(139,76,230,0.18); color: #c4a0ff; border: 0.5px solid rgba(139,76,230,0.35); }
    .belt-brown  { background: rgba(140,80,30,0.25); color: #d4974a; border: 0.5px solid rgba(140,80,30,0.45); }
    .belt-black  { background: rgba(255,255,255,0.06); color: #888; border: 0.5px solid rgba(255,255,255,0.12); }

    /* ── Profile modal ───────────────────────────────────── */
    .profile-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px)); background: rgba(0,0,0,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    .profile-card { width: 100%; max-width: 400px; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; background: rgba(10,10,10,0.92); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border: 0.5px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 1.75rem; }
    .profile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
    .profile-title { font-size: 15px; font-weight: 500; color: #f0f0f0; }
    .belt-selector { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 0.4rem; }
    .belt-option { padding: 0.5rem 0; border-radius: 8px; font-size: 12px; font-weight: 500; text-align: center; cursor: pointer; border: 1.5px solid transparent; transition: all 0.15s; }
    .belt-option.selected { border-color: white; }
    .belt-option.white  { background: rgba(255,255,255,0.08); color: #ccc; }
    .belt-option.blue   { background: rgba(59,100,230,0.18); color: #7ba4ff; }
    .belt-option.purple { background: rgba(139,76,230,0.18); color: #c4a0ff; }
    .belt-option.brown  { background: rgba(140,80,30,0.25); color: #d4974a; }
    .belt-option.black  { background: rgba(255,255,255,0.06); color: #888; }
    .belt-option.selected.white  { border-color: #ccc; }
    .belt-option.selected.blue   { border-color: #7ba4ff; }
    .belt-option.selected.purple { border-color: #c4a0ff; }
    .belt-option.selected.brown  { border-color: #d4974a; }
    .belt-option.selected.black  { border-color: #888; }
    .profile-save-btn { width: 100%; background: #e63b30; border: none; border-radius: 8px; padding: 0.8rem; font-size: 14px; font-weight: 500; color: white; cursor: pointer; margin-top: 1.25rem; transition: background 0.15s; }
    .profile-save-btn:hover { background: #cc2f25; }
    .profile-save-btn:disabled { background: rgba(255,255,255,0.06); color: #444; cursor: not-allowed; }
    .profile-saved { font-size: 12px; color: #4ade80; text-align: center; margin-top: 0.75rem; display: none; }

    /* ── Calendar view ──────────────────────────────────── */
    .calendar-view { display: none; }

    /* Location setup */
    .cal-setup { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 55vh; text-align: center; padding: 1rem; }
    .cal-setup-icon { font-size: 52px; margin-bottom: 1rem; }
    .cal-setup-title { font-size: 20px; font-weight: 500; color: #f0f0f0; margin-bottom: 0.5rem; }
    .cal-setup-sub { font-size: 14px; color: #555; margin-bottom: 2rem; max-width: 280px; line-height: 1.6; }
    .cal-setup-btn { width: 100%; max-width: 300px; padding: 0.875rem 1.25rem; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; margin-bottom: 0.75rem; border: none; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .cal-setup-btn.primary { background: #e63b30; color: white; }
    .cal-setup-btn.primary:hover { background: #cc2f25; }
    .cal-setup-btn.secondary { background: rgba(255,255,255,0.05); color: #aaa; border: 0.5px solid rgba(255,255,255,0.1) !important; }
    .cal-setup-btn.secondary:hover { border-color: rgba(230,59,48,0.5) !important; color: #e63b30; }
    .cal-divider { font-size: 12px; color: #333; margin: 0.25rem 0 1rem; }
    .cal-manual-row { display: flex; gap: 8px; width: 100%; max-width: 300px; }
    .cal-loc-input { flex: 1; background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 0.75rem 1rem; font-size: 14px; color: #e0e0e0; font-family: inherit; }
    .cal-loc-input:focus { outline: none; border-color: #e63b30; }
    .cal-go-btn { background: #e63b30; border: none; border-radius: 8px; padding: 0.75rem 1rem; color: white; font-size: 14px; cursor: pointer; flex-shrink: 0; }
    .cal-go-btn:hover { background: #cc2f25; }

    /* Calendar header */
    .cal-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
    .cal-loc-chip { display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 0.3rem 0.875rem 0.3rem 0.6rem; font-size: 13px; color: #aaa; cursor: pointer; transition: all 0.15s; }
    .cal-loc-chip:hover { border-color: #e63b30; color: #e63b30; }
    .cal-loc-chip svg { width: 13px; height: 13px; fill: currentColor; }
    .cal-refresh-btn { background: none; border: 0.5px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 0.3rem 0.75rem; font-size: 12px; color: #555; cursor: pointer; }
    .cal-refresh-btn:hover { border-color: #e63b30; color: #e63b30; }

    /* Filters */
    .cal-filters { display: flex; gap: 6px; margin-bottom: 1.25rem; flex-wrap: wrap; align-items: center; }
    .cal-radius { background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 0.3rem 0.75rem; font-size: 12px; color: #aaa; font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; }
    .cal-radius:focus { outline: none; border-color: #e63b30; }
    .type-pill { padding: 0.3rem 0.875rem; border-radius: 20px; font-size: 12px; cursor: pointer; border: 0.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: #555; transition: all 0.15s; font-family: inherit; }
    .type-pill.on-seminar     { background: rgba(139,76,230,0.15);  border-color: rgba(139,76,230,0.4);  color: #c4a0ff; }
    .type-pill.on-competition { background: rgba(230,180,48,0.14);  border-color: rgba(230,180,48,0.4);  color: #f0c040; }
    .type-pill.on-local       { background: rgba(59,150,230,0.14);  border-color: rgba(59,150,230,0.4);  color: #7ab8ff; }
    .type-pill.on-televised   { background: rgba(230,59,48,0.14);   border-color: rgba(230,59,48,0.4);   color: #ff8a83; }

    /* Event cards */
    .event-card {
      background: linear-gradient(145deg, rgba(18,12,12,0.9) 0%, rgba(10,8,10,0.97) 100%);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 0.5px solid rgba(230,59,48,0.2);
      border-top-color: rgba(230,80,60,0.32);
      border-radius: 16px; padding: 1rem 1.25rem; margin-bottom: 0.75rem; cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 4px 20px rgba(0,0,0,0.5), 0 0 20px rgba(230,59,48,0.06);
      transition: all 0.2s;
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 0.9s;
    }
    .event-card:nth-child(2) { animation-delay: 2.4s; }
    .event-card:nth-child(3) { animation-delay: 3.9s; }
    .event-card:nth-child(4) { animation-delay: 1.5s; }
    .event-card:nth-child(5) { animation-delay: 4.6s; }
    .event-card:hover { border-color: rgba(230,59,48,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 4px 20px rgba(0,0,0,0.5), 0 0 24px rgba(230,59,48,0.12); }
    .event-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 0.5rem; }
    .event-title { font-size: 14px; font-weight: 500; color: #f0f0f0; line-height: 1.4; flex: 1; }
    .event-badge { font-size: 10px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; margin-top: 2px; }
    .badge-seminar     { background: rgba(139,76,230,0.2);  color: #c4a0ff; }
    .badge-competition { background: rgba(230,180,48,0.18); color: #f0c040; }
    .badge-local       { background: rgba(59,150,230,0.18); color: #7ab8ff; }
    .badge-televised   { background: rgba(230,59,48,0.18);  color: #ff8a83; }
    .event-date { font-size: 13px; color: #e63b30; font-weight: 500; margin-bottom: 0.3rem; }
    .event-location-line { font-size: 12px; color: #555; margin-bottom: 0.4rem; display: flex; align-items: center; gap: 4px; }
    .event-snippet { font-size: 13px; color: #666; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .event-thumb { width: 70px; height: 50px; object-fit: cover; border-radius: 7px; flex-shrink: 0; }

    /* Event detail */
    .event-detail-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
    .event-detail-badge { font-size: 11px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; padding: 3px 9px; border-radius: 5px; }
    .event-detail-date { font-size: 15px; color: #e63b30; font-weight: 500; margin-bottom: 0.5rem; }
    .event-detail-title { font-size: 21px; font-weight: 600; color: #f0f0f0; line-height: 1.3; margin-bottom: 0.75rem; }
    .event-detail-venue { font-size: 14px; color: #777; margin-bottom: 0.25rem; }
    .event-detail-loc { font-size: 13px; color: #555; margin-bottom: 1rem; }
    .event-detail-desc { font-size: 14px; color: #aaa; line-height: 1.75; margin-top: 1rem; }
    .event-reg-btn { width: 100%; background: #e63b30; border: none; border-radius: 10px; padding: 1rem; font-size: 15px; font-weight: 500; color: white; cursor: pointer; margin-top: 1.75rem; transition: background 0.15s; }
    .event-reg-btn:hover { background: #cc2f25; }
    .event-no-link { font-size: 13px; color: #444; text-align: center; margin-top: 1rem; }

    /* ── Tool activity chips ─────────────────────────────── */
    .tool-activity { display: none; flex-wrap: wrap; gap: 6px; margin-bottom: 0.75rem; align-items: center; }
    .tool-chip { font-size: 10px; background: rgba(230,59,48,0.12); color: #e63b30; border: 0.5px solid rgba(230,59,48,0.25); border-radius: 4px; padding: 2px 8px; letter-spacing: 0.3px; }
    .tool-activity-label { font-size: 10px; color: #444; text-transform: uppercase; letter-spacing: 1px; margin-right: 2px; }

    /* ── Dashboard view ─────────────────────────────────── */
    .dashboard-view { display: none; }
    .greeting-text { font-size: 22px; font-weight: 700; color: #f0f0f0; line-height: 1.3; letter-spacing: -0.3px; }
    .greeting-text span { color: #e63b30; text-shadow: 0 0 20px rgba(230,59,48,0.5); }

    /* ── Holographic centerpiece hero ── */
    .dash-hero-wrap {
      position: relative;
      width: calc(100% + 3rem);
      margin: -2.5rem -1.5rem 0;
      height: 88vw;
      max-height: 560px;
      min-height: 320px;
      overflow: hidden;
    }
    .dash-hero-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 8%;
      display: block;
      filter: brightness(1.3) contrast(1.05) saturate(1.1);
    }
    /* Fade edges so it bleeds into the background */
    .dash-hero-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(to bottom, rgba(5,4,12,0.35) 0%, rgba(5,4,12,0) 15%, rgba(5,4,12,0) 55%, rgba(5,4,12,0.7) 82%, rgba(5,4,12,1) 100%),
        linear-gradient(to right, rgba(5,4,12,0.3) 0%, transparent 15%, transparent 85%, rgba(5,4,12,0.3) 100%);
    }
    /* Holographic scan ring at bottom */
    .dash-hero-wrap::after {
      content: '';
      position: absolute;
      bottom: 60px;
      left: 50%;
      transform: translateX(-50%);
      width: 85%;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(230,59,48,0.6), rgba(255,120,100,0.9), rgba(230,59,48,0.6), transparent);
      box-shadow: 0 0 20px rgba(230,59,48,0.6), 0 0 40px rgba(230,59,48,0.3);
      z-index: 2;
      border-radius: 50%;
      animation: borderGlow 2.5s ease-in-out infinite;
    }
    /* Greeting text over the hero */
    .dash-hero-top {
      position: absolute;
      top: 0; left: 0; right: 0;
      padding: 1.25rem 1.5rem;
      z-index: 3;
    }
    /* 3 floating stat cards hovering over the platform */
    .dash-hero-stats {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 0 1.25rem 1rem;
      z-index: 3;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      align-items: end;
    }
    .hero-stat {
      background: rgba(8,5,14,0.72);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(230,59,48,0.35);
      border-top-color: rgba(230,80,60,0.6);
      border-radius: 14px;
      padding: 0.75rem 0.5rem;
      text-align: center;
      box-shadow:
        inset 0 1px 0 rgba(255,100,80,0.2),
        0 8px 32px rgba(0,0,0,0.85),
        0 0 24px rgba(230,59,48,0.18);
      animation: holoFloat 5s ease-in-out infinite;
    }
    .hero-stat:nth-child(2) {
      margin-bottom: 10px; /* middle card floats higher */
      animation-delay: 1.7s;
      border-color: rgba(230,59,48,0.45);
      border-top-color: rgba(255,80,60,0.7);
      box-shadow: inset 0 1px 0 rgba(255,100,80,0.25), 0 8px 32px rgba(0,0,0,0.85), 0 0 32px rgba(230,59,48,0.25);
    }
    .hero-stat:nth-child(3) { animation-delay: 3.4s; }

    /* ── Holographic streak badge ── */
    .streak-banner {
      display: inline-flex; align-items: center; gap: 8px;
      background: linear-gradient(135deg, rgba(230,59,48,0.22) 0%, rgba(80,15,15,0.18) 100%);
      border: 1px solid rgba(230,59,48,0.5);
      border-radius: 22px;
      padding: 0.5rem 1.1rem;
      font-size: 14px; color: #ffb0a8; margin-top: 0.6rem; font-weight: 700;
      box-shadow: 0 0 24px rgba(230,59,48,0.25), 0 4px 16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,150,140,0.2);
      animation: holoGlow 3.5s ease-in-out infinite;
    }

    /* ── Belt card ── */
    .belt-card {
      background: linear-gradient(145deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
      border: 1px solid rgba(230,59,48,0.22);
      border-top-color: rgba(230,80,60,0.38);
      border-radius: 18px; padding: 1.25rem 1.5rem; margin-bottom: 1rem;
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 40px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,0,0,0.4);
      position: relative; overflow: hidden;
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 0.4s;
    }
    .belt-card::after { content:''; position:absolute; top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); pointer-events:none; }
    .belt-card-left { flex: 1; }
    .belt-card-name { font-size: 18px; font-weight: 700; margin-bottom: 0.4rem; }
    .stripe-dots { display: flex; gap: 6px; margin-bottom: 0.4rem; }
    .stripe-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.15); }
    .stripe-dot.filled { background: #f0f0f0; border-color: #f0f0f0; box-shadow: 0 0 6px rgba(255,255,255,0.5); }
    .belt-target-date { font-size: 12px; color: #555; }
    .belt-bar { width: 10px; border-radius: 5px; min-height: 60px; flex-shrink: 0; box-shadow: 0 0 12px currentColor; }

    /* ── Quick stats — holographic floating widgets ── */
    .quick-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 1rem; }
    .qs-card {
      background: linear-gradient(160deg, rgba(30,14,16,0.93) 0%, rgba(10,7,14,0.98) 100%);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(230,59,48,0.28);
      border-top-color: rgba(230,80,60,0.45);
      border-radius: 16px; padding: 1rem 0.75rem; text-align: center;
      box-shadow:
        inset 0 1px 0 rgba(255,100,80,0.15),
        0 8px 32px rgba(0,0,0,0.8),
        0 0 24px rgba(230,59,48,0.12),
        0 0 0 1px rgba(0,0,0,0.5);
      animation: holoFloat 5s ease-in-out infinite;
      position: relative; overflow: hidden; transition: box-shadow 0.25s, border-color 0.25s;
    }
    .qs-card:nth-child(2) { animation-delay: 1.7s; }
    .qs-card:nth-child(3) { animation-delay: 3.4s; }
    .qs-card::before { content:''; position:absolute; top:0;left:0;right:0; height:50%; background:linear-gradient(180deg,rgba(230,59,48,0.06) 0%,transparent 100%); pointer-events:none; }
    .qs-card::after { content:''; position:absolute; top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent 10%,rgba(255,100,80,0.5) 50%,transparent 90%); pointer-events:none; }
    .qs-card:hover { border-color: rgba(230,59,48,0.5); border-top-color: rgba(255,80,60,0.7); box-shadow: inset 0 1px 0 rgba(255,100,80,0.2), 0 8px 32px rgba(0,0,0,0.8), 0 0 40px rgba(230,59,48,0.25); }
    .qs-value { font-size: 28px; font-weight: 700; color: #ffffff; text-shadow: 0 0 24px rgba(230,59,48,0.4), 0 2px 4px rgba(0,0,0,0.9); letter-spacing: -0.5px; }
    .qs-label { font-size: 9px; color: #777; text-transform: uppercase; letter-spacing: 1.2px; margin-top: 4px; font-weight: 600; }

    /* ── Heatmap ── */
    .nem-dup-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(230,59,48,0.08); border: 1px solid rgba(230,59,48,0.35); border-radius: 12px; padding: 0.75rem 0.9rem; margin-bottom: 1rem; }
    .nem-dup-banner .log-btn { flex-shrink: 0; }
    .is-android * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    /* Android WebView composites animated+filtered elements (the holoFloat
       buttons) above fixed overlays that lack their own layer — a hole
       appears in the modal. Promoting every overlay to its own layer restores
       correct z-order. */
    .is-android .auth-modal, .is-android .profile-modal, .is-android .video-modal, .is-android .cu-modal,
    .is-android .onboard-modal, .is-android .rm-view, .is-android .timer-log-sheet, .is-android .tech-sheet,
    .is-android .tech-sheet-backdrop, .is-android .debrief-sheet, .is-android .timer-setup-sheet,
    .is-android .timer-setup-backdrop, .is-android .roll-timer-panel, .is-android .bottom-nav,
    .is-android #paywallSheet, .is-android #achievementToast, .is-android .skills-back-float { will-change: transform; }
    /* …and an inline SVG inside an absolutely-positioned button on such an
       overlay punches a hole through the card unless it gets its own layer. */
    .is-android .pw-eye svg, .is-android .mini-mic svg { transform: translateZ(0); }
    .radar-wrap { display: flex; justify-content: center; margin-bottom: 1rem; }
    .radar-wrap > div { width: 100%; display: flex; flex-direction: column; align-items: center; }

    /* ── Focus / accountability cards ── */
    .focus-card {
      background: linear-gradient(135deg, rgba(30,18,5,0.9) 0%, rgba(16,10,4,0.95) 100%);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border: 0.5px solid rgba(133,79,11,0.5);
      border-radius: 14px; padding: 0.875rem 1rem; margin-bottom: 1rem;
      box-shadow: inset 0 1px 0 rgba(240,180,60,0.08), 0 4px 20px rgba(0,0,0,0.5), 0 0 20px rgba(133,79,11,0.1);
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 1.2s;
    }
    .focus-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #854f0b; margin-bottom: 0.25rem; }
    .focus-text { font-size: 14px; color: #ef9f27; line-height: 1.5; }

    /* ── Daily Drill Recommendation ── */
    .drill-rec-card {
      background: linear-gradient(135deg, rgba(20,8,8,0.95) 0%, rgba(12,4,4,0.98) 100%);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(230,59,48,0.35);
      border-top-color: rgba(255,80,60,0.55);
      border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1rem;
      box-shadow: inset 0 1px 0 rgba(255,120,100,0.12), 0 8px 32px rgba(0,0,0,0.7), 0 0 28px rgba(230,59,48,0.12);
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 0.4s;
      position: relative; overflow: hidden;
    }
    .drill-rec-card::after { content:''; position:absolute; top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,100,80,0.35),transparent); pointer-events:none; }
    .drill-rec-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: #e63b30; margin-bottom: 0.4rem; font-weight: 600; }
    .drill-rec-title { font-size: 17px; font-weight: 700; color: #f5f5f5; margin-bottom: 0.3rem; line-height: 1.3; }
    .drill-rec-why { font-size: 12px; color: #777; line-height: 1.45; margin-bottom: 0.85rem; }
    .drill-rec-btn { display: inline-flex; align-items: center; gap: 6px; background: #e63b30; border: none; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 700; padding: 0.55rem 1.1rem; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: opacity 0.15s; }
    .drill-rec-btn:active { opacity: 0.8; }

    /* ── Voice session logging ── */
    .voice-log-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: rgba(230,59,48,0.1); border: 1px dashed rgba(230,59,48,0.45); border-radius: 12px; color: #e87d75; font-size: 13px; font-weight: 600; padding: 0.7rem; cursor: pointer; font-family: inherit; margin-bottom: 1.1rem; transition: all 0.15s; -webkit-tap-highlight-color: transparent; }
    .voice-log-btn svg { flex-shrink: 0; }
    .voice-log-btn.listening { background: rgba(230,59,48,0.22); border-style: solid; border-color: #e63b30; color: #fff; animation: voicePulse 1.4s ease-in-out infinite; }
    .voice-log-btn.parsing { background: rgba(255,255,255,0.05); border-style: solid; border-color: rgba(255,255,255,0.15); color: #999; }
    @keyframes voicePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(230,59,48,0.4); } 50% { box-shadow: 0 0 0 7px rgba(230,59,48,0); } }

    /* ── First-run onboarding ── */
    .onboard-modal { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(3,2,8,0.97); }
    .onboard-modal.open { display: flex; }
    .onboard-card { width: 100%; max-width: 420px; background: linear-gradient(160deg, rgba(24,14,18,0.95) 0%, rgba(10,6,12,0.99) 100%); border: 1px solid rgba(230,59,48,0.3); border-top-color: rgba(255,90,70,0.5); border-radius: 20px; padding: 1.75rem 1.5rem; box-shadow: 0 24px 80px rgba(0,0,0,0.8), 0 0 40px rgba(230,59,48,0.12); max-height: 90vh; overflow-y: auto; }
    .onboard-progress { display: flex; gap: 6px; margin-bottom: 1.5rem; }
    .onboard-dot { height: 3px; flex: 1; border-radius: 3px; background: rgba(255,255,255,0.1); transition: background 0.3s; }
    .onboard-dot.done { background: #e63b30; }
    .onboard-title { font-size: 20px; font-weight: 700; color: #f5f5f5; margin-bottom: 0.4rem; line-height: 1.3; }
    .onboard-sub { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 1.5rem; }
    .onboard-belt-row { display: flex; gap: 8px; margin-bottom: 1rem; }
    .onboard-belt { flex: 1; padding: 0.8rem 0.25rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: #999; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; text-align: center; transition: all 0.15s; -webkit-tap-highlight-color: transparent; }
    .onboard-belt .belt-swatch { display: block; width: 100%; height: 5px; border-radius: 3px; margin-bottom: 6px; }
    .onboard-belt.active { border-color: #e63b30; background: rgba(230,59,48,0.12); color: #f0f0f0; }
    .onboard-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem; }
    .onboard-pill { padding: 0.6rem 1rem; border-radius: 20px; border: 0.5px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: #999; font-size: 13px; cursor: pointer; font-family: inherit; transition: all 0.15s; -webkit-tap-highlight-color: transparent; }
    .onboard-pill.active { background: #e63b30; border-color: #e63b30; color: #fff; }
    .onboard-next-btn { width: 100%; background: #e63b30; border: none; border-radius: 12px; color: #fff; font-size: 15px; font-weight: 700; padding: 0.9rem; cursor: pointer; font-family: inherit; margin-top: 0.5rem; -webkit-tap-highlight-color: transparent; }
    .onboard-next-btn:disabled { opacity: 0.4; cursor: default; }
    .onboard-skip { display: block; margin: 0.9rem auto 0; background: none; border: none; color: #555; font-size: 12px; cursor: pointer; font-family: inherit; }
    /* ── Capability tour ── */
    .tour-medallion { width: 96px; height: 96px; margin: 0.5rem auto 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, rgba(230,59,48,0.22) 0%, rgba(230,59,48,0.06) 55%, transparent 75%); border: 1px solid rgba(230,59,48,0.35); box-shadow: inset 0 1px 0 rgba(255,120,100,0.15), 0 0 32px rgba(230,59,48,0.2); color: #e63b30; animation: holoFloat 5s ease-in-out infinite; }
    .tour-medallion svg { width: 44px; height: 44px; filter: drop-shadow(0 0 8px rgba(230,59,48,0.6)); }
    .tour-eyebrow { text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: #e63b30; font-weight: 700; margin-bottom: 0.6rem; }
    .tour-title { text-align: center; font-size: 22px; font-weight: 700; color: #f5f5f5; line-height: 1.25; margin-bottom: 0.6rem; }
    .tour-desc { text-align: center; font-size: 14px; color: #999; line-height: 1.6; margin-bottom: 1.5rem; padding: 0 0.25rem; }
    .tour-features { list-style: none; margin: 0 0 1.5rem; padding: 0; }
    .tour-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #bbb; line-height: 1.5; padding: 0.35rem 0; }
    .tour-features li svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: #e63b30; }
    .tour-where { display: inline-block; margin-top: 0.9rem; padding: 0.35rem 0.8rem; border-radius: 14px; background: rgba(230,59,48,0.08); border: 0.5px solid rgba(230,59,48,0.25); font-size: 11.5px; color: #999; }
    .tour-where strong { color: #e87d75; font-weight: 600; }

    /* ── The Flowmora Path (roadmap) ── */
    .rm-view { position: fixed; inset: 0; z-index: 210; background: #05040c; display: none; flex-direction: column; }
    .rm-view.open { display: flex; }
    .rm-header { display: flex; align-items: center; gap: 10px; padding: calc(0.9rem + env(safe-area-inset-top, 0px)) 1rem 0.9rem; border-bottom: 0.5px solid rgba(255,255,255,0.07); background: linear-gradient(180deg, rgba(20,8,10,0.95), rgba(8,5,10,0.9)); }
    .rm-back { background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.14); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
    .rm-back svg { width: 18px; height: 18px; fill: #ccc; }
    .rm-header-title { font-size: 16px; font-weight: 700; color: #f0f0f0; }
    .rm-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
    .rm-belt-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 0.75rem; margin-bottom: 0.75rem; -webkit-overflow-scrolling: touch; }
    .rm-belt-tab { display: flex; align-items: center; gap: 6px; flex-shrink: 0; background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 0.4rem 0.75rem; color: #999; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
    .rm-belt-tab.active { background: rgba(230,59,48,0.14); border-color: rgba(230,59,48,0.45); color: #f0f0f0; }
    .rm-belt-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
    .rm-belt-dot.belt-white { background: #f0f0f0; } .rm-belt-dot.belt-blue { background: #4a90e2; } .rm-belt-dot.belt-purple { background: #7b4fa6; } .rm-belt-dot.belt-brown { background: #8B4513; } .rm-belt-dot.belt-black { background: #333; border: 0.5px solid #555; }
    .rm-belt-pct { color: #666; font-weight: 500; }
    .rm-belt-tab.active .rm-belt-pct { color: #e87d75; }
    .rm-theme-card { background: linear-gradient(150deg, rgba(26,12,12,0.95), rgba(10,5,8,0.98)); border: 1px solid rgba(230,59,48,0.3); border-top-color: rgba(255,90,70,0.5); border-radius: 16px; padding: 1.1rem 1.25rem; margin-bottom: 0.75rem; box-shadow: inset 0 1px 0 rgba(255,120,100,0.1), 0 8px 32px rgba(0,0,0,0.6); }
    .rm-theme-belt { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: #e63b30; font-weight: 700; margin-bottom: 0.3rem; }
    .rm-theme-line { font-size: 16px; font-weight: 600; color: #f0f0f0; line-height: 1.35; margin-bottom: 0.85rem; }
    .rm-theme-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; margin-bottom: 0.4rem; }
    .rm-theme-fill { height: 100%; background: linear-gradient(90deg, #e63b30, #ff6a54); border-radius: 3px; transition: width 0.4s ease; }
    .rm-theme-pct { font-size: 11px; color: #777; }
    .rm-hint { font-size: 11px; color: #555; text-align: center; margin-bottom: 1rem; }
    .rm-track { margin-bottom: 1.25rem; }
    .rm-track-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #777; margin-bottom: 0.5rem; padding-left: 2px; }
    .rm-item { display: flex; align-items: center; gap: 10px; padding: 0.6rem 0; border-bottom: 0.5px solid rgba(255,255,255,0.05); }
    .rm-check { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid rgba(255,255,255,0.2); background: transparent; color: #fff; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: all 0.15s; }
    .rm-check.st-learning { border-color: #d4a017; color: #d4a017; }
    .rm-check.st-drilled { border-color: #e0863a; color: #e0863a; }
    .rm-check.st-solid { border-color: #4ade80; background: rgba(74,222,128,0.15); color: #4ade80; }
    .rm-item-body { flex: 1; min-width: 0; }
    .rm-item-name { font-size: 13.5px; color: #ddd; line-height: 1.35; }
    .rm-item-name.done { color: #fff; }
    .rm-item-status { font-size: 10px; margin-top: 1px; color: #555; }
    .rm-item-status.st-learning { color: #d4a017; } .rm-item-status.st-drilled { color: #e0863a; } .rm-item-status.st-solid { color: #4ade80; }
    .rm-teach { background: rgba(230,59,48,0.1); border: 0.5px solid rgba(230,59,48,0.28); border-radius: 8px; color: #e87d75; font-size: 11px; font-weight: 600; padding: 5px 9px; cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
    /* Dashboard "Your Path" card */
    .path-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: linear-gradient(160deg, rgba(24,14,18,0.92), rgba(12,8,16,0.97)); border: 1px solid rgba(230,59,48,0.2); border-top-color: rgba(230,80,60,0.35); border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1rem; cursor: pointer; font-family: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.6); -webkit-tap-highlight-color: transparent; }
    .path-ring { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
    .path-ring svg { transform: rotate(-90deg); }
    .path-ring-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #f0f0f0; }
    .path-info { flex: 1; min-width: 0; }
    .path-title { font-size: 14px; font-weight: 700; color: #f0f0f0; }
    .path-sub { font-size: 12px; color: #777; margin-top: 2px; }
    .path-arrow { color: #e63b30; font-size: 18px; font-weight: 700; flex-shrink: 0; }
    /* Dashboard Nemesis game-plan card */
    .gp-card { display: block; width: 100%; text-align: left; background: linear-gradient(160deg, rgba(30,10,12,0.95), rgba(14,6,10,0.98)); border: 1px solid rgba(230,59,48,0.35); border-top-color: rgba(255,90,70,0.55); border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1rem; cursor: pointer; font-family: inherit; box-shadow: inset 0 1px 0 rgba(255,120,100,0.12), 0 8px 32px rgba(0,0,0,0.6), 0 0 24px rgba(230,59,48,0.08); -webkit-tap-highlight-color: transparent; }
    .gp-main { display: flex; align-items: center; gap: 14px; }
    .gp-chips { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 0.5px solid rgba(255,255,255,0.07); scrollbar-width: none; }
    .gp-chips::-webkit-scrollbar { display: none; }
    .rematch-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0.45rem 0 0.45rem 0.7rem; margin-bottom: 0.3rem; border-left: 2px solid #ef9f27; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .rematch-row:active { background: rgba(239,159,39,0.06); }
    .rematch-name { font-size: 13px; font-weight: 600; color: #e0e0e0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rematch-since { flex-shrink: 0; font-size: 11px; color: #854f0b; }
    .gp-chip { flex-shrink: 0; background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 0.35rem 0.8rem; font-size: 12px; font-weight: 600; color: #bbb; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .gp-chip:active { background: rgba(230,59,48,0.15); border-color: rgba(230,59,48,0.4); color: #fff; }
    /* Rival switcher inside Nemesis detail */
    .nem-switch { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0.75rem 0 1rem; scrollbar-width: none; }
    .nem-switch::-webkit-scrollbar { display: none; }
    .nem-switch .gp-chip.active { background: rgba(230,59,48,0.16); border-color: rgba(230,59,48,0.5); color: #f0f0f0; }
    /* Labels inside grouped mentor results (chain → watch it → drill it) */
    .group-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: #666; font-weight: 700; margin: 1rem 0 0.4rem; padding-top: 0.75rem; border-top: 0.5px solid rgba(255,255,255,0.06); }
    /* Password show/hide eye */
    .pw-wrap { position: relative; }
    .pw-wrap .log-input { padding-right: 44px; width: 100%; }
    .pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: #666; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
    .pw-eye svg { width: 20px; height: 20px; }
    .pw-eye.revealed { color: #e63b30; }
    /* Affiliate recommendation card — deliberately quiet, clearly separated
       from coaching content, and always disclosed. */
    .aff-card { margin-top: 1.5rem; padding: 1rem 1.1rem; border-radius: 14px; background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.1); }
    .aff-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.5px; color: #666; font-weight: 700; margin-bottom: 6px; }
    .aff-title { font-size: 14px; font-weight: 600; color: #ddd; margin-bottom: 4px; }
    .aff-blurb { font-size: 12.5px; color: #888; line-height: 1.5; margin-bottom: 10px; }
    .aff-btn { background: none; border: 0.5px solid rgba(230,59,48,0.35); border-radius: 8px; color: #e87d75; font-size: 12px; font-weight: 600; padding: 6px 12px; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
    /* Permanent partner row (bottom of Home) + sheet */
    .partner-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; margin: 1.75rem 0 4.5rem; padding: 0.8rem 1rem; /* bottom margin clears the Roll Timer button */ background: none; border: 0.5px solid rgba(255,255,255,0.08); border-radius: 12px; cursor: pointer; font-family: inherit; text-align: left; -webkit-tap-highlight-color: transparent; }
    .partner-row-title { display: block; font-size: 13px; font-weight: 600; color: #bbb; }
    .partner-row-sub { display: block; font-size: 11.5px; color: #666; margin-top: 2px; }
    .partner-row-arrow { color: #666; font-size: 20px; }
    .partners-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.6); display: flex; align-items: flex-end; justify-content: center; }
    .partners-sheet { width: 100%; max-width: 520px; max-height: 85vh; overflow-y: auto; background: #111; border-top: 0.5px solid rgba(255,255,255,0.1); border-radius: 18px 18px 0 0; padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom)); }
    .partners-close { background: none; border: none; color: #888; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
    .partner-perk { font-size: 12px; font-weight: 600; color: #e87d75; margin-bottom: 4px; }
    /* Small inline dictation mic for note fields */
    .mini-mic-wrap { position: relative; }
    .mini-mic-wrap textarea { padding-right: 44px; width: 100%; }
    .mini-mic { position: absolute; right: 8px; bottom: 16px; width: 32px; height: 32px; border-radius: 50%; background: rgba(230,59,48,0.1); border: 0.5px solid rgba(230,59,48,0.3); color: #e87d75; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; -webkit-tap-highlight-color: transparent; }
    .mini-mic svg { width: 16px; height: 16px; fill: currentColor; }
    .mini-mic.listening { background: rgba(230,59,48,0.35); color: #fff; animation: micPulse 1.2s ease-in-out infinite; }
    @keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(230,59,48,0.4); } 50% { box-shadow: 0 0 0 8px rgba(230,59,48,0); } }
    /* Mentor laser-grid backdrop — extends behind and beyond the question card.
       The card's frosted-glass blur frosts the grid behind it; the sharp
       glowing floor spills out below. */
    #inputSection { position: relative; }
    #inputSection .card { position: relative; z-index: 1; }
    .mentor-holo-wrap { position: relative; z-index: 0; margin: -360px -1.5rem -2rem; overflow: hidden; }
    .mentor-holo-img { width: 100%; height: 660px; object-fit: cover; object-position: center 78%; display: block;
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%);
      mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%); }
    .gp-icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(230,59,48,0.12); border: 0.5px solid rgba(230,59,48,0.3); display: flex; align-items: center; justify-content: center; color: #e63b30; flex-shrink: 0; }
    .gp-icon svg { width: 24px; height: 24px; }
    .gp-info { flex: 1; min-width: 0; }
    .gp-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: #e63b30; font-weight: 700; margin-bottom: 2px; }
    .gp-title { font-size: 14.5px; font-weight: 700; color: #f0f0f0; }
    .gp-sub { font-size: 12px; color: #888; margin-top: 2px; line-height: 1.4; }
    .gp-cta { background: linear-gradient(135deg, #e63b30, #c22a20); border-radius: 10px; color: #fff; font-size: 12px; font-weight: 700; padding: 0.55rem 0.85rem; white-space: nowrap; flex-shrink: 0; box-shadow: 0 2px 12px rgba(230,59,48,0.35); }
    .rm-logged { display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 8px; background: rgba(103,232,249,0.1); border: 0.5px solid rgba(103,232,249,0.3); color: #67e8f9; font-size: 9px; font-weight: 600; vertical-align: 1px; }
    .rm-belt-tab.custom { border-color: rgba(192,132,252,0.35); }
    .rm-belt-tab.custom.active { background: rgba(192,132,252,0.14); border-color: rgba(192,132,252,0.55); }
    /* Curriculum upload modal */
    .cu-modal { position: fixed; inset: 0; z-index: 260; background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
    .cu-modal.open { display: flex; }
    .cu-card { width: 100%; max-width: 480px; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(160deg, rgba(24,14,18,0.98), rgba(10,6,12,0.99)); border: 1px solid rgba(230,59,48,0.3); border-radius: 18px; padding: 1.4rem 1.3rem; position: relative; }
    .cu-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.15); color: #aaa; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
    .cu-title { font-size: 17px; font-weight: 700; color: #f0f0f0; margin-bottom: 0.35rem; }
    .cu-sub { font-size: 12.5px; color: #888; line-height: 1.5; margin-bottom: 1rem; }
    .cu-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #777; margin: 0.9rem 0 0.35rem; }
    .cu-input { width: 100%; background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.15); border-radius: 10px; color: #eee; font-size: 14px; padding: 0.65rem 0.8rem; font-family: inherit; }
    .cu-input:focus { outline: none; border-color: rgba(230,59,48,0.5); }
    textarea.cu-input { min-height: 140px; resize: vertical; line-height: 1.45; }
    .cu-file { font-size: 12px; color: #888; margin-top: 0.4rem; }
    .cu-btn { width: 100%; margin-top: 1.1rem; background: linear-gradient(135deg, #e63b30, #c22a20); border: none; border-radius: 12px; color: #fff; font-size: 14px; font-weight: 700; padding: 0.85rem; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
    .cu-btn:disabled { opacity: 0.5; }
    .cu-btn.ghost { background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.16); color: #ccc; font-weight: 600; margin-top: 0.6rem; }
    .cu-preview { margin-top: 0.5rem; }
    .cu-preview .rm-track-title { margin-top: 0.9rem; }
    .cu-preview-item { font-size: 13px; color: #ccc; padding: 0.3rem 0 0.3rem 0.25rem; border-bottom: 0.5px solid rgba(255,255,255,0.05); }
    .cu-err { color: #e24b4a; font-size: 12.5px; margin-top: 0.7rem; display: none; }

    /* ── Post-session Coach Debrief ── */
    .debrief-sheet {
      position: fixed;
      left: 0.75rem; right: 0.75rem;
      bottom: calc(68px + env(safe-area-inset-bottom, 0px) + 0.75rem);
      z-index: 95;
      background: linear-gradient(150deg, rgba(26,12,12,0.97) 0%, rgba(10,5,8,0.99) 100%);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(230,59,48,0.4);
      border-top-color: rgba(255,90,70,0.6);
      border-radius: 16px;
      padding: 1rem 1.1rem;
      box-shadow: inset 0 1px 0 rgba(255,120,100,0.12), 0 12px 40px rgba(0,0,0,0.8), 0 0 32px rgba(230,59,48,0.18);
      transform: translateY(calc(100% + 90px));
      opacity: 0;
      transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s;
      max-width: 560px;
      margin: 0 auto;
    }
    .debrief-sheet.open { transform: translateY(0); opacity: 1; }
    .debrief-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: #e63b30; font-weight: 600; margin-bottom: 0.4rem; }
    .debrief-text { font-size: 14px; color: #e8e8e8; line-height: 1.55; margin-bottom: 0.85rem; }
    .debrief-actions { display: flex; gap: 8px; align-items: center; }
    .debrief-go-btn { background: #e63b30; border: none; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 700; padding: 0.55rem 1rem; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
    .debrief-go-btn:active { opacity: 0.8; }
    .debrief-dismiss-btn { background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.12); border-radius: 10px; color: #888; font-size: 13px; padding: 0.55rem 1rem; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }

    /* ── Vulnerability Map ── */
    .vuln-card {
      background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(230,59,48,0.2);
      border-top-color: rgba(230,80,60,0.35);
      border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.7), 0 0 20px rgba(230,59,48,0.08);
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 2.1s;
      position: relative; overflow: hidden;
    }
    .vuln-card::after { content:''; position:absolute; top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); pointer-events:none; }
    .radar-more { font-size: 11px; color: #888; line-height: 1.6; text-align: center; padding: 0.25rem 0.75rem 0.5rem; }
    .radar-more b { font-weight: 400; white-space: nowrap; }
    .radar-more span { color: #555; text-transform: uppercase; letter-spacing: 1px; font-size: 10px; margin-right: 4px; }
    .vuln-row { display:flex; align-items:center; gap:8px; padding: 0.55rem 0; border-bottom: 0.5px solid rgba(255,255,255,0.05); }
    .vuln-row:last-child { border-bottom: none; padding-bottom: 0; }
    .vuln-rank { font-size: 11px; font-weight: 700; color: #444; width: 16px; flex-shrink: 0; }
    .vuln-info { flex: 1; min-width: 0; }
    .vuln-sub { font-size: 14px; font-weight: 600; color: #e0e0e0; }
    .vuln-pos { font-size: 11px; color: #555; margin-top: 1px; }
    .vuln-count { font-size: 11px; font-weight: 700; background: rgba(230,59,48,0.15); color: #e63b30; border-radius: 20px; padding: 2px 8px; white-space: nowrap; flex-shrink: 0; }
    .vuln-fix-btn { background: rgba(230,59,48,0.12); border: 0.5px solid rgba(230,59,48,0.3); border-radius: 8px; color: #e87d75; font-size: 11px; font-weight: 600; padding: 5px 10px; cursor: pointer; font-family: inherit; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background 0.15s; flex-shrink: 0; }
    .vuln-fix-btn:active { background: rgba(230,59,48,0.25); }

    /* ── Submission bars ── */
    .sub-bar-item { display: flex; align-items: center; gap: 10px; margin-bottom: 0.625rem; }
    .sub-bar-item:last-child { margin-bottom: 0; }
    .sub-bar-label { font-size: 13px; color: #aaa; width: 90px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sub-bar-track { flex: 1; background: rgba(255,255,255,0.05); border-radius: 4px; height: 6px; }
    .sub-bar-fill { background: linear-gradient(90deg, #c92b22, #e63b30); border-radius: 4px; height: 6px; box-shadow: 0 0 8px rgba(230,59,48,0.4); }
    .sub-bar-count { font-size: 12px; color: #555; width: 20px; text-align: right; flex-shrink: 0; }
    .roll-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 1rem; }

    /* ── Last session & upcoming cards ── */
    .last-session-card {
      background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(230,59,48,0.2);
      border-top-color: rgba(230,80,60,0.35);
      border-radius: 16px; padding: 1rem 1.25rem; margin-bottom: 1rem; cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.3);
      transition: border-color 0.2s, box-shadow 0.2s;
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 1.9s;
    }
    .last-session-card:hover { border-color: rgba(230,59,48,0.4); border-top-color: rgba(230,59,48,0.5); box-shadow: inset 0 1px 0 rgba(255,120,110,0.1), 0 8px 32px rgba(0,0,0,0.7), 0 0 28px rgba(230,59,48,0.15); }
    .upcoming-card {
      background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(230,59,48,0.2);
      border-top-color: rgba(230,80,60,0.35);
      border-radius: 16px; padding: 1rem 1.25rem; margin-bottom: 1rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.7);
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 3.1s;
    }

    /* ── Quick action buttons ── */
    .quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1.5rem; }
    .qa-btn {
      background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(230,59,48,0.2);
      border-top-color: rgba(230,80,60,0.35);
      border-radius: 14px; padding: 1rem; font-size: 14px; font-weight: 600; color: #d0d0d0;
      cursor: pointer; text-align: center; font-family: inherit;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 28px rgba(0,0,0,0.7);
      transition: all 0.2s;
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 2.5s;
    }
    .qa-btn:nth-child(2) { animation-delay: 4.1s; }
    .qa-btn:nth-child(3) { animation-delay: 1.0s; }
    .qa-btn:nth-child(4) { animation-delay: 3.3s; }
    .qa-btn:hover { border-color: rgba(230,59,48,0.4); border-top-color: rgba(230,59,48,0.55); color: #ff8a83; box-shadow: inset 0 1px 0 rgba(255,120,110,0.1), 0 8px 28px rgba(0,0,0,0.7), 0 0 24px rgba(230,59,48,0.15); transform: translateY(-1px); }
    .qa-btn.primary {
      background: linear-gradient(160deg, rgba(50,15,15,0.92) 0%, rgba(25,8,10,0.97) 100%);
      border-color: rgba(230,59,48,0.4); border-top-color: rgba(230,59,48,0.55); color: #ff8a83;
      box-shadow: inset 0 1px 0 rgba(255,120,110,0.12), 0 8px 28px rgba(0,0,0,0.7), 0 0 20px rgba(230,59,48,0.12);
    }
    .qa-btn.primary:hover { box-shadow: inset 0 1px 0 rgba(255,120,110,0.18), 0 8px 28px rgba(0,0,0,0.7), 0 0 36px rgba(230,59,48,0.25); }

    /* ── Log modal pills ────────────────────────────────── */
    .pill-group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 0.4rem; }
    .pill-group.large { gap: 8px; }
    .log-pill { background: rgba(8,8,8,0.78); border: 0.5px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 0.55rem 1rem; font-size: 13px; color: #888; cursor: pointer; font-family: inherit; transition: all 0.12s; -webkit-tap-highlight-color: transparent; }
    .log-pill.large { flex: 1; padding: 0.875rem 0.5rem; font-size: 14px; text-align: center; }
    .log-pill.active { background: #e63b30; border-color: #e63b30; color: #fff; }
    .log-pill.sub-pill { font-size: 12px; padding: 0.35rem 0.75rem; }
    .form-hint { text-transform: none; letter-spacing: 0; color: #444; margin-left: 4px; }
    .log-pill.sub-counted { display: inline-flex; align-items: center; padding: 0; cursor: default; }
    .sub-counted .sub-label { padding: 0 2px; white-space: nowrap; }
    .sub-counted .sub-times { margin-left: 5px; font-weight: 700; }
    .sub-step { background: none; border: none; color: rgba(255,255,255,0.75); font: inherit; font-size: 15px; line-height: 1; min-width: 30px; padding: 0.35rem 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .sub-step:active { color: #fff; transform: scale(1.15); }
    .counter-row { display: flex; align-items: center; gap: 12px; margin-top: 0.4rem; }
    .counter-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.12); color: #f0f0f0; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; transition: background 0.12s; -webkit-tap-highlight-color: transparent; }
    .counter-btn:hover { background: rgba(230,59,48,0.2); border-color: #e63b30; }
    .counter-val { font-size: 22px; font-weight: 600; color: #f0f0f0; min-width: 28px; text-align: center; }
    .log-form-wrap { overflow-y: auto; max-height: calc(100vh - 68px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 3rem); max-height: calc(100dvh - 68px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 3rem); }
    /* keyboard up: the tab bar is hidden, so sheets can use the space above the keyboard */
    .kb-open .video-modal { padding-bottom: 0.75rem; }
    /* --app-h is the web view's real height, set from JS: 100dvh doesn't
       follow the native keyboard resize in WKWebView */
    .kb-open .log-form-wrap { max-height: calc(var(--app-h, 100dvh) - env(safe-area-inset-top, 0px) - 1.75rem); }
    /* keep log / video sheets below the status bar and notch */
    .video-modal { padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }
    .custom-sub-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
    .custom-sub-input { flex: 1; background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.18); border-radius: 8px; color: #f0f0f0; padding: 8px 12px; font-size: 14px; font-family: inherit; outline: none; }
    .custom-sub-input:focus { border-color: #e63b30; }
    .custom-sub-input::placeholder { color: #555; }
    .custom-sub-add-btn { background: #e63b30; border: none; border-radius: 8px; color: #fff; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: inherit; -webkit-tap-highlight-color: transparent; }
    .custom-sub-cancel-btn { background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.1); border-radius: 8px; color: #888; padding: 8px 10px; font-size: 14px; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }

    /* ── Belt history ───────────────────────────────────── */
    .belt-history-timeline { position: relative; padding-left: 1.25rem; }
    .belt-history-timeline::before { content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.07); border-radius: 2px; }
    .bh-entry { position: relative; margin-bottom: 1.25rem; }
    .bh-dot { position: absolute; left: -1.25rem; top: 3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); background: #0a0a0a; }
    .bh-date { font-size: 11px; color: #555; margin-bottom: 2px; }
    .bh-belt { font-size: 14px; font-weight: 500; color: #f0f0f0; }
    .bh-stripes { display: flex; gap: 4px; margin-top: 4px; }
    .bh-stripe { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); }
    .bh-stripe.filled { background: #f0f0f0; border-color: #f0f0f0; }
    .bh-notes { font-size: 12px; color: #555; margin-top: 4px; }
    .bh-add-form { background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 1rem; margin-top: 0.75rem; }

    /* ── Promotion modal rank display ───────────────────── */
    .promo-rank { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0.25rem 0 1.1rem; }
    .promo-belt-bar { position: relative; width: 200px; height: 26px; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.18); }
    .promo-belt-tip { position: absolute; right: 0; top: 0; bottom: 0; width: 62px; background: #111; border-radius: 0 4px 4px 0; display: flex; align-items: center; justify-content: center; gap: 4px; }
    .promo-belt-tip .bh-stripe { width: 6px; height: 16px; border-radius: 1px; }
    .promo-rank-label { font-size: 15px; font-weight: 700; color: #f0f0f0; letter-spacing: 0.2px; }

    /* ── Stripe selector in profile ─────────────────────── */
    .stripe-selector { display: flex; gap: 10px; margin-top: 0.4rem; }
    .stripe-sel-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); cursor: pointer; transition: all 0.15s; }

    /* ── Roll Timer ──────────────────────────────────────── */
    .roll-timer-fab {
      position: fixed; bottom: calc(68px + env(safe-area-inset-bottom, 0px) + 1rem); right: 1rem; z-index: 55;
      background: linear-gradient(135deg, rgba(220,45,35,0.95) 0%, rgba(160,22,15,0.98) 100%);
      border: 1px solid rgba(255,100,80,0.3); border-top-color: rgba(255,140,120,0.5);
      border-radius: 50px; padding: 0.55rem 1.1rem 0.55rem 0.9rem;
      color: white; font-size: 13px; font-weight: 700; cursor: pointer;
      box-shadow: 0 4px 20px rgba(230,59,48,0.5), 0 2px 8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,150,130,0.2);
      display: flex; align-items: center; gap: 7px; letter-spacing: 0.2px; font-family: inherit;
      animation: holoFloat 4s ease-in-out infinite; transition: box-shadow 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .roll-timer-fab:active { transform: scale(0.96); }

    /* Setup sheet backdrop */
    .timer-setup-backdrop {
      position: fixed; inset: 0; z-index: 56; display: none; background: transparent;
    }
    .timer-setup-backdrop.open { display: block; }
    /* Setup sheet */
    .timer-setup-sheet {
      position: fixed; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; z-index: 57;
      background: linear-gradient(180deg, rgba(14,8,16,0.98) 0%, rgba(6,4,12,1) 100%);
      backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
      border-top: 1px solid rgba(230,59,48,0.35);
      box-shadow: 0 -8px 40px rgba(0,0,0,0.7);
      padding: 0.75rem 1.5rem 1.25rem;
      transform: translateY(110%); transition: transform 0.32s cubic-bezier(0.32,0,0,1);
    }
    .timer-setup-sheet.open { transform: translateY(0); }
    .timer-setup-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
    .timer-sheet-handle { width: 36px; height: 4px; background: rgba(255,255,255,0.12); border-radius: 2px; margin: 0 auto 0; }
    .timer-setup-close { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; width: 28px; height: 28px; color: #666; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; }
    .timer-duration-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: #555; margin-bottom: 0.6rem; font-weight: 700; }
    .timer-presets { display: flex; gap: 8px; margin-bottom: 0.875rem; }
    .timer-preset-btn {
      flex: 1; background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      border: 1px solid rgba(230,59,48,0.22); border-top-color: rgba(230,80,60,0.35);
      border-radius: 12px; padding: 0.65rem 0.25rem;
      color: #777; font-size: 14px; font-weight: 700;
      cursor: pointer; font-family: inherit; text-align: center; transition: all 0.15s;
    }
    .timer-preset-btn.active {
      background: linear-gradient(135deg, rgba(50,15,15,0.95) 0%, rgba(25,8,10,0.98) 100%);
      border-color: rgba(230,59,48,0.6); color: #ff8a83;
      box-shadow: 0 0 16px rgba(230,59,48,0.2);
    }
    .timer-custom-row { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
    .timer-custom-label { font-size: 13px; color: #555; }
    .timer-custom-input {
      width: 58px; background: rgba(255,255,255,0.04);
      border: 1px solid rgba(230,59,48,0.25); border-radius: 10px;
      padding: 0.4rem 0.5rem; font-size: 16px; font-weight: 700;
      color: #f0f0f0; font-family: inherit; text-align: center;
    }
    .timer-custom-input:focus { outline: none; border-color: rgba(230,59,48,0.6); }
    .timer-custom-unit { font-size: 13px; color: #444; }
    .timer-start-btn {
      width: 100%; background: linear-gradient(135deg, #e63b30 0%, #c92b22 100%);
      border: none; border-radius: 14px; padding: 0.9rem;
      font-size: 16px; font-weight: 700; color: white; cursor: pointer; font-family: inherit;
      box-shadow: 0 4px 20px rgba(230,59,48,0.4), inset 0 1px 0 rgba(255,150,140,0.25);
      letter-spacing: 0.3px; -webkit-tap-highlight-color: transparent;
    }
    .timer-start-btn:active { transform: scale(0.98); }

    /* Active timer panel */
    .roll-timer-panel {
      position: fixed; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; z-index: 56;
      background: linear-gradient(180deg, rgba(12,6,14,0.98) 0%, rgba(5,3,10,1) 100%);
      backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
      border-top: 1px solid rgba(230,59,48,0.4);
      box-shadow: 0 -8px 48px rgba(0,0,0,0.8), 0 -1px 0 rgba(230,59,48,0.12);
      padding: 1rem 1.5rem 1.1rem; display: none;
    }
    .roll-timer-panel.visible { display: block; }
    .timer-panel-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
    .timer-round-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: #e63b30; font-weight: 700; }
    .timer-total-label { font-size: 11px; color: #3a3a3a; }
    .timer-main { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 0.875rem; }
    .timer-ring-wrap { position: relative; flex-shrink: 0; width: 80px; height: 80px; }
    .timer-ring { width: 80px; height: 80px; transform: rotate(-90deg); display: block; }
    .timer-ring-bg { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 7; }
    .timer-ring-fill { fill: none; stroke: #e63b30; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(230,59,48,0.7)); }
    .timer-ring-fill.warning { stroke: #f0c040; filter: drop-shadow(0 0 5px rgba(240,192,64,0.7)); }
    .timer-ring-fill.done { stroke: #4ade80; filter: drop-shadow(0 0 5px rgba(74,222,128,0.7)); }
    .timer-ring-text {
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 800; color: #888; letter-spacing: -0.3px;
      font-variant-numeric: tabular-nums;
    }
    .timer-info { flex: 1; }
    .timer-big-time {
      font-size: 52px; font-weight: 800; color: #f0f0f0; letter-spacing: -3px; line-height: 1;
      text-shadow: 0 0 30px rgba(230,59,48,0.25); font-variant-numeric: tabular-nums;
    }
    .timer-big-time.warning { color: #f0c040; text-shadow: 0 0 30px rgba(240,192,64,0.35); }
    .timer-big-time.done { color: #4ade80; text-shadow: 0 0 30px rgba(74,222,128,0.35); }
    .timer-status-msg { font-size: 12px; color: #444; margin-top: 5px; }
    .timer-actions { display: flex; gap: 10px; }
    .timer-act-btn {
      flex: 1; border: none; border-radius: 13px; padding: 0.72rem;
      font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
      letter-spacing: 0.2px; transition: all 0.15s; -webkit-tap-highlight-color: transparent;
    }
    .timer-act-btn.secondary { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: #666; }
    .timer-act-btn.secondary:active { background: rgba(255,255,255,0.09); }
    .timer-act-btn.primary { background: linear-gradient(135deg, #e63b30, #c92b22); color: white; box-shadow: 0 3px 14px rgba(230,59,48,0.35); }
    .timer-act-btn.primary:active { transform: scale(0.97); }
    .timer-act-btn.green { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.25); color: #4ade80; }
    .timer-act-btn.green:active { background: rgba(74,222,128,0.18); }
    .timer-act-btn.next { background: linear-gradient(135deg, rgba(74,222,128,0.2), rgba(40,160,80,0.25)); border: 1px solid rgba(74,222,128,0.35); color: #4ade80; box-shadow: 0 0 16px rgba(74,222,128,0.12); }

    /* Post-roll log sheet */
    .timer-log-sheet { position: fixed; inset: 0; z-index: 200; display: none; align-items: flex-end; }
    .timer-log-sheet.open { display: flex; }
    .timer-log-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.65); }
    .timer-log-inner {
      position: relative; width: 100%;
      background: linear-gradient(180deg, rgba(14,8,16,0.99) 0%, rgba(6,4,12,1) 100%);
      backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
      border-top: 1px solid rgba(230,59,48,0.3); border-radius: 20px 20px 0 0;
      padding: 0.75rem 1.5rem 2.5rem; max-height: 85vh; overflow-y: auto;
    }
    .timer-log-handle { width: 36px; height: 4px; background: rgba(255,255,255,0.12); border-radius: 2px; margin: 0 auto 1rem; }
    .timer-log-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.25rem; }
    .timer-log-title { font-size: 17px; font-weight: 700; color: #f0f0f0; }
    .timer-log-summary { font-size: 12px; color: #e63b30; margin-top: 3px; }
    .timer-skip-btn { background: none; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 0.3rem 0.75rem; font-size: 12px; color: #555; cursor: pointer; font-family: inherit; flex-shrink: 0; margin-top: 2px; }
    .stripe-sel-dot.active { background: #f0f0f0; border-color: #f0f0f0; }

    /* ── Dashboard accountability cards ─────────────────── */
    .dash-card {
      background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(230,59,48,0.2);
      border-top-color: rgba(230,80,60,0.35);
      border-radius: 16px; padding: 1rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.3);
      position: relative; overflow: hidden;
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 0.8s;
    }
    .dash-card:nth-of-type(2) { animation-delay: 2.3s; }
    .dash-card:nth-of-type(3) { animation-delay: 3.8s; }
    .dash-card::after { content:''; position:absolute; top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); pointer-events:none; }
    /* ── Achievement Badges ─────────────────────────────── */
    .badge-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
      gap: 1rem 0.5rem;
    }
    .badge-item {
      display: flex; flex-direction: column; align-items: center; gap: 5px;
      cursor: default;
    }
    .badge-img-wrap {
      position: relative; width: 64px; height: 64px;
    }
    .badge-img-wrap img {
      width: 100%; height: 100%; object-fit: contain;
      transition: filter 0.3s, opacity 0.3s;
    }
    .badge-item.earned .badge-img-wrap img {
      filter: drop-shadow(0 0 6px rgba(230,59,48,0.5));
    }
    .badge-item.earned { animation: holoFloat 5s ease-in-out infinite; }
    .badge-item.locked .badge-img-wrap img { filter: grayscale(1); opacity: 0.3; }
    .badge-lock {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; opacity: 0.4;
      pointer-events: none;
    }
    .badge-name {
      font-size: 9px; font-weight: 700; color: #888;
      text-align: center; line-height: 1.3;
      text-transform: uppercase; letter-spacing: 0.4px;
      max-width: 68px;
    }
    .badge-item.earned .badge-name { color: #c0c0c0; }
    .badge-status {
      font-size: 8px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700;
    }
    .badge-status.earned { color: #e63b30; }
    .badge-status.locked { color: #333; }

    /* ── Achievement toast ── */
    #achievementToast {
      position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px);
      z-index: 999; background: linear-gradient(135deg, rgba(20,10,10,0.97) 0%, rgba(10,5,8,0.99) 100%);
      border: 0.5px solid rgba(230,59,48,0.5); border-radius: 16px;
      padding: 0.9rem 1.25rem; display: flex; align-items: center; gap: 12px;
      box-shadow: 0 0 40px rgba(230,59,48,0.3), 0 8px 32px rgba(0,0,0,0.6);
      opacity: 0; pointer-events: none; transition: opacity 0.4s, transform 0.4s;
      max-width: 320px; width: calc(100% - 3rem);
    }
    #achievementToast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
    .toast-badge-img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
    .toast-text { flex: 1; }
    .toast-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #e63b30; margin-bottom: 2px; }
    .toast-name { font-size: 15px; font-weight: 700; color: #f0f0f0; }
    .toast-desc { font-size: 12px; color: #666; margin-top: 2px; }

    .risk-banner {
      background: linear-gradient(135deg, rgba(40,25,0,0.9) 0%, rgba(20,14,0,0.95) 100%);
      border: 0.5px solid rgba(255,165,0,0.4);
      border-radius: 14px; padding: 0.75rem 1rem; color: #ffb347; font-size: 13px; margin-bottom: 1rem;
      box-shadow: 0 0 20px rgba(255,140,0,0.1), inset 0 1px 0 rgba(255,200,80,0.08);
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 2.9s;
    }

    /* ── Skills tab ─────────────────────────────────────────────── */
    .skills-view { padding-top: 0.5rem; }
    .skills-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
    /* Floating back button — always visible above the brand header */
    .skills-back-float {
      position: fixed;
      top: calc(72px + 2.75rem);
      left: 1.25rem;
      z-index: 60;
      display: none;
      align-items: center;
      gap: 6px;
      background: rgba(20,20,20,0.92);
      border: 0.5px solid rgba(255,255,255,0.22);
      border-radius: 20px;
      color: #f0f0f0;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      padding: 0.45rem 1rem 0.45rem 0.7rem;
      line-height: 1;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 2px 12px rgba(0,0,0,0.5);
    }
    .skills-back-float.visible { display: flex; }
    .skills-back-float:active { background: rgba(40,40,40,0.95); }

    /* Position cards grid */
    .positions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
    .position-card {
      background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(10,7,14,0.97) 100%);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(230,59,48,0.22);
      border-top-color: rgba(230,80,60,0.4);
      border-radius: 18px;
      padding: 1.1rem 1rem;
      cursor: pointer;
      transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
      position: relative;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.3);
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 0.7s;
    }
    .position-card:nth-child(2) { animation-delay: 2.2s; }
    .position-card:nth-child(3) { animation-delay: 3.7s; }
    .position-card:nth-child(4) { animation-delay: 1.2s; }
    .position-card:nth-child(5) { animation-delay: 4.5s; }
    .position-card:nth-child(6) { animation-delay: 0.3s; }
    .position-card:nth-child(7) { animation-delay: 2.8s; }
    .position-card:nth-child(8) { animation-delay: 4.1s; }
    .position-card:active { transform: scale(0.97); }
    .position-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--pos-color, #e63b30);
      box-shadow: 0 0 12px var(--pos-color, #e63b30);
    }
    .position-card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 40%;
      background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
      pointer-events: none;
    }
    .position-card:hover { border-color: rgba(255,255,255,0.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 30px rgba(0,0,0,0.6), 0 0 20px var(--pos-color, rgba(230,59,48,0.15)); transform: translateY(-2px); }
    .pos-icon { margin-bottom: 0.5rem; display: flex; justify-content: center; color: var(--pos-color, #e63b30); filter: drop-shadow(0 0 6px var(--pos-color, #e63b30)); }
    .pos-name { font-size: 14px; font-weight: 700; color: #f0f0f0; margin-bottom: 0.25rem; }
    .pos-desc { font-size: 11px; color: #555; line-height: 1.4; margin-bottom: 0.75rem; }
    .pos-meta { display: flex; justify-content: space-between; align-items: center; }
    .pos-count { font-size: 11px; color: #444; }
    .pos-practiced { font-size: 11px; color: var(--pos-color, #e63b30); font-weight: 600; text-shadow: 0 0 8px var(--pos-color, rgba(230,59,48,0.5)); }

    /* D3 tree view */
    .tree-container {
      position: relative;
      width: 100%;
      height: calc(100vh - 200px);
      min-height: 400px;
      border-radius: 18px;
      overflow: hidden;
      background: radial-gradient(ellipse at 50% 50%, rgba(20,8,8,0.95) 0%, rgba(4,4,6,0.99) 100%);
      border: 0.5px solid rgba(255,255,255,0.07);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 32px rgba(0,0,0,0.7);
    }
    .tree-svg { width: 100%; height: 100%; }

    /* Legend */
    .tree-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
    .legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #666; }
    .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

    /* Technique detail bottom sheet */
    .tech-sheet {
      position: fixed;
      bottom: calc(64px + env(safe-area-inset-bottom, 0px));
      left: 0; right: 0;
      background: linear-gradient(180deg, rgba(16,10,10,0.98) 0%, rgba(8,6,8,0.99) 100%);
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      border-top: 0.5px solid rgba(230,59,48,0.2);
      border-radius: 22px 22px 0 0;
      padding: 1rem 1.5rem 1.25rem;
      /* Closed: slide PAST its own height + the bottom anchor offset so no
         sliver is left covering the nav (sheet is anchored 64px above bottom) */
      transform: translateY(calc(100% + 64px + env(safe-area-inset-bottom, 0px) + 24px));
      z-index: 200;
      max-height: 55vh;
      overflow-y: auto;
      visibility: hidden;
      transition: transform 0.32s cubic-bezier(0.32,0.72,0,1), visibility 0s 0.32s;
      box-shadow: 0 -4px 60px rgba(0,0,0,0.8), 0 -1px 0 rgba(230,59,48,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .tech-sheet.open { transform: translateY(0); visibility: visible; transition: transform 0.32s cubic-bezier(0.32,0.72,0,1), visibility 0s; }
    .tech-sheet-handle { width: 36px; height: 4px; background: rgba(255,255,255,0.15); border-radius: 2px; margin: 0 auto 1rem; }
    .tech-sheet-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
    .tech-sheet-name { font-size: 20px; font-weight: 700; color: #f0f0f0; }
    .tech-sheet-close { background: rgba(255,255,255,0.1); border: 0.5px solid rgba(255,255,255,0.15); border-radius: 50%; color: #e0e0e0; font-size: 16px; cursor: pointer; line-height: 1; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .tech-sheet-close:active { background: rgba(255,255,255,0.2); }
    .tech-sheet-backdrop { position: fixed; inset: 0; z-index: 199; display: none; }
    .tech-sheet-backdrop.open { display: block; }
    .tech-badges { display: flex; gap: 0.5rem; margin-bottom: 0.875rem; flex-wrap: wrap; }
    .tech-badge { font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 500; }
    .tech-badge.belt-white  { background: rgba(255,255,255,0.1); color: #ccc; }
    .tech-badge.belt-blue   { background: rgba(74,144,226,0.2); color: #74aaff; }
    .tech-badge.belt-purple { background: rgba(139,92,246,0.2); color: #c084fc; }
    .tech-badge.belt-brown  { background: rgba(139,90,43,0.2); color: #c9956c; }
    .tech-badge.type-submission { background: rgba(230,59,48,0.15); color: #ff8a83; }
    .tech-badge.type-sweep      { background: rgba(251,191,36,0.15); color: #fcd34d; }
    .tech-badge.type-escape     { background: rgba(74,222,128,0.15); color: #86efac; }
    .tech-badge.type-transition { background: rgba(139,92,246,0.15); color: #c084fc; }
    .tech-badge.type-control    { background: rgba(6,182,212,0.15); color: #67e8f9; }
    .tech-badge.type-takedown   { background: rgba(245,158,11,0.15); color: #fcd34d; }
    .tech-badge.type-defense    { background: rgba(74,222,128,0.15); color: #86efac; }
    .tech-sheet-stat { font-size: 12px; color: #666; margin-bottom: 0.875rem; }
    .tech-sheet-stat strong { color: #e63b30; }
    .tech-links-label { font-size: 11px; color: #444; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 0.5rem; }
    .tech-links-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
    .tech-link-pill { font-size: 12px; padding: 4px 12px; border-radius: 20px; background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.1); color: #aaa; cursor: pointer; }
    .tech-link-pill:hover { border-color: #e63b30; color: #e63b30; }
    .tech-ask-btn { width: 100%; padding: 0.875rem; background: #e63b30; border: none; border-radius: 10px; color: white; font-size: 14px; font-weight: 600; cursor: pointer; }
    .tech-ask-btn:hover { background: #cc2f25; }
    .tech-learn-btn { width: 100%; padding: 0.875rem; background: rgba(230,59,48,0.12); border: 0.5px solid rgba(230,59,48,0.3); border-radius: 10px; color: #ff8a83; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
    .tech-learn-btn:hover { background: rgba(230,59,48,0.2); }
    .tech-description { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 0.875rem 1rem; font-size: 13px; color: #ccc; line-height: 1.6; margin-bottom: 0.875rem; border: 0.5px solid rgba(255,255,255,0.07); }
    .tech-deeper-btn { width: 100%; padding: 0.75rem; background: #e63b30; border: none; border-radius: 10px; color: white; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 0.5rem; }
    .tech-deeper-btn:hover { background: #cc2f25; }
    .tech-loading { display: flex; gap: 6px; align-items: center; justify-content: center; padding: 1rem; color: #555; font-size: 13px; }
    .tech-loading .dot { width: 6px; height: 6px; border-radius: 50%; background: #e63b30; animation: pulse 1.2s ease-in-out infinite; }
    .tech-loading .dot:nth-child(2) { animation-delay: 0.2s; }
    .tech-loading .dot:nth-child(3) { animation-delay: 0.4s; }

    /* Node practice glow */
    .practiced-node { filter: drop-shadow(0 0 6px rgba(230,59,48,0.6)); }

    /* ── Nemesis ─────────────────────────────────────────── */
    .nemesis-view { padding: 1rem; }
    .nemesis-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
    .nemesis-title { font-size: 18px; font-weight: 700; color: #e0e0e0; }
    .nemesis-card {
      background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(230,59,48,0.2);
      border-top-color: rgba(230,80,60,0.35);
      border-radius: 16px; padding: 1rem; margin-bottom: 0.875rem; cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.3);
      position: relative; overflow: hidden;
      transition: border-color 0.2s, box-shadow 0.2s;
      animation: holoFloat 5s ease-in-out infinite;
    }
    .nemesis-card:nth-child(2) { animation-delay: 1.6s; }
    .nemesis-card:nth-child(3) { animation-delay: 3.1s; }
    .nemesis-card:nth-child(4) { animation-delay: 4.4s; }
    .nemesis-card:nth-child(5) { animation-delay: 2.3s; }
    .nemesis-card::after { content:''; position:absolute; top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); pointer-events:none; }
    .nemesis-card:hover { border-color: rgba(230,59,48,0.45); box-shadow: inset 0 1px 0 rgba(255,120,110,0.12), 0 8px 32px rgba(0,0,0,0.7), 0 0 28px rgba(230,59,48,0.18); }
    .nemesis-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
    .nemesis-name { font-size: 15px; font-weight: 600; color: #e0e0e0; }
    .nemesis-meta { font-size: 12px; color: #555; margin-top: 2px; }
    .nemesis-type-badge { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
    .nemesis-type-badge.partner { background: rgba(255,255,255,0.07); color: #888; }
    .nemesis-type-badge.competitor { background: rgba(230,59,48,0.15); color: #e63b30; border: 0.5px solid rgba(230,59,48,0.3); }
    .nemesis-record { display: flex; gap: 12px; margin-top: 0.75rem; }
    /* In the detail view the record strip is a standalone slide — match the holo cards */
    .nemesis-view > .nemesis-record {
      background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(230,59,48,0.2);
      border-top-color: rgba(230,80,60,0.35);
      border-radius: 16px; padding: 1rem;
      justify-content: space-around;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.3);
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 1.2s;
    }
    .nemesis-record-stat { text-align: center; }
    .nemesis-record-stat .val { font-size: 20px; font-weight: 700; }
    .nemesis-record-stat .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #555; }
    .val-w { color: #4ade80; }
    .val-l { color: #e63b30; }
    .val-d { color: #888; }
    .nemesis-detail-back { display: flex; align-items: center; gap: 6px; color: #666; font-size: 13px; cursor: pointer; margin-bottom: 1rem; background: none; border: none; padding: 0; }
    .nemesis-detail-back svg { width: 16px; height: 16px; fill: currentColor; }
    .nemesis-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #555; margin: 1.25rem 0 0.5rem; }
    .roll-item { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 0.5px solid rgba(255,255,255,0.05); }
    .roll-result { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 20px; }
    .roll-result.win { background: rgba(74,222,128,0.15); color: #4ade80; }
    .roll-result.loss { background: rgba(230,59,48,0.15); color: #e63b30; }
    .roll-result.draw { background: rgba(255,255,255,0.07); color: #888; }
    .roll-date { font-size: 12px; color: #555; }
    .roll-notes { font-size: 12px; color: #888; margin-top: 2px; }
    .gameplan-box {
      background: linear-gradient(150deg, rgba(26,12,12,0.95) 0%, rgba(10,5,8,0.98) 100%);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(230,59,48,0.35);
      border-top-color: rgba(255,90,70,0.5);
      border-radius: 16px; padding: 1rem 1.1rem; margin-top: 0.75rem;
      font-size: 13px; color: #ccc; line-height: 1.6; white-space: pre-wrap;
      box-shadow: inset 0 1px 0 rgba(255,120,100,0.1), 0 8px 32px rgba(0,0,0,0.7), 0 0 24px rgba(230,59,48,0.12);
      position: relative; overflow: hidden;
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 0.8s;
    }
    .gameplan-box::after { content:''; position:absolute; top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,100,80,0.3),transparent); pointer-events:none; }
    .result-picker { display: flex; gap: 8px; margin-bottom: 0.75rem; }
    .result-pick-btn { flex: 1; padding: 0.5rem; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: 0.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: #888; transition: all 0.15s; }
    .result-pick-btn.active-w { background: rgba(74,222,128,0.15); color: #4ade80; border-color: rgba(74,222,128,0.4); }
    .result-pick-btn.active-l { background: rgba(230,59,48,0.15); color: #e63b30; border-color: rgba(230,59,48,0.4); }
    .result-pick-btn.active-d { background: rgba(255,255,255,0.07); color: #aaa; border-color: rgba(255,255,255,0.2); }
    .nemesis-empty { text-align: center; padding: 3rem 1rem; color: #444; font-size: 14px; }
    .nemesis-empty svg { width: 40px; height: 40px; fill: #333; margin: 0 auto 1rem; display: block; }

    .kb-open .bottom-nav, .kb-open .roll-timer-fab { display: none !important; }
    #statusScrim { position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: #05040c; z-index: 150; pointer-events: none; }

    /* ── AI answer footer (safety line + Report) ───────────── */
    .ai-footer { display: flex; align-items: flex-start; gap: 10px; margin-top: 0.9rem; padding-top: 0.6rem; border-top: 0.5px solid rgba(255,255,255,0.08); font-size: 11px; line-height: 1.45; color: #6f6f78; }
    .ai-footer span { flex: 1; }
    .ai-report-btn { flex-shrink: 0; background: none; border: 0.5px solid rgba(255,255,255,0.15); border-radius: 7px; color: #9a9aa3; font-size: 11px; font-weight: 600; padding: 3px 9px; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
    .ai-report-btn:active { color: #e63b30; border-color: rgba(230,59,48,0.5); }
    .debrief-actions .ai-report-btn { align-self: center; margin-left: auto; }
    .ai-report-opt { display: flex; align-items: center; gap: 10px; padding: 0.55rem 0.2rem; font-size: 14px; color: #ddd; cursor: pointer; }
    .ai-report-opt input { accent-color: #e63b30; width: 16px; height: 16px; }
    .safety-list { margin: 0.6rem 0 0.2rem 1.1rem; padding: 0; color: #bbb; font-size: 13.5px; line-height: 1.5; }
    .safety-list li { margin-bottom: 0.55rem; }

    /* ── Side safe areas ───────────────────────────────────
       Landscape iPhones and iPhone Duo's inner display (iOS 27.1+ puts
       system bars down the side) have left/right insets. env() is 0 where
       there are none, so these resolve to the original values on a
       portrait phone. */
    .app { padding-left: max(1.5rem, env(safe-area-inset-left, 0px)); padding-right: max(1.5rem, env(safe-area-inset-right, 0px)); }
    .bottom-nav, .rm-view, .timer-log-sheet { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
    .roll-timer-panel, .timer-setup-sheet, .tech-sheet, .auth-modal, .profile-modal {
      padding-left: max(1.5rem, env(safe-area-inset-left, 0px)); padding-right: max(1.5rem, env(safe-area-inset-right, 0px)); }
    /* iPad / wide windows: bottom sheets line up with the 720px content column
       instead of stretching edge to edge (no effect below ~770px wide). */
    .roll-timer-panel, .timer-setup-sheet, .tech-sheet {
      padding-left: max(1.5rem, env(safe-area-inset-left, 0px), calc((100% - 720px) / 2));
      padding-right: max(1.5rem, env(safe-area-inset-right, 0px), calc((100% - 720px) / 2)); }
    .cu-modal, .video-modal { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); }
    .onboard-modal { padding-left: max(1.25rem, env(safe-area-inset-left, 0px)); padding-right: max(1.25rem, env(safe-area-inset-right, 0px)); }
    .roll-timer-fab { right: calc(1rem + env(safe-area-inset-right, 0px)); }
    .skills-back-float { left: calc(1.25rem + env(safe-area-inset-left, 0px)); }
    .debrief-sheet { left: calc(0.75rem + env(safe-area-inset-left, 0px)); right: calc(0.75rem + env(safe-area-inset-right, 0px)); }
    /* Sign-in card is taller than a landscape phone (or a folded Duo's outer
       screen). Let the overlay scroll; auto margins keep the card centered
       when it fits and top-aligned (reachable) when it doesn't, where
       align-items:center alone would clip the top off-screen. */
    .auth-modal { overflow-y: auto; -webkit-overflow-scrolling: touch;
      padding-top: max(1.5rem, env(safe-area-inset-top, 0px)); padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)); }
    .auth-card { margin: auto; flex-shrink: 0; }
  </style>
</head>
<body>
  <!-- Boot screen: covers the app until real user data is rendered -->
  <div id="bootScreen" style="position:fixed;inset:0;z-index:9999;background:#05040c;display:flex;align-items:center;justify-content:center;transition:opacity 0.35s ease;">
    <img src="/Flowmora.svg" alt="Flowmora" style="width:230px;opacity:0.92;">
  </div>
  <script>
    // Standalone on purpose: if the main script dies during startup (e.g. a
    // library failed to load), its own boot-screen failsafe never runs and the
    // splash would stay up forever. This shows a way out instead.
    (function () {
      function bootFailed() {
        var b = document.getElementById('bootScreen');
        if (!b || window.__appStarted || b.getAttribute('data-failed')) return;
        b.setAttribute('data-failed', '1');
        b.style.flexDirection = 'column';
        b.style.padding = '2rem';
        b.style.textAlign = 'center';
        b.innerHTML = '<img src="/Flowmora.svg" alt="Flowmora" style="width:150px;opacity:0.9;margin-bottom:1.75rem;">'
          + '<div style="color:#f0f0f0;font:600 17px system-ui,sans-serif;margin-bottom:0.5rem;">Flowmora couldn’t start</div>'
          + '<div style="color:#888;font:14px/1.5 system-ui,sans-serif;max-width:300px;margin-bottom:1.5rem;">Check your connection and try again.</div>'
          + '<button onclick="location.reload()" style="background:#e63b30;color:#fff;border:none;border-radius:12px;padding:0.8rem 2rem;font:700 15px system-ui,sans-serif;cursor:pointer;">Try again</button>';
      }
      window.__bootFailed = bootFailed;
      setTimeout(bootFailed, 15000);
    })();
  </script>
  <!-- Solid strip behind the status bar / notch so scrolled content never
       runs under the clock (height is 0 where there's no top inset). -->
  <div id="statusScrim" aria-hidden="true"></div>
  <img id="bgImage" src="/bg.jpeg" alt="">
  <div class="app">
    <div class="header">
      <div class="logo-block">
        <img src="/Flowmora.svg" class="logo-img" alt="Flowmora">
        <div class="brand-block">
          <span class="brand-name">FLOWMORA</span>
          <span class="brand-tagline">Jiu-Jitsu Evolved.</span>
        </div>
      </div>
      <div class="header-controls">
        <div class="voice-toggle" onclick="toggleVoice()">
          <div class="toggle-track" id="voiceTrack"><div class="toggle-thumb"></div></div>
          <span id="voiceLabel">Voice off</span>
        </div>
        <div id="userSection" class="user-display" style="display:none;">
          <span class="user-email" id="userEmail" style="display:none;"></span>
          <button class="belt-badge belt-blue" id="beltBadge" onclick="openProfile()">Blue</button>
          <button onclick="openProfile()" aria-label="Settings" style="background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.14);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#aaa;-webkit-tap-highlight-color:transparent;flex-shrink:0;">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
          </button>
        </div>
      </div>
    </div>

    <div id="mentorView" style="display:none;">
      <div id="inputSection">
        <div class="card">
          <div class="card-label">Describe your problem</div>
          <div class="input-row">
            <textarea id="problem" rows="4" placeholder="e.g. I keep getting my guard passed when my opponent stands up... or tap the mic and speak"></textarea>
            <div class="mic-btn" id="mainMic" onclick="toggleMainMic()">
              <svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1 1.93c-3.94-.49-7-3.85-7-7.93H5c0 3.53 2.61 6.43 6 6.92V19h2v-3.08c3.39-.49 6-3.39 6-6.92h1c0 4.08-3.06 7.44-7 7.93V19h-2v-3.07z"/></svg>
            </div>
          </div>
          <div class="listening-indicator" id="mainListening">Listening... speak now</div>
          <button class="submit-btn" id="submitBtn" onclick="getStrategy()" disabled>Ask the Mentor ↗</button>
        </div>
        <div class="mentor-holo-wrap">
          <img class="mentor-holo-img" src="/mentor-holo.jpg" alt="" decoding="async" loading="lazy">
        </div>
      </div>

      <div id="results" style="display:none;">
        <div id="toolActivity" class="tool-activity"></div>
        <div id="resultsContent"></div>
        <div class="chat-section">
          <div class="section-title">Continue the conversation</div>
          <div class="chat-messages" id="chatMessages"></div>
          <div id="speakingIndicator" class="speaking-indicator">Coach is speaking...</div>
          <div class="chat-input-row">
            <div class="chat-input-wrap">
              <input type="text" class="chat-input" id="chatInput" placeholder="Ask a follow-up or tap mic to speak..." onkeydown="if(event.key==='Enter') sendChat()" />
              <div class="chat-mic" id="chatMic" onclick="toggleChatMic()">
                <svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1 1.93c-3.94-.49-7-3.85-7-7.93H5c0 3.53 2.61 6.43 6 6.92V19h2v-3.08c3.39-.49 6-3.39 6-6.92h1c0 4.08-3.06 7.44-7 7.93V19h-2v-3.07z"/></svg>
              </div>
            </div>
            <button class="chat-send" id="chatSend" onclick="sendChat()">Send ↗</button>
          </div>
        </div>
        <br>
        <button class="submit-btn" style="background:rgba(255,255,255,0.05);color:#888;border:0.5px solid rgba(255,255,255,0.1);" onclick="resetApp()">Start new session</button>
      </div>

      <div id="loadingState" style="display:none;">
        <div class="loading"><div class="dot"></div><div class="dot"></div><div class="dot"></div><span id="loadingText">building your game plan...</span></div>
      </div>
    </div>

    <div id="dashboardView" class="dashboard-view"></div>

    <div id="progressView" class="progress-view"></div>

    <div id="calendarView" class="calendar-view"></div>

    <div id="skillsView" style="display:none;"></div>

    <div id="nemesisView" style="display:none;"></div>
    <div id="roadmapView" class="rm-view"></div>
    <div id="curriculumModal" class="cu-modal" onclick="if(event.target===this)closeCurriculumUpload()">
      <div class="cu-card">
        <button class="cu-close" onclick="closeCurriculumUpload()">✕</button>
        <div id="cuStepInput">
          <div class="cu-title">Add Your Academy's Curriculum</div>
          <div class="cu-sub">Paste your gym's belt requirements or technique list below — any format works. Flowmora will organize it into a trackable roadmap.</div>
          <div class="cu-label">Curriculum name</div>
          <input class="cu-input" id="cuName" maxlength="40" placeholder="e.g. My Academy — Blue Belt">
          <div class="cu-label">Curriculum text</div>
          <textarea class="cu-input" id="cuText" maxlength="15000" placeholder="Paste the technique list or requirements here…"></textarea>
          <div class="cu-file">Or load from a text file: <input type="file" id="cuFile" accept=".txt,.md" onchange="cuLoadFile(event)"></div>
          <div class="cu-err" id="cuErr"></div>
          <button class="cu-btn" id="cuParseBtn" onclick="parseCurriculum()">Organize with AI</button>
        </div>
        <div id="cuStepPreview" style="display:none;">
          <div class="cu-title">Review Your Roadmap</div>
          <div class="cu-sub">Here's how Flowmora organized it. Save it, or go back and adjust the text.</div>
          <div class="cu-preview" id="cuPreview"></div>
          <div class="cu-err" id="cuErr2"></div>
          <button class="cu-btn" id="cuSaveBtn" onclick="saveCurriculum()">Save to My Path</button>
          <button class="cu-btn ghost" onclick="cuBackToInput()">← Edit the text</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Supabase init
    if (!window.supabase) window.__bootFailed?.(); // the destructure below then stops this script
    const { createClient } = window.supabase;
    const sb = createClient(
      'https://ptbhbljnnegmefooduil.supabase.co',
      'sb_publishable_bamk3TOuWKodGsW70BIIZQ_P0yHG8Iz',
      {
        auth: {
          // Implicit, NOT the library default of PKCE. PKCE stashes a
          // code_verifier in the storage of whichever browser requested the
          // reset, and the emailed link must be opened in that same browser to
          // exchange it. Real users tap "Forgot password" in the native app and
          // then open the email in Mail → Safari, so the verifier is missing and
          // the recovery session is never created ("Auth session missing").
          // Implicit puts the tokens straight in the link's URL fragment, so the
          // reset works from any browser or device.
          flowType: 'implicit',
          detectSessionInUrl: true,
          persistSession: true,
          autoRefreshToken: true
        }
      }
    );

    // Escape user-entered text before inserting into innerHTML (XSS protection)
    function esc(str) {
      return String(str ?? '').replace(/[&<>"']/g, c => (
        { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
      ));
    }

    // Show/hide a password field; swaps the eye icon to eye-off while visible
    function togglePw(id, btn) {
      const input = document.getElementById(id);
      if (!input) return;
      const show = input.type === 'password';
      input.type = show ? 'text' : 'password';
      btn.classList.toggle('revealed', show);
      btn.innerHTML = show
        ? '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>'
        : '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>';
    }

    // AI chat text → safe HTML: escape, then render the light markdown the
    // model tends to emit (**bold**, *emphasis*) instead of showing raw asterisks
    function fmtAI(str) {
      return esc(str)
        .replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>')
        .replace(/\*([^*\n]+)\*/g, '<em>$1</em>')
        .replace(/\n/g, '<br>');
    }

    // ── Native shell (Capacitor) support ─────────────────────────────────
    // Inside the iOS/Android app the page is served from capacitor://localhost,
    // so relative /api/* calls must go to the production backend instead.
    const IS_NATIVE = !!(window.Capacitor && window.Capacitor.isNativePlatform && window.Capacitor.isNativePlatform());
    const NATIVE_PLATFORM = IS_NATIVE ? (window.Capacitor.getPlatform?.() || '') : 'web';
    const IS_ANDROID = NATIVE_PLATFORM === 'android';
    // Android WebView mis-composites backdrop-filter (black rectangles over
    // blurred cards). Every blurred surface here is already near-opaque, so
    // dropping the blur on Android is invisible — see .is-android CSS.
    if (IS_ANDROID) document.documentElement.classList.add('is-android');

    // While the on-screen keyboard is up, hide the tab bar and Roll Timer
    // button so they don't float on top of it. Apps: Capacitor Keyboard
    // events (the web view is resized above the keyboard — capacitor.config
    // Keyboard.resize = native). Web: infer it from the visual viewport.
    (function watchKeyboard() {
      const set = on => {
        document.documentElement.style.setProperty('--app-h', window.innerHeight + 'px');
        document.documentElement.classList.toggle('kb-open', on);
      };
      window.addEventListener('resize', () => document.documentElement.style.setProperty('--app-h', window.innerHeight + 'px'));
      const K = window.Capacitor?.Plugins?.Keyboard;
      if (IS_NATIVE && K?.addListener) {
        K.addListener('keyboardWillShow', () => set(true));
        // Once the web view has shrunk, bring the field being typed in into view.
        // Done by hand on the nearest scrolling sheet: scrollIntoView picks the
        // wrong container while the sheet is still resizing.
        const reveal = () => {
          const el = document.activeElement;
          if (!el || !/^(INPUT|TEXTAREA)$/.test(el.tagName)) return;
          let sc = el.parentElement;
          while (sc && sc !== document.body && !/(auto|scroll)/.test(getComputedStyle(sc).overflowY)) sc = sc.parentElement;
          const r = el.getBoundingClientRect();
          const sb = sc && sc !== document.body ? sc.getBoundingClientRect() : { top: 0, bottom: window.innerHeight };
          const box = { top: sb.top, bottom: Math.min(sb.bottom, window.innerHeight) };
          const pad = 16;
          let dy = 0;
          if (r.bottom > box.bottom - pad) dy = r.bottom - (box.bottom - pad);
          else if (r.top < box.top + pad) dy = r.top - (box.top + pad);
          if (!dy) return;
          if (sc && sc !== document.body) sc.scrollTop += dy; else window.scrollBy(0, dy);
        };
        K.addListener('keyboardDidShow', () => { set(true); reveal(); setTimeout(reveal, 250); setTimeout(reveal, 700); });
        // The sheet re-lays out after the web view shrinks; reveal again then
        window.addEventListener('resize', () => {
          if (document.documentElement.classList.contains('kb-open')) requestAnimationFrame(() => requestAnimationFrame(reveal));
        });
        if (window.ResizeObserver) new ResizeObserver(() => {
          if (document.documentElement.classList.contains('kb-open')) reveal();
        }).observe(document.body);
        K.addListener('keyboardWillHide', () => set(false));
        return;
      }
      const vv = window.visualViewport;
      if (!vv) return;
      const check = () => {
        const typing = /^(INPUT|TEXTAREA)$/.test(document.activeElement?.tagName || '') || document.activeElement?.isContentEditable;
        set(!!typing && window.innerHeight - vv.height > 150);
      };
      vv.addEventListener('resize', check);
      document.addEventListener('focusout', () => setTimeout(check, 100));
    })();
    const API_BASE = IS_NATIVE ? 'https://flowmorajiujitsu.com' : '';
    function api(path) { return API_BASE + path; }

    // Store policy: digital subscriptions sold inside a store app must go
    // through that store's billing (Apple 3.1.1, Google Payments policy).
    // Stripe checkout is web-only; the apps sell through StoreKit / Play
    // Billing via RevenueCat. The web price is never shown inside the apps.
    const STRIPE_UPGRADE_ALLOWED = !IS_NATIVE;

    // ── Store billing (RevenueCat) ─────────────────────────────────────────
    // Public SDK keys from RevenueCat → Project settings → API keys. These are
    // publishable by design (like the Supabase anon key). Until they're set,
    // the apps show "Premium coming soon" instead of a purchase button.
    const RC_PUBLIC_KEYS = { ios: 'appl_hZqafVaCKObJDvcvYlRfDHiVwvH', android: 'goog_ZwDTLXULqzsbTXhVysMFoGLSGvg' };
    const RC_ENTITLEMENT = 'premium';
    const Purchases = window.Capacitor?.Plugins?.Purchases;
    const NATIVE_BILLING = IS_NATIVE && !!Purchases && !!RC_PUBLIC_KEYS[NATIVE_PLATFORM];
    const STORE_NAME = IS_ANDROID ? 'Google Play' : 'App Store';
    const STORE_SUBS_URL = IS_ANDROID
      ? 'https://play.google.com/store/account/subscriptions'
      : 'https://apps.apple.com/account/subscriptions';

    let _rcUser = null;       // Supabase user id RevenueCat is currently identified as
    let _rcPackage = null;    // the monthly package from the current offering
    let _rcPrice = '';        // localized price string, e.g. "$9.99"

    // Identify the RevenueCat customer as the Supabase user so purchases,
    // webhooks and restores all key off the same id.
    async function initStoreBilling(userId) {
      if (!NATIVE_BILLING || !userId || _rcUser === userId) return;
      try {
        if (_rcUser === null) await Purchases.configure({ apiKey: RC_PUBLIC_KEYS[NATIVE_PLATFORM], appUserID: userId });
        else await Purchases.logIn({ appUserID: userId });
        _rcUser = userId;
        const offerings = await Purchases.getOfferings();
        const cur = offerings?.current;
        _rcPackage = cur?.monthly || cur?.availablePackages?.[0] || null;
        _rcPrice = _rcPackage?.product?.priceString || '';
        renderDashboard();
      } catch (e) { console.warn('Store billing unavailable:', e?.message || e); }
    }

    async function resetStoreBilling() {
      if (!NATIVE_BILLING || _rcUser === null) return;
      try { await Purchases.logOut(); } catch (_) {}
      _rcUser = '__signed_out__'; // configured, but not as anyone real
    }

    const hasEntitlement = info => !!info?.entitlements?.active?.[RC_ENTITLEMENT];

    // Ask our server to re-check with RevenueCat and flip the plan, so
    // premium unlocks now rather than when the webhook lands.
    async function confirmPremium(customerInfo) {
      let plan = null;
      try { plan = (await (await aiFetch('/api/billing?op=sync', {}, { silent: true })).json()).plan; } catch (_) {}
      if (plan === 'premium' || hasEntitlement(customerInfo)) {
        userPlan = 'premium';
        document.getElementById('paywallSheet')?.remove();
        renderDashboard();
        return true;
      }
      return false;
    }

    async function purchaseStoreSubscription() {
      if (!_rcPackage) { alert(`Couldn't reach the ${STORE_NAME}. Check your connection and try again.`); return; }
      const btn = document.getElementById('storeBuyBtn');
      if (btn) { btn.disabled = true; btn.textContent = 'Opening ' + STORE_NAME + '…'; }
      try {
        const { customerInfo } = await Purchases.purchasePackage({ aPackage: _rcPackage });
        track('upgrade_completed', { store: NATIVE_PLATFORM });
        if (await confirmPremium(customerInfo)) alert('Welcome to Flowmora Premium — your coaching is now unlimited.');
        else alert('Purchase received. Premium will unlock within a minute — pull to refresh if it doesn\'t.');
      } catch (e) {
        const cancelled = e?.userCancelled || e?.code === '1' || /cancel/i.test(e?.message || '');
        if (!cancelled) alert('The purchase didn\'t go through: ' + (e?.message || 'unknown error'));
      } finally {
        if (btn) { btn.disabled = false; btn.textContent = upgradeButtonLabel(); }
      }
    }

    // Required by Apple: a way to restore purchases on a new device/reinstall.
    async function restoreStorePurchases() {
      if (!NATIVE_BILLING) return;
      try {
        const { customerInfo } = await Purchases.restorePurchases();
        track('purchases_restored', { active: hasEntitlement(customerInfo) });
        if (await confirmPremium(customerInfo)) alert('Your Premium subscription has been restored.');
        else alert(`No active Flowmora subscription was found on this ${STORE_NAME} account.`);
      } catch (e) { alert('Could not restore purchases: ' + (e?.message || 'unknown error')); }
    }

    function upgradeButtonLabel() {
      if (!IS_NATIVE) return 'Upgrade to Premium — $9.49/mo';
      return _rcPrice ? `Subscribe — ${_rcPrice}/month` : 'Subscribe to Premium';
    }

    // Everything a paywall needs, per platform. Apple 3.1.2 requires the
    // title, length, price, auto-renewal terms, and Terms/Privacy links
    // right where the user subscribes.
    function upgradeCTA() {
      const btnStyle = 'width:100%;background:#e63b30;border:none;border-radius:12px;color:#fff;font-size:15px;font-weight:700;padding:0.9rem;cursor:pointer;font-family:inherit;';
      const link = (url, label) => `<a href="${url}" onclick="event.preventDefault();openExternal('${url}')" style="color:#888;">${label}</a>`;
      if (!IS_NATIVE) return `<button onclick="startUpgrade()" style="${btnStyle}">${upgradeButtonLabel()}</button>`;
      if (!NATIVE_BILLING) return `<div style="font-size:13px;color:#aaa;line-height:1.55;text-align:center;padding:0.75rem;border:0.5px solid rgba(255,255,255,0.12);border-radius:12px;">Premium is coming to the app soon. Your free coaching resets on the 1st.</div>`;
      return `<button id="storeBuyBtn" onclick="purchaseStoreSubscription()" style="${btnStyle}">${upgradeButtonLabel()}</button>
        <div style="font-size:10.5px;color:#666;line-height:1.5;margin-top:0.75rem;text-align:left;">
          Flowmora Premium is a monthly auto-renewing subscription${_rcPrice ? ` at ${_rcPrice}/month` : ''}. Payment is charged to your ${STORE_NAME} account when you confirm. It renews automatically unless cancelled at least 24 hours before the end of the current period, and your account is charged for renewal within 24 hours before that. Manage or cancel any time in your ${STORE_NAME} account settings.
          ${link('https://flowmorajiujitsu.com/terms.html', 'Terms of Use')} · ${link('https://flowmorajiujitsu.com/privacy.html', 'Privacy Policy')}
        </div>
        <button onclick="restoreStorePurchases()" style="display:block;margin:0.6rem auto 0;background:none;border:none;color:#888;font-size:12px;text-decoration:underline;cursor:pointer;font-family:inherit;">Restore purchases</button>`;
    }

    function renderSubscriptionRow() {
      const el = document.getElementById('subscriptionRow');
      if (!el) return;
      const small = 'display:inline-block;background:none;border:0.5px solid rgba(255,255,255,0.15);border-radius:8px;color:#bbb;font-size:12px;font-weight:600;padding:0.45rem 0.8rem;margin:0.5rem 0.4rem 0 0;cursor:pointer;font-family:inherit;';
      const premium = userPlan === 'premium';
      let html = `<div style="font-size:13px;color:#ddd;">Plan: <strong style="color:${premium ? '#e63b30' : '#aaa'};">${premium ? 'Flowmora Premium' : 'Free'}</strong></div>`;
      if (premium) html += `<button style="${small}" onclick="openManageSubscription()">Manage subscription</button>`;
      else if (!IS_NATIVE || NATIVE_BILLING) html += `<button style="${small}color:#fff;border-color:rgba(230,59,48,0.5);" onclick="closeProfile();startUpgrade()">Upgrade to Premium</button>`;
      if (NATIVE_BILLING) html += `<button style="${small}" onclick="restoreStorePurchases().then(renderSubscriptionRow)">Restore purchases</button>`;
      el.innerHTML = html;
    }

    function openManageSubscription() {
      if (IS_NATIVE) { openExternal(STORE_SUBS_URL); return; }
      window.location.href = 'mailto:support@flowmorajiujitsu.com?subject=Manage%20my%20Flowmora%20subscription';
    }

    // Android hardware/gesture back: close whatever is on top, then step back
    // to Home, and only exit from Home. Without this the app quits from any tab.
    (function wireAndroidBack() {
      const App = window.Capacitor?.Plugins?.App;
      if (!IS_ANDROID || !App?.addListener) return;
      const vis = id => { const el = document.getElementById(id); return el && getComputedStyle(el).display !== 'none' && (el.offsetWidth || el.offsetHeight); };
      App.addListener('backButton', () => {
        // Overlays, top-most first. Blocking modals (terms, onboarding) are left alone.
        if (document.getElementById('termsUpdateModal')) return;
        if (document.getElementById('onboardModal')?.classList.contains('open')) return;
        const sheet = document.getElementById('paywallSheet'); if (sheet) { sheet.remove(); return; }
        const promo = document.getElementById('promoModal'); if (promo) { promo.remove(); return; }
        const exact = document.getElementById('exactAlarmModal'); if (exact) { exact.remove(); return; }
        if (document.getElementById('curriculumModal')?.classList.contains('open')) { closeCurriculumUpload(); return; }
        if (document.getElementById('roadmapView')?.classList.contains('open')) { closeRoadmap(); return; }
        if (vis('videoModal')) { closeVideo(); return; }
        if (vis('timerLogSheet')) { timerSkipLog(); return; }
        if (vis('logModal')) { hideLogModal(); return; }
        if (vis('profileModal')) { closeProfile(); return; }
        if (document.getElementById('rollTimerPanel')?.classList.contains('visible')) {
          // Don't kill a running round — just tuck the panel away
          document.getElementById('rollTimerPanel').classList.remove('visible');
          document.getElementById('rollTimerFab').style.display = '';
          return;
        }
        if (activeNemesisId) { closeNemesisDetail(); return; }
        const active = document.querySelector('.nav-item.active')?.id?.replace('nav-', '');
        if (active && active !== 'dashboard') { showView('dashboard'); return; }
        App.exitApp();
      });
    })();

    // Open an external URL: in-app browser sheet on native, new tab on web
    function openExternal(url) {
      const Browser = window.Capacitor?.Plugins?.Browser;
      if (IS_NATIVE && Browser) { Browser.open({ url }); return; }
      window.open(url, '_blank');
    }

    // ── Premium: authenticated AI calls + paywall ─────────────────────────
    async function startUpgrade() {
      if (IS_NATIVE) {
        // In the apps, "upgrade" always goes through the paywall so the
        // store-required subscription terms are on screen before buying.
        track('upgrade_started', { store: NATIVE_PLATFORM });
        if (!NATIVE_BILLING) { alert('Premium is coming to the app soon. Your free coaching limit resets on the 1st.'); return; }
        showPaywall(true);
        return;
      }
      track('upgrade_started');
      try {
        const res = await aiFetch('/api/billing?op=checkout', {});
        const d = await res.json();
        if (d.url) { openExternal(d.url); return; }
        alert('Could not start checkout — please try again.');
      } catch (e) {
        alert(e?.message?.includes('payments_not_configured')
          ? 'Premium subscriptions are launching very soon — your limit resets on the 1st.'
          : 'Could not start checkout — please try again.');
      }
    }

    async function aiFetch(path, body, { silent = false } = {}) {
      if (/^\/api\/(mentor|gameplan|learn)\b/.test(path)) await ensureSafetyAck();
      let token = null;
      try { token = (await sb.auth.getSession())?.data?.session?.access_token || null; } catch (e) {}
      const res = await fetch(api(path), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', ...(token ? { Authorization: `Bearer ${token}` } : {}) },
        body: JSON.stringify(body)
      });
      if (res.status === 402) {
        if (!silent) showPaywall();
        const err = new Error('ai_limit');
        err.isLimit = true;
        throw err;
      }
      if (!res.ok) {
        let code = '';
        try { code = (await res.json()).error || ''; } catch (e) {}
        const friendly = AI_ERROR_TEXT[code]
          || (res.status === 429 ? AI_ERROR_TEXT.rate_limited : res.status >= 500 ? AI_ERROR_TEXT.server_error : '');
        if (code === 'ai_unavailable') track('ai_unavailable', { path });
        if (code === 'daily_limit') track('ai_daily_limit', { path });
        const err = new Error(friendly || `${code || 'Request failed'} (${res.status})`);
        err.friendly = friendly;
        err.code = code;
        err.status = res.status;
        throw err;
      }
      return res;
    }

    // What users see when an AI request can't be served. Never mentions
    // credits, spend limits or providers.
    const AI_ERROR_TEXT = {
      ai_unavailable: 'Coaching is catching its breath — give it a few minutes and try again.',
      daily_limit: 'That\'s a big day of coaching. Your mentor refreshes overnight — go put it on the mats.',
      auth_required: 'Your session has expired. Please sign out and back in, then try again.',
      rate_limited: 'Easy there — too many requests at once. Give it a minute and try again.',
      server_error: 'Something went wrong on our side. Please try again.'
    };
    const aiErrorText = (err, fallback) => err?.friendly || fallback;

    // ── AI answer footer: safety line + Report ────────────────────────────
    // Google Play requires apps that generate content with AI to let users
    // report it without leaving the app; Apple expects the same of AI chat.
    // Every AI answer gets this footer. Reports land in Supabase ai_reports
    // (insert-own RLS; admins read) with the answer that was reported.
    const AI_SAFETY_LINE = 'AI coaching is general information, not medical advice. Train with a qualified instructor, tap early, and stop if anything hurts.';
    const _aiAnswers = {};
    let _aiSeq = 0;
    function rememberAiAnswer(feature, answer, question) {
      const id = 'ai' + (++_aiSeq);
      _aiAnswers[id] = { feature, answer: String(answer || '').slice(0, 4000), question: String(question || '').slice(0, 1000) };
      return id;
    }
    function aiFooter(feature, answer, question) {
      const id = rememberAiAnswer(feature, answer, question);
      return `<div class="ai-footer"><span>${AI_SAFETY_LINE}</span><button type="button" class="ai-report-btn" onclick="openAiReport('${id}')">Report</button></div>`;
    }
    const lastUserMessage = () => [...conversationHistory].reverse().find(m => m.role === 'user')?.content || '';

    const AI_REPORT_REASONS = [
      ['unsafe', 'Unsafe — could cause injury'],
      ['wrong', 'Wrong or misleading technique'],
      ['offensive', 'Offensive or inappropriate'],
      ['other', 'Something else']
    ];
    function openAiReport(id) {
      if (!_aiAnswers[id] || document.getElementById('aiReportModal')) return;
      const el = document.createElement('div');
      el.id = 'aiReportModal';
      el.className = 'cu-modal open';
      el.onclick = e => { if (e.target === el) el.remove(); };
      el.innerHTML = `<div class="cu-card" style="max-width:420px;">
        <button class="cu-close" onclick="document.getElementById('aiReportModal').remove()">✕</button>
        <div class="cu-title">Report this answer</div>
        <div class="cu-sub">Flowmora reviews every report. The answer is sent along with it so we can see what went wrong.</div>
        ${AI_REPORT_REASONS.map(([v, label], i) => `<label class="ai-report-opt"><input type="radio" name="aiReportReason" value="${v}" ${i === 0 ? 'checked' : ''}> ${label}</label>`).join('')}
        <textarea id="aiReportDetails" class="log-input" rows="3" maxlength="1000" placeholder="What was wrong? (optional)" style="margin-top:0.6rem;"></textarea>
        <div id="aiReportMsg" style="display:none;font-size:12px;color:#e24b4a;margin-top:0.4rem;"></div>
        <button class="cu-btn" id="aiReportSend" onclick="submitAiReport('${id}')">Send report</button>
      </div>`;
      document.body.appendChild(el);
    }
    async function submitAiReport(id) {
      const a = _aiAnswers[id];
      const btn = document.getElementById('aiReportSend');
      const reason = document.querySelector('input[name="aiReportReason"]:checked')?.value || 'other';
      const details = (document.getElementById('aiReportDetails')?.value || '').trim().slice(0, 1000);
      if (!a || !currentUser) return;
      btn.disabled = true; btn.textContent = 'Sending…';
      const { error } = await sb.from('ai_reports').insert({
        user_id: currentUser.id, feature: a.feature, reason, details: details || null,
        answer_excerpt: a.answer, question_excerpt: a.question || null, platform: NATIVE_PLATFORM
      });
      track('ai_reported', { feature: a.feature, reason, stored: !error });
      if (error) {
        btn.disabled = false; btn.textContent = 'Send report';
        const msg = document.getElementById('aiReportMsg');
        msg.textContent = 'Couldn\'t send — check your connection and try again, or email support@flowmorajiujitsu.com.';
        msg.style.display = 'block';
        return;
      }
      document.querySelector('#aiReportModal .cu-card').innerHTML = `
        <div class="cu-title">Thanks — report received</div>
        <div class="cu-sub">We review every report and use them to make the Mentor safer and more accurate. If you think you've been hurt, please see a medical professional.</div>
        <button class="cu-btn" onclick="document.getElementById('aiReportModal').remove()">Done</button>`;
    }

    // ── One-time safety acknowledgment before AI coaching ─────────────────
    // Recorded in the immutable terms_acceptances log (version SAFETY_ACK_VERSION)
    // as evidence, plus user metadata so it's asked once per account.
    const SAFETY_ACK_VERSION = 'safety-2026-10-06';
    let _safetyAckPromise = null;
    function hasSafetyAck() {
      if (currentUser?.user_metadata?.safety_ack === SAFETY_ACK_VERSION) return true;
      try { return localStorage.getItem('safetyAck:' + (currentUser?.id || '')) === SAFETY_ACK_VERSION; } catch (_) { return false; }
    }
    function ensureSafetyAck() {
      if (!currentUser || hasSafetyAck()) return Promise.resolve();
      if (_safetyAckPromise) return _safetyAckPromise;
      _safetyAckPromise = new Promise((resolve, reject) => {
        const el = document.createElement('div');
        el.id = 'safetyAckModal';
        el.className = 'cu-modal open';
        el.innerHTML = `<div class="cu-card" style="max-width:440px;">
          <div class="toast-label" style="margin-bottom:6px;">Before you train with the Mentor</div>
          <div class="cu-title">Train smart, stay safe</div>
          <ul class="safety-list">
            <li>The Mentor's coaching is AI-generated general information. It can be wrong, and it isn't medical advice.</li>
            <li>Try new techniques only with a qualified instructor, a willing partner, and controlled intensity.</li>
            <li>Tap early and often. If you're hurt, stop and see a medical professional — the Mentor can't assess injuries.</li>
            <li>See something unsafe or wrong? Tap <strong>Report</strong> under any answer.</li>
          </ul>
          <button class="cu-btn" id="safetyAckYes">I understand</button>
          <button class="cu-btn ghost" id="safetyAckNo">Not now</button>
        </div>`;
        document.body.appendChild(el);
        document.getElementById('safetyAckNo').onclick = () => {
          el.remove(); _safetyAckPromise = null;
          const e = new Error('safety_ack_declined'); e.isLimit = true; // callers already stop quietly on isLimit
          reject(e);
        };
        document.getElementById('safetyAckYes').onclick = () => {
          el.remove(); _safetyAckPromise = null;
          try { localStorage.setItem('safetyAck:' + currentUser.id, SAFETY_ACK_VERSION); } catch (_) {}
          // Fire-and-forget: evidence log + account flag. Never block coaching on these.
          sb.from('terms_acceptances').insert({ user_id: currentUser.id, terms_version: SAFETY_ACK_VERSION, user_agent: navigator.userAgent.slice(0, 300) }).then(() => {}, () => {});
          sb.auth.updateUser({ data: { safety_ack: SAFETY_ACK_VERSION } }).then(({ data }) => { if (data?.user) currentUser = data.user; }, () => {});
          track('safety_ack', { version: SAFETY_ACK_VERSION });
          resolve();
        };
      });
      return _safetyAckPromise;
    }

    // chosen = the user tapped Upgrade themselves (vs. hitting the free limit)
    function showPaywall(chosen) {
      if (document.getElementById('paywallSheet')) return;
      track('paywall_shown', { chosen: !!chosen });
      const el = document.createElement('div');
      el.id = 'paywallSheet';
      el.style.cssText = 'position:fixed;inset:0;z-index:500;background:rgba(3,2,8,0.92);display:flex;padding:calc(1.25rem + env(safe-area-inset-top,0px)) 1.25rem calc(1.25rem + env(safe-area-inset-bottom,0px));overflow-y:auto;';
      el.innerHTML = `
        <div style="margin:auto;width:100%;max-width:400px;background:linear-gradient(160deg,rgba(26,12,12,0.97) 0%,rgba(10,5,8,0.99) 100%);border:1px solid rgba(230,59,48,0.4);border-top-color:rgba(255,90,70,0.6);border-radius:20px;padding:1.75rem 1.5rem;box-shadow:0 24px 80px rgba(0,0,0,0.8),0 0 40px rgba(230,59,48,0.15);">
          <div style="font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#e63b30;font-weight:600;margin-bottom:0.5rem;">Flowmora Premium</div>
          <div style="font-size:20px;font-weight:700;color:#f5f5f5;line-height:1.3;margin-bottom:0.5rem;">${chosen ? 'Unlimited coaching, every session' : 'You\'ve used your free coaching for this month'}</div>
          <div style="font-size:13px;color:#888;line-height:1.55;margin-bottom:1.25rem;">Your free plan includes 25 AI coaching actions a month. Premium removes the limit.</div>
          <div style="font-size:13px;color:#ccc;line-height:2;margin-bottom:1.25rem;">
            Unlimited AI mentor conversations<br>
            Unlimited post-session debriefs<br>
            Unlimited nemesis game plans<br>
            Unlimited voice session logging
          </div>
          ${upgradeCTA()}
          <button onclick="document.getElementById('paywallSheet').remove()" style="display:block;margin:0.9rem auto 0;background:none;border:none;color:#555;font-size:12px;cursor:pointer;font-family:inherit;">${!IS_NATIVE || NATIVE_BILLING ? 'Not now' : 'OK'}</button>
        </div>`;
      document.body.appendChild(el);
    }

    // State
    let userPlan = 'free'; // refreshed from Supabase on sign-in
    let currentUser = null;
    let currentSession = null;
    let cachedSessions = [];
    let beltHistory = [];
    let nemesisList = [];
    let nemesisRolls = {};
    let activeNemesisId = null;
    let nemesisRollResult = 'win';
    let drillData = {};
    let conversationHistory = [];
    let voiceEnabled = false;
    let mainRecognition = null;
    let chatRecognition = null;
    let isMainListening = false;
    let isChatListening = false;
    let authMode = 'signin';
    let userProfile = { belt: 'blue', stripes: 0, name: '', years: '', gym: '', target_promotion: '', weeklyGoal: 3 };
    let _selectedBelt = 'blue';
    let _selectedStripes = 0;
    let _selectedWeeklyGoal = 3;

    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    // Android's WebView has no SpeechRecognition — native recognizer is the planned fix
    const VOICE_UNSUPPORTED_MSG = IS_ANDROID
      ? 'Voice input isn\'t available in the Android app yet — you can type instead. It\'s coming in an update.'
      : 'Voice input is not supported in this browser. Try Safari (iPhone) or Chrome.';

    // Auth state listener — pre-load sessions so the mentor always knows your history
    function hideBootScreen() {
      const b = document.getElementById('bootScreen');
      if (!b) return;
      b.style.opacity = '0';
      setTimeout(() => b.remove(), 400);
    }
    // Failsafe: never leave the boot screen up longer than 6s, even if a load hangs
    setTimeout(hideBootScreen, 6000);
    window.__appStarted = true; // main script got through startup; stand down the boot backstop

    sb.auth.onAuthStateChange(async (event, session) => {
      currentUser = session?.user || null;
      // Arriving via a password-reset email link: prompt them to set a new
      // password immediately while the recovery session is active
      if (event === 'PASSWORD_RECOVERY') startPasswordRecovery();
      if (currentUser) {
        document.getElementById('authModal').style.display = 'none';
        document.getElementById('userEmail').textContent = currentUser.email;
        document.getElementById('userSection').style.display = 'flex';
        // Load profile from user metadata
        const meta = currentUser.user_metadata || {};
        userProfile = {
          belt: meta.belt || 'blue',
          stripes: meta.stripes !== undefined ? parseInt(meta.stripes) : 0,
          name: meta.display_name || '',
          years: meta.years_training || '',
          gym: meta.gym || '',
          target_promotion: meta.target_promotion || '',
          weeklyGoal: meta.weekly_goal !== undefined ? parseInt(meta.weekly_goal) : 3
        };
        applyBeltBadge(userProfile.belt);
        // Fetch fresh user record for the premium flag — the cached session
        // can be stale after a plan change (upgrade/cancellation).
        //
        // Deferred with setTimeout(0) ON PURPOSE. Supabase holds an internal
        // auth lock for the duration of an onAuthStateChange callback, so any
        // sb.auth.* call made inside it can deadlock the NEXT auth call. That
        // is exactly what hung "Update password" forever after a reset link:
        // updateUser sat waiting on a lock this callback still held. Deferring
        // lets the callback return and release the lock first.
        setTimeout(() => {
          sb.auth.getUser().then(({ data }) => {
            userPlan = data?.user?.app_metadata?.plan || 'free';
            renderDashboard();
            initStoreBilling(data?.user?.id);
            try { window.posthog?.identify(currentUser.id, { email: currentUser.email, belt: userProfile.belt, plan: userPlan, native: IS_NATIVE }); } catch (_) {}
          }).catch(() => {});
        }, 0);
        // First-run: no onboarded flag and no name set means brand-new user
        if (!meta.onboarded && !meta.display_name) setTimeout(showOnboarding, 400);
        // Load real data immediately, then reveal the app — the boot screen
        // hides the generic placeholder dashboard until this completes
        (async () => {
          try {
            const { data } = await sb.from('sessions').select('*').order('created_at', { ascending: false }).limit(200);
            if (data) cachedSessions = data.map(s => ({ ...s, weaknessFlag: s.weakness_flag, strengthFlag: s.strength_flag, rollingRounds: s.rolling_rounds }));
          } catch (_) {}
          try { await loadBeltHistory(); } catch (_) {}
          try { await loadNemesis(); } catch (_) {}
          try { await loadRoadmapProgress(); } catch (_) {}
          try { await loadCustomCurricula(); } catch (_) {}
          try { flushPendingSessions(); } catch (_) {}
          try { ensureTermsAccepted(); } catch (_) {}
          renderDashboard();
          hideBootScreen();
          fetchCalendarEventsSilent();
        })();
      } else {
        document.getElementById('authModal').style.display = 'flex';
        document.getElementById('userSection').style.display = 'none';
        hideBootScreen();
        cachedSessions = [];
        beltHistory = [];
        nemesisList = [];
        nemesisRolls = {};
        roadmapProgress = {};
        customCurricula = [];
        _seenBadges = null;
        userProfile = { belt: 'blue', stripes: 0, name: '', years: '', gym: '', target_promotion: '', weeklyGoal: 3 };
      }
    });

    // Auth functions
    function switchAuthTab(mode) {
      authMode = mode;
      document.querySelectorAll('.auth-tab').forEach((t, i) => {
        t.classList.toggle('active', (i === 0 && mode === 'signin') || (i === 1 && mode === 'signup'));
      });
      document.getElementById('authBtn').textContent = mode === 'signin' ? 'Sign In' : 'Create Account';
      document.getElementById('authError').style.display = 'none';
      document.getElementById('authSuccess').style.display = 'none';
      document.getElementById('ageGroup').style.display = mode === 'signup' ? 'block' : 'none';
      if (mode === 'signup') fillAgeSelects();
    }

    // ── Signup age screen ────────────────────────────────────────────────
    // Neutral date-of-birth question (no hint of the cutoff). Under 13 can't
    // sign up — remembered on this device so changing the answer doesn't
    // work. 13–17 need a parent/guardian to agree to the Terms (§5).
    // The birth date itself is never stored or sent anywhere.
    const MIN_AGE = 13;
    function fillAgeSelects() {
      const m = document.getElementById('birthMonth');
      const y = document.getElementById('birthYear');
      if (m.options.length) return;
      const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
      m.innerHTML = '<option value="">Month</option>' + months.map((n, i) => `<option value="${i}">${n}</option>`).join('');
      const now = new Date().getFullYear();
      let years = '<option value="">Year</option>';
      for (let yr = now; yr >= now - 100; yr--) years += `<option value="${yr}">${yr}</option>`;
      y.innerHTML = years;
    }
    // Whole years old, counting the birth month as not yet passed (the safe side).
    function ageFromSelects() {
      const m = document.getElementById('birthMonth').value;
      const y = document.getElementById('birthYear').value;
      if (m === '' || y === '') return null;
      const now = new Date();
      let age = now.getFullYear() - Number(y);
      if (now.getMonth() <= Number(m)) age--;
      return age;
    }
    function updateAgeGate() {
      const age = ageFromSelects();
      document.getElementById('guardianRow').style.display = (age !== null && age >= MIN_AGE && age < 18) ? 'flex' : 'none';
      // Marketing email is adults only, and always starts unticked
      const adult = age !== null && age >= 18;
      document.getElementById('marketingRow').style.display = adult ? 'flex' : 'none';
      if (!adult) document.getElementById('marketingOk').checked = false;
    }
    // Returns an error message, or '' when signup can go ahead.
    function checkAgeGate() {
      let blocked = false;
      try { blocked = localStorage.getItem('ageGateBlocked') === '1'; } catch (_) {}
      if (blocked) return 'Sorry, you need to be at least 13 to use Flowmora.';
      const age = ageFromSelects();
      if (age === null) return 'Please enter your date of birth.';
      if (age < MIN_AGE) {
        try { localStorage.setItem('ageGateBlocked', '1'); } catch (_) {}
        return 'Sorry, you need to be at least 13 to use Flowmora.';
      }
      if (age < 18 && !document.getElementById('guardianOk').checked) {
        return 'Since you\'re under 18, a parent or guardian needs to agree to the Terms for you. Tick the box once they have.';
      }
      return '';
    }

    // ── Terms acceptance audit trail ─────────────────────────────────────
    // Enforceability turns on proving THIS user accepted THIS version at THIS
    // time. terms_acceptances is insert-only (no update/delete policy), so the
    // record can't be altered after the fact.
    const TERMS_VERSION = '2026-10-29';

    // Signup happens before the session exists (email confirmation first), so
    // stash the moment they actually consented and write it once authenticated.
    function stashTermsConsent() {
      try {
        localStorage.setItem('pendingTermsConsent', JSON.stringify({
          version: TERMS_VERSION, at: new Date().toISOString()
        }));
      } catch (_) {}
    }

    async function recordTermsAcceptance(acceptedAt) {
      if (!currentUser) return false;
      try {
        const { error } = await sb.from('terms_acceptances').insert({
          user_id: currentUser.id,
          terms_version: TERMS_VERSION,
          accepted_at: acceptedAt || new Date().toISOString(),
          user_agent: String(navigator.userAgent || '').slice(0, 300)
        });
        return !error;
      } catch (_) { return false; }
    }

    // Runs after every sign-in. Either backfills the signup consent, or asks an
    // existing user to accept an updated version before continuing.
    async function ensureTermsAccepted() {
      if (!currentUser) return;
      let already = false;
      try {
        const { data } = await sb.from('terms_acceptances')
          .select('id').eq('user_id', currentUser.id).eq('terms_version', TERMS_VERSION).limit(1);
        already = !!(data && data.length);
      } catch (_) { return; } // table missing or offline — never block the app
      if (already) return;

      let pending = null;
      try { pending = JSON.parse(localStorage.getItem('pendingTermsConsent') || 'null'); } catch (_) {}
      if (pending && pending.version === TERMS_VERSION) {
        if (await recordTermsAcceptance(pending.at)) {
          localStorage.removeItem('pendingTermsConsent');
        }
        return;
      }
      showTermsUpdateModal();
    }

    function showTermsUpdateModal() {
      if (document.getElementById('termsUpdateModal')) return;
      const el = document.createElement('div');
      el.id = 'termsUpdateModal';
      el.className = 'cu-modal open';
      el.innerHTML = `<div class="cu-card" style="max-width:420px;">
        <div class="cu-title">We've updated our Terms</div>
        <div class="cu-sub">We've updated our Terms of Service and Privacy Policy. The Terms include an <strong>arbitration agreement and class action waiver</strong> that affects how disputes are resolved — <strong>you can opt out within 30 days</strong> (Section 12.6). This update spells out our age rules: <strong>you must be 13 or older</strong>, and if you're under 18 a parent or guardian must agree to the Terms for you. It also covers YouTube videos shown in the app. By tapping I agree you confirm you meet these requirements.</div>
        <div style="display:flex;gap:14px;margin:0.5rem 0 1rem;">
          <a href="https://flowmorajiujitsu.com/terms.html" onclick="if(IS_NATIVE){event.preventDefault();openExternal('https://flowmorajiujitsu.com/terms.html');}" style="color:#e87d75;font-size:13px;">Terms of Service</a>
          <a href="https://flowmorajiujitsu.com/privacy.html" onclick="if(IS_NATIVE){event.preventDefault();openExternal('https://flowmorajiujitsu.com/privacy.html');}" style="color:#e87d75;font-size:13px;">Privacy Policy</a>
        </div>
        <button class="cu-btn" id="termsAcceptBtn">I agree</button>
      </div>`;
      document.body.appendChild(el);
      document.getElementById('termsAcceptBtn').onclick = async () => {
        const b = document.getElementById('termsAcceptBtn');
        b.disabled = true; b.textContent = 'Saving…';
        await recordTermsAcceptance();
        track('terms_accepted', { version: TERMS_VERSION });
        el.remove();
      };
    }

    // True only while the user arrived via a reset link, so updatePassword knows
    // to finish the job by dropping them into the app instead of leaving them
    // parked in the settings sheet.
    let _inPasswordRecovery = false;

    // A password change (including a reset from the email link) ends every
    // other signed-in session. The app on that device still looks signed in
    // until it next talks to Supabase, which then fails with "Auth session
    // missing". Treat that as a sign-out, not an error.
    function isSessionLost(error) {
      return /auth session missing|session.?not.?found|refresh token|jwt expired/i.test(error?.message || '');
    }
    async function showSignedOutNotice() {
      try { closeProfile(); } catch (_) {}
      try { await sb.auth.signOut({ scope: 'local' }); } catch (_) {}
      document.getElementById('authModal').style.display = 'flex';
      switchAuthTab('signin');
      const msg = document.getElementById('authSuccess');
      msg.textContent = "You've been signed out because your password was changed. Sign in with your new password.";
      msg.style.display = 'block';
    }

    // Opens the profile sheet focused on the new-password fields.
    function startPasswordRecovery() {
      _inPasswordRecovery = true;
      setTimeout(() => {
        openProfile();
        const el = document.getElementById('newPassword');
        el?.scrollIntoView({ block: 'center' });
        el?.focus();
        const msg = document.getElementById('pwMsg');
        if (msg) {
          msg.textContent = 'Recovery link verified — choose a new password below.';
          msg.style.color = '#4ade80';
          msg.style.display = 'block';
        }
      }, 700);
    }

    // Safety net: if the recovery tokens are in the URL but the auth event
    // didn't fire (timing, or the listener attached late), pick them up here.
    (function handleRecoveryFromUrl() {
      try {
        const h = window.location.hash || '';
        if (!/type=recovery/.test(h)) return;
        const p = new URLSearchParams(h.replace(/^#/, ''));
        const access_token = p.get('access_token');
        const refresh_token = p.get('refresh_token');
        if (!access_token || !refresh_token) return;
        sb.auth.setSession({ access_token, refresh_token }).then(({ error }) => {
          if (!error) {
            history.replaceState(null, '', window.location.pathname); // strip tokens from the URL
            startPasswordRecovery();
          }
        });
      } catch (_) {}
    })();

    async function sendPasswordReset() {
      const email = document.getElementById('authEmail').value.trim();
      const errorEl = document.getElementById('authError');
      const successEl = document.getElementById('authSuccess');
      errorEl.style.display = 'none';
      successEl.style.display = 'none';
      if (!email) {
        errorEl.textContent = 'Enter your email above first, then tap Forgot password.';
        errorEl.style.display = 'block';
        return;
      }
      const { error } = await sb.auth.resetPasswordForEmail(email, { redirectTo: 'https://flowmorajiujitsu.com/app' });
      if (error) {
        errorEl.textContent = error.message;
        errorEl.style.display = 'block';
      } else {
        successEl.textContent = 'Reset link sent — check your email, then open the link on this device.';
        successEl.style.display = 'block';
      }
    }

    async function handleAuth() {
      const email = document.getElementById('authEmail').value.trim();
      const password = document.getElementById('authPassword').value;
      const btn = document.getElementById('authBtn');
      const errorEl = document.getElementById('authError');
      const successEl = document.getElementById('authSuccess');

      if (!email || !password) {
        errorEl.textContent = 'Please enter your email and password.';
        errorEl.style.display = 'block';
        return;
      }
      if (authMode === 'signup') {
        const ageError = checkAgeGate();
        if (ageError) {
          errorEl.textContent = ageError;
          errorEl.style.display = 'block';
          return;
        }
      }

      btn.disabled = true;
      btn.textContent = 'Loading...';
      errorEl.style.display = 'none';
      successEl.style.display = 'none';

      if (authMode === 'signin') {
        const { error } = await sb.auth.signInWithPassword({ email, password });
        if (error) {
          errorEl.textContent = error.message;
          errorEl.style.display = 'block';
          btn.disabled = false;
          btn.textContent = 'Sign In';
        }
      } else {
        // Record the moment of consent — the signup form displays the Terms and
        // Privacy links directly above this button.
        stashTermsConsent();
        // Confirmation link opens the app (signed in), not the marketing homepage
        const marketing = document.getElementById('marketingOk').checked;
        const { error } = await sb.auth.signUp({ email, password, options: {
          emailRedirectTo: 'https://flowmorajiujitsu.com/app',
          data: { marketing_opt_in: marketing, marketing_opt_in_at: new Date().toISOString() }
        } });
        if (error) {
          errorEl.textContent = error.message;
          errorEl.style.display = 'block';
          btn.disabled = false;
          btn.textContent = 'Create Account';
        } else {
          successEl.textContent = 'Check your email to confirm your account, then sign in.';
          successEl.style.display = 'block';
          btn.disabled = false;
          btn.textContent = 'Create Account';
          switchAuthTab('signin');
        }
      }
    }

    async function updatePassword() {
      const p1 = document.getElementById('newPassword')?.value || '';
      const p2 = document.getElementById('newPassword2')?.value || '';
      const msg = document.getElementById('pwMsg');
      const btn = document.getElementById('pwSaveBtn');
      const show = (text, ok) => {
        msg.textContent = text;
        msg.style.color = ok ? '#4ade80' : '#e63b30';
        msg.style.display = 'block';
      };
      if (p1.length < 8) { show('Password must be at least 8 characters.', false); return; }
      if (p1 !== p2) { show("Passwords don't match.", false); return; }
      btn.disabled = true;
      btn.textContent = 'Updating...';
      // Never let this spin forever: if the auth lock is contended the promise
      // can hang with no error, leaving the button stuck on "Updating...".
      let error;
      try {
        const res = await Promise.race([
          sb.auth.updateUser({ password: p1 }),
          new Promise((_, rej) => setTimeout(() => rej(new Error('timeout')), 15000))
        ]);
        error = res.error;
      } catch (e) {
        error = { message: e.message === 'timeout'
          ? "That took too long. Close the app, reopen it, and try again from Settings — you're already signed in."
          : (e.message || 'Something went wrong.') };
      }
      btn.disabled = false;
      btn.textContent = 'Update password';
      if (error) {
        // The usual cause is an expired or already-used recovery link, which
        // Supabase surfaces as a bare "Auth session missing" — useless to a user.
        const missing = /session|missing|jwt|expired/i.test(error.message || '');
        // Changing it from Settings (not a reset link) with a dead session means
        // they were signed out elsewhere — e.g. a reset on another device.
        if (missing && !_inPasswordRecovery) { showSignedOutNotice(); return; }
        show(missing
          ? 'Your reset link has expired or was already used. Request a new one from the sign-in screen and open it on this device.'
          : error.message, false);
        return;
      }
      document.getElementById('newPassword').value = '';
      document.getElementById('newPassword2').value = '';

      if (_inPasswordRecovery) {
        // Arrived via a reset link: the new password is set and the session is
        // valid, so take them into the app. A reload boots the normal signed-in
        // path cleanly rather than leaving them in a half-recovered state.
        _inPasswordRecovery = false;
        show('Password updated — signing you in…', true);
        setTimeout(() => {
          try { closeProfile(); } catch (_) {}
          window.location.replace(window.location.pathname);
        }, 1200);
        return;
      }

      show('Password updated.', true);
      // Changed from Settings while already signed in — just close the sheet.
      setTimeout(() => { try { closeProfile(); } catch (_) {} }, 1200);
    }

    // ── Affiliate recommendations ────────────────────────────────────────
    // The rules below are deliberately encoded in code (not left to
    // discipline) so this can never drift into feeling like advertising.
    // See AFFILIATE-PLAN.md.
    const FUJI_URL = 'https://www.fujisports.com/JEROME89659';
    const FANATICS_REF = 'rfsn=9395709.fd32942';
    const fanaticsSearch = term => `https://bjjfanatics.com/search?q=${encodeURIComponent(term)}&${FANATICS_REF}`;
    // Technique → BJJ Fanatics search. Checked against the Mentor's position
    // first, then the question. Most specific first; first match wins.
    const FANATICS_TOPICS = [
      { name: 'leg locks',      match: /\b(leg ?locks?|heel ?hooks?|ankle ?locks?|knee ?bars?|toe ?holds?|ashi|saddle|inside sankaku|411|50.?50)\b/i },
      { name: 'half guard',     match: /\b(half ?guard|deep half|knee ?shield|lockdown)\b/i },
      { name: 'de la riva',     match: /\b(de ?la ?riva|dlr|reverse de ?la ?riva|rdlr|berimbolo)\b/i },
      { name: 'butterfly guard', match: /\bbutterfly( guard| hooks?| sweeps?)?\b/i },
      { name: 'x guard',        match: /\b(single leg x|slx|x.?guard)\b/i },
      { name: 'spider guard',   match: /\b(spider|lasso)( guard)?\b/i },
      { name: 'closed guard',   match: /\bclosed guard\b/i },
      { name: 'guard passing',  match: /\b(guard pass(es|ing)?|pass(ing)? (the |his |her |their )?guard|torreando|toreando|knee ?cut|knee slice|over.?under pass|leg drag|stack pass|body lock pass)\b/i },
      { name: 'side control',   match: /\b(side control|side mount|kesa gatame|scarf hold|100 kilos)\b/i },
      { name: 'north south',    match: /\bnorth.?south\b/i },
      { name: 'knee on belly',  match: /\bknee on (belly|stomach)\b/i },
      { name: 'mount',          match: /\b(mount(ed|ing|s)?( escapes?| attacks?)?|s.?mount|high mount)\b/i },
      { name: 'back attacks',   match: /\b(back (control|takes?|attacks?|mount|escapes?)|rear naked|rnc|take (the|my|his|her|their) back|taking (the )?back|seatbelt|body triangle)\b/i },
      { name: 'turtle',         match: /\bturtle\b/i },
      { name: 'guillotine',     match: /\bguillotines?\b/i },
      { name: 'triangle',       match: /\btriangles?( choke)?\b/i },
      { name: 'armbar',         match: /\b(arm ?bars?|juji ?gatame)\b/i },
      { name: 'kimura',         match: /\b(kimuras?|americanas?)\b/i },
      { name: 'takedowns',      match: /\b(takedowns?|single legs?|double legs?|wrestling|judo|ankle picks?|snap ?downs?|guard pulls?|pulling guard)\b/i },
      { name: 'open guard',     match: /\b(open guard|guard retention|(my |the )?guard)\b/i }
    ];
    // Never put a shop link under a pain or injury question
    const INJURY_RE = /\b(hurts?|hurting|pain(ful)?|injur\w*|sore|torn|tear|sprain\w*|pop(ped)?|doctor|surgery|physio|rehab)\b/i;
    function fanaticsFor(text) {
      const t = String(text || '');
      const hit = FANATICS_TOPICS.find(f => f.match.test(t));
      if (!hit) return null;
      return {
        tag: `fanatics:${hit.name}`,
        title: `Go deeper: ${hit.name}`,
        blurb: `Full ${hit.name} instructionals from top coaches at BJJ Fanatics.`,
        url: fanaticsSearch(hit.name), cta: 'Browse instructionals'
      };
    }
    const AFFILIATE = {
      enabled: true,
      label: 'Partner link',   // FTC disclosure shown on every card
      // topic (lowercased position/technique) → { title, blurb, url, cta }
      byTopic: {},
      // Matched against the user's own question, first match wins. Patterns
      // stay narrow on purpose: a bare "gi" would also fire on technique
      // questions ("gi grips", "in the gi").
      byKeyword: [
        { // asking about gear itself
          tag: 'gear',
          match: /\b(gis|kimonos?|rash ?guards?|spats|grappling shorts|fight shorts|bjj shorts|gear|uniform|(new|buy|buying|best|which|first|competition|comp|ibjjf|cheap|good) gi|gi (size|sizing|shrink\w*|brand|recommendations?|weave|patch\w*)|gi\b[^.?!]{0,25}\b(buy|purchase|order)|(buy|purchase|order)\b[^.?!]{0,25}\bgi)\b/i,
          title: 'Fuji Sports',
          blurb: 'Gis, rash guards, shorts and spats for training and competition.',
          url: FUJI_URL, cta: 'See Fuji gear'
        },
        { // competing
          tag: 'competition',
          match: /\b(compet(e|es|ed|ing|ition|itions|itor)|tournaments?|ibjjf|naga|grappling industries|weigh[- ]?ins?|weight class(es)?|cutting weight|weight cut|first comp|comp prep|match day|bracket)\b/i,
          title: 'Fuji Sports',
          blurb: 'Competition-legal gis and rash guards for tournament day.',
          url: FUJI_URL, cta: 'See Fuji gear'
        },
        { // mat hygiene — a layer between skin and mats genuinely helps
          tag: 'hygiene',
          match: /\b(ringworm|staph|impetigo|mat herpes|herpes gladiatorum|skin infections?|mat hygiene|mat burn|rash from (the )?mats?)\b/i,
          title: 'Fuji Sports',
          blurb: 'Rash guards and spats add a layer between your skin and the mats.',
          url: FUJI_URL, cta: 'See Fuji gear'
        },
        { // just starting out
          tag: 'beginner',
          match: /\b((just |getting |how to |want to )?(start|started|starting) (bjj|jiu.?jitsu|grappling|training)|new to (bjj|jiu.?jitsu|grappling)|(my )?first (bjj |jiu.?jitsu )?(class|week|month)|complete beginner|what (do i need|should i (bring|wear)) (to start|for (my )?(first )?(bjj |jiu.?jitsu )?class|for (bjj|jiu.?jitsu|training)|to (my first|bjj|jiu.?jitsu|class)))\b/i,
          title: 'Fuji Sports',
          blurb: 'Gis, rash guards and shorts for your first months on the mats.',
          url: FUJI_URL, cta: 'See Fuji gear'
        }
      ],
      // Fixed placements outside the Mentor
      calendar: {
        tag: 'calendar',
        title: 'Competing? Fuji Sports',
        blurb: 'Competition-legal gis and rash guards for tournament day.',
        url: FUJI_URL, cta: 'See Fuji gear'
      },
      newBelt: {
        tag: 'new_belt',
        title: 'New belt, new kit? Fuji Sports',
        blurb: 'Belts, gis and rash guards.',
        url: FUJI_URL, cta: 'See Fuji gear'
      },
      // Permanent "Partner discounts" sheet (Home row + Settings). The user
      // opens it on purpose, so it doesn't use the one-card-per-visit slot.
      partners: [
        { name: 'Fuji Sports', perk: '10% off, applied automatically through this link',
          blurb: 'Gis, rash guards, shorts and spats for training and competition.',
          url: FUJI_URL, cta: 'Shop Fuji' },
        { name: 'BJJ Fanatics', perk: '',
          blurb: 'Instructionals from the coaches the Mentor already recommends.',
          url: `https://bjjfanatics.com/?${FANATICS_REF}`, cta: 'Browse instructionals' }
      ]
    };

    // A link may only appear if ALL of these hold:
    //  1. feature is on and the moment genuinely matches (topic, question,
    //     a competition list, or a new belt)
    //  2. the user hasn't opted out in Settings
    //  3. no card has been shown on another screen this visit (hard cap of 1;
    //     the calendar may redraw its own card without counting again)
    //
    // Deliberately NOT gated on plan: if a recommendation is genuinely useful
    // it's useful to subscribers too — they're the most engaged athletes and
    // the likeliest to want a deep-dive. Withholding it would be worse service
    // for the people paying most. The relevance bar is the safeguard, not the
    // paywall; anyone who disagrees can switch them off in Settings.
    let _affiliateShownThisSession = false;
    let _affiliateSurface = null;
    function partnerLinksAllowed(surface) {
      if (!AFFILIATE.enabled) return false;
      try { if (localStorage.getItem('hidePartnerLinks') === '1') return false; } catch (_) {}
      if (_affiliateShownThisSession) return surface === 'calendar' && _affiliateSurface === 'calendar';
      return true;
    }
    function affiliateFor(topic, question) {
      if (!partnerLinksAllowed('mentor')) return null;
      const key = String(topic || '').toLowerCase().trim();
      if (AFFILIATE.byTopic[key]) return AFFILIATE.byTopic[key];
      const q = String(question || '');
      const kw = AFFILIATE.byKeyword.find(k => k.match.test(q)) || null;
      // Asking about gear itself → Fuji. Otherwise a technique → Fanatics,
      // then competition / hygiene / beginner → Fuji.
      if (kw && kw.tag === 'gear') return kw;
      if (!INJURY_RE.test(q)) {
        const fan = fanaticsFor(key) || fanaticsFor(q);
        if (fan) return fan;
      }
      return kw;
    }

    function affiliateCardHTML(item, label) {
      return `<div class="aff-card">
        <div class="aff-label">${AFFILIATE.label}</div>
        <div class="aff-title">${esc(item.title)}</div>
        <div class="aff-blurb">${esc(item.blurb)}</div>
        <button class="aff-btn" onclick="openAffiliate('${esc(item.url)}','${esc(label)}')">${esc(item.cta || 'Go deeper')} &rarr;</button>
      </div>`;
    }
    function claimAffiliateSlot(surface, label) {
      if (_affiliateShownThisSession) return; // calendar redraw — already counted
      _affiliateShownThisSession = true;
      _affiliateSurface = surface;
      track('affiliate_shown', { topic: label, surface });
    }

    // Mentor: ONLY at the bottom of an answer — after all free value,
    // visually separate from the coaching, never inside the AI's own words.
    function renderAffiliateCard(topic, question) {
      const item = affiliateFor(topic, question);
      if (!item) return '';
      const label = topic || item.tag || item.title;
      claimAffiliateSlot('mentor', label);
      return affiliateCardHTML(item, label);
    }

    // Calendar: one card after the list, only when it includes competitions
    function renderCalendarAffiliate(events) {
      if (!events.some(e => e.type === 'competition')) return '';
      if (!partnerLinksAllowed('calendar')) return '';
      claimAffiliateSlot('calendar', 'calendar');
      return affiliateCardHTML(AFFILIATE.calendar, 'calendar');
    }

    // Promotion: on the "Level Up" screen after a new belt (not a stripe)
    function renderNewBeltAffiliate() {
      if (!partnerLinksAllowed('promotion')) return '';
      claimAffiliateSlot('promotion', 'new_belt');
      return affiliateCardHTML(AFFILIATE.newBelt, 'new_belt');
    }

    function openAffiliate(url, topic) {
      track('affiliate_clicked', { topic });
      openExternal(url); // in-app browser on native — App Store requirement
    }

    // Marketing email consent — off unless the user turns it on. Dated so
    // there's a record of when they agreed or changed their mind.
    async function toggleMarketing(el) {
      const on = el.checked;
      const data = { marketing_opt_in: on, marketing_opt_in_at: new Date().toISOString() };
      const { error } = await sb.auth.updateUser({ data });
      if (error) { el.checked = !on; alert('Could not save that. Please try again.'); return; }
      currentUser.user_metadata = { ...currentUser.user_metadata, ...data };
      track('marketing_opt_in_changed', { on });
    }

    function togglePartnerLinks(on) {
      localStorage.setItem('hidePartnerLinks', on ? '0' : '1');
      try { renderDashboard(); } catch (_) {} // show/hide the Home row
    }

    // Home: one slim row at the very bottom. Hidden when partner links are off.
    function partnerRowHTML() {
      if (!AFFILIATE.enabled || !AFFILIATE.partners.length) return '';
      try { if (localStorage.getItem('hidePartnerLinks') === '1') return ''; } catch (_) {}
      return `<button class="partner-row" onclick="openPartnersSheet('home')">
        <span><span class="partner-row-title">Partner discounts</span>
        <span class="partner-row-sub">10% off Fuji gear · BJJ Fanatics instructionals</span></span>
        <span class="partner-row-arrow">&rsaquo;</span>
      </button>`;
    }

    function openPartnersSheet(from) {
      closePartnersSheet();
      track('partners_opened', { from });
      const el = document.createElement('div');
      el.id = 'partnersSheet';
      el.className = 'partners-overlay';
      el.onclick = e => { if (e.target === el) closePartnersSheet(); };
      el.innerHTML = `<div class="partners-sheet">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.25rem;">
          <div class="section-title" style="margin:0;">Partner discounts</div>
          <button class="partners-close" onclick="closePartnersSheet()" aria-label="Close">&times;</button>
        </div>
        <div class="aff-blurb" style="margin-bottom:0.25rem;">Brands we trust. Flowmora may earn a commission, at no extra cost to you.</div>
        ${AFFILIATE.partners.map(p => `<div class="aff-card" style="margin-top:0.85rem;">
          <div class="aff-title">${esc(p.name)}</div>
          ${p.perk ? `<div class="partner-perk">${esc(p.perk)}</div>` : ''}
          <div class="aff-blurb">${esc(p.blurb)}</div>
          <button class="aff-btn" onclick="openAffiliate('${esc(p.url)}','partners:${esc(p.name)}')">${esc(p.cta)} &rarr;</button>
        </div>`).join('')}
      </div>`;
      document.body.appendChild(el);
    }
    function closePartnersSheet() {
      document.getElementById('partnersSheet')?.remove();
    }

    // Analytics helper — never let a tracking hiccup break the app
    function track(event, props) {
      try { window.posthog?.capture(event, props || {}); } catch (_) {}
    }

    function revealDeleteAccount() {
      document.getElementById('delAcctReveal').style.display = 'none';
      document.getElementById('delAcctConfirm').style.display = 'block';
    }
    function hideDeleteAccount() {
      document.getElementById('delAcctReveal').style.display = 'block';
      document.getElementById('delAcctConfirm').style.display = 'none';
      document.getElementById('delAcctInput').value = '';
      document.getElementById('delAcctMsg').style.display = 'none';
    }
    async function deleteAccount() {
      const msg = document.getElementById('delAcctMsg');
      const btn = document.getElementById('delAcctBtn');
      msg.style.display = 'none';
      if (document.getElementById('delAcctInput').value.trim() !== 'DELETE') {
        msg.textContent = 'Type DELETE (all caps) to confirm.';
        msg.style.display = 'block';
        return;
      }
      btn.disabled = true; btn.textContent = 'Deleting…';
      try {
        const { data: { session } } = await sb.auth.getSession();
        const res = await fetch(api('/api/delete-account'), {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${session?.access_token || ''}` }
        });
        if (!res.ok) {
          let detail = '';
          try { const j = await res.json(); detail = j.detail || j.error || ''; } catch (_) {}
          throw new Error(`${res.status}${detail ? ' — ' + detail : ''}`);
        }
        track('account_deleted');
        alert('Your account and all data have been deleted.');
        try { await sb.auth.signOut(); } catch (_) {}
        window.location.reload();
        return;
      } catch (e) {
        msg.textContent = `Couldn't delete your account (${e.message || 'unknown error'}). Try again, or contact support.`;
        msg.style.display = 'block';
      }
      btn.disabled = false; btn.textContent = 'Permanently delete my account';
    }

    async function signOut() {
      try { window.posthog?.reset(); } catch (_) {}
      await resetStoreBilling();
      await sb.auth.signOut();
    }

    // Profile
    const BELT_COLORS = { white: 'belt-white', blue: 'belt-blue', purple: 'belt-purple', brown: 'belt-brown', black: 'belt-black' };

    function applyBeltBadge(belt) {
      const badge = document.getElementById('beltBadge');
      if (!badge) return;
      badge.className = 'belt-badge ' + (BELT_COLORS[belt] || 'belt-blue');
      badge.textContent = belt.charAt(0).toUpperCase() + belt.slice(1);
    }

    function openProfile() {
      const emailEl = document.getElementById('profileEmail');
      if (emailEl) emailEl.textContent = currentUser?.email || '';
      const plToggle = document.getElementById('partnerLinksToggle');
      if (plToggle) plToggle.checked = localStorage.getItem('hidePartnerLinks') !== '1';
      const mkToggle = document.getElementById('marketingToggle');
      if (mkToggle) mkToggle.checked = currentUser?.user_metadata?.marketing_opt_in === true;
      const pwMsg = document.getElementById('pwMsg');
      if (pwMsg) pwMsg.style.display = 'none';
      renderSubscriptionRow();
      _selectedBelt = userProfile.belt;
      _selectedStripes = userProfile.stripes || 0;
      _selectedWeeklyGoal = userProfile.weeklyGoal || 3;
      document.getElementById('profileName').value = userProfile.name;
      document.getElementById('profileYears').value = userProfile.years;
      document.getElementById('profileGym').value = userProfile.gym;
      document.getElementById('profileTargetPromotion').value = userProfile.target_promotion || '';
      // Sync belt selector UI
      document.querySelectorAll('.belt-option').forEach(el => {
        el.classList.toggle('selected', el.dataset.belt === _selectedBelt);
      });
      // Sync stripe dots
      syncStripeDots(_selectedStripes);
      // Sync weekly goal pills
      document.querySelectorAll('.wg-pill').forEach(el => {
        el.classList.toggle('active', parseInt(el.dataset.goal) === _selectedWeeklyGoal);
      });
      document.getElementById('profileSaved').style.display = 'none';
      document.getElementById('profileSaveBtn').disabled = false;
      document.getElementById('profileModal').style.display = 'flex';
      document.body.style.overflow = 'hidden';
    }

    function selectStripes(n) {
      // Clicking the same dot again deselects (sets to n-1), clicking fills up to n
      _selectedStripes = (_selectedStripes === n) ? n - 1 : n;
      if (_selectedStripes < 0) _selectedStripes = 0;
      syncStripeDots(_selectedStripes);
    }

    function syncStripeDots(n) {
      document.querySelectorAll('.stripe-sel-dot').forEach((dot, i) => {
        dot.classList.toggle('active', i < n);
      });
    }

    function closeProfile() {
      document.getElementById('profileModal').style.display = 'none';
      document.body.style.overflow = '';
    }

    function selectBelt(belt) {
      _selectedBelt = belt;
      document.querySelectorAll('.belt-option').forEach(el => {
        el.classList.toggle('selected', el.dataset.belt === belt);
      });
    }

    function selectWeeklyGoal(n) {
      _selectedWeeklyGoal = n;
      document.querySelectorAll('.wg-pill').forEach(el => {
        el.classList.toggle('active', parseInt(el.dataset.goal) === n);
      });
    }

    async function saveProfile() {
      const btn = document.getElementById('profileSaveBtn');
      btn.disabled = true;
      btn.textContent = 'Saving...';
      const name = document.getElementById('profileName').value.trim();
      const years = document.getElementById('profileYears').value.trim();
      const gym = document.getElementById('profileGym').value.trim();
      const target_promotion = document.getElementById('profileTargetPromotion').value.trim();
      const prevRank = rankValue(userProfile.belt, userProfile.stripes);
      const { error } = await sb.auth.updateUser({
        data: { belt: _selectedBelt, stripes: _selectedStripes, display_name: name, years_training: years, gym, target_promotion, weekly_goal: _selectedWeeklyGoal }
      });
      if (error) {
        btn.disabled = false;
        btn.textContent = 'Save profile';
        if (isSessionLost(error)) { showSignedOutNotice(); return; }
        alert('Could not save profile: ' + error.message);
        return;
      }
      userProfile = { belt: _selectedBelt, stripes: _selectedStripes, name, years, gym, target_promotion, weeklyGoal: _selectedWeeklyGoal };
      applyBeltBadge(_selectedBelt);
      btn.textContent = 'Save profile';
      btn.disabled = false;
      const promoted = rankValue(_selectedBelt, _selectedStripes) > prevRank;
      document.getElementById('profileSaved').style.display = 'block';
      setTimeout(() => {
        document.getElementById('profileSaved').style.display = 'none';
        closeProfile();
        // Rank went up — celebrate it and get it into Belt History
        if (promoted) openPromotionModal(_selectedBelt, _selectedStripes);
        else renderDashboard();
      }, promoted ? 500 : 1200);
    }

    // ── Promotions ────────────────────────────────────────────────────────
    // A rank is belt × 5 + stripes, so any stripe or belt bump compares as a
    // simple integer. Detected on profile save, and prompted for once a target
    // promotion date has passed.

    const BELT_RANK = { white: 0, blue: 1, purple: 2, brown: 3, black: 4 };
    function rankValue(belt, stripes) { return (BELT_RANK[belt] ?? 0) * 5 + (parseInt(stripes) || 0); }
    function rankLabel(belt, stripes) {
      const n = parseInt(stripes) || 0;
      return belt.charAt(0).toUpperCase() + belt.slice(1) + ' belt' + (n ? ` · ${n} stripe${n > 1 ? 's' : ''}` : '');
    }
    function todayLocalISO() {
      const d = new Date();
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
    }

    let _promoAskedThisSession = false;
    let _promoSel = { belt: 'blue', stripes: 0 };

    function closePromotionModal() {
      document.getElementById('promoModal')?.remove();
    }

    // "Your target date passed — did it happen?" Shown once per app open, and
    // snoozed for 3 days on "Remind me later".
    function showPromotionCheck(force) {
      if (!userProfile.target_promotion) return;
      if (!force) {
        if (_promoAskedThisSession) return;
        try {
          const snooze = localStorage.getItem('promoRemindAfter');
          if (snooze && Date.now() < parseInt(snooze)) return;
        } catch (_) {}
      }
      _promoAskedThisSession = true;
      closePromotionModal();
      const when = new Date(userProfile.target_promotion + 'T00:00:00').toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
      const el = document.createElement('div');
      el.id = 'promoModal';
      el.className = 'cu-modal open';
      el.innerHTML = `<div class="cu-card" style="max-width:400px;">
        <button class="cu-close" onclick="closePromotionModal()">✕</button>
        <div class="toast-label" style="margin-bottom:6px;">Promotion check-in</div>
        <div class="cu-title">Your target date has passed</div>
        <div class="cu-sub">You were aiming for a promotion by <strong>${when}</strong>. Did it happen?</div>
        <button class="cu-btn" onclick="openPromotionModal()">Yes — record my promotion</button>
        <button class="cu-btn ghost" onclick="promoNotYet()">Not yet — set a new target</button>
        <button class="cu-btn ghost" onclick="promoSnooze()">Remind me later</button>
      </div>`;
      document.body.appendChild(el);
    }

    function promoSnooze() {
      try { localStorage.setItem('promoRemindAfter', String(Date.now() + 3 * 86400000)); } catch (_) {}
      closePromotionModal();
    }

    function promoNotYet() {
      closePromotionModal();
      openProfile();
      setTimeout(() => {
        const el = document.getElementById('profileTargetPromotion');
        el?.scrollIntoView({ block: 'center' });
        el?.focus();
      }, 250);
    }

    // Celebration + record form. Prefilled from the profile (which the user
    // may already have updated by hand) but editable, then written to
    // belt_history and, if it changed, back to the profile.
    function openPromotionModal(belt, stripes) {
      closePromotionModal();
      _promoSel = { belt: belt || userProfile.belt || 'blue', stripes: stripes !== undefined ? stripes : (userProfile.stripes || 0) };
      const firstName = userProfile.name ? userProfile.name.split(' ')[0] : 'Athlete';
      const el = document.createElement('div');
      el.id = 'promoModal';
      el.className = 'cu-modal open';
      el.innerHTML = `<div class="cu-card" style="max-width:420px;">
        <button class="cu-close" onclick="closePromotionModal()">✕</button>
        <div id="promoFormStep">
          <div class="toast-label" style="margin-bottom:6px;">Promotion</div>
          <div class="cu-title">Congratulations, ${esc(firstName)}!</div>
          <div class="cu-sub">Every stripe is earned on the mat. Let's get it on your record.</div>
          <div class="promo-rank" id="promoRankDisplay"></div>
          <div class="form-group">
            <label class="form-label">Belt</label>
            <div class="belt-selector" id="promoBeltSel">
              ${['white','blue','purple','brown','black'].map(b => `<div class="belt-option ${b}" data-belt="${b}" onclick="promoSelectBelt('${b}')">${b.charAt(0).toUpperCase() + b.slice(1)}</div>`).join('')}
            </div>
          </div>
          <div class="form-group" style="margin-top:0.5rem;">
            <label class="form-label">Stripes</label>
            <div class="stripe-selector" id="promoStripeSel">
              ${[1,2,3,4].map(n => `<div class="stripe-sel-dot" onclick="promoSelectStripes(${n})"></div>`).join('')}
            </div>
          </div>
          <div class="form-group" style="margin-top:0.75rem;">
            <label class="form-label">Date awarded</label>
            <input type="date" id="promoDate" class="log-input" value="${todayLocalISO()}" max="${todayLocalISO()}">
          </div>
          <div class="form-group">
            <label class="form-label">Notes (optional)</label>
            <input type="text" id="promoNotes" class="log-input" placeholder="e.g. Promoted by Professor after open mat">
          </div>
          <button class="cu-btn" id="promoSaveBtn" onclick="recordPromotion()">Record promotion</button>
        </div>
        <div id="promoDoneStep" style="display:none;text-align:center;">
          <img src="/badges/level_up.png" alt="" style="width:110px;height:110px;object-fit:contain;margin:0.25rem auto 0.5rem;display:block;filter:drop-shadow(0 0 18px rgba(230,59,48,0.45));">
          <div class="toast-label">Achievement unlocked</div>
          <div class="cu-title" style="margin-top:4px;">Level Up</div>
          <div class="promo-rank" id="promoDoneRank" style="margin:0.5rem auto 0.25rem;"></div>
          <div class="cu-sub" id="promoDoneSub"></div>
          <button class="cu-btn" onclick="promoSetNextTarget()">Set my next target</button>
          <button class="cu-btn ghost" onclick="closePromotionModal()">Done</button>
        </div>
      </div>`;
      document.body.appendChild(el);
      promoSyncUI();
    }

    function promoSelectBelt(b) { _promoSel.belt = b; promoSyncUI(); }
    function promoSelectStripes(n) {
      _promoSel.stripes = (_promoSel.stripes === n) ? n - 1 : n;
      if (_promoSel.stripes < 0) _promoSel.stripes = 0;
      promoSyncUI();
    }
    function promoSyncUI() {
      document.querySelectorAll('#promoBeltSel .belt-option').forEach(el => el.classList.toggle('selected', el.dataset.belt === _promoSel.belt));
      document.querySelectorAll('#promoStripeSel .stripe-sel-dot').forEach((dot, i) => dot.classList.toggle('active', i < _promoSel.stripes));
      const disp = document.getElementById('promoRankDisplay');
      if (disp) disp.innerHTML = promoRankHTML(_promoSel.belt, _promoSel.stripes);
    }
    function promoRankHTML(belt, stripes) {
      const color = BELT_HEX[belt] || '#4a90e2';
      const dots = [0,1,2,3].map(i => `<div class="bh-stripe${i < stripes ? ' filled' : ''}"></div>`).join('');
      return `<div class="promo-belt-bar" style="background:${color};${belt === 'black' ? 'border:1px solid rgba(255,255,255,0.25);' : ''}"><div class="promo-belt-tip">${dots}</div></div>
        <div class="promo-rank-label">${rankLabel(belt, stripes)}</div>`;
    }

    async function recordPromotion() {
      const btn = document.getElementById('promoSaveBtn');
      const { belt, stripes } = _promoSel;
      const date = document.getElementById('promoDate').value || todayLocalISO();
      const notes = document.getElementById('promoNotes').value.trim();
      btn.disabled = true; btn.textContent = 'Saving…';

      const { error } = await addBeltEntry(belt, stripes, date, notes);
      if (error) {
        btn.disabled = false; btn.textContent = 'Record promotion';
        alert('Could not save: ' + error.message);
        return;
      }

      // Bring the profile in line with the new rank and retire the target
      // date it was aiming at, so the dashboard stops counting down to it.
      const targetPassed = userProfile.target_promotion && new Date(userProfile.target_promotion + 'T00:00:00') <= new Date();
      const rankChanged = belt !== userProfile.belt || stripes !== (userProfile.stripes || 0);
      if (rankChanged || targetPassed) {
        const data = {};
        if (rankChanged) { data.belt = belt; data.stripes = stripes; }
        if (targetPassed) data.target_promotion = '';
        try { await sb.auth.updateUser({ data }); } catch (_) {}
        if (rankChanged) { userProfile.belt = belt; userProfile.stripes = stripes; applyBeltBadge(belt); }
        if (targetPassed) userProfile.target_promotion = '';
      }
      try { localStorage.removeItem('promoRemindAfter'); } catch (_) {}
      track('promotion_recorded', { belt, stripes });

      document.getElementById('promoFormStep').style.display = 'none';
      const done = document.getElementById('promoDoneStep');
      done.style.display = 'block';
      document.getElementById('promoDoneRank').innerHTML = promoRankHTML(belt, stripes);
      document.getElementById('promoDoneSub').textContent = `${rankLabel(belt, stripes)} is now in your Belt History. The Mentor and your Path will coach you at this level from here on.`;
      // A new belt arrives with zero stripes; stripe-only promotions get no card
      if (belt !== 'white' && !(parseInt(stripes) > 0)) {
        const aff = renderNewBeltAffiliate();
        if (aff) done.insertAdjacentHTML('beforeend', `<div style="text-align:left;">${aff}</div>`);
      }
      renderDashboard(); // recomputes badges — Level Up toasts if it's new
      maybeAskForReview('promotion');
    }

    function promoSetNextTarget() {
      closePromotionModal();
      openProfile();
      setTimeout(() => {
        const el = document.getElementById('profileTargetPromotion');
        el?.scrollIntoView({ block: 'center' });
        el?.focus();
      }, 250);
    }

    // ── First-run onboarding ──────────────────────────────────────────────
    const onboardState = { phase: 'tour', slide: 0, tourOnly: false, step: 1, name: '', belt: 'white', years: '', goal: 3, problem: '' };

    // Reusable line-art icons (currentColor, holo style)
    const _ci = {
      flow: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="4.5" r="2.2"/><circle cx="5" cy="19.5" r="2.2"/><circle cx="19" cy="19.5" r="2.2"/><path d="M12 6.7v3.8M12 10.5L6.2 17.6M12 10.5l5.8 7.1"/></svg>',
      mentor: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v11H9l-4 4V5z"/><path d="M12 8.5l.9 1.9 2 .3-1.5 1.4.4 2-1.8-1-1.8 1 .4-2L8.1 10.7l2-.3z"/></svg>',
      mic: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M6 11a6 6 0 0 0 12 0M12 17v4M8.5 21h7"/></svg>',
      target: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="1" fill="currentColor" stroke="none"/><path d="M12 1v3M12 20v3M1 12h3M20 12h3"/></svg>',
      timer: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="8"/><path d="M12 13V9M9 2h6M18.5 6.5l1.5-1.5"/></svg>',
      path: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="19" r="2"/><circle cx="18" cy="5" r="2"/><path d="M8 19h6a4 4 0 0 0 0-8H9a4 4 0 0 1 0-8h7"/></svg>',
      swords: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 17.5L3 6V3h3l11.5 11.5M13 19l6-6M16 16l4 4M19 21l2-2M14.5 6.5L18 3h3v3l-3.5 4M5 14l4 4M7 17l-3 3M3 19l2 2"/></svg>',
      check: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>'
    };
    const _feat = (t) => `<li>${_ci.check}<span>${t}</span></li>`;

    const TOUR_SLIDES = [
      { icon: _ci.flow, eyebrow: 'Welcome to Flowmora', title: 'The partner that remembers everything',
        desc: 'Training three nights a week and still stuck in the same spots? Flowmora turns every roll into progress you can actually <strong>see</strong> — and always knows what you should work on next.' },
      { icon: _ci.mentor, eyebrow: 'Ask Your Corner', title: 'Never be stuck without an answer', features: [
        'Describe any problem, any position',
        'Get three clear options, instantly',
        'Each one comes with its video and its drill' ],
        desc: '“They keep passing my guard when they stand up.” Say it in plain words — get a game plan built around how your opponent reacts.',
        where: 'Mentor tab' },
      { icon: _ci.mic, eyebrow: 'Log in Seconds', title: 'Track training without the homework', features: [
        'Speak it — don’t type it',
        'Subs, sweeps and taps auto-filled',
        'Every session saved in your Journal' ],
        desc: 'Just talk after class — “five rounds, hit two armbars, got caught in a triangle.” It fills in the rest.',
        where: 'Log Session on Home · history in the Journal tab' },
      { icon: _ci.target, eyebrow: 'See What’s Really Happening', title: 'Find the leaks holding you back', features: [
        'A map of exactly where you get caught',
        'Your go-to finishes, tracked over time',
        'One thing to focus on today' ],
        desc: 'Tapped by the same choke every week and not sure why? Flowmora spots the pattern and hands you the fix.',
        where: 'Home dashboard, updated after every log' },
      { icon: _ci.path, eyebrow: 'Your Path', title: 'Always know what to learn next', features: [
        'A belt-by-belt roadmap, white to black',
        'Mark techniques Learning → Drilled → Solid',
        'Watch your skill tree light up as you grow' ],
        desc: 'No more guessing if you’re ready for the next stripe. Follow the roadmap, tap any technique for a lesson, and watch your progress climb toward your next belt.',
        where: 'Your Path card on Home · Skills tab' },
      { icon: _ci.swords, eyebrow: 'Nemesis', title: 'Every gym has that one person', features: [
        'Track your rolls with training partners',
        'Watch the friendly rivalry unfold',
        'Get a playful game plan to crack their game' ],
        desc: 'The buddy who taps you every single round? Make them your Nemesis, keep a running scoreboard, and swap notes — because chasing someone just ahead of you is how everyone levels up together.',
        where: 'Nemesis tab · Get Plan card on Home' },
      { icon: _ci.timer, eyebrow: 'And When You’re Rolling', title: 'Tools for every session', features: [
        'Round timer with air-horn alerts, screen locked',
        'Comps and seminars happening near you',
        'Streaks and badges to keep the fire lit' ],
        desc: 'The everyday tools that keep you sharp and showing up. Let’s build your game.',
        where: 'Roll Timer button · Calendar tab' }
    ];

    function showOnboarding(tourOnly = false) {
      onboardState.phase = 'tour';
      onboardState.slide = 0;
      onboardState.tourOnly = tourOnly;
      onboardState.step = 1;
      renderOnboard();
      document.getElementById('onboardModal').classList.add('open');
      document.body.style.overflow = 'hidden';
    }

    function renderTourSlide() {
      const card = document.getElementById('onboardCard');
      const i = onboardState.slide;
      const sl = TOUR_SLIDES[i];
      const last = i === TOUR_SLIDES.length - 1;
      const dots = TOUR_SLIDES.map((_, n) => `<div class="onboard-dot ${n <= i ? 'done' : ''}"></div>`).join('');
      const nextLabel = last ? (onboardState.tourOnly ? 'Done' : 'Set up my profile') : 'Next';
      card.innerHTML = `
        <div class="onboard-progress">${dots}</div>
        <div class="tour-medallion">${sl.icon}</div>
        <div class="tour-eyebrow">${sl.eyebrow}</div>
        <div class="tour-title">${sl.title}</div>
        ${sl.desc ? `<div class="tour-desc">${sl.desc}</div>` : ''}
        ${sl.features ? `<ul class="tour-features">${sl.features.map(_feat).join('')}</ul>` : ''}
        ${sl.where ? `<div class="tour-where">Find it: <strong>${sl.where}</strong></div>` : ''}
        <button class="onboard-next-btn" onclick="tourNext()">${nextLabel}</button>
        <button class="onboard-skip" onclick="${onboardState.tourOnly ? 'closeTour()' : 'tourToSetup()'}">${onboardState.tourOnly ? 'Close' : 'Skip intro'}</button>`;
    }

    function tourNext() {
      if (onboardState.slide < TOUR_SLIDES.length - 1) {
        onboardState.slide++;
        renderTourSlide();
      } else if (onboardState.tourOnly) {
        closeTour();
      } else {
        tourToSetup();
      }
    }

    function tourToSetup() {
      onboardState.phase = 'setup';
      onboardState.step = 1;
      renderOnboard();
    }

    function closeTour() {
      document.getElementById('onboardModal').classList.remove('open');
      document.body.style.overflow = '';
    }

    function renderOnboard() {
      if (onboardState.phase === 'tour') { renderTourSlide(); return; }
      const card = document.getElementById('onboardCard');
      const s = onboardState;
      const dots = [1,2,3].map(i => `<div class="onboard-dot ${i <= s.step ? 'done' : ''}"></div>`).join('');
      const BELTS = { white:'#f0f0f0', blue:'#4a90e2', purple:'#7b4fa6', brown:'#8B4513', black:'#333' };

      if (s.step === 1) {
        card.innerHTML = `
          <div class="onboard-progress">${dots}</div>
          <div class="onboard-title">Welcome to Flowmora</div>
          <div class="onboard-sub">Your AI mentor on the mats. Let's set up your corner — 60 seconds, three questions.</div>
          <div class="form-group">
            <div class="form-label">What should your coach call you?</div>
            <input type="text" id="onboardName" class="log-input" placeholder="First name" maxlength="40" value="${esc(s.name)}">
          </div>
          <div class="form-group">
            <div class="form-label">Your belt</div>
            <div class="onboard-belt-row">
              ${Object.entries(BELTS).map(([b, hex]) => `
                <button class="onboard-belt ${s.belt === b ? 'active' : ''}" onclick="onboardSetBelt('${b}')">
                  <span class="belt-swatch" style="background:${hex};"></span>${b.charAt(0).toUpperCase() + b.slice(1)}
                </button>`).join('')}
            </div>
          </div>
          <button class="onboard-next-btn" onclick="onboardNext()">Continue</button>`;
      } else if (s.step === 2) {
        card.innerHTML = `
          <div class="onboard-progress">${dots}</div>
          <div class="onboard-title">Your training rhythm</div>
          <div class="onboard-sub">This sets your weekly goal — your coach holds you to it.</div>
          <div class="form-group">
            <div class="form-label">How long have you been training?</div>
            <div class="onboard-pills">
              ${['Under 1 year','1-3 years','3-5 years','5-10 years','10+ years'].map(y => `
                <button class="onboard-pill ${s.years === y ? 'active' : ''}" onclick="onboardSetYears('${y}')">${y}</button>`).join('')}
            </div>
          </div>
          <div class="form-group">
            <div class="form-label">Sessions per week you're aiming for</div>
            <div class="onboard-pills">
              ${[1,2,3,4,5,6].map(g => `
                <button class="onboard-pill ${s.goal === g ? 'active' : ''}" onclick="onboardSetGoal(${g})">${g}×</button>`).join('')}
            </div>
          </div>
          <button class="onboard-next-btn" onclick="onboardNext()">Continue</button>`;
      } else {
        card.innerHTML = `
          <div class="onboard-progress">${dots}</div>
          <div class="onboard-title">One last thing${s.name ? ', ' + esc(s.name) : ''}</div>
          <div class="onboard-sub">What's the one thing that keeps happening to you on the mats? Be specific — your coach will build your first game plan from this.</div>
          <div class="form-group">
            <div class="mini-mic-wrap">
              <textarea id="onboardProblem" class="log-input" rows="3" placeholder="e.g. I keep getting my guard passed when my opponent stands up...">${esc(s.problem)}</textarea>
              <button type="button" class="mini-mic" onclick="dictateInto('onboardProblem', this)" aria-label="Dictate"><svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1 1.93c-3.94-.49-7-3.85-7-7.93H5c0 3.53 2.61 6.43 6 6.92V19h2v-3.08c3.39-.49 6-3.39 6-6.92h1c0 4.08-3.06 7.44-7 7.93V19h-2v-3.07z"/></svg></button>
            </div>
          </div>
          <button class="onboard-next-btn" onclick="onboardFinish(true)">Build my game plan</button>
          <button class="onboard-skip" onclick="onboardFinish(false)">Skip for now</button>`;
      }
    }

    function onboardSetBelt(b) { onboardState.belt = b; onboardState.name = document.getElementById('onboardName')?.value?.trim() || onboardState.name; renderOnboard(); }
    function onboardSetYears(y) { onboardState.years = y; renderOnboard(); }
    function onboardSetGoal(g) { onboardState.goal = g; renderOnboard(); }

    function onboardNext() {
      if (onboardState.step === 1) {
        onboardState.name = document.getElementById('onboardName')?.value?.trim() || '';
      }
      onboardState.step++;
      renderOnboard();
    }

    async function onboardFinish(withPlan) {
      const s = onboardState;
      s.problem = document.getElementById('onboardProblem')?.value?.trim() || '';
      try {
        await sb.auth.updateUser({
          data: {
            display_name: s.name, belt: s.belt, years_training: s.years,
            weekly_goal: s.goal, onboarded: true
          }
        });
      } catch (e) {}
      userProfile.name = s.name;
      userProfile.belt = s.belt;
      userProfile.years = s.years;
      userProfile.weeklyGoal = s.goal;
      applyBeltBadge(s.belt);
      document.getElementById('onboardModal').classList.remove('open');
      document.body.style.overflow = '';
      renderDashboard();
      if (withPlan && s.problem) drillWithMentor(s.problem);
    }

    // Voice
    function toggleVoice() {
      voiceEnabled = !voiceEnabled;
      document.getElementById('voiceTrack').classList.toggle('on', voiceEnabled);
      document.getElementById('voiceLabel').textContent = voiceEnabled ? 'Voice on' : 'Voice off';
      if (!voiceEnabled) window.speechSynthesis.cancel();
    }

    function speak(text) {
      if (!voiceEnabled) return;
      window.speechSynthesis.cancel();
      const clean = text.replace(/<[^>]*>/g, '').replace(/\n/g, ' ').trim();
      const utterance = new SpeechSynthesisUtterance(clean);
      utterance.rate = 0.95;
      const indicator = document.getElementById('speakingIndicator');
      if (indicator) indicator.style.display = 'block';
      utterance.onend = () => { if (indicator) indicator.style.display = 'none'; };
      window.speechSynthesis.speak(utterance);
    }

    // Mic
    // Shared speech-capture helper. iOS Safari often never delivers a "final"
    // result, so we capture interim results live and commit whatever we have
    // when recognition ends. Errors are surfaced instead of silently resetting.
    // Speech recognition butchers Japanese grappling terms ("kesa gatame" →
    // "case a gotta may"). Fix the common mishearings before the text goes
    // anywhere — the input box, the chat, or the voice-log parser.
    const BJJ_TERM_FIXES = [
      [/\b(?:k(?:es+|ays|ace|as)a?|c(?:as|es)+a|ques[oa])\s*(?:ga|go)t+a?\s*m(?:e|ay|a|eh)\b/gi, 'kesa gatame'],
      [/\bcase\s*(?:a|uh)?\s*(?:ga|go)t+a?\s*m(?:e|ay|a|eh)\b/gi, 'kesa gatame'],
      [/\b(?:k(?:es+|as)a?|c(?:as|es)+a|ques[oa]|case\s*a)\s*gah?\s*?m(?:e|ay|i|ee|eh)\b/gi, 'kesa gatame'],
      [/\bo(?:h|m)?\s*m[oy]\s*plat+a\b/gi, 'omoplata'],
      [/\bomo\s+plata\b/gi, 'omoplata'],
      [/\bbear\s*[iu]m?[nm]?\s*bolo\b/gi, 'berimbolo'],
      [/\bber[iu]m\s+bolo\b/gi, 'berimbolo'],
      [/\bd[ea]l+a\s*r[ie]+va\b/gi, 'de la riva'],
      [/\bo+h?\s*goshi\b/gi, 'o goshi'],
      [/\bs(?:ay\s*oh?|eo+|oy)\s*(?:ee\s*)?nag(?:e|ay|eh)\b/gi, 'seoi nage'],
      [/\b[ou]+ch[ie]+\s*mat+a\b/gi, 'uchi mata'],
      [/\bo+h?\s*soto\s*(?:ga|gu)r+[iey]+\b/gi, 'osoto gari'],
      [/\bkim(?:o|au|oo)ra\b/gi, 'kimura'],
      [/\bkimora\b/gi, 'kimura'],
      [/\bezeki[ae]l+\b/gi, 'ezekiel'],
      [/\bashi?\s*g[ae]r+[au]m[iey]\b/gi, 'ashi garami'],
      [/\bji?u\s*jitsu\b/gi, 'jiu jitsu'],
      [/\bdar\s+see\b/gi, 'darce'],
      [/\bnorth\s*[-\s]?south\b/gi, 'north-south']
    ];
    function fixBjjTerms(text) {
      let out = String(text || '');
      BJJ_TERM_FIXES.forEach(([re, rep]) => { out = out.replace(re, rep); });
      return out;
    }

    function captureSpeech({ onPartial, onDone, onState }) {
      const rec = new SpeechRecognition();
      rec.continuous = false;
      rec.interimResults = true;
      rec.lang = 'en-US';
      let best = '';
      rec.onstart = () => { window.speechSynthesis?.cancel(); onState(true); };
      rec.onresult = e => {
        let text = '';
        for (const r of e.results) text += r[0].transcript;
        if (text.trim()) best = fixBjjTerms(text.trim());
        if (best && onPartial) onPartial(best);
      };
      rec.onerror = e => {
        if (e.error === 'not-allowed' || e.error === 'service-not-allowed') {
          alert('Microphone access is blocked. On iPhone: Settings > Safari > Microphone, or tap the "aA" icon in the address bar > Website Settings > Microphone > Allow.');
        }
        // 'no-speech' and 'aborted' are normal — onend handles cleanup
      };
      rec.onend = () => { onState(false); onDone(best); };
      rec.start();
      return rec;
    }

    function toggleMainMic() {
      if (!SpeechRecognition) { alert(VOICE_UNSUPPORTED_MSG); return; }
      if (isMainListening) { try { mainRecognition.stop(); } catch (e) {} return; }
      mainRecognition = captureSpeech({
        onPartial: text => { document.getElementById('problem').value = text; checkReady(); },
        onState: on => {
          isMainListening = on;
          document.getElementById('mainMic').classList.toggle('listening', on);
          document.getElementById('mainListening').classList.toggle('active', on);
        },
        onDone: text => {
          if (!text) return;
          // If the question was already submitted while the mic was open
          // (input section hidden = strategy in progress), don't re-submit
          if (document.getElementById('inputSection').style.display === 'none') return;
          document.getElementById('problem').value = text;
          checkReady();
          setTimeout(() => getStrategy(), 400);
        }
      });
    }

    function toggleChatMic() {
      if (!SpeechRecognition) { alert(VOICE_UNSUPPORTED_MSG); return; }
      if (isChatListening) { try { chatRecognition.stop(); } catch (e) {} return; }
      chatRecognition = captureSpeech({
        onPartial: text => { document.getElementById('chatInput').value = text; },
        onState: on => {
          isChatListening = on;
          document.getElementById('chatMic').classList.toggle('listening', on);
        },
        onDone: text => {
          if (!text) return;
          // If the user already sent this dictation manually (tap/Enter while
          // the mic was still open), don't auto-send it a second time
          const lastUser = [...conversationHistory].reverse().find(m => m.role === 'user');
          if (lastUser && lastUser.content.trim() === text.trim()) return;
          document.getElementById('chatInput').value = text;
          setTimeout(() => sendChat(), 400);
        }
      });
    }

    // Navigation
    const bgMap = { dashboard: '/bg.jpeg', mentor: '/bg.jpeg', progress: '/progress-bg.jpg', calendar: '/bg.jpeg' };

    // Generic dictation into any input/textarea — used by the Nemesis tab.
    // Goes through captureSpeech, so BJJ term fixes apply here too.
    let _dictRec = null;
    function dictateInto(fieldId, btn) {
      if (!SpeechRecognition) { alert(VOICE_UNSUPPORTED_MSG); return; }
      if (_dictRec) { try { _dictRec.stop(); } catch (e) {} return; }
      const field = document.getElementById(fieldId);
      if (!field) return;
      const base = field.value ? field.value.replace(/\s+$/, '') + ' ' : '';
      _dictRec = captureSpeech({
        onPartial: t => { field.value = base + t; },
        onState: on => { btn.classList.toggle('listening', on); if (!on) _dictRec = null; },
        onDone: t => { if (t) field.value = base + t; }
      });
    }

    function showView(view) {
      track('screen_view', { screen: view });
      document.querySelectorAll('.nav-item').forEach(t => t.classList.remove('active'));
      const activeNav = document.getElementById('nav-' + view);
      if (activeNav) activeNav.classList.add('active');
      document.getElementById('dashboardView').style.display  = view === 'dashboard' ? 'block' : 'none';
      document.getElementById('mentorView').style.display     = view === 'mentor'    ? 'block' : 'none';
      document.getElementById('progressView').style.display   = view === 'progress'  ? 'block' : 'none';
      document.getElementById('calendarView').style.display   = view === 'calendar'  ? 'block' : 'none';
      document.getElementById('skillsView').style.display     = view === 'skills'    ? 'block' : 'none';
      document.getElementById('nemesisView').style.display    = view === 'nemesis'   ? 'block' : 'none';
      if (view !== 'skills') {
        if (skillSimulation) { skillSimulation.stop(); skillSimulation = null; }
        closeTechniqueDetail();
        currentPosition = null;
        const floatBtn = document.getElementById('skillsBackFloat');
        if (floatBtn) floatBtn.classList.remove('visible');
      }
      const bg = document.getElementById('bgImage');
      if (bg && bgMap[view]) bg.src = bgMap[view];
      window.scrollTo(0, 0);
      if (view === 'dashboard') renderDashboard();
      if (view === 'progress') renderProgress();
      if (view === 'calendar') renderCalendar();
      if (view === 'skills') renderSkills();
      if (view === 'nemesis') renderNemesisView();
    }

    document.getElementById('problem').addEventListener('input', checkReady);

    function checkReady() {
      document.getElementById('submitBtn').disabled = document.getElementById('problem').value.trim().length <= 10;
    }

    // Agent loading animation
    let _loadingInterval = null;

    function startLoadingAnimation() {
      const el = document.getElementById('loadingText');
      if (el) el.textContent = 'building your game plan...';
    }

    function stopLoadingAnimation() {
      clearInterval(_loadingInterval);
      _loadingInterval = null;
    }

    function showToolActivity(toolsUsed) {
      if (!toolsUsed || toolsUsed.length === 0) return;
      const labels = {
        get_user_profile: 'profile',
        get_training_history: 'history',
        search_technique_library: 'techniques',
        build_drill_plan: 'drill plan',
        log_coaching_note: 'coaching note'
      };
      const el = document.getElementById('toolActivity');
      if (!el) return;
      el.innerHTML = '<span class="tool-activity-label">used</span>' +
        toolsUsed.map(t => `<span class="tool-chip">${labels[t] || t}</span>`).join('');
      el.style.display = 'flex';
      setTimeout(() => { el.style.display = 'none'; }, 5000);
    }

    // Mentor
    async function getStrategy() {
      track('mentor_question');
      const problem = document.getElementById('problem').value.trim();
      document.getElementById('submitBtn').disabled = true;
      document.getElementById('inputSection').style.display = 'none';
      document.getElementById('loadingState').style.display = 'block';
      startLoadingAnimation();

      conversationHistory = [{ role: 'user', content: problem }];

      currentSession = {
        id: crypto.randomUUID(),
        position: '',
        problem,
        date: new Date().toLocaleDateString(),
        drills: [],
        weaknessFlag: '',
        strengthFlag: '',
        source: 'ai'
      };

      try {
        const response = await aiFetch('/api/mentor', {
          messages: conversationHistory,
          userId: currentUser?.id,
          userContext: {
            profile: { belt: userProfile.belt, name: userProfile.name, years: userProfile.years, gym: userProfile.gym, pathSummary: buildPathSummary() },
            recentSessions: cachedSessions.slice(0, 10)
          }
        });

        stopLoadingAnimation();
        const data = await response.json();
        const text = data.content[0].text;
        conversationHistory.push({ role: 'assistant', content: text });
        showToolActivity(data.toolsUsed);

        const start = text.indexOf('{');
        const end = text.lastIndexOf('}');
        let parsed = null;
        try { if (start !== -1 && end !== -1) parsed = JSON.parse(text.slice(start, end + 1)); } catch (_) {}

        document.getElementById('loadingState').style.display = 'none';
        document.getElementById('results').style.display = 'block';

        if (parsed && parsed.flowChains) {
          currentSession.position = parsed.position || 'Unknown';
          currentSession.weaknessFlag = parsed.weaknessFlag || '';
          currentSession.strengthFlag = parsed.strengthFlag || '';
          currentSession.drills = parsed.drills || [];
          // Persist coaching notes into the session record
          if (data.coachingNotes && data.coachingNotes.length > 0) {
            currentSession.notes = data.coachingNotes.map(n => `[${n.category}] ${n.note}`).join('\n');
          }
          renderResults(parsed);
          fetchVideos(parsed.videoSearchTerms || []);
          await saveSession();
          if (voiceEnabled && parsed.weaknessFlag) speak(`Your core weakness to address: ${parsed.weaknessFlag}`);
        } else {
          document.getElementById('chatMessages').innerHTML = `<div class="chat-msg assistant"><div class="bubble">${fmtAI(text)}${aiFooter('mentor', text, lastUserMessage())}</div></div>${renderAffiliateCard('', lastUserMessage())}`;
          speak(text);
        }
      } catch (err) {
        stopLoadingAnimation();
        document.getElementById('loadingState').style.display = 'none';
        document.getElementById('inputSection').style.display = 'block';
        document.getElementById('submitBtn').disabled = false;
        if (err?.isLimit) return; // paywall is already showing
        const msg = err?.message || 'Something went wrong';
        alert(aiErrorText(err, msg.includes('timeout') || msg.includes('timed out')
          ? 'The coach took too long to respond — please try again.'
          : 'Something went wrong. Please try again.'));
      }
    }

    function renderResults(data) {
      let html = '';
      // Weakness/strength flags are still captured behind the scenes — they
      // feed Today's Focus, drill recommendations, and the debrief — but
      // they're no longer shown as cards in the mentor results.

      // Each flow chain groups with ITS video and ITS drill (index-aligned by
      // the prompt) — learn the move, watch it, then drill it, per option.
      const videoCard = i => `<div class="video-card" id="vid-${i}" style="margin-top:0.75rem;">
          <div class="video-thumb-shimmer" id="vid-thumb-${i}"></div>
          <div class="video-info"><div class="video-title" id="vid-title-${i}">${data.videoSearchTerms[i] || ''}</div><div class="video-sub" id="vid-sub-${i}">Loading...</div></div>
        </div>`;
      const drillCard = i => `<div class="group-label">Drill it</div>
        <div class="drill-item" style="padding:0;">
          <div class="drill-content" style="width:100%;">
            <div class="drill-text">${data.drills[i]}</div>
            <div class="drill-rating" id="rating-${i}">
              ${[1,2,3,4,5].map(n => `<span class="star" onclick="rateDrill(${i}, ${n})">★</span>`).join('')}
            </div>
            <textarea class="drill-notes" id="notes-${i}" rows="2" placeholder="How did this go? Notes..."></textarea>
            <button class="save-drill-btn" onclick="saveDrill(${i}, '${String(data.drills[i]).replace(/'/g, "\\'")}')">Save ✓<span class="saved-badge" id="saved-${i}">Saved!</span></button>
          </div>
        </div>`;

      html += '<div class="section-title">Your flow chains</div>';
      data.flowChains.forEach((chain, i) => {
        html += `<div class="flow-card">
          <div class="flow-chain"><div class="flow-title">${chain.title}</div><div class="flow-body">${chain.description}</div></div>
          <button class="deeper-btn" onclick="goDeeper(${i}, '${chain.title.replace(/'/g, "\\'")}')">Go Deeper ↗</button>
          <div class="deeper-response" id="deeper-${i}"></div>
          ${i < data.videoSearchTerms.length ? `<div class="group-label">Watch it</div>${videoCard(i)}` : ''}
          ${i < data.drills.length ? drillCard(i) : ''}
        </div>`;
      });

      // Safety net: anything beyond the chain count still gets shown
      for (let i = data.flowChains.length; i < data.drills.length; i++) {
        if (i === data.flowChains.length) html += '<div class="section-title">More drills</div>';
        html += `<div class="card">${drillCard(i)}</div>`;
      }
      for (let i = data.flowChains.length; i < data.videoSearchTerms.length; i++) {
        if (i === data.flowChains.length) html += '<div class="section-title">More videos</div>';
        html += videoCard(i);
      }

      // Affiliate card sits at the very bottom — after every drill and video.
      // Returns '' unless a matching product exists and all the guard rules pass.
      html += renderAffiliateCard(data.position || '', lastUserMessage());
      const lastAnswer = [...conversationHistory].reverse().find(m => m.role === 'assistant')?.content || '';
      html += aiFooter('mentor', lastAnswer, lastUserMessage());

      document.getElementById('resultsContent').innerHTML = html;
    }

    function rateDrill(drillIndex, rating) {
      if (!drillData[drillIndex]) drillData[drillIndex] = {};
      drillData[drillIndex].rating = rating;
      document.querySelectorAll(`#rating-${drillIndex} .star`).forEach((star, i) => star.classList.toggle('active', i < rating));
    }

    async function saveDrill(drillIndex, drillText) {
      const notes = document.getElementById(`notes-${drillIndex}`).value;
      const rating = drillData[drillIndex]?.rating || 0;
      if (!drillData[drillIndex]) drillData[drillIndex] = {};
      drillData[drillIndex] = { text: drillText, rating, notes };

      if (currentSession && currentUser) {
        const drillEntry = { text: drillText, rating, notes };
        const drills = [...(currentSession.drills || [])];
        const idx = drills.findIndex(d => (typeof d === 'string' ? d : d.text) === drillText);
        if (idx >= 0) drills[idx] = drillEntry; else drills.push(drillEntry);
        currentSession.drills = drills;
        await sb.from('sessions').update({ drills }).eq('id', currentSession.id);
      }

      const badge = document.getElementById(`saved-${drillIndex}`);
      badge.style.display = 'inline';
      setTimeout(() => badge.style.display = 'none', 2000);
    }

    async function goDeeper(chainIndex, chainTitle) {
      const responseDiv = document.getElementById(`deeper-${chainIndex}`);
      const btn = document.querySelectorAll('.deeper-btn')[chainIndex];
      btn.disabled = true;
      btn.textContent = 'Loading...';
      responseDiv.style.display = 'block';
      responseDiv.innerHTML = '<div class="loading"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>';
      conversationHistory.push({ role: 'user', content: `Go deeper on "${chainTitle}" — give me more detail on the specific mechanics, common mistakes, and how to chain it if the opponent counters.` });
      try {
        const response = await aiFetch('/api/mentor', { messages: conversationHistory });
        const data = await response.json();
        const text = data.content[0].text;
        conversationHistory.push({ role: 'assistant', content: text });
        responseDiv.innerHTML = fmtAI(text) + aiFooter('mentor-deeper', text, chainTitle);
        speak(text);
      } catch (err) { if (!err?.isLimit) responseDiv.innerHTML = esc(aiErrorText(err, 'Something went wrong. Try again.')); }
      btn.textContent = 'Go Deeper ↗';
      btn.disabled = false;
    }

    async function sendChat() {
      const input = document.getElementById('chatInput');
      const message = input.value.trim();
      if (!message) return;
      const chatMessages = document.getElementById('chatMessages');
      const sendBtn = document.getElementById('chatSend');
      if (sendBtn.disabled) return; // a send is already in flight — no double-fire
      chatMessages.innerHTML += `<div class="chat-msg user"><div class="bubble">${esc(message)}</div></div>`;
      input.value = '';
      sendBtn.disabled = true;
      conversationHistory.push({ role: 'user', content: message });
      // Unique id per message — a shared id made replies overwrite the FIRST
      // bubble on the page instead of this one
      const msgId = 'chatmsg-' + Date.now();
      chatMessages.innerHTML += `<div class="chat-msg assistant" id="${msgId}"><div class="bubble"><div class="loading"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div></div></div>`;
      chatMessages.scrollTop = chatMessages.scrollHeight;
      try {
        const response = await aiFetch('/api/mentor', {
          messages: conversationHistory,
          userId: currentUser?.id,
          userContext: { profile: { belt: userProfile.belt, name: userProfile.name, years: userProfile.years, gym: userProfile.gym, pathSummary: buildPathSummary() }, recentSessions: cachedSessions.slice(0, 10) }
        });
        const data = await response.json();
        let text = data.content[0].text;
        // Safety net: if the model answered a follow-up with a fresh strategy
        // JSON (raw or inside a ```json fence), convert it to readable text
        if (text.includes('"flowChains"')) {
          try {
            const j = JSON.parse(text.slice(text.indexOf('{'), text.lastIndexOf('}') + 1));
            if (j.flowChains) {
              text = (j.flowChains || []).map(c => `${c.title}: ${c.description}`).join('\n\n')
                + (j.weaknessFlag ? `\n\nFocus area: ${j.weaknessFlag}` : '');
            }
          } catch (_) {}
        }
        conversationHistory.push({ role: 'assistant', content: text });
        document.getElementById(msgId).innerHTML = `<div class="bubble">${fmtAI(text)}${aiFooter('mentor-chat', text, message)}</div>${renderAffiliateCard('', message)}`;
        chatMessages.scrollTop = chatMessages.scrollHeight;
        speak(text);
      } catch (err) {
        const el = document.getElementById(msgId);
        if (el && !err?.isLimit) el.innerHTML = `<div class="bubble" style="color:#e24b4a;">${esc(aiErrorText(err, 'Something went wrong. Try again.'))}</div>`;
      }
      sendBtn.disabled = false;
    }

    // Video
    function fetchVideos(terms) {
      if (!terms || terms.length === 0) return;
      // Shared across the cards so two search terms that rank the same video
      // #1 don't both show it — later cards take their next-best candidate
      const usedIds = new Set();
      terms.forEach((term, i) => {
        // 8-second timeout fallback — shimmer never gets stuck
        const fallbackTimer = setTimeout(() => updateVideoCard(i, term, null, usedIds), 8000);
        fetch(api(`/api/youtube?term=${encodeURIComponent(term)}`))
          .then(r => r.json())
          .then(data => { clearTimeout(fallbackTimer); updateVideoCard(i, term, data, usedIds); })
          .catch(() => { clearTimeout(fallbackTimer); updateVideoCard(i, term, null, usedIds); });
      });
    }

    function updateVideoCard(i, term, data, usedIds) {
      const card = document.getElementById(`vid-${i}`);
      const thumb = document.getElementById(`vid-thumb-${i}`);
      if (!card || !thumb) return;
      // Pick the best-ranked candidate not already shown on another card
      let pick = null;
      if (data && (data.candidates?.length || data.videoId)) {
        const candidates = data.candidates?.length ? data.candidates : [data];
        pick = candidates.find(c => c.videoId && !usedIds?.has(c.videoId)) || null;
        if (pick && usedIds) usedIds.add(pick.videoId);
      }
      if (pick) {
        const data2 = pick;
        thumb.outerHTML = `<img src="${data2.thumbnail}" class="video-thumb-img" alt="">`;
        // YouTube pre-encodes titles ("&amp;") — decode before displaying
        const ta = document.createElement('textarea');
        ta.innerHTML = data2.title || '';
        document.getElementById(`vid-title-${i}`).textContent = ta.value;
        document.getElementById(`vid-sub-${i}`).innerHTML =
          esc(data2.channelTitle) + (data2.trusted ? '<span class="verified-badge">✓ Verified Instructor</span>' : '');
        card.onclick = () => playVideo(data2.videoId);
      } else {
        thumb.outerHTML = `<div class="video-thumb"><svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg></div>`;
        document.getElementById(`vid-sub-${i}`).textContent = 'Search on YouTube';
        card.onclick = () => openExternal('https://www.youtube.com/results?search_query=' + encodeURIComponent(term));
      }
    }

    function playVideo(videoId) {
      // YouTube embeds reject the native shell's origin (player error 153),
      // so open videos in the in-app browser sheet on native instead
      if (IS_NATIVE) {
        openExternal(`https://www.youtube.com/watch?v=${videoId}`);
        return;
      }
      document.getElementById('videoIframe').src = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0`;
      document.getElementById('videoModal').style.display = 'flex';
      document.body.style.overflow = 'hidden';
    }

    function closeVideo() {
      document.getElementById('videoIframe').src = '';
      document.getElementById('videoModal').style.display = 'none';
      document.body.style.overflow = '';
    }

    document.addEventListener('keydown', e => {
      if (e.key === 'Escape') closeVideo();
      if (e.key === 'Enter' && (e.target.id === 'authEmail' || e.target.id === 'authPassword')) handleAuth();
    });

    // Session storage (Supabase)
    async function saveSession() {
      if (!currentSession || !currentUser) return;
      track('session_logged', { source: 'ai' });
      await sb.from('sessions').upsert({
        id: currentSession.id,
        user_id: currentUser.id,
        position: currentSession.position,
        problem: currentSession.problem,
        notes: currentSession.notes || '',
        date: currentSession.date,
        drills: currentSession.drills || [],
        weakness_flag: currentSession.weaknessFlag || '',
        strength_flag: currentSession.strengthFlag || '',
        rolling_rounds: currentSession.rollingRounds || {},
        source: currentSession.source || 'ai'
      });
    }

    async function resetApp() {
      await saveSession();
      closeVideo();
      window.speechSynthesis.cancel();
      document.getElementById('results').style.display = 'none';
      document.getElementById('inputSection').style.display = 'block';
      document.getElementById('resultsContent').innerHTML = '';
      document.getElementById('chatMessages').innerHTML = '';
      document.getElementById('problem').value = '';
      conversationHistory = [];
      currentSession = null;
      drillData = {};
      document.getElementById('submitBtn').disabled = true;
    }

    // Progress
    async function renderProgress() {
      const view = document.getElementById('progressView');
      const header = `<div class="progress-header">
        <div class="section-title" style="margin:0;">Journal</div>
        <div style="display:flex;gap:8px;">
          <button class="log-btn" style="background:rgba(255,255,255,0.05);color:#888;border:0.5px solid rgba(255,255,255,0.12);" onclick="exportSessionsCSV()">Export</button>
          <button class="log-btn" onclick="showLogModal()">+ Log Session</button>
        </div>
      </div>`;

      // Use cached sessions immediately if available, fetch fresh in background
      if (cachedSessions.length > 0) {
        renderProgressFromData(view, header, cachedSessions);
        // Refresh in background silently
        sb.from('sessions').select('*').order('created_at', { ascending: false }).limit(200)
          .then(({ data }) => { if (data && data.length > 0) { cachedSessions = data.map(s => ({ ...s, weaknessFlag: s.weakness_flag, strengthFlag: s.strength_flag, rollingRounds: s.rolling_rounds })); renderProgressFromData(view, header, cachedSessions); } })
          .catch(() => {});
        return;
      }

      view.innerHTML = header + '<div class="loading"><div class="dot"></div><div class="dot"></div><div class="dot"></div><span>loading...</span></div>';

      let rows;
      try {
        const timeout = new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), 15000));
        const query = sb.from('sessions').select('*').order('created_at', { ascending: false }).limit(200);
        const { data, error } = await Promise.race([query, timeout]);
        if (error) throw error;
        rows = data;
      } catch (err) {
        // Auth lock conflict — another tab or request stole the token. Retry automatically.
        if (err.message && (err.message.includes('stole it') || err.message.includes('lock'))) {
          view.innerHTML = header + '<div class="loading"><div class="dot"></div><div class="dot"></div><div class="dot"></div><span>reconnecting...</span></div>';
          setTimeout(() => renderProgress(), 2000);
          return;
        }
        view.innerHTML = header + `<div class="empty-state" style="color:#e63b30;">Couldn't load sessions — ${err.message === 'timeout' ? 'request timed out. Check your connection and try again' : err.message}.<br><br><button class="log-btn" onclick="renderProgress()">Retry</button></div>`;
        return;
      }

      if (!rows || rows.length === 0) {
        view.innerHTML = header + '<div class="empty-state">No sessions yet.<br>Complete your first AI session or tap Log Session to start tracking.</div>';
        return;
      }

      cachedSessions = rows.map(s => ({ ...s, weaknessFlag: s.weakness_flag, rollingRounds: s.rolling_rounds }));
      renderProgressFromData(view, header, cachedSessions);
    }

    // Download the training journal as CSV — the user's data is theirs.
    // Native uses the share sheet (files can't "download" in a WKWebView).
    function exportSessionsCSV() {
      const rows = [['Date', 'Class type', 'Position', 'Rounds', 'Sweeps', 'Escapes', 'Submissions used', 'Submissions against', 'Notes', 'Source']];
      (cachedSessions || []).forEach(s => rows.push([
        s.created_at ? s.created_at.slice(0, 10) : (s.date || ''),
        s.class_type || '', s.position || '',
        s.rolling_rounds?.rounds ?? '', s.sweeps ?? '', s.escapes ?? '',
        subsSummary(s.submissions_used, '; '), subsSummary(s.submissions_against, '; '),
        String(s.notes || s.problem || '').replace(/\s+/g, ' '), s.source || ''
      ]));
      const csv = rows.map(r => r.map(v => '"' + String(v).replace(/"/g, '""') + '"').join(',')).join('\n');
      track('journal_exported');
      try {
        const file = new File([csv], 'flowmora-training-journal.csv', { type: 'text/csv' });
        if (navigator.canShare && navigator.canShare({ files: [file] })) {
          navigator.share({ files: [file], title: 'Flowmora training journal' }).catch(() => {});
          return;
        }
      } catch (_) {}
      const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv' }));
      const a = document.createElement('a');
      a.href = url; a.download = 'flowmora-training-journal.csv';
      document.body.appendChild(a); a.click(); a.remove();
      setTimeout(() => URL.revokeObjectURL(url), 5000);
    }

    function renderProgressFromData(view, header, sessions) {
      // The Journal: your training history, belt timeline, and position
      // balance. Stats and analytics live on the dashboard; rival records
      // live on the Nemesis tab — nothing is duplicated here.
      const posCounts = {};
      sessions.forEach(s => { if (s.position) posCounts[s.position] = (posCounts[s.position] || 0) + 1; });

      let html = header;

      // Session history — the heart of the journal, filter + paginated
      const positions = [...new Set(sessions.map(s => s.position).filter(Boolean))].sort();
      html += `<div class="session-filter-row" style="margin-top:0.75rem;">
        <select id="posFilter" class="session-filter-select" onchange="filterSessions()">
          <option value="">All positions</option>
          ${positions.map(p => `<option value="${p}">${p}</option>`).join('')}
        </select>
        <span class="session-count-label" id="sessionCountLabel">${sessions.length} session${sessions.length !== 1 ? 's' : ''}</span>
      </div>
      <div id="sessionList"></div>
      <div id="loadMoreWrap" style="text-align:center;margin-top:0.75rem;margin-bottom:1rem;"></div>`;

      // Positions trained — the one analytic with no home elsewhere (collapsed)
      const posEntries = Object.entries(posCounts).sort((a, b) => b[1] - a[1]);
      if (posEntries.length > 0) {
        const maxCount = Math.max(...Object.values(posCounts));
        html += `<div class="collapsible-section">
          <div class="collapsible-header" onclick="toggleSection('positions')">
            <span class="section-title">Positions trained</span>
            <span class="collapsible-pill">${posEntries.length}</span>
            <span class="collapsible-chev" id="chev-positions">›</span>
          </div>
          <div class="collapsible-body" id="body-positions"><div class="card" style="margin-bottom:0;">`;
        posEntries.forEach(([pos, count]) => {
          html += `<div class="pos-bar-item">
            <div class="pos-bar-label" title="${pos}">${pos}</div>
            <div class="pos-bar-track"><div class="pos-bar-fill" style="width:${Math.round((count/maxCount)*100)}%"></div></div>
            <div class="pos-bar-count">${count}</div>
          </div>`;
        });
        html += `</div></div></div>`;
      }

      // Belt history section
      html += `<div class="collapsible-section" id="beltHistorySection">
        <div class="collapsible-header" onclick="toggleSection('beltHistory')">
          <span class="section-title">Belt History</span>
          <span class="collapsible-pill" id="beltHistoryPill">${beltHistory.length}</span>
          <span class="collapsible-chev" id="chev-beltHistory">›</span>
        </div>
        <div class="collapsible-body" id="body-beltHistory">
          <div id="beltHistoryList"></div>
          <button class="log-btn" style="margin-top:0.75rem;background:rgba(255,255,255,0.05);color:#888;border:0.5px solid rgba(255,255,255,0.1);" onclick="showAddBeltEntry()">+ Add promotion</button>
          <div id="addBeltEntryForm" style="display:none;" class="bh-add-form">
            <div class="form-group">
              <label class="form-label">Belt</label>
              <select id="bh-belt" class="log-input" style="appearance:none;-webkit-appearance:none;">
                <option value="white">White</option>
                <option value="blue">Blue</option>
                <option value="purple">Purple</option>
                <option value="brown">Brown</option>
                <option value="black">Black</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">Stripes (0–4)</label>
              <input type="number" id="bh-stripes" class="log-input" value="0" min="0" max="4" style="width:80px;">
            </div>
            <div class="form-group">
              <label class="form-label">Date awarded</label>
              <input type="date" id="bh-date" class="log-input">
            </div>
            <div class="form-group">
              <label class="form-label">Notes (optional)</label>
              <input type="text" id="bh-notes" class="log-input" placeholder="e.g. After IBJJF tournament">
            </div>
            <button class="submit-btn" onclick="submitBeltEntry()">Save promotion</button>
          </div>
        </div>
      </div>`;

      view.innerHTML = html;

      // Render belt history list
      renderBeltHistoryList();

      // Initialise filter/pagination state and render first page
      window._progressSessions = sessions;
      window._progressPage = 1;
      filterSessions();
    }

    function renderBeltHistoryList() {
      const el = document.getElementById('beltHistoryList');
      if (!el) return;
      if (beltHistory.length === 0) {
        el.innerHTML = '<div style="font-size:13px;color:#555;padding:0.5rem 0;">No belt promotions recorded yet.</div>';
        return;
      }
      const BELT_COLORS_HEX = { white: '#f0f0f0', blue: '#4a90e2', purple: '#7b4fa6', brown: '#8B4513', black: '#555' };
      let html = '<div class="belt-history-timeline">';
      beltHistory.forEach(entry => {
        const color = BELT_COLORS_HEX[entry.belt] || '#f0f0f0';
        const stripesDots = [0,1,2,3].map(i => `<div class="bh-stripe${i < (entry.stripes || 0) ? ' filled' : ''}"></div>`).join('');
        const date = entry.date_awarded ? new Date(entry.date_awarded + 'T00:00:00').toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) : 'Unknown date';
        html += `<div class="bh-entry">
          <div class="bh-dot" style="background:${color};border-color:${color};"></div>
          <div class="bh-date">${date}</div>
          <div class="bh-belt" style="color:${color};">${entry.belt.charAt(0).toUpperCase() + entry.belt.slice(1)} Belt</div>
          <div class="bh-stripes">${stripesDots}</div>
          ${entry.notes ? `<div class="bh-notes">${entry.notes}</div>` : ''}
        </div>`;
      });
      html += '</div>';
      el.innerHTML = html;
    }

    function showAddBeltEntry() {
      const form = document.getElementById('addBeltEntryForm');
      if (form) form.style.display = form.style.display === 'none' ? 'block' : 'none';
    }

    async function submitBeltEntry() {
      const belt = document.getElementById('bh-belt').value;
      const stripes = document.getElementById('bh-stripes').value;
      const dateAwarded = document.getElementById('bh-date').value;
      const notes = document.getElementById('bh-notes').value.trim();
      const { error } = await addBeltEntry(belt, stripes, dateAwarded, notes);
      if (error) { alert('Could not save: ' + error.message); return; }
      document.getElementById('addBeltEntryForm').style.display = 'none';
      const pill = document.getElementById('beltHistoryPill');
      if (pill) pill.textContent = beltHistory.length;
      renderBeltHistoryList();
    }

    function toggleSection(id) {
      const body = document.getElementById('body-' + id);
      const chev = document.getElementById('chev-' + id);
      if (!body) return;
      const isOpen = body.classList.toggle('open');
      if (chev) chev.classList.toggle('open', isOpen);
    }

    function filterSessions() {
      const filter = document.getElementById('posFilter')?.value || '';
      const sessions = window._progressSessions || [];
      const filtered = filter ? sessions.filter(s => (s.position || '') === filter) : sessions;
      window._filteredSessions = filtered;
      window._progressPage = 1;
      const label = document.getElementById('sessionCountLabel');
      if (label) label.textContent = `${filtered.length} session${filtered.length !== 1 ? 's' : ''}`;
      renderSessionPage();
    }

    function renderSessionPage() {
      const PAGE_SIZE = 10;
      const sessions = window._filteredSessions || [];
      const page = window._progressPage || 1;
      const showing = sessions.slice(0, page * PAGE_SIZE);
      const remaining = sessions.length - showing.length;

      const listEl = document.getElementById('sessionList');
      const moreEl = document.getElementById('loadMoreWrap');
      if (!listEl) return;

      let html = '';
      if (showing.length === 0) {
        html = '<div class="empty-state">No sessions found.</div>';
      } else {
        showing.forEach(s => {
          const drillCount = s.drills?.filter(d => d.rating > 0).length || 0;
          const hasRolling = s.rollingRounds?.minutes > 0;
          const sourceTag = s.source === 'manual' ? '<span class="source-tag">Manual</span>' : '<span class="source-tag ai-tag">AI</span>';
          const meta = [drillCount > 0 ? `${drillCount} drill${drillCount !== 1 ? 's' : ''}` : '', hasRolling ? `${s.rollingRounds.minutes}min rolling` : ''].filter(Boolean).join(' · ');
          html += `<div class="session-item clickable" onclick="renderSessionDetail('${s.id}')">
            <div class="session-header">
              <div style="display:flex;align-items:center;gap:8px;"><div class="session-pos">${s.position || 'General'}</div>${sourceTag}</div>
              <div style="display:flex;align-items:center;gap:8px;"><div class="session-date">${s.date}</div><div class="session-chevron">›</div></div>
            </div>
            <div class="session-problem">${esc((s.problem || s.notes || '').slice(0, 120))}</div>
            ${meta ? `<div class="session-meta">${meta}</div>` : ''}
          </div>`;
        });
      }
      listEl.innerHTML = html;

      if (moreEl) {
        moreEl.innerHTML = remaining > 0
          ? `<button class="log-btn" style="background:rgba(255,255,255,0.05);color:#888;border:0.5px solid rgba(255,255,255,0.1);" onclick="loadMoreSessions()">Load ${Math.min(remaining, PAGE_SIZE)} more</button>`
          : '';
      }
    }

    function loadMoreSessions() {
      window._progressPage = (window._progressPage || 1) + 1;
      renderSessionPage();
    }

    function renderSessionDetail(sessionId) {
      const s = cachedSessions.find(s => String(s.id) === String(sessionId));
      if (!s) return;
      const rr = s.rollingRounds || {};
      const view = document.getElementById('progressView');

      let html = `<div class="detail-header">
        <button class="back-btn" onclick="renderProgress()">← Back</button>
        <button class="delete-btn" onclick="deleteSession('${s.id}')">Delete</button>
      </div>
      <div class="detail-top"><div class="detail-pos">${s.position || 'General'}</div><div class="detail-date">${s.date}</div></div>`;

      if (s.problem || s.notes) {
        html += `<div class="card" style="margin-bottom:1rem;"><div class="card-label">Problem / Notes</div><div style="font-size:14px;color:#aaa;line-height:1.6;">${esc(s.problem || s.notes)}</div></div>`;
      }
      if (s.weaknessFlag) {
        html += `<div class="weakness-flag"><div class="weakness-label">Core weakness identified</div>${s.weaknessFlag}</div>`;
      }
      if (s.strengthFlag || s.strength_flag) {
        html += `<div class="strength-flag"><div class="strength-label">Strength identified</div>${s.strengthFlag || s.strength_flag}</div>`;
      }
      if (s.drills && s.drills.length > 0) {
        html += '<div class="section-title">Drills</div><div class="card">';
        s.drills.forEach((drill, i) => {
          const text = typeof drill === 'string' ? drill : drill.text;
          const rating = typeof drill === 'object' ? (drill.rating || 0) : 0;
          const notes = typeof drill === 'object' ? (drill.notes || '') : '';
          html += `<div class="drill-item"><div class="drill-num">${i + 1}</div><div class="drill-content">
            <div class="drill-text">${text}</div>
            ${rating > 0 ? `<div style="color:#e63b30;font-size:14px;margin-top:4px;">${'★'.repeat(rating)}${'☆'.repeat(5-rating)}</div>` : ''}
            ${notes ? `<div style="font-size:12px;color:#666;margin-top:4px;">${notes}</div>` : ''}
          </div></div>`;
        });
        html += '</div>';
      }

      html += `<div class="section-title">Rolling rounds</div><div class="card">
        <div class="round-grid">
          <div><div class="round-num" id="rr-wins">${rr.wins||0}</div><div class="round-label">Submissions</div></div>
          <div><div class="round-num" id="rr-losses">${rr.losses||0}</div><div class="round-label">Tapped out</div></div>
          <div><div class="round-num" id="rr-minutes">${rr.minutes||0}</div><div class="round-label">Minutes</div></div>
        </div>
        <div class="round-inputs">
          <div class="round-input-group"><label>Submissions</label><input type="number" id="inp-wins" value="${rr.wins||0}" min="0" class="round-input"></div>
          <div class="round-input-group"><label>Tapped out</label><input type="number" id="inp-losses" value="${rr.losses||0}" min="0" class="round-input"></div>
          <div class="round-input-group"><label>Minutes</label><input type="number" id="inp-minutes" value="${rr.minutes||0}" min="0" class="round-input"></div>
        </div>
        <button class="save-drill-btn" style="width:100%;" onclick="saveRollingRounds('${s.id}')">Save rounds<span class="saved-badge" id="rr-saved">Saved!</span></button>
      </div>`;

      view.innerHTML = html;
    }

    async function saveRollingRounds(sessionId) {
      const rr = {
        wins: parseInt(document.getElementById('inp-wins').value) || 0,
        losses: parseInt(document.getElementById('inp-losses').value) || 0,
        minutes: parseInt(document.getElementById('inp-minutes').value) || 0
      };
      await sb.from('sessions').update({ rolling_rounds: rr }).eq('id', sessionId);
      const s = cachedSessions.find(s => String(s.id) === String(sessionId));
      if (s) s.rollingRounds = rr;
      document.getElementById('rr-wins').textContent = rr.wins;
      document.getElementById('rr-losses').textContent = rr.losses;
      document.getElementById('rr-minutes').textContent = rr.minutes;
      const badge = document.getElementById('rr-saved');
      badge.style.display = 'inline';
      setTimeout(() => badge.style.display = 'none', 1500);
    }

    async function deleteSession(sessionId) {
      if (!confirm('Delete this session?')) return;
      await sb.from('sessions').delete().eq('id', sessionId);
      cachedSessions = cachedSessions.filter(s => String(s.id) !== String(sessionId));
      refreshSessionViews();
    }

    // After a session is logged or deleted, redraw whichever screen is showing
    // so the radar, Vulnerability Map and stats reflect it straight away.
    function refreshSessionViews() {
      if (document.getElementById('dashboardView').style.display !== 'none') renderDashboard();
      if (document.getElementById('progressView').style.display !== 'none') renderProgress();
    }

    // ── Calendar ──────────────────────────────────────────────────────────

    const TYPE_LABELS = { seminar: 'Seminar', competition: 'Competition', local: 'Local Event', televised: 'Televised' };
    const ALL_TYPES   = ['seminar', 'competition', 'local', 'televised'];

    let calState = (() => {
      try {
        const s = JSON.parse(localStorage.getItem('calState') || '{}');
        return {
          location: s.location || '',
          radius:   s.radius   || '50',
          types:    s.types    || [...ALL_TYPES],
          events:   [],
          loading:  false,
          activeEvent: null
        };
      } catch { return { location: '', radius: '50', types: [...ALL_TYPES], events: [], loading: false, activeEvent: null }; }
    })();

    function saveCalState() {
      localStorage.setItem('calState', JSON.stringify({ location: calState.location, radius: calState.radius, types: calState.types }));
    }

    function renderCalendar() {
      const view = document.getElementById('calendarView');
      if (calState.activeEvent) { renderCalendarDetail(calState.activeEvent); return; }
      if (!calState.location) { renderCalendarSetup(); return; }
      if (calState.loading) {
        view.innerHTML = `<div class="cal-topbar">
          <div class="cal-loc-chip">${locationChipSVG()}${calState.location}</div>
        </div>
        <div class="loading" style="padding:3rem 0;"><div class="dot"></div><div class="dot"></div><div class="dot"></div><span>finding events near you...</span></div>`;
        return;
      }
      renderCalendarContent();
    }

    function locationChipSVG() {
      return `<svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>`;
    }

    function renderCalendarSetup() {
      const view = document.getElementById('calendarView');
      view.innerHTML = `
        <div class="cal-setup">
          <div class="cal-setup-icon"><svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#e63b30" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z"/><circle cx="12" cy="10" r="2.6"/></svg></div>
          <div class="cal-setup-title">Find events near you</div>
          <div class="cal-setup-sub">Seminars, competitions, local martial arts events and televised fight cards — all in one place.</div>
          <button class="cal-setup-btn primary" onclick="useMyLocation()">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06z"/></svg>
            Use my location
          </button>
          <div class="cal-divider">or enter manually</div>
          <div class="cal-manual-row">
            <input id="calLocInput" class="cal-loc-input" type="text" placeholder="City, state or zip code…" onkeydown="if(event.key==='Enter')setCalLocation()">
            <button class="cal-go-btn" onclick="setCalLocation()">Go</button>
          </div>
        </div>`;
    }

    // Parse event date — returns { date, hasYear } or null
    const _MONTH_IDX = { jan:0, feb:1, mar:2, apr:3, may:4, jun:5, jul:6, aug:7, sep:8, oct:9, nov:10, dec:11 };

    function parseEventDate(dateStr) {
      if (!dateStr || dateStr === 'See details') return null;
      const s = String(dateStr);

      // Never trust new Date() with these strings — it mangles year-less and
      // range formats ("Jun 9" → 2002, "Jul 4-6, 2026" → 2006). Extract the
      // month name, day, and optional year explicitly instead.
      const yearMatch = s.match(/\b(20\d{2})\b/);
      const hasYear = !!yearMatch;

      let d = null;
      const md = s.match(/\b(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)[a-z]*\.?\s+(\d{1,2})\b/i);
      if (md) {
        const month = _MONTH_IDX[md[1].slice(0, 3).toLowerCase()];
        const day = parseInt(md[2]);
        if (day < 1 || day > 31) return null;
        const year = hasYear ? parseInt(yearMatch[1]) : new Date().getFullYear();
        d = new Date(year, month, day);
      } else if (hasYear) {
        // Numeric formats like "6/14/2026" — safe to raw-parse only with explicit year
        const t = new Date(s);
        if (!isNaN(t.getTime())) d = t;
      }
      if (!d || isNaN(d.getTime())) return null;

      // Year-less dates are ambiguous: "Jun 9" two days later is a past event,
      // but "Jan 3" seen in June means NEXT January. If more than 45 days in
      // the past, assume next year.
      if (!hasYear) {
        const cutoff = new Date();
        cutoff.setHours(0, 0, 0, 0);
        cutoff.setDate(cutoff.getDate() - 45);
        if (d < cutoff) d.setFullYear(d.getFullYear() + 1);
      }

      return { date: d, hasYear };
    }

    function renderCalendarContent() {
      const view = document.getElementById('calendarView');
      const today = new Date();
      today.setHours(0, 0, 0, 0);

      // Filter by type AND exclude past events. parseEventDate rolls ambiguous
      // year-less dates (e.g. "Jan 3" seen in June) into next year, so any
      // parsed date still in the past is genuinely over — drop it.
      const filtered = calState.events.filter(e => {
        if (!calState.types.includes(e.type)) return false;
        const parsed = parseEventDate(e.date);
        if (parsed && parsed.date < today) return false;
        return true;
      });

      // Sort: confirmed dates ascending, unconfirmed/undated at the end
      filtered.sort((a, b) => {
        const da = parseEventDate(a.date);
        const db = parseEventDate(b.date);
        if (da && db) return da.date - db.date;
        if (da) return -1;
        if (db) return 1;
        return 0;
      });

      const radiusOptions = ['10','25','50','100','any'];

      let html = `
        <div class="cal-topbar">
          <div class="cal-loc-chip" onclick="changeCalLocation()">
            ${locationChipSVG()} ${calState.location}
          </div>
          <button class="cal-refresh-btn" onclick="refreshCalEvents()">↻ Refresh</button>
        </div>
        <div class="cal-filters">
          <select class="cal-radius" onchange="setCalRadius(this.value)">
            ${radiusOptions.map(r => `<option value="${r}" ${calState.radius===r?'selected':''}>${r==='any'?'Any distance':r+' mi'}</option>`).join('')}
          </select>
          ${ALL_TYPES.map(t => {
            const on = calState.types.includes(t);
            return `<button class="type-pill ${on?'on-'+t:''}" onclick="toggleCalType('${t}')">${TYPE_LABELS[t]}</button>`;
          }).join('')}
        </div>`;

      if (filtered.length === 0) {
        html += `<div class="empty-state">No upcoming events found for the selected filters.<br><br>
          <button class="log-btn" onclick="refreshCalEvents()">Search again</button></div>`;
      } else {
        filtered.forEach(evt => {
          html += `<div class="event-card" onclick="openCalendarEvent('${evt.id}')">
            <div class="event-card-top">
              <div class="event-title">${evt.title}</div>
              <span class="event-badge badge-${evt.type}">${TYPE_LABELS[evt.type]}</span>
            </div>
            ${evt.date ? `<div class="event-date">${evt.date}</div>` : ''}
            ${evt.location ? `<div class="event-location-line">${evt.location}</div>` : ''}
            ${evt.description ? `<div class="event-snippet">${evt.description}</div>` : ''}
          </div>`;
        });
        html += renderCalendarAffiliate(filtered);
      }

      view.innerHTML = html;
    }

    function renderCalendarDetail(evt) {
      const view = document.getElementById('calendarView');
      view.innerHTML = `
        <div class="event-detail-bar">
          <button class="back-btn" onclick="closeCalendarEvent()">← Back</button>
          <span class="event-detail-badge badge-${evt.type}">${TYPE_LABELS[evt.type]}</span>
        </div>
        ${evt.thumbnail ? `<img src="${evt.thumbnail}" style="width:100%;border-radius:12px;object-fit:cover;max-height:180px;margin-bottom:1.25rem;">` : ''}
        <div class="event-detail-date">${evt.date || ''}</div>
        <div class="event-detail-title">${evt.title}</div>
        ${evt.venue ? `<div class="event-detail-venue"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:4px;"><path d="M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z"/><circle cx="12" cy="9.5" r="2.5"/></svg>${esc(evt.venue)}</div>` : ''}
        ${evt.location ? `<div class="event-detail-loc">${evt.location}</div>` : ''}
        ${evt.description ? `<div class="card" style="margin-top:1rem;"><div class="card-label">About this event</div><div class="event-detail-desc">${evt.description}</div></div>` : ''}
        ${evt.link
          ? `<button class="event-reg-btn" onclick="openExternal('${evt.link}')">View details & sign up ↗</button>`
          : `<div class="event-no-link">No direct link available — search online for registration details.</div>`
        }`;
    }

    function openCalendarEvent(id) {
      const evt = calState.events.find(e => e.id === id);
      if (!evt) return;
      calState.activeEvent = evt;
      renderCalendarDetail(evt);
    }

    function closeCalendarEvent() {
      calState.activeEvent = null;
      renderCalendarContent();
    }

    // In the apps, ask the OS directly (Capacitor Geolocation): the prompt then
    // names Flowmora and shows our usage text, instead of WebKit's
    // "'localhost' would like to use your current location". Coarse only —
    // we just need a city.
    function getCoarsePosition(onOk, onFail) {
      const Geo = window.Capacitor?.Plugins?.Geolocation;
      if (IS_NATIVE && Geo) {
        (async () => {
          try {
            let perm = await Geo.checkPermissions();
            const state = p => IS_ANDROID ? p.coarseLocation : p.location;
            if (state(perm) !== 'granted') perm = await Geo.requestPermissions({ permissions: [IS_ANDROID ? 'coarseLocation' : 'location'] });
            if (state(perm) !== 'granted') { onFail(); return; }
            onOk(await Geo.getCurrentPosition({ enableHighAccuracy: false, timeout: 15000, maximumAge: 600000 }));
          } catch (_) { onFail(); }
        })();
        return;
      }
      if (!navigator.geolocation) { onFail(); return; }
      navigator.geolocation.getCurrentPosition(onOk, onFail, { enableHighAccuracy: false, timeout: 15000, maximumAge: 600000 });
    }

    async function useMyLocation() {
      if (!IS_NATIVE && !navigator.geolocation) {
        alert('Geolocation is not supported by your browser. Please enter your location manually.');
        return;
      }
      const btn = document.querySelector('.cal-setup-btn.primary');
      if (btn) { btn.disabled = true; btn.textContent = 'Detecting…'; }

      getCoarsePosition(async pos => {
        try {
          const { latitude: lat, longitude: lon } = pos.coords;
          const r = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}`, {
            headers: { 'Accept-Language': 'en' }
          });
          const d = await r.json();
          const city = d.address?.city || d.address?.town || d.address?.village || d.address?.county || '';
          const state = d.address?.state_code || d.address?.state || '';
          const loc = [city, state].filter(Boolean).join(', ') || d.display_name?.split(',')[0] || 'my location';
          await applyCalLocation(loc);
        } catch {
          if (btn) { btn.disabled = false; btn.innerHTML = 'Use my location'; }
          alert('Could not detect your city. Please enter it manually.');
        }
      }, () => {
        if (btn) { btn.disabled = false; btn.innerHTML = 'Use my location'; }
        alert('Location access denied. Please enter your location manually.');
      });
    }

    async function setCalLocation() {
      const input = document.getElementById('calLocInput');
      const loc = input?.value?.trim();
      if (!loc) return;
      await applyCalLocation(loc);
    }

    async function applyCalLocation(loc) {
      calState.location = loc;
      calState.events = [];
      calState.activeEvent = null;
      saveCalState();
      await fetchCalendarEvents();
    }

    function changeCalLocation() {
      calState.location = '';
      calState.events = [];
      calState.activeEvent = null;
      saveCalState();
      renderCalendarSetup();
    }

    async function refreshCalEvents() {
      calState.events = [];
      await fetchCalendarEvents();
    }

    async function fetchCalendarEventsSilent() {
      if (!calState.location) return;
      try {
        const res = await fetch(api('/api/events'), {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ location: calState.location, radius: calState.radius, types: calState.types })
        });
        const data = await res.json();
        if (!data.error) {
          calState.events = data.events || [];
          renderDashboard();
        }
      } catch (_) {}
    }

    async function fetchCalendarEvents() {
      calState.loading = true;
      calState.activeEvent = null;
      renderCalendar();
      try {
        const res = await fetch(api('/api/events'), {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ location: calState.location, radius: calState.radius, types: calState.types })
        });
        const data = await res.json();
        if (data.error === 'no_key') {
          calState.loading = false;
          calState.events = [];
          document.getElementById('calendarView').innerHTML = `
            <div class="empty-state" style="padding:3rem 1rem;">
              <div style="margin-bottom:1rem;"></div>
              <div style="color:#f0f0f0;font-size:16px;margin-bottom:0.75rem;">Almost there</div>
              <div style="color:#555;font-size:13px;line-height:1.7;max-width:300px;margin:0 auto;">
                Add a free <strong style="color:#aaa;">SERPER_API_KEY</strong> to your <code style="color:#e63b30;">.env</code> file to enable live event search.<br><br>
                Get one at <strong style="color:#aaa;">serper.dev</strong> — 2,500 free searches/month.
              </div>
            </div>`;
          return;
        }
        calState.events = data.events || [];
      } catch (err) {
        calState.events = [];
        document.getElementById('calendarView').innerHTML = `<div class="empty-state" style="color:#e63b30;">Couldn't load events. Check your connection.<br><br><button class="log-btn" onclick="fetchCalendarEvents()">Retry</button></div>`;
        calState.loading = false;
        return;
      }
      calState.loading = false;
      renderCalendarContent();
    }

    function toggleCalType(type) {
      const idx = calState.types.indexOf(type);
      if (idx >= 0) {
        if (calState.types.length === 1) return; // keep at least one
        calState.types.splice(idx, 1);
      } else {
        calState.types.push(type);
      }
      saveCalState();
      renderCalendarContent();
    }

    function setCalRadius(r) {
      calState.radius = r;
      saveCalState();
      if (calState.location) refreshCalEvents();
    }

    // ── Belt history helpers ──────────────────────────────────────────────

    async function loadBeltHistory() {
      if (!currentUser) return;
      const { data } = await sb.from('belt_history')
        .select('id, belt, stripes, date_awarded, notes')
        .order('date_awarded', { ascending: false });
      if (data) beltHistory = data;
    }

    async function addBeltEntry(belt, stripes, dateAwarded, notes) {
      if (!currentUser) return;
      const entry = { user_id: currentUser.id, belt, stripes: parseInt(stripes) || 0, date_awarded: dateAwarded || null, notes: notes || '' };
      const { data, error } = await sb.from('belt_history').insert(entry).select().single();
      if (!error && data) beltHistory.unshift(data);
      return { data, error };
    }

    // ── Log modal state ───────────────────────────────────────────────────

    let logState = {
      classType: 'Drilling',
      position: '',
      rounds: 1,
      subsUsed: [],
      subsAgainst: [],
      sweeps: 0,
      escapes: 0,
      customSubInput: null
    };

    const BASE_SUBS = [
      'Armbar','Triangle','Rear Naked Choke','Guillotine','Kimura','Americana','Omoplata',
      "D'Arce",'Anaconda','Arm Triangle','Ezekiel','Baseball Bat Choke',
      'Bow & Arrow','Clock Choke','North-South Choke','Peruvian Necktie',
      'Heel Hook','Inside Heel Hook','Outside Heel Hook','Kneebar','Toe Hold','Calf Slicer',
      'Wrist Lock','Twister'
    ];
    let customSubs = [];
    try { customSubs = JSON.parse(localStorage.getItem('flowmora_custom_subs') || '[]'); } catch(e) {}
    let ALL_SUBS = [...BASE_SUBS, ...customSubs, 'Other'];
    const ALL_POSITIONS = ['Guard','Mount','Back','Side Control','Half Guard','Standing','Other'];

    function showLogModal() {
      logState = { classType: 'Drilling', position: '', rounds: 1, subsUsed: [], subsAgainst: [], sweeps: 0, escapes: 0, customSubInput: null, nemesisRolls: [], subPos: { used: {}, against: {} } };
      renderLogModal();
      document.getElementById('logModal').style.display = 'flex';
      document.body.style.overflow = 'hidden';
    }

    function renderLogModal() {
      const wrap = document.getElementById('logModalInner');
      if (!wrap) return;
      const savedNotes = document.getElementById('log-notes')?.value || '';
      const showRounds = logState.classType !== 'Drilling';
      wrap.innerHTML = `
        <div class="log-form-header">
          <div style="font-size:15px;font-weight:500;color:#f0f0f0;">Log a session</div>
          <button onclick="hideLogModal()" style="background:none;border:none;color:#666;font-size:20px;cursor:pointer;">✕</button>
        </div>

        <button class="voice-log-btn" id="voiceLogBtn" onclick="startVoiceLog()">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z"/></svg>
          Speak your session
        </button>
        <div id="voiceLogLive" style="display:none;background:rgba(230,59,48,0.06);border:0.5px solid rgba(230,59,48,0.25);border-radius:10px;padding:0.6rem 0.8rem;font-size:13px;color:#d8b5b2;line-height:1.5;margin:-0.5rem 0 1.1rem;font-style:italic;"></div>

        <div class="form-group">
          <div class="form-label">Class type</div>
          <div class="pill-group" style="flex-wrap:nowrap;">
            ${['Drilling','Sparring','Competition'].map(t => `<button class="log-pill large ${logState.classType===t?'active':''}" onclick="logSetClass('${t}')">${t}</button>`).join('')}
          </div>
        </div>

        <div class="form-group">
          <div class="form-label">Position</div>
          <div class="pill-group">
            ${ALL_POSITIONS.map(p => `<button class="log-pill ${logState.position===p?'active':''}" onclick="logSetPos('${p}')">${p}</button>`).join('')}
          </div>
        </div>

        ${showRounds ? `
        <div class="form-group">
          <div class="form-label">Rounds rolled</div>
          <div class="counter-row">
            <button class="counter-btn" onclick="logAdj('rounds',-1)">−</button>
            <div class="counter-val" id="log-rounds-val">${logState.rounds}</div>
            <button class="counter-btn" onclick="logAdj('rounds',1)">+</button>
          </div>
        </div>` : ''}

        <div class="form-group">
          <div class="form-label">Submissions used <span class="form-hint">use + if you hit it more than once</span></div>
          <div class="pill-group" data-other="logOtherSub('used')">
            ${subPillsHTML('used', "logOtherSub('used')")}
          </div>
          ${logState.customSubInput==='used'?`
          <div class="custom-sub-row">
            <input id="custom-sub-input-used" class="custom-sub-input" type="text" placeholder="e.g. Loop Choke…" maxlength="40" onkeydown="if(event.key==='Enter')confirmCustomSub('used')">
            <button class="custom-sub-add-btn" onclick="confirmCustomSub('used')">Add</button>
            <button class="custom-sub-cancel-btn" onclick="logState.customSubInput=null;renderLogModal()">✕</button>
          </div>`:''}
        </div>

        <div class="form-group">
          <div class="form-label">Sweeps</div>
          <div class="counter-row">
            <button class="counter-btn" onclick="logAdj('sweeps',-1)">−</button>
            <div class="counter-val" id="log-sweeps-val">${logState.sweeps}</div>
            <button class="counter-btn" onclick="logAdj('sweeps',1)">+</button>
          </div>
        </div>
        <div class="form-group">
          <div class="form-label">Escapes</div>
          <div class="counter-row">
            <button class="counter-btn" onclick="logAdj('escapes',-1)">−</button>
            <div class="counter-val" id="log-escapes-val">${logState.escapes}</div>
            <button class="counter-btn" onclick="logAdj('escapes',1)">+</button>
          </div>
        </div>

        <div class="form-group">
          <div class="form-label">Submissions against me <span class="form-hint">use + if it got you more than once</span></div>
          <div class="pill-group" data-other="logOtherSub('against')">
            ${subPillsHTML('against', "logOtherSub('against')")}
          </div>
          ${logState.customSubInput==='against'?`
          <div class="custom-sub-row">
            <input id="custom-sub-input-against" class="custom-sub-input" type="text" placeholder="e.g. Loop Choke…" maxlength="40" onkeydown="if(event.key==='Enter')confirmCustomSub('against')">
            <button class="custom-sub-add-btn" onclick="confirmCustomSub('against')">Add</button>
            <button class="custom-sub-cancel-btn" onclick="logState.customSubInput=null;renderLogModal()">✕</button>
          </div>`:''}
        </div>

        ${(logState.nemesisRolls || []).length ? `
        <div class="form-group">
          <div class="form-label">Rolls detected — added to Nemesis tracking</div>
          ${logState.nemesisRolls.map((r, i) => `
          <div style="display:flex;align-items:center;gap:8px;padding:0.5rem 0;border-bottom:0.5px solid rgba(255,255,255,0.05);">
            <div style="flex:1;min-width:0;">
              <span style="font-size:14px;font-weight:600;color:#e0e0e0;">${esc(r.name)}</span>
              ${!r.nemesisId ? '<span style="font-size:10px;color:#e63b30;margin-left:6px;">new rival</span>' : ''}
            </div>
            ${['win','loss','draw'].map(res => `
              <button class="log-pill sub-pill ${r.result === res ? 'active' : ''}" onclick="logSetNemResult(${i},'${res}')">${res.charAt(0).toUpperCase() + res.slice(1)}</button>`).join('')}
            <button onclick="logRemoveNemRoll(${i})" style="background:none;border:none;color:#555;font-size:16px;cursor:pointer;padding:2px 6px;">✕</button>
          </div>`).join('')}
        </div>` : ''}

        <div class="form-group">
          <div class="form-label">Notes (optional)</div>
          <div class="mini-mic-wrap">
            <textarea id="log-notes" class="log-input" rows="2" placeholder="Anything worth remembering?"></textarea>
            <button type="button" class="mini-mic" onclick="dictateInto('log-notes', this)" aria-label="Dictate notes"><svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1 1.93c-3.94-.49-7-3.85-7-7.93H5c0 3.53 2.61 6.43 6 6.92V19h2v-3.08c3.39-.49 6-3.39 6-6.92h1c0 4.08-3.06 7.44-7 7.93V19h-2v-3.07z"/></svg></button>
          </div>
        </div>

        <button class="submit-btn" onclick="saveManualSession()">Log Session</button>
      `;
      if (savedNotes) { const n = document.getElementById('log-notes'); if (n) n.value = savedNotes; }
    }

    function logSetClass(type) {
      logState.classType = type;
      renderLogModal();
    }

    function logSetNemResult(i, result) {
      if (logState.nemesisRolls?.[i]) { logState.nemesisRolls[i].result = result; renderLogModal(); }
    }

    function logRemoveNemRoll(i) {
      if (logState.nemesisRolls) { logState.nemesisRolls.splice(i, 1); renderLogModal(); }
    }

    function logSetPos(pos) {
      logState.position = logState.position === pos ? '' : pos;
      renderLogModal();
    }

    function logAdj(field, delta) {
      logState[field] = Math.max(0, (logState[field] || 0) + delta);
      const el = document.getElementById(`log-${field}-val`);
      if (el) el.textContent = logState[field];
    }

    // Submissions are counted per finish: each time it happened is one entry,
    // so two armbars in a night are saved as ['Armbar', 'Armbar']. The radar,
    // Vulnerability Map and badges all count entries, so they count finishes.
    function subCount(arr, sub) { return arr.reduce((n, x) => n + (x === sub), 0); }
    function subsSummary(arr, sep = ', ') {
      const list = arr || [];
      return [...new Set(list)].map(x => { const n = subCount(list, x); return n > 1 ? `${x} x${n}` : x; }).join(sep);
    }

    // Pill group for one list. A selected submission shows − / + steppers and
    // its count; otherOnclick opens the modal's own "Other" input.
    function subPillsHTML(list, otherOnclick) {
      const arr = list === 'used' ? logState.subsUsed : logState.subsAgainst;
      return ALL_SUBS.map(s => {
        if (s === 'Other') return `<button class="log-pill sub-pill" onclick="${otherOnclick}">Other</button>`;
        const q = esc(s.replace(/'/g, "\\'"));
        const n = subCount(arr, s);
        if (!n) return `<button class="log-pill sub-pill" onclick="logStepSub('${list}','${q}',1,this)">${esc(s)}</button>`;
        return `<span class="log-pill sub-pill active sub-counted">`
          + `<button class="sub-step" aria-label="One fewer ${esc(s)}" onclick="logStepSub('${list}','${q}',-1,this)">−</button>`
          + `<span class="sub-label">${esc(s)}${n > 1 ? `<span class="sub-times">×${n}</span>` : ''}</span>`
          + `<button class="sub-step" aria-label="One more ${esc(s)}" onclick="logStepSub('${list}','${q}',1,this)">+</button>`
          + `</span>`;
      }).join('');
    }

    function logStepSub(list, sub, delta, el) {
      const arr = list === 'used' ? logState.subsUsed : logState.subsAgainst;
      if (delta > 0) { if (subCount(arr, sub) < 20) arr.push(sub); }
      else { const i = arr.lastIndexOf(sub); if (i >= 0) arr.splice(i, 1); }
      // Redraw just this group so the sheet doesn't jump or lose typed notes
      const group = el.closest('.pill-group');
      if (group) group.innerHTML = subPillsHTML(list, group.dataset.other);
    }

    // "Other" on the Log Session sheet: toggle the field for a new submission
    function logOtherSub(list) {
      logState.customSubInput = logState.customSubInput === list ? null : list;
      renderLogModal();
      if (logState.customSubInput) setTimeout(() => document.getElementById(`custom-sub-input-${list}`)?.focus(), 50);
    }

    function confirmCustomSub(list) {
      const input = document.getElementById(`custom-sub-input-${list}`);
      const name = input?.value?.trim();
      if (!name) return;
      // Save to localStorage if new
      if (!ALL_SUBS.includes(name)) {
        customSubs.push(name);
        try { localStorage.setItem('flowmora_custom_subs', JSON.stringify(customSubs)); } catch(e) {}
        ALL_SUBS = [...BASE_SUBS, ...customSubs, 'Other'];
      }
      // Add to logState selection
      const arr = list === 'used' ? logState.subsUsed : logState.subsAgainst;
      if (!arr.includes(name)) arr.push(name);
      logState.customSubInput = null;
      renderLogModal();
    }

    function hideLogModal() {
      document.getElementById('logModal').style.display = 'none';
      document.body.style.overflow = '';
      if (voiceLogActive) { try { voiceLogRec.stop(); } catch (e) {} voiceLogActive = false; }
    }

    // ── Voice session logging ─────────────────────────────────────────────
    let voiceLogRec = null;
    let voiceLogActive = false;

    function startVoiceLog() {
      if (!SpeechRecognition) { alert(VOICE_UNSUPPORTED_MSG); return; }
      const btn = document.getElementById('voiceLogBtn');
      if (voiceLogActive) { try { voiceLogRec.stop(); } catch (e) {} return; } // tap again = done

      voiceLogRec = new SpeechRecognition();
      voiceLogRec.lang = 'en-US';
      voiceLogRec.continuous = true;
      // iOS Safari often never marks results "final" — capture interim text
      // continuously and commit whatever we have when recognition ends
      voiceLogRec.interimResults = true;
      let best = '';
      voiceLogActive = true;
      window.speechSynthesis?.cancel();
      btn.classList.add('listening');
      btn.innerHTML = 'Listening — describe your session, tap when done';
      const live = document.getElementById('voiceLogLive');
      if (live) { live.style.display = 'block'; live.textContent = '...'; }

      voiceLogRec.onresult = (e) => {
        let text = '';
        for (const r of e.results) text += r[0].transcript;
        if (text.trim()) best = text.trim();
        const lv = document.getElementById('voiceLogLive');
        if (lv && best) lv.textContent = best;
      };
      voiceLogRec.onerror = (e) => {
        if (e.error === 'not-allowed' || e.error === 'service-not-allowed') {
          alert('Microphone access is blocked. On iPhone: Settings > Safari > Microphone, or tap the "aA" icon in the address bar > Website Settings > Microphone > Allow.');
        }
      };
      voiceLogRec.onend = async () => {
        voiceLogActive = false;
        if (!best) { renderLogModal(); return; }
        const b = document.getElementById('voiceLogBtn');
        if (b) { b.classList.remove('listening'); b.classList.add('parsing'); b.innerHTML = 'Building your log...'; }
        await parseVoiceLog(best);
      };
      voiceLogRec.start();
    }

    async function parseVoiceLog(transcript) {
      try {
        const res = await aiFetch('/api/parselog', {
          transcript,
          knownSubs: ALL_SUBS.filter(s => s !== 'Other'),
          knownPositions: ALL_POSITIONS.filter(p => p !== 'Other'),
          knownNemesis: nemesisList.map(n => n.name)
        });
        if (!res.ok) throw new Error('parse failed');
        const d = await res.json();

        // Any new submission names become permanent custom options
        [...(d.subs_used || []), ...(d.subs_against || [])].forEach(name => {
          if (name && !ALL_SUBS.includes(name)) {
            customSubs.push(name);
            ALL_SUBS = [...BASE_SUBS, ...customSubs, 'Other'];
          }
        });
        try { localStorage.setItem('flowmora_custom_subs', JSON.stringify(customSubs)); } catch (e) {}

        logState.classType = d.class_type || logState.classType;
        logState.position = ALL_POSITIONS.includes(d.position) ? d.position : logState.position;
        logState.rounds = d.rounds || logState.rounds;
        logState.sweeps = d.sweeps ?? logState.sweeps;
        logState.escapes = d.escapes ?? logState.escapes;
        // Voice lists one entry per finish; keep whichever count is higher so
        // re-dictating doesn't double what was already tapped in
        const mergeFinishes = (cur, heard) => {
          const out = [...cur];
          [...new Set(heard)].forEach(sub => {
            for (let n = subCount(heard, sub) - subCount(out, sub); n > 0; n--) out.push(sub);
          });
          return out;
        };
        logState.subsUsed = mergeFinishes(logState.subsUsed, d.subs_used || []);
        logState.subsAgainst = mergeFinishes(logState.subsAgainst, d.subs_against || []);
        // Per-submission positions when the speaker said where it happened
        logState.subPos = {
          used: { ...(logState.subPos?.used || {}), ...(d.subs_used_pos || {}) },
          against: { ...(logState.subPos?.against || {}), ...(d.subs_against_pos || {}) }
        };
        // Match spoken names to tracked rivals (case-insensitive, first-name friendly)
        logState.nemesisRolls = (d.nemesis_rolls || []).map(r => {
          const match = nemesisList.find(n =>
            n.name.toLowerCase() === r.name.toLowerCase() ||
            n.name.toLowerCase().split(/\s+/)[0] === r.name.toLowerCase().split(/\s+/)[0]
          );
          return { name: match ? match.name : r.name, nemesisId: match ? match.id : null, result: r.result, notes: r.notes, track: true };
        });
        renderLogModal();
        if (d.notes) {
          const notesEl = document.getElementById('log-notes');
          if (notesEl) notesEl.value = d.notes;
        }
      } catch (e) {
        renderLogModal();
        const b = document.getElementById('voiceLogBtn');
        if (b && !e?.isLimit) { b.innerHTML = esc(aiErrorText(e, 'Could not understand — try again or fill manually')); setTimeout(renderLogModal, e?.friendly ? 4000 : 2500); }
      }
    }

    // Offline-resilient session insert — gyms have terrible signal. On failure
    // the session is queued in localStorage and re-sent on the next launch or
    // when the connection returns. A logged session must never silently vanish.
    async function insertSessionSafe(session) {
      try {
        const { error } = await sb.from('sessions').insert(session);
        if (error) throw error;
        return true;
      } catch (_) {
        try {
          const q = JSON.parse(localStorage.getItem('pendingSessions') || '[]');
          q.push(session);
          localStorage.setItem('pendingSessions', JSON.stringify(q));
        } catch (_) {}
        return false;
      }
    }

    async function flushPendingSessions() {
      if (!currentUser) return;
      let q;
      try { q = JSON.parse(localStorage.getItem('pendingSessions') || '[]'); } catch (_) { q = []; }
      if (!q.length) return;
      const remaining = [];
      for (const s of q) {
        try {
          const { error } = await sb.from('sessions').insert(s);
          // duplicate id = it actually saved last time — safe to drop
          if (error && !/duplicate|unique|already exists/i.test(error.message)) remaining.push(s);
        } catch (_) { remaining.push(s); }
      }
      localStorage.setItem('pendingSessions', JSON.stringify(remaining));
    }
    window.addEventListener('online', () => { flushPendingSessions(); });

    async function saveManualSession() {
      if (!currentUser) return;
      track('session_logged', { source: 'manual' });
      const notes = document.getElementById('log-notes')?.value?.trim() || '';
      const session = {
        id: crypto.randomUUID(),
        user_id: currentUser.id,
        position: logState.position || 'General',
        problem: '',
        notes,
        date: new Date().toLocaleDateString(),
        drills: [],
        weakness_flag: '',
        class_type: logState.classType,
        sweeps: logState.sweeps,
        escapes: logState.escapes,
        submissions_used: logState.subsUsed,
        submissions_against: logState.subsAgainst,
        rolling_rounds: { rounds: logState.rounds, wins: 0, losses: 0, minutes: 0, subPos: logState.subPos || { used: {}, against: {} } },
        source: 'manual'
      };
      const saved = await insertSessionSafe(session);
      cachedSessions.unshift({ ...session, weaknessFlag: '', strengthFlag: '', rollingRounds: session.rolling_rounds });
      if (!saved) alert('No connection — your session is saved on this phone and will sync automatically when you\'re back online.');
      saveDetectedNemesisRolls(); // fire-and-forget
      hideLogModal();
      refreshSessionViews();
      requestDebrief(session); // fire-and-forget AI insight
      if (saved) maybeAskForReview('sessions');
    }

    // Persist nemesis rolls detected by voice logging. Creates the rival
    // first if they aren't tracked yet.
    async function saveDetectedNemesisRolls() {
      const rolls = (logState.nemesisRolls || []).filter(r => r.track !== false);
      if (!rolls.length || !currentUser) return;
      const today = new Date().toISOString().slice(0, 10);
      for (const r of rolls) {
        try {
          let nid = r.nemesisId || findNemesisByName(r.name)?.id || null;
          if (!nid) {
            const { data, error } = await sb.from('nemesis').insert({
              user_id: currentUser.id, name: r.name, belt: 'unknown', type: 'training_partner', gym: null, notes: null
            }).select().single();
            if (error || !data) continue;
            nemesisList.unshift(data);
            nid = data.id;
          }
          const { data: roll, error: rollErr } = await sb.from('nemesis_rolls').insert({
            user_id: currentUser.id, nemesis_id: nid, result: r.result, notes: r.notes || null, date: today
          }).select().single();
          if (!rollErr && roll) {
            if (!nemesisRolls[nid]) nemesisRolls[nid] = [];
            nemesisRolls[nid].unshift(roll);
          }
        } catch (e) { console.error('Nemesis roll save failed:', e); }
      }
      logState.nemesisRolls = [];
    }

    // ── Date / week helpers ───────────────────────────────────────────────

    function toISODate(d) {
      const dt = new Date(d);
      if (isNaN(dt)) return '';
      return dt.toISOString().slice(0,10);
    }

    function sessionsThisWeek(sessions) {
      const now = new Date();
      const day = now.getDay();
      const mon = new Date(now);
      mon.setDate(now.getDate() - (day === 0 ? 6 : day - 1));
      mon.setHours(0,0,0,0);
      const sun = new Date(mon);
      sun.setDate(mon.getDate() + 6);
      sun.setHours(23,59,59,999);
      return sessions.filter(s => {
        const d = new Date(s.date || s.created_at);
        return !isNaN(d) && d >= mon && d <= sun;
      });
    }

    function sessionsLastWeek(sessions) {
      const now = new Date();
      const day = now.getDay();
      const thisMon = new Date(now);
      thisMon.setDate(now.getDate() - (day === 0 ? 6 : day - 1));
      thisMon.setHours(0,0,0,0);
      const lastMon = new Date(thisMon);
      lastMon.setDate(thisMon.getDate() - 7);
      const lastSun = new Date(thisMon);
      lastSun.setDate(thisMon.getDate() - 1);
      lastSun.setHours(23,59,59,999);
      return sessions.filter(s => {
        const d = new Date(s.date || s.created_at);
        return !isNaN(d) && d >= lastMon && d <= lastSun;
      });
    }

    function weeklyPace(sessions) {
      const now = new Date();
      const cutoff = new Date(now);
      cutoff.setDate(now.getDate() - 28);
      const recent = sessions.filter(s => new Date(s.date || s.created_at) >= cutoff);
      return recent.length / 4;
    }

    // ── Badge engine ──────────────────────────────────────────────────────

    const BADGES = [
      // Mastery & Progression
      { id:'first_roll',            img:'/badges/first_roll.png',            name:'First Roll',            desc:'Log your first session',           check:(s)=>s.length>=1 },
      { id:'early_flow',            img:'/badges/early_flow.png',            name:'Early Flow',            desc:'Train 10 sessions',                check:(s)=>s.length>=10 },
      { id:'committed',             img:'/badges/committed.png',             name:'Committed',             desc:'Train 25 sessions',                check:(s)=>s.length>=25 },
      { id:'dedicated',             img:'/badges/dedicated.png',             name:'Dedicated',             desc:'Train 50 sessions',                check:(s)=>s.length>=50 },
      { id:'obsessed',              img:'/badges/obsessed.png',              name:'Obsessed',              desc:'Train 100 sessions',               check:(s)=>s.length>=100 },
      { id:'unstoppable',           img:'/badges/unstoppable.png',           name:'Unstoppable',           desc:'Train 250 sessions',               check:(s)=>s.length>=250 },
      // Competition
      { id:'first_match',           img:'/badges/first_match.png',           name:'First Match',           desc:'Compete in your first match',      check:(s)=>s.some(x=>x.class_type==='Competition') },
      { id:'winner',                img:'/badges/winner.png',                name:'Winner',                desc:'Win your first match',             check:()=>false },
      { id:'podium_finish',         img:'/badges/podium_finish.png',         name:'Podium Finish',         desc:'Place on the podium',              check:()=>false },
      { id:'gold_standard',         img:'/badges/gold_standard.png',         name:'Gold Standard',         desc:'Win a gold medal',                 check:()=>false },
      { id:'tournament_beast',      img:'/badges/tournament_beast.png',      name:'Tournament Beast',      desc:'Win 5 gold medals',                check:()=>false },
      // Technique & Skill
      { id:'sweep_specialist',      img:'/badges/sweep_specialist.png',      name:'Sweep Specialist',      desc:'Land 25 sweeps',                   check:(s)=>s.reduce((a,x)=>a+(x.sweeps||0),0)>=25 },
      { id:'submission_hunter',     img:'/badges/submission_hunter.png',     name:'Submission Hunter',     desc:'Finish 25 submissions',            check:(s)=>s.reduce((a,x)=>a+(x.submissions_used?.length||0),0)>=25 },
      { id:'guardian',              img:'/badges/guardian.png',              name:'Guardian',              desc:'Retain guard for 10 minutes total',check:()=>false },
      { id:'passing_machine',       img:'/badges/passing_machine.png',       name:'Passing Machine',       desc:'Pass guard 50 times',              check:()=>false },
      { id:'back_control',          img:'/badges/back_control.png',          name:'Back Control',          desc:'Secure back control 20 times',     check:()=>false },
      { id:'leg_lock_expert',       img:'/badges/leg_lock_expert.png',       name:'Leg Lock Expert',       desc:'Finish 15 leg lock submissions',   check:(s)=>s.reduce((a,x)=>a+(x.submissions_used||[]).filter(u=>/heel hook|ankle lock|ankle crunch|kneebar|toe hold|calf slicer|leg lock/i.test(u)).length,0)>=15 },
      // Consistency
      { id:'week_warrior',          img:'/badges/week_warrior.png',          name:'Week Warrior',          desc:'Train 7 days in a row',            check:(s,k)=>k>=7 },
      { id:'streak_starter',        img:'/badges/streak_starter.png',        name:'Streak Starter',        desc:'Train 7 days in a row',            check:(s,k)=>k>=7 },
      { id:'unbreakable',           img:'/badges/unbreakable.png',           name:'Unbreakable',           desc:'Train 30 days in a row',           check:(s,k)=>k>=30 },
      { id:'relentless',            img:'/badges/relentless.png',            name:'Relentless',            desc:'Train 90 days in a row',           check:(s,k)=>k>=90 },
      { id:'iron_will',             img:'/badges/iron_will.png',             name:'Iron Will',             desc:'Train 180 days in a row',          check:(s,k)=>k>=180 },
      // Intel & Nemesis
      { id:'scout',                 img:'/badges/scout.png',                 name:'Scout',                 desc:'Add your first opponent',          check:(s,k,n)=>n>=1 },
      { id:'analyst',               img:'/badges/analyst.png',               name:'Analyst',               desc:'Complete 5 opponent profiles',     check:(s,k,n)=>n>=5 },
      { id:'strategist',            img:'/badges/strategist.png',            name:'Strategist',            desc:'Review intel before 5 matches',    check:()=>false },
      { id:'nemesis_born',          img:'/badges/nemesis_born.png',          name:'Nemesis Born',          desc:'Mark your first Nemesis',          check:(s,k,n)=>n>=1 },
      { id:'rival',                 img:'/badges/rival.png',                 name:'Rival',                 desc:'Roll against a nemesis 5 times',   check:(s,k,n,r)=>Object.values(r).some(rolls=>rolls.length>=5) },
      { id:'victory_over_nemesis',  img:'/badges/victory_over_nemesis.png',  name:'Victory Over Nemesis',  desc:'Beat nemesis after 3+ losses',     check:(s,k,n,r)=>Object.entries(r).some(([,rolls])=>{const losses=rolls.filter(x=>x.result==='loss').length;const hasWin=rolls.some(x=>x.result==='win');return losses>=3&&hasWin;}) },
      // Growth & Mindset
      { id:'student',               img:'/badges/student.png',               name:'Student',               desc:'Complete your first training note', check:(s)=>s.some(x=>x.notes&&x.notes.trim().length>0) },
      { id:'open_mind',             img:'/badges/open_mind.png',             name:'Open Mind',             desc:'Log a lesson learned',             check:(s)=>s.filter(x=>x.notes&&x.notes.trim().length>0).length>=5 },
      { id:'adapt',                 img:'/badges/adapt.png',                 name:'Adapt',                 desc:'Implement advice and improve',     check:()=>false },
      { id:'mental_edge',           img:'/badges/mental_edge.png',           name:'Mental Edge',           desc:'Log 10 mental training sessions',  check:()=>false },
      { id:'champion_mindset',      img:'/badges/champion_mindset.png',      name:'Champion Mindset',      desc:'Complete a full mindset program',  check:()=>false },
      // Special
      { id:'night_trainer',         img:'/badges/night_trainer.png',         name:'Night Trainer',         desc:'Train after midnight 10 times',    check:(s)=>s.filter(x=>{const h=new Date(x.created_at).getHours();return h>=0&&h<4;}).length>=10 },
      { id:'early_riser',           img:'/badges/early_riser.png',           name:'Early Riser',           desc:'Train before 7am 10 times',        check:(s)=>s.filter(x=>new Date(x.created_at).getHours()<7).length>=10 },
      { id:'flow_state',            img:'/badges/flow_state.png',            name:'Flow State',            desc:'Score 90%+ in a session',          check:()=>false },
      { id:'comeback_kid',          img:'/badges/comeback_kid.png',          name:'Comeback Kid',          desc:'Win a match after being behind',   check:()=>false },
      { id:'perfect_session',       img:'/badges/perfect_session.png',       name:'Perfect Session',       desc:'Score 100% in all categories',     check:()=>false },
      { id:'level_up',              img:'/badges/level_up.png',              name:'Level Up',              desc:'Record a new stripe or belt',      check:()=>beltHistory.length>=1 },
      { id:'black_belt_mind',       img:'/badges/black_belt_mind.png',       name:'Black Belt Mind',       desc:'Demonstrate black belt mentality', check:()=>false },
      { id:'legacy_builder',        img:'/badges/legacy_builder.png',        name:'Legacy Builder',        desc:'Train consistently for 1 year',    check:(s)=>{if(s.length<2)return false;const dates=s.map(x=>new Date(x.date||x.created_at)).filter(d=>!isNaN(d));const span=Math.max(...dates)-Math.min(...dates);return span>=365*24*60*60*1000;} },
      { id:'inspiration',           img:'/badges/inspiration.png',           name:'Inspiration',           desc:'Inspire someone in the community', check:()=>false },
      { id:'the_flow',              img:'/badges/the_flow.png',              name:'The Flow',              desc:'Live the path. Be the example.',   check:()=>false },
    ];

    let _toastQueue = [];
    let _toastRunning = false;

    function showAchievementToast(badge) {
      _toastQueue.push(badge);
      if (!_toastRunning) drainToastQueue();
    }

    function drainToastQueue() {
      if (_toastQueue.length === 0) { _toastRunning = false; return; }
      _toastRunning = true;
      const b = _toastQueue.shift();
      const toast = document.getElementById('achievementToast');
      document.getElementById('toastImg').src = b.img;
      document.getElementById('toastName').textContent = b.name;
      document.getElementById('toastDesc').textContent = b.desc;
      toast.classList.add('show');
      setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(drainToastQueue, 500);
      }, 3500);
    }

    // Seen-badge tracking lives in the user's account (Supabase metadata), not
    // localStorage — so clearing browser cache or switching devices never
    // replays the whole achievement history as toasts.
    let _seenBadges = null;

    function computeBadges(sessions, streak) {
      const nemCount = nemesisList.length;
      const nemRolls = nemesisRolls;
      const computed = BADGES.map(b => ({ ...b, earned: b.check(sessions, streak, nemCount, nemRolls) }));
      if (!currentUser) return computed;

      const earnedIds = computed.filter(b => b.earned).map(b => b.id);

      if (_seenBadges === null) {
        const meta = currentUser.user_metadata || {};
        if (Array.isArray(meta.seen_badges)) {
          _seenBadges = new Set(meta.seen_badges);
        } else {
          // First load on this account: mark everything already earned as seen,
          // silently — no toast parade
          _seenBadges = new Set(earnedIds);
          sb.auth.updateUser({ data: { seen_badges: earnedIds } }).catch(() => {});
          return computed;
        }
      }

      const newlyEarned = computed.filter(b => b.earned && !_seenBadges.has(b.id));
      if (newlyEarned.length > 0) {
        newlyEarned.forEach(b => { _seenBadges.add(b.id); showAchievementToast(b); });
        sb.auth.updateUser({ data: { seen_badges: [..._seenBadges] } }).catch(() => {});
      }

      return computed;
    }

    // ── Dashboard ─────────────────────────────────────────────────────────

    const BELT_HEX = { white: '#f0f0f0', blue: '#4a90e2', purple: '#7b4fa6', brown: '#8B4513', black: '#333333' };

    function computeDrillRec(sessions) {
      if (!sessions.length) return null;
      const recent = sessions.slice(0, 10);

      // Priority 1 — most recent weakness flag
      const wkSession = recent.find(s => s.weakness_flag || s.weaknessFlag);
      if (wkSession) {
        const wf = (wkSession.weakness_flag || wkSession.weaknessFlag).slice(0, 120);
        return {
          title: wf,
          why: 'Flagged as a weakness in your recent training.',
          query: `I need to fix this specific weakness: "${wf}". Give me one focused drill I can do today, including key details and common mistakes to avoid.`
        };
      }

      // Priority 2 — submission they keep getting caught by (≥2 times in last 10)
      const subCounts = {}, subPos = {};
      recent.forEach(s => {
        const posMap = s.rolling_rounds?.subPos?.against || {};
        (s.submissions_against || []).forEach(raw => {
          const sub = normalizeSub(raw);
          subCounts[sub] = (subCounts[sub] || 0) + 1;
          if (!subPos[sub]) subPos[sub] = posMap[raw] || s.position || 'General';
        });
      });
      const topCaught = Object.entries(subCounts).sort((a,b) => b[1]-a[1])[0];
      if (topCaught && topCaught[1] >= 2) {
        const [sub, cnt] = topCaught;
        const pos = subPos[sub];
        return {
          title: `Defending the ${sub}`,
          why: `You've been caught by it ${cnt}x in recent sessions from ${pos}.`,
          query: `I keep getting caught by the ${sub} when I'm in ${pos}. Give me the key defense mechanics, early warning signs to feel, and one specific escape drill I can practice today.`
        };
      }

      // Priority 3 — next milestone on their Path (drives the roadmap daily)
      const beltPlan = PROGRESSION.find(p => p.belt === (userProfile.belt || 'white'));
      if (beltPlan) {
        for (const tr of beltPlan.tracks) {
          for (const it of tr.items) {
            const st = roadmapProgress[it.id] || 'none';
            if (st === 'none' || st === 'learning') {
              return {
                title: `Next on your Path: ${it.t}`,
                why: `The next milestone in your ${userProfile.belt || 'white'} belt roadmap (${tr.name}).`,
                query: `Teach me the ${it.t}. Cover the key mechanics, the most common mistakes, and one focused drill I can practice today.`
              };
            }
          }
        }
      }

      // Priority 4 — least-trained position from last 20 sessions
      const posCounts = {};
      const drillPositions = ['Guard','Mount','Back','Side Control','Half Guard'];
      sessions.slice(0, 20).forEach(s => { if (s.position) posCounts[s.position] = (posCounts[s.position] || 0) + 1; });
      const leastPos = [...drillPositions].sort((a,b) => (posCounts[a]||0) - (posCounts[b]||0))[0];
      return {
        title: `${leastPos} fundamentals`,
        why: `Your least-trained position — worth building up intentionally.`,
        query: `I want to improve my ${leastPos} game. What are the most important concepts and mechanics I should know, and give me one focused drill I can work on today?`
      };
    }

    // Canonical submission names — old logs ("RNC") and voice variants
    // ("Darce") must count as the same technique as their current names,
    // or radar spokes and vulnerability rows split into duplicates.
    // Canonical names for the ways people (and voice logging) actually say
    // submissions. Keys are matched after lowercasing, stripping punctuation
    // and collapsing whitespace, so "Rear-Naked Choke" and "rnc" both merge.
    const SUB_ALIASES = {
      'rnc': 'Rear Naked Choke', 'rear naked': 'Rear Naked Choke', 'rear naked choke': 'Rear Naked Choke', 'mata leao': 'Rear Naked Choke', 'rear naked strangle': 'Rear Naked Choke',
      'darce': "D'Arce", 'darce choke': "D'Arce", 'brabo': "D'Arce", 'brabo choke': "D'Arce",
      'anaconda': 'Anaconda', 'anaconda choke': 'Anaconda',
      'arm bar': 'Armbar', 'armbar': 'Armbar', 'armlock': 'Armbar', 'arm lock': 'Armbar', 'straight armbar': 'Armbar', 'straight armlock': 'Armbar', 'juji gatame': 'Armbar',
      'triangle': 'Triangle', 'triangle choke': 'Triangle', 'tri': 'Triangle', 'sankaku': 'Triangle',
      'knee bar': 'Kneebar', 'kneebar': 'Kneebar',
      'americana': 'Americana', 'americana lock': 'Americana', 'keylock': 'Americana', 'key lock': 'Americana', 'ude garami': 'Americana', 'figure four': 'Americana',
      'kimura': 'Kimura', 'kimura lock': 'Kimura',
      'guillotine': 'Guillotine', 'guillotine choke': 'Guillotine', 'high elbow guillotine': 'Guillotine', 'arm in guillotine': 'Guillotine',
      'ezekiel': 'Ezekiel', 'ezekiel choke': 'Ezekiel', 'ezequiel': 'Ezekiel', 'sode guruma': 'Ezekiel',
      'bow and arrow': 'Bow and Arrow', 'bow and arrow choke': 'Bow and Arrow', 'bow arrow': 'Bow and Arrow',
      'cross collar': 'Cross Collar Choke', 'cross collar choke': 'Cross Collar Choke', 'x choke': 'Cross Collar Choke', 'collar choke': 'Cross Collar Choke',
      'baseball bat choke': 'Baseball Choke', 'baseball choke': 'Baseball Choke', 'baseball bat': 'Baseball Choke',
      'loop choke': 'Loop Choke', 'clock choke': 'Clock Choke', 'north south choke': 'North-South Choke', 'north south': 'North-South Choke',
      'arm triangle': 'Arm Triangle', 'arm triangle choke': 'Arm Triangle', 'head and arm': 'Arm Triangle', 'head and arm choke': 'Arm Triangle', 'kata gatame': 'Arm Triangle',
      'heel hook': 'Heel Hook', 'inside heel hook': 'Heel Hook', 'outside heel hook': 'Heel Hook', 'heelhook': 'Heel Hook',
      'ankle lock': 'Ankle Lock', 'straight ankle lock': 'Ankle Lock', 'footlock': 'Ankle Lock', 'foot lock': 'Ankle Lock', 'straight footlock': 'Ankle Lock', 'achilles lock': 'Ankle Lock', 'achilles': 'Ankle Lock',
      'toe hold': 'Toe Hold', 'toehold': 'Toe Hold',
      'omoplata': 'Omoplata', 'gogoplata': 'Gogoplata',
      'wrist lock': 'Wristlock', 'wristlock': 'Wristlock',
      'twister': 'Twister', 'calf slicer': 'Calf Slicer', 'calf crusher': 'Calf Slicer', 'bicep slicer': 'Bicep Slicer', 'biceps slicer': 'Bicep Slicer',
      'paper cutter': 'Paper Cutter', 'paper cutter choke': 'Paper Cutter',
      'peruvian necktie': 'Peruvian Necktie', 'japanese necktie': 'Japanese Necktie', 'buggy choke': 'Buggy Choke', 'buggy': 'Buggy Choke',
      'straight jacket': 'Straight Jacket', 'can opener': 'Can Opener', 'neck crank': 'Neck Crank', 'estima lock': 'Estima Lock',
      'von flue': 'Von Flue Choke', 'von flue choke': 'Von Flue Choke', 'crucifix': 'Crucifix', 'banana split': 'Banana Split', 'electric chair': 'Electric Chair'
    };
    function normalizeSub(name) {
      const raw = String(name || '').trim();
      if (!raw) return '';
      // "&" reads as "and", so the "Bow & Arrow" pill and a spoken "bow and arrow" merge
      const key = raw.toLowerCase().replace(/&/g, ' and ').replace(/[’'`\-_.,]/g, m => (m === '-' ? ' ' : '')).replace(/\s+/g, ' ').trim();
      if (SUB_ALIASES[key]) return SUB_ALIASES[key];
      // Unknown submission: title-case it so "armbar from mount" and "Armbar From Mount" still merge
      return key.replace(/\b\w/g, c => c.toUpperCase());
    }

    function computeVulnerabilities(sessions) {
      const map = {};
      sessions.forEach(s => {
        const sessionPos = s.position || 'General';
        const posMap = s.rolling_rounds?.subPos?.against || {};
        (s.submissions_against || []).forEach(sub => {
          // Prefer the position the submission actually happened from
          // (captured by voice logging); fall back to the session position
          const pos = posMap[sub] || sessionPos;
          const key = `${pos}||${normalizeSub(sub)}`;
          map[key] = (map[key] || 0) + 1;
        });
      });
      return Object.entries(map)
        .sort((a,b) => b[1]-a[1])
        .slice(0, 5)
        .map(([key, count]) => {
          const [pos, sub] = key.split('||');
          return { pos, sub, count };
        });
    }

    function drillWithMentor(query) {
      showView('mentor');
      setTimeout(() => {
        const input = document.getElementById('problem');
        if (input) {
          input.value = query;
          input.dispatchEvent(new Event('input'));
          const btn = document.getElementById('submitBtn');
          if (btn && !btn.disabled) btn.click();
        }
      }, 300);
    }

    // ── Post-session coach debrief ────────────────────────────────────────
    // After a session is logged, ask the AI for one insight comparing it to
    // recent history. Fire-and-forget: failures stay silent, logging never blocks.
    async function requestDebrief(session) {
      try {
        // silent: a quota stop during the save flow shouldn't pop the paywall
        // over the progress screen — the debrief just doesn't appear
        const res = await aiFetch('/api/debrief', {
          session,
          recentSessions: cachedSessions.slice(1, 9), // history before this log
          profile: { belt: userProfile.belt }
        }, { silent: true });
        if (!res.ok) return;
        const data = await res.json();
        if (data.insight) showDebriefSheet(data.insight, data.question);
      } catch (e) {}
    }

    function showDebriefSheet(insight, question) {
      dismissDebrief();
      window._debriefQuery = question || '';
      const el = document.createElement('div');
      el.className = 'debrief-sheet';
      el.id = 'debriefSheet';
      el.innerHTML = `
        <div class="debrief-eyebrow">Coach's Debrief</div>
        <div class="debrief-text">${esc(insight)}</div>
        <div class="debrief-actions">
          ${question ? `<button class="debrief-go-btn" onclick="dismissDebrief();drillWithMentor(window._debriefQuery)">Get the plan →</button>` : ''}
          <button class="debrief-dismiss-btn" onclick="dismissDebrief()">Dismiss</button>
          <button class="ai-report-btn" onclick="openAiReport('${rememberAiAnswer('debrief', insight, question)}')">Report</button>
        </div>`;
      document.body.appendChild(el);
      requestAnimationFrame(() => requestAnimationFrame(() => el.classList.add('open')));
    }

    function dismissDebrief() {
      const el = document.getElementById('debriefSheet');
      if (el) { el.classList.remove('open'); setTimeout(() => el.remove(), 400); }
    }

    // ── Shareable achievement cards ───────────────────────────────────────
    async function shareBadge(idx) {
      const b = (window._earnedBadges || [])[idx];
      if (!b) return;

      const size = 1080;
      const canvas = document.createElement('canvas');
      canvas.width = size; canvas.height = size;
      const ctx = canvas.getContext('2d');

      // Background: deep dark with red glow
      const bg = ctx.createRadialGradient(size/2, size*0.38, 80, size/2, size/2, size*0.75);
      bg.addColorStop(0, '#1c0a08');
      bg.addColorStop(0.45, '#0a0510');
      bg.addColorStop(1, '#05040c');
      ctx.fillStyle = bg;
      ctx.fillRect(0, 0, size, size);

      // Badge image with glow ring
      try {
        const img = new Image();
        img.src = b.img;
        await img.decode();
        const bs = 400;
        const bx = (size - bs) / 2, by = 170;
        ctx.save();
        ctx.shadowColor = 'rgba(230,59,48,0.55)';
        ctx.shadowBlur = 70;
        ctx.drawImage(img, bx, by, bs, bs);
        ctx.restore();
        // Scan ring under the badge
        ctx.strokeStyle = 'rgba(230,59,48,0.7)';
        ctx.lineWidth = 4;
        ctx.shadowColor = 'rgba(230,59,48,0.8)';
        ctx.shadowBlur = 24;
        ctx.beginPath();
        ctx.ellipse(size/2, by + bs + 28, 230, 16, 0, 0, Math.PI * 2);
        ctx.stroke();
        ctx.shadowBlur = 0;
      } catch (e) {}

      ctx.textAlign = 'center';
      // Eyebrow
      ctx.fillStyle = '#e63b30';
      ctx.font = '600 30px -apple-system, system-ui, sans-serif';
      ctx.fillText('A C H I E V E M E N T   U N L O C K E D', size/2, 120);
      // Badge name
      ctx.fillStyle = '#f5f5f5';
      ctx.font = '700 72px -apple-system, system-ui, sans-serif';
      ctx.fillText(b.name, size/2, 710);
      // Description
      ctx.fillStyle = '#8a8a8a';
      ctx.font = '400 32px -apple-system, system-ui, sans-serif';
      ctx.fillText(b.desc || '', size/2, 765);
      // Athlete line
      const beltName = userProfile.belt ? userProfile.belt.charAt(0).toUpperCase() + userProfile.belt.slice(1) + ' Belt' : '';
      const athleteLine = [userProfile.name, beltName].filter(Boolean).join('  ·  ');
      if (athleteLine) {
        ctx.fillStyle = '#c9c9c9';
        ctx.font = '600 34px -apple-system, system-ui, sans-serif';
        ctx.fillText(athleteLine, size/2, 850);
      }
      // Wordmark
      ctx.fillStyle = '#e63b30';
      ctx.font = '700 44px -apple-system, system-ui, sans-serif';
      ctx.fillText('F L O W M O R A', size/2, 960);
      ctx.fillStyle = '#666';
      ctx.font = '400 26px -apple-system, system-ui, sans-serif';
      ctx.fillText('your ai mentor on the mats', size/2, 1002);

      canvas.toBlob(async blob => {
        if (!blob) return;
        const file = new File([blob], 'flowmora-achievement.png', { type: 'image/png' });
        if (navigator.canShare && navigator.canShare({ files: [file] })) {
          try { await navigator.share({ files: [file], text: `${b.name} — earned on Flowmora` }); } catch (e) {}
        } else {
          const a = document.createElement('a');
          a.href = URL.createObjectURL(blob);
          a.download = 'flowmora-achievement.png';
          a.click();
          setTimeout(() => URL.revokeObjectURL(a.href), 5000);
        }
      }, 'image/png');
    }

    // ── The Flowmora Path (progression roadmap) ──────────────────────────
    const PROGRESSION = [
      { belt:'white', theme:"Don't panic. Escape everything.", tracks:[
        { name:'Standing', items:[
          {id:'w-st1', t:'Break-falls & technical stand-up'},
          {id:'w-st2', t:'Double leg takedown'},
          {id:'w-st3', t:'Sprawl'},
          {id:'w-st4', t:'Guard pull'} ]},
        { name:'Survive & Escape', items:[
          {id:'w-s1', t:'Mount escape — bridge & roll (upa)'},
          {id:'w-s2', t:'Mount escape — elbow-knee shrimp'},
          {id:'w-s3', t:'Side control escape — recover guard'},
          {id:'w-s4', t:'Side control escape — come to knees'},
          {id:'w-s5', t:'Back defense — hand-fight and turn in'} ]},
        { name:'Guard Fundamentals', items:[
          {id:'w-g1', t:'Closed guard control & breaking posture'},
          {id:'w-g2', t:'Hip escape (shrimp) mechanics'},
          {id:'w-g3', t:'Scissor sweep'},
          {id:'w-g4', t:'Hip-bump sweep'},
          {id:'w-g5', t:'Cross-collar choke'},
          {id:'w-g6', t:'Armbar from guard'},
          {id:'w-g7', t:'Triangle setup'} ]},
        { name:'On Top', items:[
          {id:'w-t1', t:'Maintain the mount'},
          {id:'w-t2', t:'Maintain side control'},
          {id:'w-t3', t:'Knee-cut pass'},
          {id:'w-t4', t:'Stack pass'} ]},
        { name:'Core Submissions', items:[
          {id:'w-c1', t:'Armbar'},
          {id:'w-c2', t:'Triangle'},
          {id:'w-c3', t:'Kimura'},
          {id:'w-c4', t:'Americana'},
          {id:'w-c5', t:'Rear-naked choke'} ]} ]},
      { belt:'blue', theme:'Build a guard. Pass a guard. Finish.', tracks:[
        { name:'Standing', items:[
          {id:'b-st1', t:'Single leg takedown'},
          {id:'b-st2', t:'Hip throw (O Goshi)'},
          {id:'b-st3', t:'Snap down to front headlock'},
          {id:'b-st4', t:'Osoto Gari'} ]},
        { name:'Guard (Offense)', items:[
          {id:'b-g1', t:'Open guard control'},
          {id:'b-g2', t:'Spider-guard sweep'},
          {id:'b-g3', t:'Butterfly sweep'},
          {id:'b-g4', t:'Overhead (balloon) sweep'},
          {id:'b-g5', t:'Omoplata'},
          {id:'b-g6', t:'Arm-triangle from guard'},
          {id:'b-g7', t:'Sweep-to-mount chain'} ]},
        { name:'Passing', items:[
          {id:'b-p1', t:'Bullfighter (toreando) pass'},
          {id:'b-p2', t:'Single-weave pass'},
          {id:'b-p3', t:'Half-guard pass to mount'},
          {id:'b-p4', t:'Over-under pass'} ]},
        { name:'Control & Submit', items:[
          {id:'b-c1', t:'Knee-on-belly control & attacks'},
          {id:'b-c2', t:'S-mount armbar'},
          {id:'b-c3', t:'Paper-cutter choke'},
          {id:'b-c4', t:'Kimura trap from side control'},
          {id:'b-c5', t:'Straight armlock from side control'} ]},
        { name:'Advanced Escapes', items:[
          {id:'b-e1', t:'Knee-on-belly escape'},
          {id:'b-e2', t:'North-south escape'},
          {id:'b-e3', t:'Guillotine defense'} ]},
        { name:'Combinations', items:[
          {id:'b-x1', t:'Armbar ↔ triangle ↔ omoplata flow'},
          {id:'b-x2', t:'Sweep to submission chain'} ]} ]},
      { belt:'purple', theme:'Chain everything. Own the transitions.', tracks:[
        { name:'Standing', items:[
          {id:'p-st1', t:'Seoi Nage (shoulder throw)'},
          {id:'p-st2', t:'Guillotine entry from snap down'},
          {id:'p-st3', t:'Takedown chains (double → single → snap)'} ]},
        { name:'Guard Systems', items:[
          {id:'p-g1', t:'Deep half guard'},
          {id:'p-g2', t:'Spider / lasso guard system'},
          {id:'p-g3', t:'Reverse de la Riva entries'},
          {id:'p-g4', t:'Sweep-heavy open guard'} ]},
        { name:'Leg Attacks', items:[
          {id:'p-l1', t:'Straight ankle lock (from open guard)'},
          {id:'p-l2', t:'Knee bar from guard'},
          {id:'p-l3', t:'Knee bar from passing'},
          {id:'p-l4', t:'Ankle lock while passing (stacking)'} ]},
        { name:'Passing & Reversals', items:[
          {id:'p-p1', t:'Pressure passing system'},
          {id:'p-p2', t:'Pass, defend, recompose'},
          {id:'p-p3', t:'Counter to kimura'} ]},
        { name:'Submission Chains', items:[
          {id:'p-s1', t:'Three-move submission chains'},
          {id:'p-s2', t:'Back-take from guard'},
          {id:'p-s3', t:'Submission from every dominant position'} ]} ]},
      { belt:'brown', theme:'Impose your game. Refine and teach.', tracks:[
        { name:'Mastery', items:[
          {id:'br-1', t:'Build and sharpen your A-game specialty'},
          {id:'br-2', t:'Timing-based entries (react to their reaction)'},
          {id:'br-3', t:'Counters to common counters'},
          {id:'br-4', t:'Transitional pressure & weight distribution'},
          {id:'br-5', t:'Break techniques down for others'} ]} ]},
      { belt:'black', theme:'Mastery & expression.', tracks:[
        { name:'The Path Continues', items:[
          {id:'bl-1', t:'Personal system mastery across all positions'},
          {id:'bl-2', t:"The coach's eye — diagnose and fix on sight"},
          {id:'bl-3', t:'Adapt your game to any body type or style'},
          {id:'bl-4', t:'Give back — mentor the belts below you'} ]} ]}
    ];
    const STATUS_ORDER = ['none', 'learning', 'drilled', 'solid'];
    const STATUS_LABEL = { none:'Not started', learning:'Learning', drilled:'Drilled', solid:'Solid' };
    const STATUS_WEIGHT = { none:0, learning:0.33, drilled:0.66, solid:1 };
    let roadmapProgress = {}; // { itemId: status }
    let _roadmapBelt = null;  // which belt (or 'cc:<id>') is expanded in the view
    let customCurricula = []; // user-uploaded curricula rows from Supabase

    // Path item → skill-tree technique id. One source of truth for mastery:
    // marking an item on the Path lights the same technique on the tree.
    const PATH_TECH = {
      'w-st2':'td_double', 'w-st3':'td_sprawl', 'w-st4':'td_guard_pull',
      'w-s1':'mt_bridge_roll', 'w-s2':'mt_elbow_knee', 'w-s3':'sc_elbow_knee', 'w-s4':'sc_underhook', 'w-s5':'bc_escape_guard',
      'w-g3':'cg_scissor', 'w-g4':'cg_hip_bump', 'w-g5':'cg_cross_collar', 'w-g6':'cg_armbar', 'w-g7':'cg_triangle',
      'w-t1':'mt_high', 'w-t2':'sc_kesa',
      'w-c1':'cg_armbar', 'w-c2':'cg_triangle', 'w-c3':'cg_kimura', 'w-c4':'sc_americana', 'w-c5':'bc_rnc',
      'b-st1':'td_single', 'b-st2':'td_hip_throw', 'b-st3':'td_snap', 'b-st4':'td_osoto',
      'b-g2':'og_spider', 'b-g3':'og_butterfly', 'b-g5':'cg_omoplata', 'b-g6':'sc_arm_triangle',
      'b-c2':'mt_s_mount', 'b-c4':'sc_kimura',
      'p-st1':'td_seoi', 'p-st2':'td_guillotine_entry',
      'p-g1':'hg_deep_half', 'p-g2':'og_lasso', 'p-g3':'og_dlr',
      'p-l1':'le_ankle', 'p-l2':'le_kneebar', 'p-l3':'le_kneebar', 'p-l4':'le_ankle',
      'p-s2':'hg_back_take'
    };

    // Skill-tree technique id → best Path status (for tree mastery rings)
    function treeMasteryMap() {
      const out = {};
      const rank = s => STATUS_ORDER.indexOf(s);
      Object.entries(PATH_TECH).forEach(([pid, tid]) => {
        const st = roadmapProgress[pid] || 'none';
        if (st !== 'none' && (!out[tid] || rank(st) > rank(out[tid]))) out[tid] = st;
      });
      return out;
    }

    // How many logged sessions mention this Path item's technique
    function loggedCountFor(item) {
      let treeName = null;
      const tid = PATH_TECH[item.id];
      if (tid) {
        for (const pos of TECHNIQUE_DB) {
          const t = pos.techniques.find(x => x.id === tid);
          if (t) { treeName = t.name; break; }
        }
      }
      const targets = new Set([normalizeSub(item.t), treeName ? normalizeSub(treeName) : null].filter(Boolean).map(s => s.toLowerCase()));
      let n = 0;
      cachedSessions.forEach(s => {
        const subs = (s.submissions_used || []).map(x => normalizeSub(x).toLowerCase());
        if (subs.some(x => targets.has(x))) n++;
      });
      return n;
    }

    // Compact snapshot of Path progress for the Mentor's context
    function buildPathSummary() {
      const belt = userProfile.belt || 'white';
      const bp = PROGRESSION.find(p => p.belt === belt);
      if (!bp) return '';
      const solid = [], learning = [], next = [];
      bp.tracks.forEach(tr => tr.items.forEach(it => {
        const st = roadmapProgress[it.id] || 'none';
        if (st === 'solid') solid.push(it.t);
        else if (st === 'learning' || st === 'drilled') learning.push(it.t);
        else if (next.length < 3) next.push(it.t);
      }));
      if (!solid.length && !learning.length) return '';
      const parts = [`${belt} belt roadmap ${beltCompletion(belt)}% complete`];
      if (solid.length) parts.push(`solid: ${solid.slice(0, 6).join(', ')}`);
      if (learning.length) parts.push(`working on: ${learning.slice(0, 6).join(', ')}`);
      if (next.length) parts.push(`next up: ${next.join(', ')}`);
      return parts.join(' — ');
    }

    function beltIndex(b) { return PROGRESSION.findIndex(p => p.belt === b); }

    function beltCompletion(belt) {
      const p = PROGRESSION.find(x => x.belt === belt);
      if (!p) return 0;
      let sum = 0, n = 0;
      p.tracks.forEach(tr => tr.items.forEach(it => { sum += STATUS_WEIGHT[roadmapProgress[it.id] || 'none']; n++; }));
      return n ? Math.round((sum / n) * 100) : 0;
    }

    async function loadRoadmapProgress() {
      if (!currentUser) return;
      try {
        const { data } = await sb.from('roadmap_progress').select('data').eq('user_id', currentUser.id).maybeSingle();
        roadmapProgress = data?.data || {};
      } catch (e) { roadmapProgress = {}; }
    }

    function saveRoadmapProgress() {
      if (!currentUser) return;
      // fire-and-forget upsert
      sb.from('roadmap_progress').upsert({ user_id: currentUser.id, data: roadmapProgress, updated_at: new Date().toISOString() }).then(() => {}, () => {});
    }

    function openRoadmap() {
      _roadmapBelt = _roadmapBelt || userProfile.belt || 'white';
      renderRoadmap();
      document.getElementById('roadmapView').classList.add('open');
      document.body.style.overflow = 'hidden';
    }
    function closeRoadmap() {
      document.getElementById('roadmapView').classList.remove('open');
      document.body.style.overflow = '';
    }

    function cycleRoadmapItem(id) {
      const cur = roadmapProgress[id] || 'none';
      const next = STATUS_ORDER[(STATUS_ORDER.indexOf(cur) + 1) % STATUS_ORDER.length];
      if (next === 'none') delete roadmapProgress[id]; else roadmapProgress[id] = next;
      track('path_item_updated', { status: next });
      saveRoadmapProgress();
      renderRoadmap();
      renderDashboard();
    }

    function roadmapTeach(itemText) {
      closeRoadmap();
      drillWithMentor(`Teach me the ${itemText}. Cover the key details, the most common mistakes, and how to drill it.`);
    }

    // Completion % for a custom curriculum row
    function curriculumCompletion(cc) {
      let sum = 0, n = 0;
      (cc.data?.tracks || []).forEach(tr => (tr.items || []).forEach(it => { sum += STATUS_WEIGHT[roadmapProgress[it.id] || 'none']; n++; }));
      return n ? Math.round((sum / n) * 100) : 0;
    }

    function renderRoadmapItems(tracks) {
      return tracks.map(tr => {
        const items = (tr.items || []).map(it => {
          const st = roadmapProgress[it.id] || 'none';
          const logged = loggedCountFor(it);
          const chip = logged > 0 ? `<span class="rm-logged">Logged ${logged}×</span>` : '';
          return `<div class="rm-item">
            <button class="rm-check st-${st}" onclick="cycleRoadmapItem('${it.id}')" aria-label="${STATUS_LABEL[st]}">${st === 'none' ? '' : (st === 'solid' ? '✓' : (st === 'drilled' ? '◑' : '◔'))}</button>
            <div class="rm-item-body">
              <div class="rm-item-name ${st !== 'none' ? 'done' : ''}">${esc(it.t)}</div>
              <div class="rm-item-status st-${st}">${STATUS_LABEL[st]}${chip}</div>
            </div>
            <button class="rm-teach" onclick="roadmapTeach('${esc(it.t).replace(/'/g, "\\'")}')">Teach →</button>
          </div>`;
        }).join('');
        return `<div class="rm-track"><div class="rm-track-title">${esc(tr.name)}</div>${items}</div>`;
      }).join('');
    }

    function renderRoadmap() {
      const view = document.getElementById('roadmapView');
      if (!view) return;
      const beltName = b => b.charAt(0).toUpperCase() + b.slice(1);
      const beltTabs = PROGRESSION.map(p => {
        const pct = beltCompletion(p.belt);
        const on = p.belt === _roadmapBelt;
        return `<button class="rm-belt-tab ${on ? 'active' : ''}" onclick="_roadmapBelt='${p.belt}';renderRoadmap()">
          <span class="rm-belt-dot belt-${p.belt}"></span>${beltName(p.belt)}<span class="rm-belt-pct">${pct}%</span></button>`;
      }).join('');
      const customTabs = customCurricula.map(cc => {
        const on = _roadmapBelt === 'cc:' + cc.id;
        return `<button class="rm-belt-tab custom ${on ? 'active' : ''}" onclick="_roadmapBelt='cc:${cc.id}';renderRoadmap()">
          <span class="rm-belt-dot" style="background:#c084fc;border-radius:50%;"></span>${esc(cc.name)}<span class="rm-belt-pct">${curriculumCompletion(cc)}%</span></button>`;
      }).join('');
      const addTab = `<button class="rm-belt-tab" onclick="openCurriculumUpload()" title="Add your academy's curriculum">+ Add yours</button>`;

      let themeCard, tracksHtml;
      if (_roadmapBelt.startsWith('cc:')) {
        const cc = customCurricula.find(c => 'cc:' + c.id === _roadmapBelt);
        if (!cc) { _roadmapBelt = userProfile.belt || 'white'; renderRoadmap(); return; }
        const pct = curriculumCompletion(cc);
        themeCard = `<div class="rm-theme-card">
            <div class="rm-theme-belt">Your Curriculum</div>
            <div class="rm-theme-line">${esc(cc.name)}</div>
            <div class="rm-theme-bar"><div class="rm-theme-fill" style="width:${pct}%"></div></div>
            <div class="rm-theme-pct">${pct}% complete · <span style="color:#e87d75;cursor:pointer;" onclick="deleteCurriculum('${cc.id}')">remove</span></div>
          </div>`;
        tracksHtml = renderRoadmapItems(cc.data?.tracks || []);
      } else {
        const belt = PROGRESSION.find(p => p.belt === _roadmapBelt);
        const overall = beltCompletion(_roadmapBelt);
        themeCard = `<div class="rm-theme-card">
            <div class="rm-theme-belt">${beltName(_roadmapBelt)} Belt</div>
            <div class="rm-theme-line">“${belt.theme}”</div>
            <div class="rm-theme-bar"><div class="rm-theme-fill" style="width:${overall}%"></div></div>
            <div class="rm-theme-pct">${overall}% complete</div>
          </div>`;
        tracksHtml = renderRoadmapItems(belt.tracks);
      }

      view.innerHTML = `
        <div class="rm-header">
          <button class="rm-back" onclick="closeRoadmap()">
            <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
          </button>
          <div class="rm-header-title">The Flowmora Path</div>
        </div>
        <div class="rm-scroll">
          <div class="rm-belt-tabs">${beltTabs}${customTabs}${addTab}</div>
          ${themeCard}
          <div class="rm-hint">Tap a circle to mark progress · Not started → Learning → Drilled → Solid</div>
          ${tracksHtml}
          <div style="height:2rem;"></div>
        </div>`;
    }

    // ── Custom curriculum upload (premium) ──────────────────────────────
    let _cuParsed = null;

    async function loadCustomCurricula() {
      if (!currentUser) return;
      try {
        const { data } = await sb.from('custom_curricula').select('id,name,data').eq('user_id', currentUser.id).order('created_at');
        customCurricula = data || [];
      } catch (_) { customCurricula = []; }
    }

    function openCurriculumUpload() {
      if (userPlan !== 'premium') { closeRoadmap(); showPaywall(); return; }
      _cuParsed = null;
      document.getElementById('cuStepInput').style.display = '';
      document.getElementById('cuStepPreview').style.display = 'none';
      document.getElementById('cuErr').style.display = 'none';
      document.getElementById('curriculumModal').classList.add('open');
    }
    function closeCurriculumUpload() { document.getElementById('curriculumModal').classList.remove('open'); }
    function cuBackToInput() {
      document.getElementById('cuStepInput').style.display = '';
      document.getElementById('cuStepPreview').style.display = 'none';
    }

    function cuLoadFile(e) {
      const f = e.target.files?.[0];
      if (!f) return;
      const r = new FileReader();
      r.onload = () => {
        document.getElementById('cuText').value = String(r.result || '').slice(0, 15000);
        if (!document.getElementById('cuName').value) document.getElementById('cuName').value = f.name.replace(/\.(txt|md)$/i, '').slice(0, 40);
      };
      r.readAsText(f);
    }

    async function parseCurriculum() {
      const name = document.getElementById('cuName').value.trim();
      const text = document.getElementById('cuText').value.trim();
      const err = document.getElementById('cuErr');
      err.style.display = 'none';
      if (!name) { err.textContent = 'Give your curriculum a name.'; err.style.display = 'block'; return; }
      if (text.length < 40) { err.textContent = 'Paste more of the curriculum — that looks too short to organize.'; err.style.display = 'block'; return; }
      const btn = document.getElementById('cuParseBtn');
      btn.disabled = true; btn.textContent = 'Organizing…';
      try {
        const response = await aiFetch('/api/curriculum', { name, text });
        const data = await response.json();
        if (!Array.isArray(data.tracks) || !data.tracks.length) throw new Error('empty');
        _cuParsed = { name, tracks: data.tracks };
        document.getElementById('cuPreview').innerHTML = data.tracks.map(tr =>
          `<div class="rm-track-title">${esc(tr.name)}</div>` +
          (tr.items || []).map(t => `<div class="cu-preview-item">${esc(t)}</div>`).join('')
        ).join('');
        document.getElementById('cuStepInput').style.display = 'none';
        document.getElementById('cuStepPreview').style.display = '';
      } catch (e) {
        if (!e.isLimit) { err.textContent = aiErrorText(e, 'Couldn\'t organize that — check the text and try again.'); err.style.display = 'block'; }
      }
      btn.disabled = false; btn.textContent = 'Organize with AI';
    }

    async function saveCurriculum() {
      if (!_cuParsed || !currentUser) return;
      const btn = document.getElementById('cuSaveBtn');
      const err = document.getElementById('cuErr2');
      err.style.display = 'none';
      btn.disabled = true; btn.textContent = 'Saving…';
      // Stable per-item ids so progress tracks in the same roadmapProgress map
      const rand = Math.random().toString(36).slice(2, 8);
      let n = 0;
      const tracks = _cuParsed.tracks.map(tr => ({
        name: String(tr.name || 'Techniques').slice(0, 60),
        items: (tr.items || []).slice(0, 60).map(t => ({ id: `cc-${rand}-${n++}`, t: String(t).slice(0, 100) }))
      }));
      try {
        const { data, error } = await sb.from('custom_curricula')
          .insert({ user_id: currentUser.id, name: _cuParsed.name, data: { tracks } })
          .select('id,name,data').single();
        if (error) throw error;
        customCurricula.push(data);
        track('curriculum_saved');
        closeCurriculumUpload();
        _roadmapBelt = 'cc:' + data.id;
        renderRoadmap();
      } catch (e) {
        err.textContent = 'Couldn\'t save — try again.'; err.style.display = 'block';
      }
      btn.disabled = false; btn.textContent = 'Save to My Path';
    }

    async function deleteCurriculum(id) {
      const cc = customCurricula.find(c => c.id === id);
      if (!cc || !confirm(`Remove "${cc.name}" from your Path? Your progress on it will be lost.`)) return;
      try {
        await sb.from('custom_curricula').delete().eq('id', id);
        customCurricula = customCurricula.filter(c => c.id !== id);
        (cc.data?.tracks || []).forEach(tr => (tr.items || []).forEach(it => delete roadmapProgress[it.id]));
        saveRoadmapProgress();
        _roadmapBelt = userProfile.belt || 'white';
        renderRoadmap();
      } catch (_) {}
    }

    function renderDashboard() {
      const view = document.getElementById('dashboardView');
      const sessions = cachedSessions;
      const streak = calculateStreak(sessions);
      const hour = new Date().getHours();
      const greeting = hour < 12 ? 'morning' : hour < 17 ? 'afternoon' : 'evening';
      const firstName = userProfile.name ? userProfile.name.split(' ')[0] : 'Athlete';

      // Belt card
      const beltColor = BELT_HEX[userProfile.belt] || '#4a90e2';
      const stripes = userProfile.stripes || 0;
      const stripeDots = [0,1,2,3].map(i => `<div class="stripe-dot${i < stripes ? ' filled' : ''}"></div>`).join('');
      const targetDate = userProfile.target_promotion ? `Targeting ${new Date(userProfile.target_promotion + 'T00:00:00').toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}` : '';

      // Quick stats
      const now = new Date();
      const thisMonth = sessions.filter(s => {
        const d = new Date(s.date); return d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth();
      });
      const totalRounds = sessions.reduce((a, s) => a + (s.rolling_rounds?.rounds || 0), 0);
      const totalSubs = sessions.reduce((a, s) => a + (s.submissions_used?.length || 0), 0);
      // Sub rate = % of sparring/competition sessions where at least one submission was landed (always 0-100%)
      const sparringSessions = sessions.filter(s => s.class_type === 'Sparring' || s.class_type === 'Competition');
      const sparringWithSub = sparringSessions.filter(s => (s.submissions_used?.length || 0) > 0);
      const subRate = sparringSessions.length > 0 ? Math.round((sparringWithSub.length / sparringSessions.length) * 100) : 0;

      // Submission breakdown (normalized so "RNC" and "Rear Naked Choke" merge)
      const subCounts = {};
      sessions.forEach(s => (s.submissions_used || []).forEach(sub => { const n = normalizeSub(sub); subCounts[n] = (subCounts[n] || 0) + 1; }));
      const topSubs = Object.entries(subCounts).sort((a, b) => b[1] - a[1]).slice(0, 5);
      const maxSubCount = topSubs[0]?.[1] || 1;

      // Roll stats — submissions live in the subs arrays from the log forms,
      // but the per-session "Rolling rounds" editor writes wins/losses counts.
      // Take whichever is larger per session so both sources count without
      // double-counting.
      const totalSubsAll = sessions.reduce((a, s) =>
        a + Math.max(s.submissions_used?.length || 0, s.rolling_rounds?.wins || 0), 0);
      const totalTapped = sessions.reduce((a, s) =>
        a + Math.max(s.submissions_against?.length || 0, s.rolling_rounds?.losses || 0), 0);
      const totalSweeps = sessions.reduce((a, s) => a + (s.sweeps || 0), 0);
      const totalEscapes = sessions.reduce((a, s) => a + (s.escapes || 0), 0);

      // Last session
      const last = sessions[0];

      // Today's focus
      const latestWeakness = sessions.find(s => s.weaknessFlag || s.weakness_flag);
      const focusText = latestWeakness ? (latestWeakness.weaknessFlag || latestWeakness.weakness_flag) : null;
      const latestStrength = sessions.find(s => s.strengthFlag || s.strength_flag);
      const strengthText = latestStrength ? (latestStrength.strengthFlag || latestStrength.strength_flag) : null;

      // Daily drill recommendation & vulnerability map
      const drillRec = sessions.length > 0 ? computeDrillRec(sessions) : null;
      const vulns = computeVulnerabilities(sessions);
      // Store queries in window so onclick handlers can reference them safely (avoids quote-escaping issues)
      window._drillQuery = drillRec ? drillRec.query : '';
      window._vulnQueries = vulns.map(v => `I keep getting caught by the ${v.sub} when I'm in ${v.pos}. Break down the key defense mechanics, early warning signs to recognize it coming, and give me one focused escape drill to practice today.`);

      // Upcoming event — filter to future only (same logic as calendar tab), then pick earliest
      const today = new Date(); today.setHours(0,0,0,0);
      const upcomingEvent = (() => {
        if (!calState.events || calState.events.length === 0) return null;
        const future = calState.events.filter(e => {
          const parsed = parseEventDate(e.date);
          // Drop if we have any parsed date (with or without year) that is in the past
          if (parsed && parsed.date < today) return false;
          return true;
        });
        // Sort by parsed date ascending, undated events go last
        future.sort((a, b) => {
          const da = parseEventDate(a.date);
          const db = parseEventDate(b.date);
          if (da && db) return da.date - db.date;
          if (da) return -1;
          if (db) return 1;
          return 0;
        });
        return future[0] || null;
      })();

      // Nemesis dashboard data
      const totalNemesis = nemesisList.length;
      const allNemesisRolls = Object.values(nemesisRolls).flat();
      const nemTotalW = allNemesisRolls.filter(r => r.result === 'win').length;
      const nemTotalL = allNemesisRolls.filter(r => r.result === 'loss').length;
      const nemTotalD = allNemesisRolls.filter(r => r.result === 'draw').length;
      const recentNemesisRolls = allNemesisRolls
        .sort((a, b) => new Date(b.date || b.created_at) - new Date(a.date || a.created_at))
        .slice(0, 2)
        .map(r => ({ ...r, nemesisName: nemesisList.find(n => n.id === r.nemesis_id)?.name || 'Unknown' }));
      const thirtyDaysAgo = new Date();
      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
      const rematchReminders = nemesisList.map(n => {
        const rolls = (nemesisRolls[n.id] || []).slice().sort((a, b) => new Date(b.date) - new Date(a.date));
        return { ...n, lastRolled: rolls.length ? new Date(rolls[0].date) : null };
      }).filter(n => n.lastRolled && n.lastRolled < thirtyDaysAgo).slice(0, 2);
      const sinceLabel = d => {
        const weeks = Math.floor((Date.now() - d) / (7 * 86400000));
        return weeks < 8 ? `${weeks} wk ago` : `${Math.floor(weeks / 4.345)} mo ago`;
      };

      // Heatmap
      // (radar drawn after innerHTML set)

      // ── Accountability data ───────────────────────────────────────────
      const todayISO = toISODate(new Date());
      const trainedToday = sessions.some(s => toISODate(s.date || s.created_at) === todayISO);
      const isMonday = new Date().getDay() === 1;
      const weeklyGoal = userProfile.weeklyGoal || 3;
      const thisWeekSessions = sessionsThisWeek(sessions);
      const lastWeekSessions = sessionsLastWeek(sessions);
      const pace = weeklyPace(sessions);
      const badges = computeBadges(sessions, streak);
      window._earnedBadges = badges.filter(b => b.earned); // for shareBadge()

      // Weekly goal ring
      const ringOffset = Math.round(213.6 * (1 - Math.min(thisWeekSessions.length / weeklyGoal, 1)));
      const goalMet = thisWeekSessions.length >= weeklyGoal;

      // Last week recap
      const lwPosCounts = {};
      lastWeekSessions.forEach(s => { if (s.position) lwPosCounts[s.position] = (lwPosCounts[s.position] || 0) + 1; });
      const lwTopPos = Object.entries(lwPosCounts).sort((a,b)=>b[1]-a[1])[0];

      // Promotion countdown
      let promoDaysLeft = null;
      let promoSessionsAtPace = null;
      let promoPassed = false;
      if (userProfile.target_promotion) {
        const promoDate = new Date(userProfile.target_promotion + 'T00:00:00');
        const msLeft = promoDate - new Date();
        promoDaysLeft = Math.ceil(msLeft / 86400000);
        promoPassed = promoDaysLeft < 0;
        promoSessionsAtPace = Math.round(pace * (promoDaysLeft / 7));
      }

      let html = `
        ${userPlan !== 'premium' && (STRIPE_UPGRADE_ALLOWED || NATIVE_BILLING) ? `
        <button onclick="startUpgrade()" style="display:flex;align-items:center;justify-content:space-between;width:calc(100% + 3rem);margin:-2.5rem -1.5rem 2.5rem;position:relative;z-index:5;background:linear-gradient(90deg,rgba(26,12,12,0.98) 0%,rgba(40,14,12,0.98) 50%,rgba(26,12,12,0.98) 100%);border:none;border-bottom:1px solid rgba(230,59,48,0.4);padding:0.6rem 1.25rem;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;">
          <span style="font-size:12px;font-weight:700;color:#f0f0f0;letter-spacing:0.3px;">Go Premium <span style="color:#777;font-weight:500;">— unlimited AI coaching${IS_NATIVE ? (_rcPrice ? `, ${_rcPrice}/mo` : '') : ', $9.49/mo'}</span></span>
          <span style="color:#e63b30;font-size:14px;font-weight:700;">→</span>
        </button>` : ''}
        <!-- ── Holographic centerpiece ── -->
        <div class="dash-hero-wrap">
          <img class="dash-hero-img" src="/hero.jpg" alt="" decoding="async" fetchpriority="high"
               onerror="this.style.display='none';this.parentElement.style.background='radial-gradient(ellipse at 50% 60%, rgba(230,59,48,0.15) 0%, rgba(5,4,12,1) 70%)'">
          <div class="dash-hero-top">
            <div class="greeting-text">Good ${greeting}, <span>${esc(firstName)}!</span></div>
            <div class="streak-banner" style="margin-top:0.5rem;">${streak > 0 ? streak + '-day streak' : 'Start your streak today'}</div>
          </div>
          <div class="dash-hero-stats">
            <div class="hero-stat">
              <div class="qs-value">${sessions.length}</div>
              <div class="qs-label">Sessions</div>
            </div>
            <div class="hero-stat">
              <div class="qs-value">${thisMonth.length}</div>
              <div class="qs-label">This month</div>
            </div>
            <div class="hero-stat">
              <div class="qs-value">${sparringSessions.length > 0 ? subRate + '%' : '—'}</div>
              <div class="qs-label">Sub rate</div>
            </div>
          </div>
        </div>

        <div class="belt-card" style="margin-top:1rem;">
          <div class="belt-card-left">
            <div class="belt-card-name" style="color:${beltColor};">${userProfile.belt.charAt(0).toUpperCase() + userProfile.belt.slice(1)} Belt</div>
            <div class="stripe-dots">${stripeDots}</div>
            ${targetDate ? `<div class="belt-target-date">${targetDate}</div>` : ''}
          </div>
          <div class="belt-bar" style="background:${beltColor};box-shadow:0 0 14px ${beltColor};"></div>
        </div>

        ${streak > 0 && !trainedToday ? `<div class="risk-banner">Train today or lose your <strong>${streak}-day streak</strong></div>` : ''}

        <div class="quick-actions" style="margin-top:0.25rem;">
          <button class="qa-btn primary" onclick="showView('mentor')">Ask the Mentor</button>
          <button class="qa-btn" onclick="showLogModal()">+ Log Session</button>
        </div>

        ${(() => {
          const b = userProfile.belt || 'white';
          const pct = beltCompletion(b);
          const circ = 125.66, off = (circ * (1 - pct / 100)).toFixed(1);
          const bn = b.charAt(0).toUpperCase() + b.slice(1);
          const started = Object.keys(roadmapProgress).length > 0;
          return `<button class="path-card" onclick="openRoadmap()">
            <div class="path-ring">
              <svg width="46" height="46" viewBox="0 0 46 46"><circle cx="23" cy="23" r="20" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="4"/><circle cx="23" cy="23" r="20" fill="none" stroke="#e63b30" stroke-width="4" stroke-linecap="round" stroke-dasharray="${circ}" stroke-dashoffset="${off}"/></svg>
              <div class="path-ring-txt">${pct}%</div>
            </div>
            <div class="path-info">
              <div class="path-title">Your Path</div>
              <div class="path-sub">${started ? `${bn} belt roadmap` : `Start your ${bn} belt roadmap`}</div>
            </div>
            <div class="path-arrow">→</div>
          </button>`;
        })()}

        ${(() => {
          if (nemesisList.length === 0) {
            return `<div class="gp-card" onclick="showView('nemesis')">
              <div class="gp-main">
                <div class="gp-icon">${_ci.swords}</div>
                <div class="gp-info">
                  <div class="gp-eyebrow">Nemesis Game Plan</div>
                  <div class="gp-title">Track a rival, get a game plan</div>
                  <div class="gp-sub">Add the training partner who always gets you — your AI corner will scout them.</div>
                </div>
                <div class="path-arrow">→</div>
              </div>
            </div>`;
          }
          // Feature the rival you rolled with most recently — that's who you'll face next
          const featured = [...nemesisList].sort((a, b) => {
            const la = (nemesisRolls[a.id] || [])[0]?.date || '';
            const lb = (nemesisRolls[b.id] || [])[0]?.date || '';
            return lb.localeCompare(la);
          })[0];
          const rec = nemesisRecord(featured.id);
          const others = nemesisList.filter(n => n.id !== featured.id);
          const chips = others.length ? `<div class="gp-chips" onclick="event.stopPropagation()">
              ${others.map(n => `<span class="gp-chip" onclick="openGamePlanFromDash('${n.id}')">${esc(n.name)}</span>`).join('')}
            </div>` : '';
          return `<div class="gp-card" onclick="openGamePlanFromDash('${featured.id}')">
            <div class="gp-main">
              <div class="gp-icon">${_ci.swords}</div>
              <div class="gp-info">
                <div class="gp-eyebrow">Nemesis Game Plan</div>
                <div class="gp-title">Ready for ${esc(featured.name)}?</div>
                <div class="gp-sub">You're <span style="color:#4ade80;">${rec.w}W</span>–<span style="color:#e63b30;">${rec.l}L</span>–<span style="color:#888;">${rec.d}D</span> against them. Get a fresh plan before you roll.</div>
              </div>
              <div class="gp-cta">Get Plan</div>
            </div>
            ${chips}
          </div>`;
        })()}

        ${drillRec ? `
        <div class="drill-rec-card">
          <div class="drill-rec-eyebrow">Today's Drill</div>
          <div class="drill-rec-title">${esc(drillRec.title)}</div>
          <div class="drill-rec-why">${esc(drillRec.why)}</div>
          <button class="drill-rec-btn" onclick="drillWithMentor(window._drillQuery)">▶ Start Drilling</button>
        </div>` : ''}

        ${isMonday && lastWeekSessions.length > 0 ? `
        <div class="dash-card" style="margin-bottom:1rem;">
          <div class="section-title" style="margin-bottom:0.75rem;">Last week recap</div>
          <div style="display:flex;gap:1rem;flex-wrap:wrap;">
            <div class="stat-card"><div class="stat-label">Sessions</div><div class="stat-value">${lastWeekSessions.length}</div><div class="stat-sub">goal: ${weeklyGoal}</div></div>
            <div class="stat-card"><div class="stat-label">vs goal</div><div class="stat-value" style="font-size:16px;color:${lastWeekSessions.length >= weeklyGoal ? '#4ade80' : '#e24b4a'}">${lastWeekSessions.length >= weeklyGoal ? '✓ Met' : '✗ Missed'}</div></div>
            <div class="stat-card"><div class="stat-label">Top position</div><div class="stat-value" style="font-size:14px;">${lwTopPos ? lwTopPos[0] : '—'}</div></div>
          </div>
        </div>` : ''}

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;">
          <div class="dash-card" style="text-align:center;">
            <div class="section-title" style="margin-bottom:0.75rem;">Weekly goal</div>
            <svg width="90" height="90" viewBox="0 0 80 80" style="display:block;margin:0 auto 0.5rem;">
              <circle cx="40" cy="40" r="34" fill="none" stroke="rgba(255,255,255,0.07)" stroke-width="7"/>
              <circle cx="40" cy="40" r="34" fill="none" stroke="#e63b30" stroke-width="7"
                stroke-dasharray="213.6" stroke-dashoffset="${ringOffset}" stroke-linecap="round"
                transform="rotate(-90 40 40)"/>
              <text x="40" y="37" text-anchor="middle" fill="#f0f0f0" font-size="15" font-weight="700">${thisWeekSessions.length}/${weeklyGoal}</text>
              <text x="40" y="51" text-anchor="middle" fill="#666" font-size="10">sessions</text>
            </svg>
            <div style="font-size:11px;color:#666;">This week</div>
            ${goalMet ? '<div style="font-size:12px;color:#e63b30;margin-top:4px;">Goal met!</div>' : ''}
          </div>
          <div class="dash-card" style="text-align:center;">
            <div class="section-title" style="margin-bottom:0.75rem;">Promotion</div>
            ${userProfile.target_promotion ? (promoPassed
              ? `<button onclick="showPromotionCheck(true)" style="background:none;border:none;padding:0;cursor:pointer;font-family:inherit;text-align:center;-webkit-tap-highlight-color:transparent;">
                   <div style="font-size:13px;font-weight:600;color:#e63b30;line-height:1.4;">Target date passed</div>
                   <div style="font-size:11px;color:#888;margin-top:4px;line-height:1.5;">Did you get promoted? Tap to update</div>
                 </button>`
              : `<div style="font-size:36px;font-weight:700;color:#f0f0f0;line-height:1;">${promoDaysLeft}</div>
                 <div style="font-size:11px;color:#666;margin-top:4px;">days to promotion</div>
                 <div style="font-size:11px;color:#555;margin-top:8px;line-height:1.5;">At your pace (~${pace.toFixed(1)}/wk) you'll log ~${promoSessionsAtPace} sessions before then</div>`)
              : '<div style="font-size:12px;color:#555;line-height:1.5;">Set a promotion target in your profile</div>'}
          </div>
        </div>

        <div class="section-title">Roll stats</div>
        <div class="roll-stats">
          <div class="stat-card"><div class="stat-label">Submissions</div><div class="stat-value">${totalSubsAll}</div></div>
          <div class="stat-card"><div class="stat-label">Tapped out</div><div class="stat-value">${totalTapped}</div></div>
          <div class="stat-card"><div class="stat-label">Sweeps</div><div class="stat-value">${totalSweeps}</div></div>
          <div class="stat-card"><div class="stat-label">Escapes</div><div class="stat-value">${totalEscapes}</div></div>
        </div>

        <div class="section-title">Submissions landed radar</div>
        <div class="radar-wrap"><div id="submissionRadar"></div></div>

        ${vulns.length > 0 ? `
        <div class="section-title">Vulnerability Map</div>
        <div class="vuln-card">
          ${vulns.map((v, i) => `
          <div class="vuln-row">
            <div class="vuln-rank">${i + 1}</div>
            <div class="vuln-info">
              <div class="vuln-sub">${esc(v.sub)}</div>
              <div class="vuln-pos">from ${esc(v.pos)}</div>
            </div>
            <div class="vuln-count">${v.count}×</div>
            <button class="vuln-fix-btn" onclick="drillWithMentor(window._vulnQueries[${i}])">Fix it →</button>
          </div>`).join('')}
        </div>` : ''}

        ${focusText ? `
        <div class="section-title">Today's focus</div>
        <div class="focus-card"><div class="focus-label">Work on this</div><div class="focus-text">${focusText}</div></div>` : ''}
        ${strengthText ? `
        <div class="strength-flag" style="margin-bottom:1rem;"><div class="strength-label">Your strength</div>${strengthText}</div>` : ''}

        <div class="dash-card" style="margin-bottom:1rem;">
          <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem;">
            <div class="section-title" style="margin-bottom:0;">Achievements</div>
            ${badges.filter(b => b.earned).length > 0 ? '<div style="font-size:10px;color:#555;">tap a badge to share</div>' : ''}
          </div>
          ${badges.filter(b => b.earned).length === 0
            ? `<div style="font-size:13px;color:#444;">Log sessions to start earning achievements.</div>`
            : `<div class="badge-grid">
            ${badges.filter(b => b.earned).map((b, i) => `
              <div class="badge-item earned" style="animation-delay:${(i * 0.7).toFixed(1)}s;cursor:pointer;" title="${b.desc} — tap to share" onclick="shareBadge(${i})">
                <div class="badge-img-wrap">
                  <img src="${b.img}" alt="${b.name}" loading="lazy">
                </div>
                <div class="badge-name">${b.name}</div>
                <div class="badge-status earned">✦ Earned</div>
              </div>`).join('')}
          </div>`}
        </div>

        ${last ? `
        <div class="section-title">Last session</div>
        <div class="last-session-card" onclick="showView('progress')">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.4rem;">
            <div class="session-pos">${last.position || 'General'}</div>
            <div class="session-date">${last.date}</div>
          </div>
          ${last.weaknessFlag || last.weakness_flag ? `<div style="font-size:13px;color:#888;">${esc((last.weaknessFlag || last.weakness_flag).slice(0,100))}</div>` : ''}
          <div style="font-size:12px;color:#555;margin-top:0.5rem;">Tap to view all sessions ›</div>
        </div>` : ''}

        ${totalNemesis > 0 ? `
        <div class="section-title">Nemesis</div>
        <div class="dash-card" style="margin-bottom:1rem;">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;">
            <div style="font-size:12px;color:#555;">${totalNemesis} tracked</div>
            <div style="display:flex;gap:12px;">
              <span style="font-size:13px;font-weight:700;color:#4ade80;">${nemTotalW}W</span>
              <span style="font-size:13px;font-weight:700;color:#e63b30;">${nemTotalL}L</span>
              <span style="font-size:13px;font-weight:700;color:#888;">${nemTotalD}D</span>
            </div>
          </div>
          ${recentNemesisRolls.map(r => `
          <div style="display:flex;justify-content:space-between;align-items:center;padding:0.5rem 0;border-top:0.5px solid rgba(255,255,255,0.05);">
            <div>
              <div style="font-size:13px;color:#e0e0e0;font-weight:500;">${r.nemesisName}</div>
              ${r.notes ? `<div style="font-size:12px;color:#555;">${r.notes.slice(0, 60)}</div>` : ''}
            </div>
            <span class="roll-result ${r.result}">${r.result.charAt(0).toUpperCase() + r.result.slice(1)}</span>
          </div>`).join('')}
          ${rematchReminders.length > 0 ? `
          <div style="padding-top:0.75rem;margin-top:0.25rem;border-top:0.5px solid rgba(255,255,255,0.05);">
            <div style="font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#854f0b;margin-bottom:0.5rem;">Due for a rematch</div>
            ${rematchReminders.map(n => `
            <div class="rematch-row" onclick="showView('nemesis');openNemesis('${n.id}')">
              <span class="rematch-name">${esc(n.name)}</span>
              <span class="rematch-since">Last rolled ${sinceLabel(n.lastRolled)} ›</span>
            </div>`).join('')}
          </div>` : ''}
          <button class="log-btn" style="width:100%;margin-top:0.75rem;background:rgba(255,255,255,0.05);color:#888;border:0.5px solid rgba(255,255,255,0.1);" onclick="showView('nemesis')">View all ›</button>
        </div>` : ''}

        <div class="section-title">Upcoming event</div>
        <div class="upcoming-card">
          ${upcomingEvent
            ? `<div style="font-size:13px;font-weight:500;color:#f0f0f0;margin-bottom:0.25rem;">${upcomingEvent.title}</div>
               ${upcomingEvent.date ? `<div style="font-size:12px;color:#e63b30;">${upcomingEvent.date}</div>` : ''}
               ${upcomingEvent.location ? `<div style="font-size:12px;color:#555;">${upcomingEvent.location}</div>` : ''}`
            : `<div style="font-size:13px;color:#555;">No events loaded — check Calendar tab.</div>`}
        </div>

        ${partnerRowHTML()}
      `;

      view.innerHTML = html;
      drawSubmissionRadar(subCounts);
      // Target promotion date is behind us — ask once whether it happened
      if (promoPassed && !document.getElementById('promoModal') && !document.getElementById('termsUpdateModal')) setTimeout(() => showPromotionCheck(false), 900);
    }

    function drawSubmissionRadar(subCounts) {
      const el = document.getElementById('submissionRadar');
      if (!el) return;
      const ranked = Object.entries(subCounts).sort((a, b) => b[1] - a[1]);
      const entries = ranked.slice(0, 8);
      if (entries.length < 2) {
        el.innerHTML = '<div style="font-size:13px;color:#555;padding:1.5rem 0;text-align:center;">Log rolls with submissions to see your radar.</div>';
        return;
      }
      // Wide viewBox with generous side margins so left/right labels never
      // clip; the SVG scales to the card width on phones.
      const W = 340, H = 290;
      const cx = W / 2, cy = H / 2;
      const radius = 78;
      const n = entries.length;
      const maxVal = entries[0][1];
      const angle = i => -Math.PI / 2 + (i * 2 * Math.PI) / n;
      const pt = (i, val) => {
        const r = (val / maxVal) * radius;
        return [cx + r * Math.cos(angle(i)), cy + r * Math.sin(angle(i))];
      };
      const rings = [0.25, 0.5, 0.75, 1.0].map(pct => {
        const pts = entries.map((_, i) => { const r = pct * radius; return [cx + r * Math.cos(angle(i)), cy + r * Math.sin(angle(i))]; });
        return `<polygon points="${pts.map(p => p.join(',')).join(' ')}" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>`;
      }).join('');
      const spokes = entries.map((_, i) => { const [x, y] = pt(i, maxVal); return `<line x1="${cx}" y1="${cy}" x2="${x}" y2="${y}" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>`; }).join('');
      const dataPts = entries.map((e, i) => pt(i, e[1]));
      const dataPath = dataPts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`).join(' ') + 'Z';
      const dots = dataPts.map(([x, y]) => `<circle cx="${x.toFixed(1)}" cy="${y.toFixed(1)}" r="3.5" fill="#e63b30" filter="url(#rglow)"/>`).join('');
      // Split long names over two lines instead of truncating them
      const wrapName = name => {
        if (name.length <= 12) return [name];
        const words = name.split(' ');
        if (words.length === 1) return [name];
        let best = null, bestDiff = Infinity;
        for (let k = 1; k < words.length; k++) {
          const a = words.slice(0, k).join(' '), b = words.slice(k).join(' ');
          const diff = Math.abs(a.length - b.length);
          if (diff < bestDiff) { bestDiff = diff; best = [a, b]; }
        }
        return best;
      };
      const labels = entries.map(([name, count], i) => {
        const c = Math.cos(angle(i)), s = Math.sin(angle(i));
        const lx = cx + (radius + 18) * c;
        const ly = cy + (radius + 18) * s;
        const anchor = c > 0.15 ? 'start' : c < -0.15 ? 'end' : 'middle';
        const lines = wrapName(name);
        // Stack the block so it grows away from the chart: above for top labels, below for bottom
        const lineH = 11.5, total = lines.length * lineH + 10;
        const startY = ly - total / 2 + (s * total) / 2 + 9;
        const nameLines = lines.map((t, j) => `<text x="${lx.toFixed(1)}" y="${(startY + j * lineH).toFixed(1)}" text-anchor="${anchor}" fill="#bbb" font-size="10.5" font-weight="500" font-family="inherit">${esc(t)}</text>`).join('');
        return nameLines + `<text x="${lx.toFixed(1)}" y="${(startY + lines.length * lineH).toFixed(1)}" text-anchor="${anchor}" fill="#666" font-size="9" font-family="inherit">${count}×</text>`;
      }).join('');
      el.innerHTML = `<svg viewBox="0 0 ${W} ${H}" style="width:100%;max-width:380px;height:auto;overflow:visible;display:block;">
        <defs><filter id="rglow"><feGaussianBlur stdDeviation="2.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>
        ${rings}${spokes}
        <path d="${dataPath}" fill="rgba(230,59,48,0.12)" stroke="#e63b30" stroke-width="1.5" stroke-linejoin="round"/>
        ${dots}${labels}
      </svg>`;
      // The radar has room for 8 spokes; list the rest so no finish goes missing
      const rest = ranked.slice(8);
      if (rest.length) el.innerHTML += `<div class="radar-more"><span>Also landed</span> ${rest.map(([name, count]) => `<b>${esc(name)} ${count}×</b>`).join(' · ')}</div>`;
    }


    // ── Push notifications (Phase 2) ──────────────────────────────────────
    // Groundwork: streak-at-risk and weekly-goal reminders will trigger from here.
    // Requires: PWA manifest + service worker registration.
    // The data is ready: calculateStreak(cachedSessions), sessionsThisWeek(cachedSessions),
    // userProfile.weeklyGoal, userProfile.target_promotion.
    async function requestPushPermission() {
      if (!('Notification' in window)) return;
      const perm = await Notification.requestPermission();
      return perm === 'granted';
    }
    // TODO Phase 2: register service worker, subscribe to push, send token to server

    // ── Streak calculation ────────────────────────────────────────────────

    function calculateStreak(sessions) {
      if (sessions.length === 0) return 0;
      const toYMD = d => { const dt = new Date(d); return `${dt.getFullYear()}-${dt.getMonth()}-${dt.getDate()}`; };
      const dates = [...new Set(sessions.map(s => toYMD(s.date)))];
      if (dates[0] !== toYMD(new Date().toLocaleDateString())) return 0;
      let streak = 1;
      for (let i = 1; i < dates.length; i++) {
        const diff = Math.round((new Date(sessions[i-1].date) - new Date(sessions[i].date)) / 86400000);
        if (diff === 1) streak++; else break;
      }
      return streak;
    }

    // ── Skills tab ────────────────────────────────────────────────

    const TECHNIQUE_DB = [
      {
        id: 'closed_guard', name: 'Closed Guard', icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.4-2.9 7.4-7 9-4.1-1.6-7-4.6-7-9V6z"/></svg>', color: '#e63b30',
        desc: 'Control your opponent between your legs — the foundation of guard play.',
        techniques: [
          { id:'cg_armbar',       name:'Armbar',            belt:'white',  type:'submission', links:['cg_triangle','cg_omoplata'] },
          { id:'cg_triangle',     name:'Triangle Choke',    belt:'white',  type:'submission', links:['cg_armbar','cg_omoplata'] },
          { id:'cg_kimura',       name:'Kimura',            belt:'white',  type:'submission', links:['cg_hip_bump','cg_guillotine'] },
          { id:'cg_guillotine',   name:'Guillotine',        belt:'white',  type:'submission', links:['cg_hip_bump'] },
          { id:'cg_omoplata',     name:'Omoplata',          belt:'blue',   type:'submission', links:['cg_triangle','cg_armbar'] },
          { id:'cg_hip_bump',     name:'Hip Bump Sweep',    belt:'white',  type:'sweep',      links:['cg_kimura','cg_guillotine'] },
          { id:'cg_scissor',      name:'Scissor Sweep',     belt:'white',  type:'sweep',      links:['cg_cross_collar','cg_flower'] },
          { id:'cg_flower',       name:'Flower Sweep',      belt:'white',  type:'sweep',      links:['cg_scissor'] },
          { id:'cg_cross_collar', name:'Cross Collar Choke',belt:'white',  type:'submission', links:['cg_scissor'] },
          { id:'cg_pendulum',     name:'Pendulum Sweep',    belt:'blue',   type:'sweep',      links:['cg_kimura'] },
          { id:'cg_lumberjack',   name:'Lumberjack Sweep',  belt:'blue',   type:'sweep',      links:['cg_scissor'] },
        ]
      },
      {
        id: 'half_guard', name: 'Half Guard', icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16" fill="currentColor" stroke="none" opacity="0.45"/></svg>', color: '#f97316',
        desc: 'One leg trapped — use underhooks and frames to sweep or recover.',
        techniques: [
          { id:'hg_old_school',   name:'Old School Sweep',  belt:'blue',   type:'sweep',      links:['hg_deep_half','hg_dogfight'] },
          { id:'hg_deep_half',    name:'Deep Half Guard',   belt:'purple', type:'transition', links:['hg_waiter','hg_old_school'] },
          { id:'hg_kimura',       name:'Kimura Trap',       belt:'blue',   type:'submission', links:['hg_old_school'] },
          { id:'hg_z_guard',      name:'Z-Guard / Knee Shield', belt:'white', type:'transition', links:['hg_old_school'] },
          { id:'hg_dogfight',     name:'Dog Fight',         belt:'blue',   type:'transition', links:['hg_back_take','hg_old_school'] },
          { id:'hg_waiter',       name:'Waiter Sweep',      belt:'purple', type:'sweep',      links:['hg_deep_half'] },
          { id:'hg_electric',     name:'Electric Chair',    belt:'purple', type:'submission', links:['hg_waiter'] },
          { id:'hg_back_take',    name:'Back Take',         belt:'blue',   type:'transition', links:['hg_dogfight'] },
          { id:'hg_lockdown',     name:'Lockdown',          belt:'blue',   type:'control',    links:['hg_electric','hg_old_school'] },
        ]
      },
      {
        id: 'open_guard', name: 'Open Guard', icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5l-6 7 6 7"/><path d="M15 5l6 7-6 7"/></svg>', color: '#8b5cf6',
        desc: 'Dynamic guard systems — De La Riva, butterfly, spider and beyond.',
        techniques: [
          { id:'og_butterfly',    name:'Butterfly Sweep',   belt:'white',  type:'sweep',      links:['og_bf_hook'] },
          { id:'og_bf_hook',      name:'Butterfly Hook',    belt:'white',  type:'control',    links:['og_butterfly','og_dlr'] },
          { id:'og_dlr',          name:'De La Riva Hook',   belt:'blue',   type:'control',    links:['og_dlr_sweep','og_berimbolo'] },
          { id:'og_dlr_sweep',    name:'DLR Sweep',         belt:'blue',   type:'sweep',      links:['og_dlr'] },
          { id:'og_berimbolo',    name:'Berimbolo',         belt:'purple', type:'transition', links:['og_dlr'] },
          { id:'og_spider',       name:'Spider Guard',      belt:'blue',   type:'control',    links:['og_spider_triangle','og_lasso'] },
          { id:'og_spider_triangle', name:'Spider Triangle', belt:'blue',  type:'submission', links:['og_spider'] },
          { id:'og_lasso',        name:'Lasso Guard',       belt:'blue',   type:'control',    links:['og_spider'] },
          { id:'og_xguard',       name:'X-Guard Sweep',     belt:'purple', type:'sweep',      links:['og_xguard_entry'] },
          { id:'og_xguard_entry', name:'X-Guard Entry',     belt:'purple', type:'transition', links:['og_xguard'] },
          { id:'og_tripod',       name:'Tripod Sweep',      belt:'white',  type:'sweep',      links:['og_bf_hook'] },
        ]
      },
      {
        id: 'side_control', name: 'Side Control', icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="9" width="13" height="8" rx="2"/><rect x="9" y="5" width="12" height="8" rx="2"/></svg>', color: '#06b6d4',
        desc: 'Dominant top position — maintain pressure and hunt submissions.',
        techniques: [
          { id:'sc_americana',    name:'Americana',         belt:'white',  type:'submission', links:['sc_kimura'] },
          { id:'sc_kimura',       name:'Kimura',            belt:'white',  type:'submission', links:['sc_americana','sc_ns_choke'] },
          { id:'sc_ns_choke',     name:'North-South Choke', belt:'purple', type:'submission', links:['sc_kimura'] },
          { id:'sc_kesa',         name:'Kesa Gatame',       belt:'white',  type:'control',    links:['sc_americana'] },
          { id:'sc_arm_triangle', name:'Arm Triangle',      belt:'blue',   type:'submission', links:['sc_ns_choke'] },
          { id:'sc_bridge_roll',  name:'Bridge & Roll Escape', belt:'white', type:'escape',   links:['sc_elbow_knee'] },
          { id:'sc_elbow_knee',   name:'Elbow-Knee Escape', belt:'white',  type:'escape',     links:['sc_bridge_roll','sc_granby'] },
          { id:'sc_granby',       name:'Granby Roll',       belt:'blue',   type:'escape',     links:['sc_elbow_knee'] },
          { id:'sc_underhook',    name:'Underhook Escape',  belt:'blue',   type:'escape',     links:['sc_granby'] },
        ]
      },
      {
        id: 'mount', name: 'Mount', icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="7" r="3"/><path d="M7 18c0-3.3 2.2-5.5 5-5.5s5 2.2 5 5.5"/><path d="M4 20h16"/></svg>', color: '#dc2626',
        desc: 'Highest control position — hunt chokes and armbars while defending escapes.',
        techniques: [
          { id:'mt_armbar',       name:'Armbar from Mount', belt:'white',  type:'submission', links:['mt_triangle','mt_s_mount'] },
          { id:'mt_triangle',     name:'Triangle from Mount',belt:'blue',  type:'submission', links:['mt_armbar'] },
          { id:'mt_cross_collar', name:'Cross Collar Choke',belt:'white',  type:'submission', links:['mt_ezekiel','mt_high'] },
          { id:'mt_ezekiel',      name:'Ezekiel Choke',     belt:'white',  type:'submission', links:['mt_cross_collar'] },
          { id:'mt_arm_triangle', name:'Arm Triangle',      belt:'blue',   type:'submission', links:['mt_s_mount'] },
          { id:'mt_s_mount',      name:'S-Mount',           belt:'blue',   type:'control',    links:['mt_armbar','mt_arm_triangle'] },
          { id:'mt_high',         name:'High Mount',        belt:'blue',   type:'control',    links:['mt_cross_collar','mt_ezekiel'] },
          { id:'mt_bridge_roll',  name:'Bridge & Roll Escape', belt:'white', type:'escape',   links:['mt_elbow_knee'] },
          { id:'mt_elbow_knee',   name:'Elbow-Knee Escape', belt:'white',  type:'escape',     links:['mt_bridge_roll'] },
        ]
      },
      {
        id: 'back_control', name: 'Back Control', icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="11" r="4"/><path d="M5 13a8 8 0 0 1 14 0"/><path d="M8 17c1 1.6 2.4 2.5 4 2.5s3-0.9 4-2.5"/></svg>', color: '#1d4ed8',
        desc: 'The most dominant position in BJJ — finish with chokes and arm attacks.',
        techniques: [
          { id:'bc_rnc',          name:'Rear Naked Choke',  belt:'white',  type:'submission', links:['bc_seatbelt'] },
          { id:'bc_bow_arrow',    name:'Bow & Arrow Choke', belt:'blue',   type:'submission', links:['bc_rnc'] },
          { id:'bc_rear_triangle',name:'Rear Triangle',     belt:'purple', type:'submission', links:['bc_bow_arrow'] },
          { id:'bc_seatbelt',     name:'Seatbelt Grip',     belt:'white',  type:'control',    links:['bc_rnc','bc_arm_trap'] },
          { id:'bc_arm_trap',     name:'Arm Trap',          belt:'blue',   type:'submission', links:['bc_seatbelt'] },
          { id:'bc_escape_guard', name:'Escape to Guard',   belt:'white',  type:'escape',     links:['bc_escape_turtle'] },
          { id:'bc_escape_turtle',name:'Escape to Turtle',  belt:'white',  type:'escape',     links:['bc_escape_guard'] },
        ]
      },
      {
        id: 'leg_entanglements', name: 'Leg Entanglements', icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.5" cy="12" r="5"/><circle cx="15.5" cy="12" r="5"/></svg>', color: '#059669',
        desc: 'The modern leg lock game — ankle locks, heel hooks and kneebars.',
        techniques: [
          { id:'le_ankle',        name:'Ankle Lock',        belt:'white',  type:'submission', links:['le_ashi'] },
          { id:'le_ashi',         name:'Ashi Garami',       belt:'blue',   type:'control',    links:['le_ankle','le_inside_heel'] },
          { id:'le_inside_heel',  name:'Inside Heel Hook',  belt:'purple', type:'submission', links:['le_ashi','le_50_50'] },
          { id:'le_outside_heel', name:'Outside Heel Hook', belt:'purple', type:'submission', links:['le_outside_ashi'] },
          { id:'le_outside_ashi', name:'Outside Ashi',      belt:'purple', type:'control',    links:['le_outside_heel'] },
          { id:'le_50_50',        name:'50/50 Guard',       belt:'purple', type:'control',    links:['le_inside_heel','le_outside_heel'] },
          { id:'le_kneebar',      name:'Kneebar',           belt:'blue',   type:'submission', links:['le_ashi'] },
          { id:'le_toe_hold',     name:'Toe Hold',          belt:'blue',   type:'submission', links:['le_ashi'] },
          { id:'le_sankaku',      name:'Inside Sankaku',    belt:'purple', type:'control',    links:['le_inside_heel'] },
        ]
      },
      {
        id: 'takedowns', name: 'Takedowns', icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l11 9"/><path d="M16 14v-5"/><path d="M16 14h-5"/><path d="M3 20h18"/></svg>', color: '#b45309',
        desc: 'Control where the fight goes — wrestling and judo entries.',
        techniques: [
          { id:'td_single',       name:'Single Leg',        belt:'white',  type:'takedown',   links:['td_double'] },
          { id:'td_double',       name:'Double Leg',        belt:'white',  type:'takedown',   links:['td_single'] },
          { id:'td_osoto',        name:'Osoto Gari',        belt:'white',  type:'takedown',   links:['td_hip_throw'] },
          { id:'td_hip_throw',    name:'Hip Throw (O Goshi)',belt:'white', type:'takedown',   links:['td_osoto','td_seoi'] },
          { id:'td_seoi',         name:'Seoi Nage',         belt:'blue',   type:'takedown',   links:['td_hip_throw'] },
          { id:'td_snap',         name:'Snap Down',         belt:'white',  type:'takedown',   links:['td_guillotine_entry'] },
          { id:'td_sprawl',       name:'Sprawl',            belt:'white',  type:'defense',    links:['td_snap'] },
          { id:'td_guard_pull',   name:'Guard Pull',        belt:'white',  type:'transition', links:['td_single'] },
          { id:'td_guillotine_entry', name:'Guillotine Entry', belt:'white', type:'submission', links:['td_snap'] },
        ]
      }
    ];

    // Skills state
    let currentPosition = null;
    let skillSimulation = null;
    let selectedTechniqueId = null;

    function renderSkills() {
      if (currentPosition) {
        renderTechniqueTree(currentPosition);
      } else {
        renderPositionLevel();
      }
    }

    function renderPositionLevel() {
      const view = document.getElementById('skillsView');

      const sessionsByPos = {};
      cachedSessions.forEach(s => {
        const p = (s.position || '').toLowerCase();
        TECHNIQUE_DB.forEach(pos => {
          if (p.includes(pos.name.toLowerCase().split(' ')[0].toLowerCase())) {
            sessionsByPos[pos.id] = (sessionsByPos[pos.id] || 0) + 1;
          }
        });
      });

      const practicedSubs = new Set(cachedSessions.flatMap(s => (s.submissions_used || []).map(x => x.toLowerCase())));

      const cards = TECHNIQUE_DB.map(pos => {
        const practicedTech = pos.techniques.filter(t =>
          practicedSubs.has(t.name.toLowerCase()) || (sessionsByPos[pos.id] || 0) > 0
        ).length;
        const sessionCount = sessionsByPos[pos.id] || 0;
        return `
          <div class="position-card" style="--pos-color:${pos.color}" onclick="openPosition('${pos.id}')">
            <span class="pos-icon">${pos.icon}</span>
            <div class="pos-name">${pos.name}</div>
            <div class="pos-desc">${pos.desc}</div>
            <div class="pos-meta">
              <span class="pos-count">${pos.techniques.length} techniques</span>
              ${sessionCount > 0 ? `<span class="pos-practiced">${sessionCount} sessions</span>` : ''}
            </div>
          </div>`;
      }).join('');

      view.innerHTML = `
        <div class="skills-view">
          <div class="skills-header">
            <div class="section-title" style="margin:0;">Skill Tree</div>
          </div>
          <div class="positions-grid">${cards}</div>
        </div>`;
    }

    function openPosition(posId) {
      currentPosition = posId;
      renderTechniqueTree(posId);
    }

    function renderTechniqueTree(posId) {
      const view = document.getElementById('skillsView');
      const pos = TECHNIQUE_DB.find(p => p.id === posId);
      if (!pos) return;

      const practicedSubs = new Set(cachedSessions.flatMap(s => (s.submissions_used || []).map(x => x.toLowerCase())));

      const typeColors = {
        submission: '#e63b30', sweep: '#fbbf24', escape: '#4ade80',
        transition: '#c084fc', control: '#67e8f9', takedown: '#fcd34d', defense: '#86efac'
      };

      view.innerHTML = `
        <div class="skills-view">
          <div class="skills-header" style="padding-top:0.25rem;">
            <div>
              <div class="section-title" style="margin:0;display:flex;align-items:center;gap:8px;"><span style="display:inline-flex;color:${pos.color};">${pos.icon}</span>${pos.name}</div>
              <div style="font-size:12px;color:#555;margin-top:2px;">${pos.desc}</div>
            </div>
          </div>
          <div class="tree-legend">
            ${Object.entries(typeColors).map(([type, color]) =>
              `<div class="legend-item"><div class="legend-dot" style="background:${color}"></div>${type}</div>`
            ).join('')}
          </div>
          <div class="tree-container" id="treeContainer">
            <svg class="tree-svg" id="treeSvg"></svg>
          </div>
        </div>`;

      // Show floating back button
      const floatBtn = document.getElementById('skillsBackFloat');
      if (floatBtn) floatBtn.classList.add('visible');

      setTimeout(() => buildD3Tree(pos, practicedSubs, typeColors), 50);
    }

    function buildD3Tree(pos, practicedSubs, typeColors) {
      const container = document.getElementById('treeContainer');
      const svg = d3.select('#treeSvg');
      if (!container || svg.empty()) return;

      const W = container.clientWidth;
      const H = container.clientHeight;

      svg.attr('width', W).attr('height', H);

      const centerNode = { id: pos.id, name: pos.name, isCenter: true, x: W/2, y: H/2, fx: W/2, fy: H/2 };
      const mastery = treeMasteryMap();
      const nodes = [centerNode, ...pos.techniques.map(t => ({
        ...t,
        isCenter: false,
        practiced: practicedSubs.has(t.name.toLowerCase()),
        mastery: mastery[t.id] || null
      }))];

      const links = [];
      pos.techniques.forEach(t => {
        links.push({ source: pos.id, target: t.id });
        (t.links || []).forEach(lid => {
          if (pos.techniques.find(x => x.id === lid)) {
            links.push({ source: t.id, target: lid });
          }
        });
      });

      const zoom = d3.zoom().scaleExtent([0.4, 3]).on('zoom', (e) => {
        g.attr('transform', e.transform);
      });
      svg.call(zoom);

      const g = svg.append('g');

      if (skillSimulation) skillSimulation.stop();
      skillSimulation = d3.forceSimulation(nodes)
        .force('link', d3.forceLink(links).id(d => d.id).distance(d => d.source.isCenter || d.target.isCenter ? 110 : 70).strength(0.6))
        .force('charge', d3.forceManyBody().strength(-280))
        .force('center', d3.forceCenter(W/2, H/2))
        .force('collision', d3.forceCollide().radius(d => d.isCenter ? 40 : 28))
        .on('tick', ticked);

      const link = g.append('g').selectAll('line').data(links).join('line')
        .attr('stroke', 'rgba(255,255,255,0.08)')
        .attr('stroke-width', 1.5);

      const node = g.append('g').selectAll('g').data(nodes).join('g')
        .style('cursor', d => d.isCenter ? 'default' : 'pointer')
        .on('click', (event, d) => { if (!d.isCenter) showTechniqueDetail(d, pos); })
        .call(d3.drag()
          .on('start', (e, d) => { if (!e.active) skillSimulation.alphaTarget(0.3).restart(); if (!d.isCenter) { d.fx = d.x; d.fy = d.y; } })
          .on('drag',  (e, d) => { if (!d.isCenter) { d.fx = e.x; d.fy = e.y; } })
          .on('end',   (e, d) => { if (!e.active) skillSimulation.alphaTarget(0); if (!d.isCenter) { d.fx = null; d.fy = null; } })
        );

      node.append('circle')
        .attr('r', d => d.isCenter ? 36 : 22)
        .attr('fill', d => {
          if (d.isCenter) return pos.color;
          return d.practiced ? pos.color : 'rgba(20,20,20,0.9)';
        })
        .attr('stroke', d => {
          if (d.isCenter) return pos.color;
          // Path mastery ring wins: green solid / orange drilled / gold learning
          if (d.mastery === 'solid') return '#4ade80';
          if (d.mastery === 'drilled') return '#e0863a';
          if (d.mastery === 'learning') return '#d4a017';
          return d.practiced ? pos.color : typeColors[d.type] || '#555';
        })
        .attr('stroke-width', d => d.mastery ? 3 : (d.practiced ? 2.5 : 1.5))
        .attr('opacity', d => d.isCenter ? 1 : (d.practiced || d.mastery ? 1 : 0.7));

      node.append('text')
        .attr('text-anchor', 'middle')
        .attr('fill', d => d.isCenter ? 'white' : (d.practiced ? 'white' : '#aaa'))
        .attr('font-size', d => d.isCenter ? 11 : 9)
        .attr('font-weight', d => d.isCenter ? '700' : '500')
        .attr('pointer-events', 'none')
        .each(function(d) {
          const el = d3.select(this);
          const words = d.name.split(' ');
          if (words.length <= 2 || d.isCenter) {
            el.append('tspan').attr('x', 0).attr('dy', d.isCenter ? '0.35em' : (words.length > 1 ? '-0.3em' : '0.35em')).text(words.slice(0, 2).join(' '));
            if (words.length > 2) el.append('tspan').attr('x', 0).attr('dy', '1.1em').text(words.slice(2).join(' '));
          } else {
            el.append('tspan').attr('x', 0).attr('dy', '-0.3em').text(words.slice(0, 2).join(' '));
            el.append('tspan').attr('x', 0).attr('dy', '1.1em').text(words.slice(2).join(' '));
          }
        });

      node.filter(d => !d.isCenter && d.practiced).append('circle')
        .attr('r', 5).attr('cx', 16).attr('cy', -16)
        .attr('fill', '#4ade80').attr('stroke', '#0a0a0a').attr('stroke-width', 1.5);

      function ticked() {
        link
          .attr('x1', d => d.source.x).attr('y1', d => d.source.y)
          .attr('x2', d => d.target.x).attr('y2', d => d.target.y);
        node.attr('transform', d => `translate(${d.x},${d.y})`);
      }
    }

    function closePosition() {
      if (skillSimulation) { skillSimulation.stop(); skillSimulation = null; }
      currentPosition = null;
      closeTechniqueDetail();
      const floatBtn = document.getElementById('skillsBackFloat');
      if (floatBtn) floatBtn.classList.remove('visible');
      renderPositionLevel();
    }

    function showTechniqueDetail(tech, pos) {
      selectedTechniqueId = tech.id;
      const sheet = document.getElementById('techSheet');

      const usedCount = cachedSessions.filter(s =>
        (s.submissions_used || []).map(x => x.toLowerCase()).includes(tech.name.toLowerCase())
      ).length;

      const linkedNames = (tech.links || []).map(lid => {
        const t = pos.techniques.find(x => x.id === lid);
        return t ? `<span class="tech-link-pill" onclick="highlightLinked('${lid}')">${t.name}</span>` : '';
      }).filter(Boolean).join('');

      document.getElementById('techSheetContent').innerHTML = `
        <div class="tech-sheet-handle"></div>
        <div class="tech-sheet-header">
          <div class="tech-sheet-name">${tech.name}</div>
          <button class="tech-sheet-close" onclick="closeTechniqueDetail()">✕</button>
        </div>
        <div class="tech-badges">
          <span class="tech-badge belt-${tech.belt}">${tech.belt} belt</span>
          <span class="tech-badge type-${tech.type}">${tech.type}</span>
        </div>
        <div class="tech-sheet-stat">
          ${usedCount > 0
            ? `You've used this <strong>${usedCount} time${usedCount !== 1 ? 's' : ''}</strong> in logged sessions.`
            : `Not yet logged in your sessions — tap the button below to learn it.`}
        </div>
        ${linkedNames ? `<div class="tech-links-label">Flows to</div><div class="tech-links-row">${linkedNames}</div>` : ''}
        <div id="techLearnArea"></div>
        <button class="tech-learn-btn" id="techLearnBtn" onclick="learnTechnique('${tech.name}', '${pos.name}')">
          What is the ${tech.name}?
        </button>`;

      sheet.classList.add('open');
      const backdrop = document.getElementById('techSheetBackdrop');
      if (backdrop) backdrop.classList.add('open');
    }

    function closeTechniqueDetail() {
      selectedTechniqueId = null;
      const sheet = document.getElementById('techSheet');
      if (sheet) sheet.classList.remove('open');
      const backdrop = document.getElementById('techSheetBackdrop');
      if (backdrop) backdrop.classList.remove('open');
    }

    async function learnTechnique(techName, posName) {
      const learnArea = document.getElementById('techLearnArea');
      const learnBtn = document.getElementById('techLearnBtn');
      if (!learnArea || !learnBtn) return;

      // Show loading state
      learnBtn.style.display = 'none';
      learnArea.innerHTML = `<div class="tech-loading">Loading intro…</div>`;

      try {
        const res = await aiFetch('/api/learn', { techName, posName });

        const data = await res.json();
        const text = data.response || data.error || 'No response received.';

        learnArea.innerHTML = `
          <div class="tech-description">${esc(text).replace(/\n\n/g, '</p><p>').replace(/\n/g, '<br>')}</div>
          ${data.response ? aiFooter('learn', text, `${techName} (${posName})`) : ''}
          <button class="tech-deeper-btn" onclick="askMentorAboutTech('${techName.replace(/'/g, "\\'")}', '${posName.replace(/'/g, "\\'")}')">
            Go deeper with Mentor →
          </button>`;
      } catch (err) {
        learnArea.innerHTML = `<div class="tech-description" style="color:#e63b30;">${esc(aiErrorText(err, 'Couldn\'t load intro. Check your connection.'))}</div>`;
        learnBtn.style.display = '';
      }
    }

    function askMentorAboutTech(techName, posName) {
      closeTechniqueDetail();
      showView('mentor');
      setTimeout(() => {
        const input = document.getElementById('problem');
        if (input) {
          input.value = `I want to improve my ${techName} from ${posName}. What are the key details, common mistakes, and what should I do if my opponent defends?`;
          input.dispatchEvent(new Event('input'));
          // Auto-submit so the user gets an answer immediately
          const submitBtn = document.getElementById('submitBtn');
          if (submitBtn && !submitBtn.disabled) submitBtn.click();
        }
      }, 300);
    }

    // ── Nemesis ──────────────────────────────────────────────────────────────

    async function loadNemesis() {
      if (!currentUser) return;
      try {
        const { data } = await sb.from('nemesis').select('*').eq('user_id', currentUser.id).order('created_at', { ascending: false });
        if (data) nemesisList = data;
        const { data: rolls } = await sb.from('nemesis_rolls').select('*').eq('user_id', currentUser.id).order('date', { ascending: false });
        if (rolls) {
          nemesisRolls = {};
          rolls.forEach(r => {
            if (!nemesisRolls[r.nemesis_id]) nemesisRolls[r.nemesis_id] = [];
            nemesisRolls[r.nemesis_id].push(r);
          });
        }
      } catch (_) {}
    }

    function nemesisRecord(id) {
      const rolls = nemesisRolls[id] || [];
      return {
        w: rolls.filter(r => r.result === 'win').length,
        l: rolls.filter(r => r.result === 'loss').length,
        d: rolls.filter(r => r.result === 'draw').length,
      };
    }

    // One rival per person. Voice logging and the Add form both go through
    // here so "david", "David" and "David S." resolve to the same record.
    const nemKey = name => String(name || '').trim().toLowerCase().replace(/\s+/g, ' ');
    function findNemesisByName(name) {
      const k = nemKey(name);
      if (!k) return null;
      return nemesisList.find(n => nemKey(n.name) === k)
          || nemesisList.find(n => nemKey(n.name).split(' ')[0] === k.split(' ')[0])
          || null;
    }

    // Groups of records that are the same person (exact name, case-insensitive).
    function duplicateNemesisGroups() {
      const byKey = {};
      nemesisList.forEach(n => { const k = nemKey(n.name); (byKey[k] = byKey[k] || []).push(n); });
      return Object.values(byKey).filter(g => g.length > 1);
    }

    // Speech-to-text spells the same person differently — Steven/Stephen,
    // Jon/John, Kris/Chris. Reduce the first name to a rough sound key so those
    // surface as *suggested* merges (never automatic).
    function nemSoundKey(name) {
      const s = nemKey(name).split(' ')[0];
      if (!s) return '';
      // Vowels are kept on purpose so Dan/Don stay distinct
      return s.replace(/ph/g, 'f').replace(/ck/g, 'k').replace(/ch/g, 'k').replace(/[cq]/g, 'k')
              .replace(/z/g, 's').replace(/v/g, 'f').replace(/y/g, 'i').replace(/h/g, '')
              .replace(/e+$/, '').replace(/(.)\1+/g, '$1');
    }
    function similarNemesisGroups() {
      const byKey = {};
      nemesisList.forEach(n => { const k = nemSoundKey(n.name); if (k) (byKey[k] = byKey[k] || []).push(n); });
      return Object.values(byKey).filter(g => new Set(g.map(n => nemKey(n.name))).size > 1);
    }

    // Move everything from one rival onto another, then delete the source.
    // Rolls are re-pointed; belt/gym/type/notes are kept from whichever record
    // had them. Nothing else in the app references rival ids.
    async function mergeNemesisInto(fromId, intoId) {
      const from = nemesisList.find(n => n.id === fromId), keep = nemesisList.find(n => n.id === intoId);
      if (!from || !keep || fromId === intoId) return false;
      const { error: mvErr } = await sb.from('nemesis_rolls').update({ nemesis_id: keep.id }).eq('nemesis_id', from.id);
      if (mvErr) throw mvErr;
      const updates = {};
      if ((!keep.belt || keep.belt === 'unknown') && from.belt && from.belt !== 'unknown') updates.belt = from.belt;
      if (!keep.gym && from.gym) updates.gym = from.gym;
      if (keep.type !== 'competitor' && from.type === 'competitor') updates.type = 'competitor';
      const notes = [keep.notes, from.notes].map(s => (s || '').trim()).filter(Boolean);
      if (notes.length && [...new Set(notes)].join('\n') !== (keep.notes || '').trim()) updates.notes = [...new Set(notes)].join('\n');
      if (Object.keys(updates).length) await sb.from('nemesis').update(updates).eq('id', keep.id);
      const { error: delErr } = await sb.from('nemesis').delete().eq('id', from.id);
      if (delErr) throw delErr;
      Object.assign(keep, updates);
      return true;
    }

    // Collapse each exact-duplicate group into its oldest record.
    async function mergeDuplicateNemesis() {
      const groups = duplicateNemesisGroups();
      if (!groups.length || !currentUser) return;
      const btn = document.getElementById('nemMergeBtn');
      if (btn) { btn.disabled = true; btn.textContent = 'Merging…'; }
      let merged = 0;
      for (const g of groups) {
        const sorted = [...g].sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
        const keep = sorted[0];
        for (const extra of sorted.slice(1)) {
          try { if (await mergeNemesisInto(extra.id, keep.id)) merged++; }
          catch (e) { console.error('Merge failed:', e); alert('Could not merge ' + keep.name + ': ' + (e.message || 'unknown error')); }
        }
      }
      await loadNemesis();
      track('nemesis_merged', { removed: merged, mode: 'exact' });
      renderNemesisView();
      renderDashboard();
    }

    // Sounds-alike suggestion: user confirms which spelling survives.
    async function mergeSimilarNemesis(fromId, intoId) {
      const from = nemesisList.find(n => n.id === fromId), keep = nemesisList.find(n => n.id === intoId);
      if (!from || !keep) return;
      if (!confirm(`Merge "${from.name}" into "${keep.name}"?\n\nAll of ${from.name}'s rolls will count toward ${keep.name}, and "${from.name}" will be removed. This can't be undone.`)) return;
      try { await mergeNemesisInto(fromId, intoId); }
      catch (e) { alert('Could not merge: ' + (e.message || 'unknown error')); return; }
      await loadNemesis();
      track('nemesis_merged', { removed: 1, mode: 'similar' });
      renderNemesisView();
      renderDashboard();
    }

    // Manual merge from a rival's page — for anything the matchers miss.
    function showMergeNemesisPicker() {
      const n = nemesisList.find(x => x.id === activeNemesisId);
      const wrap = document.getElementById('nemesisEditWrap');
      if (!n || !wrap) return;
      const others = nemesisList.filter(x => x.id !== n.id);
      if (!others.length) { alert('No other rivals to merge with.'); return; }
      wrap.innerHTML = `<div class="log-form-wrap" style="margin-bottom:1rem;">
        <div class="log-form-header">
          <span style="font-size:14px;font-weight:600;color:#e0e0e0;">Merge ${esc(n.name)} into…</span>
          <button onclick="document.getElementById('nemesisEditWrap').innerHTML=''" style="background:none;border:none;color:#666;font-size:18px;cursor:pointer;">✕</button>
        </div>
        <div style="font-size:12px;color:#888;margin-bottom:0.6rem;line-height:1.5;">Pick the record to keep. ${esc(n.name)}'s rolls and notes move over, and this record is removed.</div>
        <select id="n-merge-target" class="log-input" style="margin-bottom:0.75rem;appearance:none;-webkit-appearance:none;">
          ${others.map(o => `<option value="${o.id}">${esc(o.name)}${o.belt && o.belt !== 'unknown' ? ' · ' + o.belt : ''}</option>`).join('')}
        </select>
        <button class="log-btn" style="width:100%;" onclick="confirmMergeNemesisPicker()">Merge</button>
      </div>`;
    }
    async function confirmMergeNemesisPicker() {
      const fromId = activeNemesisId;
      const intoId = document.getElementById('n-merge-target')?.value;
      if (!fromId || !intoId) return;
      const from = nemesisList.find(n => n.id === fromId), keep = nemesisList.find(n => n.id === intoId);
      if (!confirm(`Merge "${from.name}" into "${keep.name}"? This can't be undone.`)) return;
      try { await mergeNemesisInto(fromId, intoId); }
      catch (e) { alert('Could not merge: ' + (e.message || 'unknown error')); return; }
      await loadNemesis();
      track('nemesis_merged', { removed: 1, mode: 'manual' });
      activeNemesisId = intoId;
      renderNemesisView();
      renderDashboard();
    }

    function renderNemesisView() {
      const view = document.getElementById('nemesisView');
      if (activeNemesisId) {
        renderNemesisDetail(view);
      } else {
        renderNemesisList(view);
      }
    }

    function renderNemesisList(view) {
      const cards = nemesisList.map(n => {
        const rec = nemesisRecord(n.id);
        const typeLabel = n.type === 'competitor' ? 'Competitor' : 'Partner';
        const typeCls = n.type === 'competitor' ? 'competitor' : 'partner';
        return `<div class="nemesis-card" onclick="openNemesis('${n.id}')">
          <div class="nemesis-card-top">
            <div>
              <div class="nemesis-name">${n.name}</div>
              <div class="nemesis-meta">${n.belt.charAt(0).toUpperCase() + n.belt.slice(1)} belt${n.gym ? ' · ' + n.gym : ''}</div>
            </div>
            <span class="nemesis-type-badge ${typeCls}">${typeLabel}</span>
          </div>
          <div class="nemesis-record">
            <div class="nemesis-record-stat"><div class="val val-w">${rec.w}</div><div class="lbl">Wins</div></div>
            <div class="nemesis-record-stat"><div class="val val-l">${rec.l}</div><div class="lbl">Losses</div></div>
            <div class="nemesis-record-stat"><div class="val val-d">${rec.d}</div><div class="lbl">Draws</div></div>
            <div class="nemesis-record-stat"><div class="val" style="color:#888">${rec.w + rec.l + rec.d}</div><div class="lbl">Rolls</div></div>
          </div>
        </div>`;
      }).join('');

      const empty = nemesisList.length === 0 ? `<div class="nemesis-empty">
        <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>
        No nemesis added yet.<br>Track your rolls and build game plans.
      </div>` : '';

      const dupGroups = duplicateNemesisGroups();
      let dupBanner = dupGroups.length ? `<div class="nem-dup-banner">
          <div>
            <div style="font-size:13px;font-weight:600;color:#f0f0f0;">Duplicate rivals found</div>
            <div style="font-size:12px;color:#888;margin-top:2px;">${esc(dupGroups.map(g => `${g[0].name} ×${g.length}`).join(', '))} — merge them so every roll counts toward one record.</div>
          </div>
          <button class="log-btn" id="nemMergeBtn" onclick="mergeDuplicateNemesis()">Merge</button>
        </div>` : '';
      // Sounds-alike pairs (Steven/Stephen): offer, never auto-merge. Only once exact dupes are cleared.
      if (!dupGroups.length) {
        similarNemesisGroups().forEach(g => {
          const sorted = [...g].sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
          const keep = sorted[0];
          sorted.slice(1).forEach(other => {
            dupBanner += `<div class="nem-dup-banner" style="border-color:rgba(255,255,255,0.12);background:rgba(255,255,255,0.03);">
              <div>
                <div style="font-size:13px;font-weight:600;color:#f0f0f0;">Same person?</div>
                <div style="font-size:12px;color:#888;margin-top:2px;">"${esc(other.name)}" and "${esc(keep.name)}" sound alike — voice logging may have spelled one name two ways.</div>
              </div>
              <div style="display:flex;flex-direction:column;gap:6px;flex-shrink:0;">
                <button class="log-btn" onclick="mergeSimilarNemesis('${other.id}','${keep.id}')">Keep ${esc(keep.name)}</button>
                <button class="log-btn" style="background:rgba(255,255,255,0.05);color:#aaa;border:0.5px solid rgba(255,255,255,0.12);" onclick="mergeSimilarNemesis('${keep.id}','${other.id}')">Keep ${esc(other.name)}</button>
              </div>
            </div>`;
          });
        });
      }

      view.innerHTML = `<div class="nemesis-view">
        <div class="nemesis-header">
          <div class="nemesis-title">Nemesis</div>
          <button class="log-btn" onclick="showAddNemesisForm()">+ Add</button>
        </div>
        <div id="nemesisFormWrap"></div>
        ${dupBanner}${empty}${cards}
      </div>`;
    }

    function showAddNemesisForm() {
      const wrap = document.getElementById('nemesisFormWrap');
      if (!wrap) return;
      wrap.innerHTML = `<div class="log-form-wrap" style="margin-bottom:1rem;">
        <div class="log-form-header">
          <span style="font-size:14px;font-weight:600;color:#e0e0e0;">Add Nemesis</span>
          <button onclick="document.getElementById('nemesisFormWrap').innerHTML=''" style="background:none;border:none;color:#666;font-size:18px;cursor:pointer;">✕</button>
        </div>
        <input id="n-name" class="log-input" placeholder="Name" style="margin-bottom:0.5rem;">
        <select id="n-belt" class="log-input" style="margin-bottom:0.5rem;appearance:none;-webkit-appearance:none;">
          <option value="white">White belt</option>
          <option value="blue" selected>Blue belt</option>
          <option value="purple">Purple belt</option>
          <option value="brown">Brown belt</option>
          <option value="black">Black belt</option>
          <option value="unknown">Unknown</option>
        </select>
        <select id="n-type" class="log-input" style="margin-bottom:0.5rem;appearance:none;-webkit-appearance:none;">
          <option value="training_partner">Training Partner</option>
          <option value="competitor">Competitor</option>
        </select>
        <input id="n-gym" class="log-input" placeholder="Gym / Academy (optional)" style="margin-bottom:0.5rem;">
        <div class="mini-mic-wrap" style="margin-bottom:0.75rem;">
          <textarea id="n-notes" class="log-input" rows="3" placeholder="Notes on their game — guard style, favourite submissions, tendencies..." style="margin-bottom:0;"></textarea>
          <button type="button" class="mini-mic" onclick="dictateInto('n-notes', this)" aria-label="Dictate notes"><svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1 1.93c-3.94-.49-7-3.85-7-7.93H5c0 3.53 2.61 6.43 6 6.92V19h2v-3.08c3.39-.49 6-3.39 6-6.92h1c0 4.08-3.06 7.44-7 7.93V19h-2v-3.07z"/></svg></button>
        </div>
        <button class="log-btn" style="width:100%;" onclick="saveNewNemesis()">Save</button>
      </div>`;
    }

    async function saveNewNemesis() {
      if (!currentUser) return;
      const name = document.getElementById('n-name')?.value?.trim();
      if (!name) { alert('Please enter a name.'); return; }
      const existing = nemesisList.find(n => nemKey(n.name) === nemKey(name));
      if (existing) {
        if (confirm(`${existing.name} is already in your list. Open their profile instead?`)) openNemesis(existing.id);
        return;
      }
      const entry = {
        user_id: currentUser.id,
        name,
        belt: document.getElementById('n-belt')?.value || 'unknown',
        type: document.getElementById('n-type')?.value || 'training_partner',
        gym: document.getElementById('n-gym')?.value?.trim() || null,
        notes: document.getElementById('n-notes')?.value?.trim() || null,
      };
      const { data, error } = await sb.from('nemesis').insert(entry).select().single();
      if (error) { alert('Could not save: ' + error.message); return; }
      nemesisList.unshift(data);
      renderNemesisView();
    }

    function showEditNemesisForm() {
      const n = nemesisList.find(x => x.id === activeNemesisId);
      const wrap = document.getElementById('nemesisEditWrap');
      if (!n || !wrap) return;
      const beltOpt = b => `<option value="${b}" ${n.belt === b ? 'selected' : ''}>${b.charAt(0).toUpperCase() + b.slice(1)}${b !== 'unknown' ? ' belt' : ''}</option>`;
      wrap.innerHTML = `<div class="log-form-wrap" style="margin-bottom:1rem;">
        <div class="log-form-header">
          <span style="font-size:14px;font-weight:600;color:#e0e0e0;">Edit Nemesis</span>
          <button onclick="document.getElementById('nemesisEditWrap').innerHTML=''" style="background:none;border:none;color:#666;font-size:18px;cursor:pointer;">✕</button>
        </div>
        <input id="n-name" class="log-input" placeholder="Name" value="${esc(n.name)}" style="margin-bottom:0.5rem;">
        <select id="n-belt" class="log-input" style="margin-bottom:0.5rem;appearance:none;-webkit-appearance:none;">
          ${['white','blue','purple','brown','black','unknown'].map(beltOpt).join('')}
        </select>
        <select id="n-type" class="log-input" style="margin-bottom:0.5rem;appearance:none;-webkit-appearance:none;">
          <option value="training_partner" ${n.type !== 'competitor' ? 'selected' : ''}>Training Partner</option>
          <option value="competitor" ${n.type === 'competitor' ? 'selected' : ''}>Competitor</option>
        </select>
        <input id="n-gym" class="log-input" placeholder="Gym / Academy (optional)" value="${esc(n.gym || '')}" style="margin-bottom:0.5rem;">
        <div class="mini-mic-wrap" style="margin-bottom:0.75rem;">
          <textarea id="n-notes" class="log-input" rows="3" placeholder="Notes on their game — guard style, favourite submissions, tendencies..." style="margin-bottom:0;">${esc(n.notes || '')}</textarea>
          <button type="button" class="mini-mic" onclick="dictateInto('n-notes', this)" aria-label="Dictate notes"><svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1 1.93c-3.94-.49-7-3.85-7-7.93H5c0 3.53 2.61 6.43 6 6.92V19h2v-3.08c3.39-.49 6-3.39 6-6.92h1c0 4.08-3.06 7.44-7 7.93V19h-2v-3.07z"/></svg></button>
        </div>
        <button class="log-btn" style="width:100%;" onclick="saveEditedNemesis()">Save changes</button>
      </div>`;
    }

    async function saveEditedNemesis() {
      const n = nemesisList.find(x => x.id === activeNemesisId);
      if (!n || !currentUser) return;
      const name = document.getElementById('n-name')?.value?.trim();
      if (!name) { alert('Please enter a name.'); return; }
      const updates = {
        name,
        belt: document.getElementById('n-belt')?.value || n.belt,
        type: document.getElementById('n-type')?.value || n.type,
        gym: document.getElementById('n-gym')?.value?.trim() || null,
        notes: document.getElementById('n-notes')?.value?.trim() || null,
      };
      const { error } = await sb.from('nemesis').update(updates).eq('id', n.id);
      if (error) { alert('Could not save: ' + error.message); return; }
      Object.assign(n, updates); // future game plans, debriefs, and voice matching all read from this list
      renderNemesisView();
    }

    function openNemesis(id) {
      activeNemesisId = id;
      renderNemesisView();
    }

    // Dashboard card → jump straight to this rival's game plan and build it
    function openGamePlanFromDash(id) {
      showView('nemesis');
      openNemesis(id);
      setTimeout(() => {
        const output = document.getElementById('gameplanOutput');
        if (output && !output.innerHTML.trim()) generateGamePlan();
        output?.scrollIntoView({ behavior: 'smooth', block: 'center' });
        // The plan streams in seconds later and grows the page — re-anchor
        // on the finished plan so the user lands on it, not above it
        let tries = 0;
        const iv = setInterval(() => {
          const box = document.querySelector('#gameplanOutput .gameplan-box');
          if (box) {
            clearInterval(iv);
            // instant jump — a smooth scroll here gets cancelled by late layout shifts
            setTimeout(() => box.scrollIntoView({ behavior: 'auto', block: 'start' }), 150);
          } else if (++tries > 25) clearInterval(iv);
        }, 400);
      }, 350);
    }

    function closeNemesisDetail() {
      activeNemesisId = null;
      renderNemesisView();
    }

    function renderNemesisDetail(view) {
      const n = nemesisList.find(x => x.id === activeNemesisId);
      if (!n) { closeNemesisDetail(); return; }
      const rec = nemesisRecord(n.id);
      const rolls = nemesisRolls[n.id] || [];
      const typeLabel = n.type === 'competitor' ? 'Competitor' : 'Training Partner';
      const typeCls = n.type === 'competitor' ? 'competitor' : 'partner';

      const rollItems = rolls.map(r => `<div class="roll-item">
        <div>
          <span class="roll-result ${r.result}">${r.result.charAt(0).toUpperCase() + r.result.slice(1)}</span>
          ${r.notes ? `<div class="roll-notes">${r.notes}</div>` : ''}
        </div>
        <div class="roll-date">${r.date || ''}</div>
      </div>`).join('');

      // One-tap switcher — jump between rivals without going back to the list
      const switcher = nemesisList.length > 1 ? `<div class="nem-switch">
        ${nemesisList.map(x => `<span class="gp-chip ${x.id === n.id ? 'active' : ''}" onclick="openNemesis('${x.id}')">${esc(x.name)}</span>`).join('')}
      </div>` : '';

      view.innerHTML = `<div class="nemesis-view">
        <button class="nemesis-detail-back" onclick="closeNemesisDetail()">
          <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
          All Nemesis
        </button>
        ${switcher}

        <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.75rem;">
          <div>
            <div class="nemesis-title">${esc(n.name)}</div>
            <div class="nemesis-meta" style="margin-top:4px;">${n.belt.charAt(0).toUpperCase() + n.belt.slice(1)} belt${n.gym ? ' · ' + esc(n.gym) : ''}</div>
          </div>
          <div style="display:flex;flex-direction:column;align-items:flex-end;gap:6px;">
            <span class="nemesis-type-badge ${typeCls}">${typeLabel}</span>
            <div style="display:flex;gap:6px;">
              <button onclick="showMergeNemesisPicker()" style="background:none;border:0.5px solid rgba(255,255,255,0.15);border-radius:8px;color:#888;font-size:11px;padding:3px 10px;cursor:pointer;font-family:inherit;">Merge</button>
              <button onclick="showEditNemesisForm()" style="background:none;border:0.5px solid rgba(255,255,255,0.15);border-radius:8px;color:#888;font-size:11px;padding:3px 10px;cursor:pointer;font-family:inherit;">Edit</button>
            </div>
          </div>
        </div>
        <div id="nemesisEditWrap"></div>

        <div class="nemesis-record">
          <div class="nemesis-record-stat"><div class="val val-w">${rec.w}</div><div class="lbl">Wins</div></div>
          <div class="nemesis-record-stat"><div class="val val-l">${rec.l}</div><div class="lbl">Losses</div></div>
          <div class="nemesis-record-stat"><div class="val val-d">${rec.d}</div><div class="lbl">Draws</div></div>
          <div class="nemesis-record-stat"><div class="val" style="color:#888">${rec.w + rec.l + rec.d}</div><div class="lbl">Total</div></div>
        </div>

        ${n.notes ? `<div class="section-title" style="margin-top:1rem;">Their Game</div>
        <div style="font-size:13px;color:#888;line-height:1.6;margin-top:0.25rem;">${esc(n.notes)}</div>` : ''}

        <div class="nemesis-section-title">Log a Roll</div>
        <div class="result-picker">
          <button class="result-pick-btn active-w" id="rpick-win" onclick="setRollResult('win')">Win</button>
          <button class="result-pick-btn" id="rpick-loss" onclick="setRollResult('loss')">Loss</button>
          <button class="result-pick-btn" id="rpick-draw" onclick="setRollResult('draw')">Draw</button>
        </div>
        <div class="mini-mic-wrap" style="margin-bottom:0.5rem;">
          <textarea id="roll-notes-input" class="log-input" rows="2" placeholder="Quick notes — what worked, what didn't..." style="margin-bottom:0;"></textarea>
          <button type="button" class="mini-mic" onclick="dictateInto('roll-notes-input', this)" aria-label="Dictate notes"><svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1 1.93c-3.94-.49-7-3.85-7-7.93H5c0 3.53 2.61 6.43 6 6.92V19h2v-3.08c3.39-.49 6-3.39 6-6.92h1c0 4.08-3.06 7.44-7 7.93V19h-2v-3.07z"/></svg></button>
        </div>
        <input type="date" id="roll-date-input" class="log-input" value="${new Date().toISOString().slice(0,10)}" style="margin-bottom:0.75rem;">
        <button class="log-btn" style="width:100%;margin-bottom:1.25rem;" onclick="saveRoll()">Log Roll</button>

        <div style="display:flex;justify-content:space-between;align-items:center;">
          <div class="nemesis-section-title" style="margin:0;">Game Plan</div>
          <button class="log-btn" style="font-size:12px;padding:0.35rem 0.75rem;" onclick="generateGamePlan()">Generate ↗</button>
        </div>
        <div id="gameplanOutput"></div>

        <div class="nemesis-section-title">Roll History</div>
        <div id="rollHistory">${rollItems || '<div style="color:#444;font-size:13px;padding:0.5rem 0;">No rolls logged yet.</div>'}</div>
      </div>`;

      nemesisRollResult = 'win';
    }

    function setRollResult(result) {
      nemesisRollResult = result;
      document.querySelectorAll('.result-pick-btn').forEach(b => {
        b.className = 'result-pick-btn';
      });
      const map = { win: 'active-w', loss: 'active-l', draw: 'active-d' };
      const btn = document.getElementById('rpick-' + result);
      if (btn) btn.classList.add(map[result]);
    }

    async function saveRoll() {
      if (!currentUser || !activeNemesisId) return;
      const notes = document.getElementById('roll-notes-input')?.value?.trim() || null;
      const date = document.getElementById('roll-date-input')?.value || new Date().toISOString().slice(0,10);
      const { data, error } = await sb.from('nemesis_rolls').insert({
        user_id: currentUser.id,
        nemesis_id: activeNemesisId,
        result: nemesisRollResult,
        notes,
        date,
      }).select().single();
      if (error) { alert('Could not save: ' + error.message); return; }
      if (!nemesisRolls[activeNemesisId]) nemesisRolls[activeNemesisId] = [];
      nemesisRolls[activeNemesisId].unshift(data);
      renderNemesisDetail(document.getElementById('nemesisView'));
    }

    async function generateGamePlan() {
      const n = nemesisList.find(x => x.id === activeNemesisId);
      if (!n) return;
      track('gameplan_generated');
      const output = document.getElementById('gameplanOutput');
      if (!output) return;
      output.innerHTML = '<div class="loading"><div class="dot"></div><div class="dot"></div><div class="dot"></div><span>building game plan...</span></div>';

      const rolls = nemesisRolls[n.id] || [];
      const rec = nemesisRecord(n.id);

      try {
        const res = await aiFetch('/api/gameplan', {
          nemesis: { name: n.name, belt: n.belt, type: n.type, gym: n.gym, notes: n.notes },
          record: rec,
          recentRolls: rolls.slice(0, 10).map(r => ({ result: r.result, notes: r.notes, date: r.date })),
          userProfile: { belt: userProfile.belt, name: userProfile.name, years: userProfile.years },
        });
        const data = await res.json();
        output.innerHTML = `<div class="gameplan-box">${esc(data.gameplan || 'No game plan returned.').replace(/\n/g, '<br>')}${data.gameplan ? aiFooter('gameplan', data.gameplan, 'Game plan') : ''}</div>`;
      } catch (err) {
        if (err?.isLimit) { output.innerHTML = ''; return; }
        output.innerHTML = `<div class="gameplan-box" style="color:#e63b30;">${esc(aiErrorText(err, 'Couldn\'t generate the game plan. Tap Generate to retry.'))}</div>`;
      }
    }

    // Initial view — show dashboard on load (mentorView starts hidden)
    showView('dashboard');

    // ── Roll Timer ────────────────────────────────────────────────────────

    const TIMER_CIRC = 2 * Math.PI * 38; // r=38 on viewBox 0 0 88 88

    const timerState = {
      duration: 360,    // default 6 min
      remaining: 360,
      interval: null,
      roundNum: 1,
      rounds: [],
      running: false,
      roundDone: false,
      warned: false,
    };

    function timerFmt(s) {
      const m = Math.floor(Math.abs(s) / 60);
      const sec = Math.abs(s) % 60;
      return `${m}:${String(sec).padStart(2,'0')}`;
    }

    function openTimerSetup() {
      document.getElementById('timerSetupSheet').classList.add('open');
      document.getElementById('timerSetupBackdrop').classList.add('open');
    }

    function closeTimerSetup() {
      document.getElementById('timerSetupSheet').classList.remove('open');
      document.getElementById('timerSetupBackdrop').classList.remove('open');
    }

    function setTimerPreset(minutes, btn) {
      timerState.duration = minutes * 60;
      document.querySelectorAll('.timer-preset-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      document.getElementById('timerCustomInput').value = minutes;
    }

    function onTimerCustomChange(val) {
      const m = parseInt(val);
      if (!isNaN(m) && m >= 1 && m <= 90) {
        timerState.duration = m * 60;
        document.querySelectorAll('.timer-preset-btn').forEach(b => b.classList.remove('active'));
      }
    }

    // Unlock the shared AudioContext during a real user tap — iOS refuses to
    // start audio from timer callbacks unless the context was unlocked by a
    // gesture first. Called from the timer Start buttons.
    function unlockAudio() {
      try {
        if (!_audioCtx) _audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        if (_audioCtx.state === 'suspended') _audioCtx.resume();
        // Play one silent sample — the canonical iOS unlock trick
        const buf = _audioCtx.createBuffer(1, 1, 22050);
        const src = _audioCtx.createBufferSource();
        src.buffer = buf;
        src.connect(_audioCtx.destination);
        src.start(0);
      } catch (e) {}
    }

    function beep(freq, dur, vol = 0.55) {
      try {
        const ctx = _audioCtx || (_audioCtx = new (window.AudioContext || window.webkitAudioContext)());
        if (ctx.state === 'suspended') ctx.resume();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.connect(gain); gain.connect(ctx.destination);
        osc.type = 'sine';
        osc.frequency.value = freq;
        gain.gain.setValueAtTime(vol, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur);
        osc.start(ctx.currentTime);
        osc.stop(ctx.currentTime + dur + 0.05);
      } catch(e) {}
    }

    function playWarning() {
      // 3 quick beeps at 30s left
      beep(880, 0.12, 0.45);
      setTimeout(() => beep(880, 0.12, 0.45), 200);
      setTimeout(() => beep(880, 0.12, 0.45), 400);
    }

    function playRoundEnd() {
      // Air horn: short blast + long blast, synthesized loud for noisy gyms
      airhornBlast(0, 0.55);
      airhornBlast(0.67, 1.25);
    }

    let _audioCtx = null;
    function airhornBlast(startDelay, duration) {
      try {
        const ctx = _audioCtx || (_audioCtx = new (window.AudioContext || window.webkitAudioContext)());
        if (ctx.state === 'suspended') ctx.resume();
        const t0 = ctx.currentTime + startDelay;
        const master = ctx.createGain();
        // Soft-clip stage makes it blare like a compressed horn instead of a sine
        const shaper = ctx.createWaveShaper();
        const curve = new Float32Array(256);
        for (let i = 0; i < 256; i++) {
          const x = (i / 127.5) - 1;
          curve[i] = Math.tanh(2.2 * x);
        }
        shaper.curve = curve;
        master.gain.setValueAtTime(0.0001, t0);
        master.gain.exponentialRampToValueAtTime(1.0, t0 + 0.015);
        master.gain.setValueAtTime(1.0, t0 + duration - 0.06);
        master.gain.exponentialRampToValueAtTime(0.0001, t0 + duration);
        // Brassy harmonic stack on a swooping fundamental
        [[1, 1.0], [2, 0.62], [3, 0.38], [4, 0.22], [5, 0.12]].forEach(([h, amp]) => {
          const osc = ctx.createOscillator();
          const g = ctx.createGain();
          g.gain.value = amp / 2.3;
          osc.frequency.setValueAtTime(310 * h, t0);
          osc.frequency.linearRampToValueAtTime(465 * h, t0 + 0.07);
          osc.connect(g); g.connect(shaper);
          osc.start(t0); osc.stop(t0 + duration);
        });
        shaper.connect(master);
        master.connect(ctx.destination);
      } catch (e) {}
    }

    // ── Native (Capacitor) timer helpers — no-ops on the web ──
    const NativePlugins = (window.Capacitor && window.Capacitor.Plugins) || {};
    async function nativeNotifyPermission() {
      if (!IS_NATIVE || !NativePlugins.LocalNotifications) return false;
      try {
        let status = await NativePlugins.LocalNotifications.checkPermissions();
        if (status.display !== 'granted') {
          status = await NativePlugins.LocalNotifications.requestPermissions();
        }
        return status.display === 'granted';
      } catch (e) { return false; }
    }
    // App Store / Play rating prompt — only at happy moments, at most every
    // 120 days. The OS decides whether it actually shows (Apple: 3x a year).
    function maybeAskForReview(reason) {
      if (!IS_NATIVE || !NativePlugins.InAppReview) return;
      try {
        const last = parseInt(localStorage.getItem('reviewAskedAt') || '0');
        if (Date.now() - last < 120 * 864e5) return;
        if (reason === 'sessions' && (cachedSessions || []).length < 5) return;
        localStorage.setItem('reviewAskedAt', String(Date.now()));
      } catch (_) { return; }
      track('review_prompted', { reason });
      setTimeout(() => { NativePlugins.InAppReview.requestReview().catch(() => {}); }, 1500);
    }

    // Android plays notification sounds from a "channel", not the notification
    // itself — create one wired to the bundled air horn (res/raw/airhorn.wav)
    let _hornChannelReady = false;
    async function ensureHornChannel() {
      if (_hornChannelReady || !IS_NATIVE) return;
      if (window.Capacitor.getPlatform?.() !== 'android') { _hornChannelReady = true; return; }
      try {
        await NativePlugins.LocalNotifications.createChannel({
          id: 'roll-timer',
          name: 'Roll Timer',
          description: 'Round-end air horn alerts',
          importance: 5,
          sound: 'airhorn.wav',
          vibration: true,
          visibility: 1
        });
        _hornChannelReady = true;
      } catch (e) {}
    }

    async function nativeScheduleRoundEnd(endAtMs, roundNum) {
      if (!IS_NATIVE || !NativePlugins.LocalNotifications) return;
      try {
        // Await permission BEFORE scheduling — on first use the permission
        // dialog must be answered or the schedule call fails silently
        const granted = await nativeNotifyPermission();
        if (!granted) return;
        await ensureHornChannel();
        await NativePlugins.LocalNotifications.cancel({ notifications: [{ id: 9001 }] }).catch(() => {});
        await NativePlugins.LocalNotifications.schedule({ notifications: [{
          id: 9001,
          title: `Round ${roundNum} complete`,
          body: 'Time! Start the next round or log your session.',
          sound: 'airhorn.caf',    // iOS: bundled air-horn blast
          channelId: 'roll-timer', // Android: channel carries the horn sound
          schedule: { at: new Date(endAtMs), allowWhileIdle: true }
        }] });
      } catch (e) {}
    }
    // Android 12+ ("Alarms & reminders"): without it the plugin silently falls
    // back to an inexact alarm, which Android may delay by minutes while the
    // phone sleeps, so the round-end horn would sound late with the screen locked.
    // Since Android 14 it starts switched off. Ask once per install, explain
    // why, and reschedule the running round as exact if the user enables it.
    async function ensureExactAlarms() {
      const LN = NativePlugins.LocalNotifications;
      if (!IS_ANDROID || !LN?.checkExactNotificationSetting) return;
      try {
        // Pointless (and confusing) if the horn notification itself is blocked
        if ((await LN.checkPermissions()).display !== 'granted') return;
        if ((await LN.checkExactNotificationSetting()).exact_alarm === 'granted') return;
        if (localStorage.getItem('exactAlarmAsked') === '1') return;
        localStorage.setItem('exactAlarmAsked', '1');
      } catch (_) { return; }
      if (document.getElementById('exactAlarmModal')) return;
      const el = document.createElement('div');
      el.id = 'exactAlarmModal';
      el.className = 'cu-modal open';
      el.innerHTML = `<div class="cu-card" style="max-width:400px;">
        <div class="cu-title">Let the horn sound on time</div>
        <div class="cu-sub">Android only fires the round-end horn exactly on time with the screen locked if Flowmora is allowed to set <strong>Alarms &amp; reminders</strong>. Without it the horn can be late.</div>
        <button class="cu-btn" id="exactAlarmAllow">Open setting</button>
        <button class="cu-btn ghost" id="exactAlarmLater">Not now</button>
      </div>`;
      document.body.appendChild(el);
      document.getElementById('exactAlarmLater').onclick = () => el.remove();
      document.getElementById('exactAlarmAllow').onclick = async () => {
        el.remove();
        try {
          const r = await LN.changeExactNotificationSetting();
          track('exact_alarm_setting', { result: r?.exact_alarm });
          if (r?.exact_alarm === 'granted' && timerState.running && !timerState.roundDone) {
            nativeScheduleRoundEnd(timerState.endAt, timerState.roundNum);
          }
        } catch (_) {}
      };
    }

    async function nativeCancelRoundEnd() {
      if (!IS_NATIVE || !NativePlugins.LocalNotifications) return;
      try { await NativePlugins.LocalNotifications.cancel({ notifications: [{ id: 9001 }] }); } catch (e) {}
    }
    function nativeHaptic() {
      if (!IS_NATIVE || !NativePlugins.Haptics) return;
      try { NativePlugins.Haptics.vibrate({ duration: 600 }); } catch (e) {}
    }

    function startTimer() {
      track('timer_started');
      // Read custom input in case user typed without selecting preset
      const customVal = parseInt(document.getElementById('timerCustomInput').value);
      if (!isNaN(customVal) && customVal >= 1) timerState.duration = customVal * 60;

      closeTimerSetup();
      timerState.remaining = timerState.duration;
      timerState.endAt = Date.now() + timerState.duration * 1000;
      timerState.running = true;
      timerState.roundDone = false;
      timerState.warned = false;
      timerState.rounds = [];
      timerState.roundNum = 1;

      unlockAudio(); // user tap = chance to unlock iOS audio for the horn later
      nativeNotifyPermission();
      // Sequenced: the notification prompt must be answered before we ask
      // about exact alarms, or two system prompts stack up and the reschedule
      // after granting runs while notifications are still undecided.
      nativeScheduleRoundEnd(timerState.endAt, timerState.roundNum).then(ensureExactAlarms);

      document.getElementById('rollTimerFab').style.display = 'none';
      document.getElementById('rollTimerPanel').classList.add('visible');
      updateTimerUI();
      timerState.interval = setInterval(tickTimer, 1000);
    }

    function tickTimer() {
      if (!timerState.running) return;
      // Wall-clock based: stays accurate even if the OS throttles JS timers
      // (locked screen, background tab) — recalculates true remaining on every tick
      timerState.remaining = Math.max(0, Math.ceil((timerState.endAt - Date.now()) / 1000));

      if (timerState.remaining <= 30 && timerState.remaining > 0 && !timerState.warned) {
        timerState.warned = true;
        playWarning();
      }
      if (timerState.remaining === 0) {
        timerState.running = false;
        timerState.roundDone = true;
        clearInterval(timerState.interval);
        playRoundEnd();
        nativeHaptic();
      }
      updateTimerUI();
    }

    // When the app returns to the foreground, snap the timer UI to true time immediately
    document.addEventListener('visibilitychange', () => {
      if (!document.hidden && timerState.running) tickTimer();
    });

    function updateTimerUI() {
      const panel = document.getElementById('rollTimerPanel');
      if (!panel) return;
      const { remaining, duration, roundNum, rounds, roundDone, running } = timerState;
      const done = roundDone;
      const warning = !done && remaining <= 30 && remaining > 0;
      const progress = duration > 0 ? remaining / duration : 0;
      const offset = (TIMER_CIRC * (1 - progress)).toFixed(1);
      const ringClass = done ? 'done' : warning ? 'warning' : '';
      const timeClass = done ? 'done' : warning ? 'warning' : '';
      const totalElapsed = rounds.reduce((a, r) => a + r.actual, 0) + (duration - remaining);
      const roundsLabel = rounds.length > 0
        ? `${rounds.length} done · ${timerFmt(totalElapsed)} total`
        : '';

      panel.innerHTML = `
        <div class="timer-panel-top">
          <div class="timer-round-label">Round ${roundNum}</div>
          <div class="timer-total-label">${roundsLabel}</div>
        </div>
        <div class="timer-main">
          <div class="timer-ring-wrap">
            <svg class="timer-ring" viewBox="0 0 88 88">
              <circle class="timer-ring-bg" cx="44" cy="44" r="38"/>
              <circle class="timer-ring-fill ${ringClass}" cx="44" cy="44" r="38"
                stroke-dasharray="${TIMER_CIRC.toFixed(1)}"
                stroke-dashoffset="${offset}"/>
            </svg>
            <div class="timer-ring-text">${timerFmt(remaining)}</div>
          </div>
          <div class="timer-info">
            <div class="timer-big-time ${timeClass}">${timerFmt(remaining)}</div>
            <div class="timer-status-msg">${
              done ? 'Round complete!' :
              warning ? '30 seconds left' :
              `${timerFmt(duration)} rounds`
            }</div>
          </div>
        </div>
        <div class="timer-actions">
          ${done ? `
            <button class="timer-act-btn next" onclick="timerNewRound()">▶ Next Round</button>
            <button class="timer-act-btn primary" onclick="timerDone()">Done Rolling</button>
          ` : `
            <button class="timer-act-btn secondary" onclick="timerCancel()">✕ Cancel</button>
            <button class="timer-act-btn green" onclick="timerDone()">Done Rolling</button>
          `}
        </div>
      `;
    }

    function timerNewRound() {
      timerState.rounds.push({ actual: timerState.duration });
      timerState.roundNum++;
      timerState.remaining = timerState.duration;
      timerState.endAt = Date.now() + timerState.duration * 1000;
      timerState.running = true;
      timerState.roundDone = false;
      timerState.warned = false;
      unlockAudio();
      nativeScheduleRoundEnd(timerState.endAt, timerState.roundNum);
      clearInterval(timerState.interval);
      timerState.interval = setInterval(tickTimer, 1000);
      updateTimerUI();
    }

    function timerDone() {
      clearInterval(timerState.interval);
      timerState.running = false;
      nativeCancelRoundEnd();
      // Log the current round (full if done naturally, partial if stopped early)
      const actual = timerState.roundDone
        ? timerState.duration
        : timerState.duration - timerState.remaining;
      if (actual > 0) timerState.rounds.push({ actual });
      document.getElementById('rollTimerPanel').classList.remove('visible');
      openTimerLog();
    }

    function timerCancel() {
      clearInterval(timerState.interval);
      timerState.running = false;
      nativeCancelRoundEnd();
      timerState.roundDone = false;
      timerState.rounds = [];
      timerState.roundNum = 1;
      document.getElementById('rollTimerPanel').classList.remove('visible');
      document.getElementById('rollTimerFab').style.display = '';
    }

    function openTimerLog() {
      const totalRounds = timerState.rounds.length;
      const totalSecs = timerState.rounds.reduce((a, r) => a + r.actual, 0);
      const totalMin = Math.round(totalSecs / 60);
      const splits = timerState.rounds.map(r => timerFmt(r.actual)).join(' · ');

      // Pre-seed logState so save functions can reuse it
      logState = {
        classType: 'Sparring', position: '', rounds: totalRounds,
        subsUsed: [], subsAgainst: [], sweeps: 0, escapes: 0,
        subPos: { used: {}, against: {} },
      };

      const inner = document.getElementById('timerLogInner');
      inner.innerHTML = `
        <div class="timer-log-handle"></div>
        <div class="timer-log-header">
          <div>
            <div class="timer-log-title">How did it go?</div>
            <div class="timer-log-summary">${totalRounds} round${totalRounds !== 1 ? 's' : ''} · ${totalMin} min · ${splits}</div>
          </div>
          <button class="timer-skip-btn" onclick="timerSkipLog()">Skip & Log</button>
        </div>

        <div class="form-group">
          <div class="form-label">Position</div>
          <div class="pill-group" id="timerPosGroup">
            ${ALL_POSITIONS.map(p => `<button class="log-pill" onclick="timerSetPos('${p}',this)">${p}</button>`).join('')}
          </div>
        </div>

        <div class="form-group">
          <div class="form-label">Submissions used <span class="form-hint">use + if you hit it more than once</span></div>
          <div class="pill-group" data-other="timerOtherSub(this,'used')">
            ${subPillsHTML('used', "timerOtherSub(this,'used')")}
          </div>
        </div>

        <div class="form-group">
          <div class="form-label">Submissions against me <span class="form-hint">use + if it got you more than once</span></div>
          <div class="pill-group" data-other="timerOtherSub(this,'against')">
            ${subPillsHTML('against', "timerOtherSub(this,'against')")}
          </div>
        </div>

        <div class="form-group">
          <div class="form-label">Notes (optional)</div>
          <div class="mini-mic-wrap">
            <textarea id="timerLogNotes" class="log-input" rows="2" placeholder="Anything worth remembering?"></textarea>
            <button type="button" class="mini-mic" onclick="dictateInto('timerLogNotes', this)" aria-label="Dictate notes"><svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1 1.93c-3.94-.49-7-3.85-7-7.93H5c0 3.53 2.61 6.43 6 6.92V19h2v-3.08c3.39-.49 6-3.39 6-6.92h1c0 4.08-3.06 7.44-7 7.93V19h-2v-3.07z"/></svg></button>
          </div>
        </div>

        <button class="submit-btn" onclick="timerSaveLog()">Log Session</button>
      `;
      document.getElementById('timerLogSheet').classList.add('open');
      document.body.style.overflow = 'hidden';
    }

    function timerSetPos(p, btn) {
      logState.position = logState.position === p ? '' : p;
      document.querySelectorAll('#timerPosGroup .log-pill').forEach(b => b.classList.remove('active'));
      if (logState.position) btn.classList.add('active');
    }

    // "Other" on the Roll Timer sheet: toggle an inline field for a new submission
    function timerOtherSub(btn, list) {
      const rowId = `timer-custom-sub-row-${list}`;
      const existing = document.getElementById(rowId);
      if (existing) { existing.remove(); return; }
      const row = document.createElement('div');
      row.id = rowId;
      row.className = 'custom-sub-row';
      row.innerHTML = `
        <input id="timer-custom-sub-input-${list}" class="custom-sub-input" type="text" placeholder="e.g. Loop Choke…" maxlength="40"
          onkeydown="if(event.key==='Enter')confirmTimerCustomSub('${list}')">
        <button class="custom-sub-add-btn" onclick="confirmTimerCustomSub('${list}')">Add</button>
        <button class="custom-sub-cancel-btn" onclick="document.getElementById('${rowId}').remove()">✕</button>
      `;
      btn.closest('.form-group').appendChild(row);
      setTimeout(() => document.getElementById(`timer-custom-sub-input-${list}`)?.focus(), 50);
    }

    function confirmTimerCustomSub(list) {
      const input = document.getElementById(`timer-custom-sub-input-${list}`);
      const name = input?.value?.trim();
      if (!name) return;
      // Save to localStorage if new
      if (!ALL_SUBS.includes(name)) {
        customSubs.push(name);
        try { localStorage.setItem('flowmora_custom_subs', JSON.stringify(customSubs)); } catch(e) {}
        ALL_SUBS = [...BASE_SUBS, ...customSubs, 'Other'];
      }
      // Add to logState selection
      const arr = list === 'used' ? logState.subsUsed : logState.subsAgainst;
      if (!arr.includes(name)) arr.push(name);
      // Redraw the group so the new submission appears, selected, before "Other"
      const pillGroup = input.closest('.form-group').querySelector('.pill-group');
      if (pillGroup) pillGroup.innerHTML = subPillsHTML(list, pillGroup.dataset.other);
      // Remove the input row
      document.getElementById(`timer-custom-sub-row-${list}`)?.remove();
    }

    async function timerSaveLog() {
      await _saveTimerSession(document.getElementById('timerLogNotes')?.value?.trim() || '');
    }

    async function timerSkipLog() {
      await _saveTimerSession('');
    }

    async function _saveTimerSession(notes) {
      // Always clean up UI regardless of whether save succeeds
      function cleanup() {
        timerState.rounds = []; timerState.roundNum = 1;
        timerState.roundDone = false; timerState.running = false;
        clearInterval(timerState.interval);
        document.getElementById('timerLogSheet').classList.remove('open');
        document.getElementById('rollTimerPanel').classList.remove('visible');
        document.body.style.overflow = '';
        document.getElementById('rollTimerFab').style.display = '';
      }

      if (!currentUser) { cleanup(); return; }

      const totalSecs = timerState.rounds.reduce((a, r) => a + r.actual, 0);
      const session = {
        id: crypto.randomUUID(),
        user_id: currentUser.id,
        position: logState.position || 'General',
        problem: '', notes,
        date: new Date().toLocaleDateString(),
        drills: [], weakness_flag: '',
        class_type: 'Sparring',
        sweeps: 0, escapes: 0,
        submissions_used: logState.subsUsed,
        submissions_against: logState.subsAgainst,
        rolling_rounds: {
          rounds: timerState.rounds.length,
          wins: 0, losses: 0,
          minutes: Math.round(totalSecs / 60),
          subPos: logState.subPos || { used: {}, against: {} }
        },
        source: 'timer'
      };

      try {
        const saved = await insertSessionSafe(session);
        cachedSessions.unshift({ ...session, weaknessFlag: '', strengthFlag: '', rollingRounds: session.rolling_rounds });
        if (saved) requestDebrief(session); // fire-and-forget AI insight
        else alert('No connection — your session is saved on this phone and will sync automatically when you\'re back online.');
      } catch(e) {
        console.error('Timer session save failed:', e);
      } finally {
        cleanup();
        renderDashboard();
        showView('progress');
      }
    }
  </script>

  <!-- First-run onboarding -->
  <div id="onboardModal" class="onboard-modal">
    <div class="onboard-card" id="onboardCard"></div>
  </div>

  <!-- Auth modal -->
  <div id="authModal" class="auth-modal">
    <div class="auth-card">
      <img src="/Flowmora.svg" class="auth-logo-img" alt="Flowmora">
      <div class="auth-tagline">your ai mentor on the mats</div>
      <div class="auth-tabs">
        <button class="auth-tab active" onclick="switchAuthTab('signin')">Sign In</button>
        <button class="auth-tab" onclick="switchAuthTab('signup')">Sign Up</button>
      </div>
      <div class="auth-error" id="authError"></div>
      <div class="form-group">
        <label class="form-label">Email</label>
        <input type="email" id="authEmail" class="log-input" placeholder="you@example.com">
      </div>
      <div class="form-group">
        <label class="form-label">Password</label>
        <div class="pw-wrap">
          <input type="password" id="authPassword" class="log-input" placeholder="••••••••">
          <button type="button" class="pw-eye" onclick="togglePw('authPassword', this)" aria-label="Show password"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button>
        </div>
      </div>
      <div class="form-group" id="ageGroup" style="display:none;">
        <label class="form-label">Date of birth</label>
        <div style="display:flex;gap:8px;">
          <select id="birthMonth" class="log-input" style="appearance:none;-webkit-appearance:none;" onchange="updateAgeGate()"></select>
          <select id="birthYear" class="log-input" style="appearance:none;-webkit-appearance:none;" onchange="updateAgeGate()"></select>
        </div>
        <label id="guardianRow" class="age-guardian" style="display:none;"><input type="checkbox" id="guardianOk"> A parent or guardian has read and agreed to the Terms for me</label>
        <label id="marketingRow" class="age-guardian" style="display:none;"><input type="checkbox" id="marketingOk"> Email me training tips, product news and offers (optional)</label>
      </div>
      <button class="submit-btn" id="authBtn" onclick="handleAuth()">Sign In</button>
      <button onclick="sendPasswordReset()" style="display:block;width:100%;background:none;border:none;color:#888;font-size:12.5px;padding:0.6rem;margin-top:0.25rem;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;">Forgot password?</button>
      <div style="font-size:11px;color:#555;text-align:center;line-height:1.5;margin-top:0.5rem;">By signing in or creating an account you agree to the<br><a href="/terms.html" onclick="if(typeof openExternal==='function'&&IS_NATIVE){event.preventDefault();openExternal('https://flowmorajiujitsu.com/terms.html');}" style="color:#888;">Terms of Service</a> and <a href="/privacy.html" onclick="if(typeof openExternal==='function'&&IS_NATIVE){event.preventDefault();openExternal('https://flowmorajiujitsu.com/privacy.html');}" style="color:#888;">Privacy Policy</a></div>
      <div class="auth-success" id="authSuccess"></div>
    </div>
  </div>

  <!-- Log session modal -->
  <div id="logModal" class="video-modal">
    <div class="video-overlay" onclick="hideLogModal()"></div>
    <div class="log-form-wrap" id="logModalInner">
      <!-- content rendered by renderLogModal() -->
    </div>
  </div>

  <!-- Roll Timer FAB -->
  <button class="roll-timer-fab" id="rollTimerFab" onclick="openTimerSetup()">
    Roll Timer
  </button>

  <!-- Timer setup backdrop (tap to dismiss) -->
  <div class="timer-setup-backdrop" id="timerSetupBackdrop" onclick="closeTimerSetup()"></div>

  <!-- Timer setup sheet -->
  <div class="timer-setup-sheet" id="timerSetupSheet">
    <div class="timer-setup-topbar">
      <div class="timer-sheet-handle" style="margin:0;flex:1;"></div>
      <button class="timer-setup-close" onclick="closeTimerSetup()">✕</button>
    </div>
    <div class="timer-duration-label" style="margin-top:0.75rem;">Round duration</div>
    <div class="timer-presets">
      <button class="timer-preset-btn" onclick="setTimerPreset(3,this)">3m</button>
      <button class="timer-preset-btn" onclick="setTimerPreset(5,this)">5m</button>
      <button class="timer-preset-btn active" onclick="setTimerPreset(6,this)">6m</button>
      <button class="timer-preset-btn" onclick="setTimerPreset(7,this)">7m</button>
      <button class="timer-preset-btn" onclick="setTimerPreset(10,this)">10m</button>
    </div>
    <div class="timer-custom-row">
      <span class="timer-custom-label">Custom:</span>
      <input type="number" class="timer-custom-input" id="timerCustomInput" value="6" min="1" max="60" oninput="onTimerCustomChange(this.value)">
      <span class="timer-custom-unit">min</span>
    </div>
    <button class="timer-start-btn" onclick="startTimer()">▶ Start Round 1</button>
  </div>

  <!-- Active timer panel -->
  <div class="roll-timer-panel" id="rollTimerPanel"></div>

  <!-- Post-roll log sheet -->
  <div class="timer-log-sheet" id="timerLogSheet">
    <div class="timer-log-backdrop" onclick="timerSkipLog()"></div>
    <div class="timer-log-inner" id="timerLogInner"></div>
  </div>

  <!-- Achievement toast -->
  <div id="achievementToast">
    <img class="toast-badge-img" id="toastImg" src="" alt="">
    <div class="toast-text">
      <div class="toast-label">Achievement Unlocked</div>
      <div class="toast-name" id="toastName"></div>
      <div class="toast-desc" id="toastDesc"></div>
    </div>
  </div>

  <!-- Bottom navigation -->
  <nav class="bottom-nav" id="bottomNav">
    <button class="nav-item active" id="nav-dashboard" onclick="showView('dashboard')">
      <svg viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
      Home
    </button>
    <button class="nav-item" id="nav-mentor" onclick="showView('mentor')">
      <svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>
      Mentor
    </button>
    <button class="nav-item" id="nav-calendar" onclick="showView('calendar')">
      <svg viewBox="0 0 24 24"><path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"/></svg>
      Calendar
    </button>
    <button class="nav-item" id="nav-skills" onclick="showView('skills')">
      <svg viewBox="0 0 24 24"><path d="M12 5L5.5 18.5M12 5l6.5 13.5M5.5 18.5h13" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/><circle cx="12" cy="5" r="2.7"/><circle cx="5.5" cy="18.5" r="2.7"/><circle cx="18.5" cy="18.5" r="2.7"/></svg>
      Skills
    </button>
    <button class="nav-item" id="nav-nemesis" onclick="showView('nemesis')">
      <svg viewBox="0 0 24 24"><path d="M14.5 17.5L3 6V3h3l11.5 11.5M13 19l6-6M16 16l4 4M19 21l2-2M14.5 6.5L18 3h3v3l-3.5 4M5 14l4 4M7 17l-3 3M3 19l2 2" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
      Nemesis
    </button>
    <button class="nav-item" id="nav-progress" onclick="showView('progress')">
      <svg viewBox="0 0 24 24"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 18H6V4h2v8l2.5-1.5L13 12V4h5v16z"/></svg>
      Journal
    </button>
  </nav>

  <!-- Profile modal -->
  <div id="profileModal" class="profile-modal" onclick="if(event.target===this)closeProfile()">
    <div class="profile-card">
      <div class="profile-header">
        <div class="profile-title">Your Profile</div>
        <button onclick="closeProfile()" style="background:none;border:none;color:#666;font-size:20px;cursor:pointer;">✕</button>
      </div>
      <div class="form-group">
        <label class="form-label">Display name</label>
        <input type="text" id="profileName" class="log-input" placeholder="e.g. Alex">
      </div>
      <div class="form-group">
        <label class="form-label">Belt</label>
        <div class="belt-selector">
          <div class="belt-option white" data-belt="white" onclick="selectBelt('white')">White</div>
          <div class="belt-option blue selected" data-belt="blue" onclick="selectBelt('blue')">Blue</div>
          <div class="belt-option purple" data-belt="purple" onclick="selectBelt('purple')">Purple</div>
          <div class="belt-option brown" data-belt="brown" onclick="selectBelt('brown')">Brown</div>
          <div class="belt-option black" data-belt="black" onclick="selectBelt('black')">Black</div>
        </div>
      </div>
      <div class="form-group" style="margin-top:0.5rem;">
        <label class="form-label">Stripes</label>
        <div class="stripe-selector">
          <div class="stripe-sel-dot" onclick="selectStripes(1)" title="1 stripe"></div>
          <div class="stripe-sel-dot" onclick="selectStripes(2)" title="2 stripes"></div>
          <div class="stripe-sel-dot" onclick="selectStripes(3)" title="3 stripes"></div>
          <div class="stripe-sel-dot" onclick="selectStripes(4)" title="4 stripes"></div>
        </div>
        <div style="font-size:11px;color:#444;margin-top:4px;">Tap a dot to set stripes (tap active dot to remove)</div>
      </div>
      <div class="form-group" style="margin-top:1rem;">
        <label class="form-label">Years training</label>
        <input type="number" id="profileYears" class="log-input" placeholder="e.g. 3" min="0" max="50" style="width:100px;">
      </div>
      <div class="form-group">
        <label class="form-label">Academy / gym (optional)</label>
        <input type="text" id="profileGym" class="log-input" placeholder="e.g. Gracie Barra...">
      </div>
      <div class="form-group">
        <label class="form-label">Target promotion date (optional)</label>
        <input type="date" id="profileTargetPromotion" class="log-input">
      </div>
      <div class="form-group" style="margin-top:1rem;">
        <label class="form-label">Weekly training goal</label>
        <div style="display:flex;gap:6px;margin-top:0.4rem;flex-wrap:wrap;">
          <button class="log-pill sub-pill wg-pill" data-goal="1" onclick="selectWeeklyGoal(1)">1</button>
          <button class="log-pill sub-pill wg-pill" data-goal="2" onclick="selectWeeklyGoal(2)">2</button>
          <button class="log-pill sub-pill wg-pill active" data-goal="3" onclick="selectWeeklyGoal(3)">3</button>
          <button class="log-pill sub-pill wg-pill" data-goal="4" onclick="selectWeeklyGoal(4)">4</button>
          <button class="log-pill sub-pill wg-pill" data-goal="5" onclick="selectWeeklyGoal(5)">5</button>
          <button class="log-pill sub-pill wg-pill" data-goal="6" onclick="selectWeeklyGoal(6)">6</button>
          <button class="log-pill sub-pill wg-pill" data-goal="7" onclick="selectWeeklyGoal(7)">7</button>
        </div>
        <div style="font-size:11px;color:#444;margin-top:4px;">Sessions per week</div>
      </div>
      <button class="profile-save-btn" id="profileSaveBtn" onclick="saveProfile()">Save profile</button>
      <div class="profile-saved" id="profileSaved">Profile saved!</div>

      <div style="border-top:0.5px solid rgba(255,255,255,0.08);margin-top:1.5rem;padding-top:1.25rem;">
        <div class="section-title" style="margin-bottom:0.75rem;">Account</div>
        <div style="font-size:12px;color:#666;margin-bottom:1rem;">Signed in as <span id="profileEmail" style="color:#aaa;"></span></div>
        <div id="subscriptionRow" style="margin-bottom:1.25rem;"></div>
        <div class="form-group">
          <label class="form-label">New password</label>
          <div class="pw-wrap">
            <input type="password" id="newPassword" class="log-input" placeholder="At least 8 characters" autocomplete="new-password">
            <button type="button" class="pw-eye" onclick="togglePw('newPassword', this)" aria-label="Show password"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Confirm new password</label>
          <div class="pw-wrap">
            <input type="password" id="newPassword2" class="log-input" placeholder="Repeat new password" autocomplete="new-password">
            <button type="button" class="pw-eye" onclick="togglePw('newPassword2', this)" aria-label="Show password"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button>
          </div>
        </div>
        <div id="pwMsg" style="display:none;font-size:12px;margin-bottom:0.5rem;"></div>
        <button class="profile-save-btn" id="pwSaveBtn" style="background:rgba(255,255,255,0.08);margin-top:0.25rem;" onclick="updatePassword()">Update password</button>
        <label style="display:flex;align-items:center;gap:10px;margin-top:1rem;font-size:13px;color:#aaa;cursor:pointer;">
          <input type="checkbox" id="partnerLinksToggle" onchange="togglePartnerLinks(this.checked)" style="width:16px;height:16px;accent-color:#e63b30;">
          Show partner recommendations
        </label>
        <div style="font-size:11px;color:#666;margin-top:4px;line-height:1.5;">Occasional instructional suggestions matched to what you're working on. Flowmora may earn a commission.</div>
        <label style="display:flex;align-items:center;gap:10px;margin-top:1rem;font-size:13px;color:#aaa;cursor:pointer;">
          <input type="checkbox" id="marketingToggle" onchange="toggleMarketing(this)" style="width:16px;height:16px;accent-color:#e63b30;">
          Email me tips and offers
        </label>
        <div style="font-size:11px;color:#666;margin-top:4px;line-height:1.5;">Training tips, product news and partner offers. For users 18 and over. Account and security emails still come through.</div>
        <button onclick="openPartnersSheet('settings')" style="display:block;width:100%;background:none;border:0.5px solid rgba(255,255,255,0.12);border-radius:8px;color:#aaa;font-size:13px;font-weight:600;padding:0.7rem;margin-top:0.75rem;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;">Partner discounts</button>

        <button onclick="closeProfile();showOnboarding(true);" style="display:block;width:100%;background:none;border:0.5px solid rgba(255,255,255,0.12);border-radius:8px;color:#aaa;font-size:13px;font-weight:600;padding:0.7rem;margin-top:1rem;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;">Replay the intro tour</button>
        <button onclick="closeProfile();signOut();" style="display:block;width:100%;background:none;border:0.5px solid rgba(230,59,48,0.35);border-radius:8px;color:#e87d75;font-size:13px;font-weight:600;padding:0.7rem;margin-top:0.5rem;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;">Sign out</button>

        <div style="margin-top:1.5rem;padding-top:1rem;border-top:0.5px solid rgba(255,255,255,0.07);">
          <button id="delAcctReveal" onclick="revealDeleteAccount()" style="display:block;width:100%;background:none;border:none;color:#666;font-size:12px;padding:0.4rem;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;">Delete my account…</button>
          <div id="delAcctConfirm" style="display:none;">
            <div style="font-size:12.5px;color:#e87d75;line-height:1.5;margin:0.5rem 0 0.75rem;">This permanently deletes your account, all training sessions, rivals, and progress. A web (card) subscription is cancelled automatically. <strong>An App Store or Google Play subscription is not</strong> — cancel it in your store account's subscription settings first. <strong>This cannot be undone.</strong></div>
            <label class="form-label" style="font-size:11px;">Type DELETE to confirm</label>
            <input type="text" id="delAcctInput" class="log-input" autocomplete="off" autocapitalize="characters" placeholder="DELETE">
            <div id="delAcctMsg" style="display:none;font-size:12px;color:#e24b4a;margin-top:0.4rem;"></div>
            <button id="delAcctBtn" onclick="deleteAccount()" style="display:block;width:100%;background:linear-gradient(135deg,#e63b30,#c22a20);border:none;border-radius:8px;color:#fff;font-size:13px;font-weight:700;padding:0.7rem;margin-top:0.6rem;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;">Permanently delete my account</button>
            <button onclick="hideDeleteAccount()" style="display:block;width:100%;background:none;border:none;color:#888;font-size:12px;padding:0.5rem;margin-top:0.25rem;cursor:pointer;font-family:inherit;">Never mind</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Floating skills back button -->
  <button class="skills-back-float" id="skillsBackFloat" onclick="closePosition()">← Back</button>

  <!-- Tech sheet backdrop -->
  <div class="tech-sheet-backdrop" id="techSheetBackdrop" onclick="closeTechniqueDetail()"></div>

  <!-- Tech sheet -->
  <div id="techSheet" class="tech-sheet">
    <div id="techSheetContent"></div>
  </div>

  <!-- Video modal -->
  <div id="videoModal" class="video-modal">
    <div class="video-overlay" onclick="closeVideo()"></div>
    <div class="video-player-wrap">
      <button class="video-close" onclick="closeVideo()">✕</button>
      <div class="video-ratio">
        <iframe id="videoIframe" src=""
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen referrerpolicy="strict-origin-when-cross-origin">
        </iframe>
      </div>
    </div>
  </div>
</body>
</html>