<!DOCTYPE html>
<html lang="en">
<head>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-M48MNC26X4"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-M48MNC26X4');
    </script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- SEO: Added for better compatibility with older IE versions -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO: Optimized Title Tag - Concise, keyword-rich, and includes branding (approx. 66 chars) -->
    <title>Retirement Calculator | Secure Your Future | retirement-calculate.com</title>

    <!-- SEO: Optimized Meta Description - Compelling, includes keywords, and a clear value proposition (approx. 146 chars) -->
    <meta name="description" content="Use our free retirement calculator to project savings, estimate income, and plan a secure financial future. Easy, comprehensive, and user-friendly.">

    <!-- SEO: Meta Keywords - While less impactful for Google, still good for some engines and internal site search. Kept concise. -->
    <meta name="keywords" content="retirement calculator, retirement planning, 401k calculator, nest egg, retirement savings, financial planning, investment growth, retirement income, secure future, financial future">

    <link rel="canonical" href="https://retirement-calculate.com/">

    <!-- SEO: Favicon Declarations - Replace placeholders with actual paths to your favicon files -->
    <link rel="icon" href="/favicon.ico" sizes="any">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- Recommended size: 180x180 -->
    <link rel="manifest" href="/site.webmanifest"> <!-- For Progressive Web App capabilities -->
    <meta name="theme-color" content="#3B82F6"> <!-- SEO: Theme color for browser UI on mobile, using primary color -->


    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://retirement-calculate.com/">
    <!-- SEO: OG Title mirrors the main title for consistency -->
    <meta property="og:title" content="Retirement Calculator | Secure Your Future | retirement-calculate.com">
    <!-- SEO: OG Description - Concise for social sharing -->
    <meta property="og:description" content="Estimate your retirement savings growth, income, and see if you're on track for a secure financial future.">
    <!-- SEO: IMPORTANT - Replace with a compelling, high-quality image (e.g., 1200x630px) -->
    <meta property="og:image" content="https://retirement-calculate.com/assets/images/retirement-calculator-social-preview.png">
    <meta property="og:image:alt" content="Visual representation of retirement planning and savings growth chart"> <!-- SEO: Alt text for OG image -->
    <meta property="og:site_name" content="retirement-calculate.com">
    <meta property="og:locale" content="en_US">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://retirement-calculate.com/">
    <!-- SEO: Twitter Title mirrors the main title -->
    <meta name="twitter:title" content="Retirement Calculator | Secure Your Future | retirement-calculate.com">
    <!-- SEO: Twitter Description - Concise for social sharing -->
    <meta name="twitter:description" content="Estimate your retirement savings growth, income, and see if you're on track for a secure financial future.">
    <!-- SEO: IMPORTANT - Replace with a compelling, high-quality image (e.g., 1200x675px or same as OG) -->
    <meta name="twitter:image" content="https://retirement-calculate.com/assets/images/retirement-calculator-social-preview.png">
    <meta name="twitter:image:alt" content="Retirement calculator interface showing financial projection graphs"> <!-- SEO: Alt text for Twitter image -->
    <!-- <meta name="twitter:site" content="@YourTwitterHandle"> --> <!-- SEO: Add your Twitter handle if you have one -->
    <!-- <meta name="twitter:creator" content="@YourTwitterHandle"> --> <!-- SEO: Add your Twitter handle if you have one -->

    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3.0.1/dist/chartjs-plugin-annotation.min.js" defer></script>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">

    <!-- SEO: Structured Data (JSON-LD) - Helps search engines understand your content deeply -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      "name": "Retirement Calculator | Secure Your Future | retirement-calculate.com",
      "description": "Use our free retirement calculator to project savings, estimate income, and plan a secure financial future. Easy, comprehensive, and user-friendly.",
      "url": "https://retirement-calculate.com/",
      "inLanguage": "en-US",
      "isPartOf": {
        "@type": "WebSite",
        "url": "https://retirement-calculate.com/",
        "name": "retirement-calculate.com"
      },
      "mainEntity": {
        "@type": "SoftwareApplication",
        "name": "Retirement Calculator",
        "applicationCategory": "FinanceApplication",
        "applicationSubCategory": "FinancialCalculator",
        "operatingSystem": "Web Browser",
        "softwareHelp": {
            "@type": "CreativeWork",
            "name": "Retirement Calculator Usage Guide",
            "description": "Input your current financial details (age, savings), savings plan (monthly contributions), and retirement goals (age, desired income) to receive a personalized retirement projection. The calculator estimates your nest egg growth, future income needs adjusted for inflation, and how long your funds might last. Results are visualized with an interactive chart."
        },
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD",
          "availability": "https://schema.org/OnlineOnly"
        },
        "keywords": "retirement calculator, retirement planning, 401k calculator, nest egg, retirement savings, financial planning, investment growth, retirement income, future financial planning",
        "author": {
            "@type": "Organization",
            "name": "retirement-calculate.com",
            "url": "https://retirement-calculate.com/"
        },
        "publisher": {
            "@type": "Organization",
            "name": "retirement-calculate.com",
            "url": "https://retirement-calculate.com/",
            "logo": {
              "@type": "ImageObject",
              "url": "https://retirement-calculate.com/assets/images/logo.png", /* SEO: Replace with your actual logo URL (e.g., 112x112px or larger, square) */
              "width": "112", /* SEO: Specify logo dimensions */
              "height": "112"
            }
        },
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https://retirement-calculate.com/"
        }
      },
      "breadcrumb": {
        "@type": "BreadcrumbList",
        "itemListElement": [{
          "@type": "ListItem",
          "position": 1,
          "name": "Home",
          "item": "https://retirement-calculate.com/"
        }]
      }
    }
    </script>

    <style>
        /* CSS remains the same as provided, it's well-structured. */
        /* SEO: Consider minifying this CSS for production if it becomes very large, though for a single page, inline can be performant. */
        :root {
            --primary-color: #3B82F6;      /* Modern Blue */
            --secondary-color: #10B981;    /* Fresh Green */
            --accent-color: #F59E0B;       /* Warm Amber */
            --bg-color: #F9FAFB;           /* Very Light Gray (Tailwind gray-50) */
            --card-bg-color: #FFFFFF;      /* White */
            --text-color: #1F2937;         /* Dark Slate Gray (Tailwind gray-800) */
            --light-text-color: #6B7280;   /* Medium Gray (Tailwind gray-500) */
            --border-color: #D1D5DB;       /* Light Gray (Tailwind gray-300) */
            
            --danger-color: #EF4444;       /* Red for negative/errors (Tailwind red-500) */
            --danger-bg-color: #FEE2E2;    /* Light red bg (Tailwind red-100) */
            --danger-text-color: #991B1B;  /* Dark red text (Tailwind red-800) */
            --danger-border-color: #FECACA;/* Light red border (Tailwind red-200) */

            --success-bg-color: #D1FAE5;    /* Light green bg (Tailwind emerald-100) */
            --success-text-color: #065F46;  /* Dark green text (Tailwind emerald-800) */
            --success-border-color: #A7F3D0;/* Light green border (Tailwind emerald-200) */

            --warning-bg-color: #FEF3C7;    /* Light amber bg (Tailwind amber-100) */
            --warning-text-color: #92400E;  /* Dark amber text (Tailwind amber-700) */
            --warning-border-color: #FDE68A;/* Light amber border (Tailwind amber-200) */
            
            --info-bg-color: #DBEAFE;       /* Light blue bg (Tailwind blue-100) */
            --info-text-color: #1E40AF;     /* Dark blue text (Tailwind blue-800) */
            --info-border-color: #BFDBFE;   /* Light blue border (Tailwind blue-200) */


            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --border-radius: 8px;
            --mobile-padding: 15px;
            --desktop-padding: 25px;

            /* Fonts */
            --font-heading: 'Nunito', sans-serif;
            --font-body: 'Inter', sans-serif;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-body);
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            padding: var(--mobile-padding);
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 20px auto;
            background-color: transparent; /* Ensure container doesn't obscure body bg */
        }

        header.site-header {
            text-align: center;
            margin-bottom: 30px;
            padding: 25px 20px;
            background-color: var(--card-bg-color);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
        }

        header.site-header h1 { /* SEO: The H1 is critical for the main topic */
            font-family: var(--font-heading);
            color: var(--primary-color);
            font-size: clamp(2em, 5vw, 3em);
            font-weight: 800; 
            margin-bottom: 10px;
        }

        header.site-header p { /* SEO: This acts as a sub-heading/tagline */
            color: var(--light-text-color);
            font-size: clamp(0.95em, 2.5vw, 1.15em);
            max-width: 700px;
            margin: 0 auto;
        }

        main {
            width: 100%;
        }
        
        /* SEO: Using <article> is good for semantic content, especially for a self-contained piece like a calculator */
        .calculator-article {
            background-color: var(--card-bg-color);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: var(--desktop-padding);
        }

        .calculator-layout {
            display: grid;
            grid-template-columns: 1fr; 
            gap: 35px;
        }

        @media (min-width: 992px) { 
            .calculator-layout {
                grid-template-columns: 420px 1fr; 
            }
        }
        
        /* SEO: H2s for major sections help structure the content for users and search engines */
        .input-section h2, .results-and-chart-section h2 {
            font-family: var(--font-heading);
            color: var(--primary-color);
            margin-bottom: 25px;
            padding-bottom: 12px;
            border-bottom: 2px solid var(--accent-color);
            font-size: 1.6em;
            font-weight: 700;
        }

        .input-group {
            margin-bottom: 18px;
        }

        .input-group label { /* SEO: Labels for inputs are crucial for accessibility and SEO */
            display: block;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--text-color);
            font-size: 0.9em;
        }

        .input-field-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .input-field-wrapper .prefix, .input-field-wrapper .suffix {
            background-color: #E5E7EB;
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            color: var(--light-text-color);
            font-size: 0.9em;
            line-height: 1.5;
        }
        .input-field-wrapper .prefix {
            border-right: none;
            border-radius: var(--border-radius) 0 0 var(--border-radius);
        }
        .input-field-wrapper .suffix {
            border-left: none;
            border-radius: 0 var(--border-radius) var(--border-radius) 0;
        }

        .input-group input[type="number"],
        .input-group input[type="text"] {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            font-size: 1em;
            font-family: var(--font-body);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            background-color: var(--card-bg-color);
            color: var(--text-color);
        }
        .input-field-wrapper input { 
            border-radius: 0 !important; 
        }
        .input-field-wrapper input.no-left-radius { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
        .input-field-wrapper input.no-right-radius { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }


        .input-group input[type="number"]:focus,
        .input-group input[type="text"]:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
        }
        
        button#calculateBtn {
            display: block;
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, var(--accent-color), #D97706);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            font-size: 1.15em;
            font-family: var(--font-heading);
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 20px;
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
        }

        button#calculateBtn:hover {
            background: linear-gradient(135deg, #D97706, var(--accent-color));
            box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4);
            transform: translateY(-2px);
        }
        button#calculateBtn:active {
            transform: translateY(0px);
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
        }

        .results-summary {
            background-color: #EFF6FF;
            padding: 20px;
            border-radius: var(--border-radius);
            border: 1px solid var(--primary-color);
            margin-bottom: 25px;
        }
        
        .results-summary h3 { /* SEO: H3 for sub-section titles */
            font-family: var(--font-heading);
            color: var(--primary-color);
            margin-bottom: 18px;
            text-align: center;
            font-size: 1.4em;
            font-weight: 700;
        }

        .result-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 9px 0; 
            border-bottom: 1px dashed #BFDBFE;
        }
        .result-item:last-child {
            border-bottom: none;
        }

        .result-item span:first-child {
            font-weight: 500;
            color: var(--text-color);
        }
        .result-item span:last-child {
            font-weight: 600;
            font-size: 1.05em;
            color: var(--primary-color);
        }
        .result-item span.positive { color: var(--secondary-color); }
        .result-item span.negative { color: var(--danger-color); }


        #retirementProjectionMessage {
            font-size: 1.1em;
            font-weight: 500;
            text-align: center;
            padding: 15px;
            border-radius: var(--border-radius);
            margin-top: 20px;
            border-width: 1px;
            border-style: solid;
        }
        .status-ontrack {
            background-color: var(--success-bg-color); 
            color: var(--success-text-color);
            border-color: var(--success-border-color);
        }
        .status-caution {
            background-color: var(--warning-bg-color);
            color: var(--warning-text-color);
            border-color: var(--warning-border-color);
        }
        .status-shortfall {
            background-color: var(--danger-bg-color); 
            color: var(--danger-text-color); 
            border-color: var(--danger-border-color);
        }
        .status-info { 
            background-color: var(--info-bg-color);
            color: var(--info-text-color);
            border-color: var(--info-border-color);
        }


        .chart-container {
            position: relative;
            width: 100%;
            min-height: 300px; 
            background-color: var(--card-bg-color);
            padding: 15px;
            border-radius: var(--border-radius);
            /* SEO: Ensure chart content is accessible, e.g., via data tables if JS is off, or sr-only text. Chart.js often has good defaults. */
        }
        @media (min-width: 768px) {
            .chart-container {
                min-height: 380px;
                 padding: 20px;
            }
        }
        
        footer.site-footer {
            text-align: center;
            margin-top: 35px;
            padding: 25px;
            color: var(--light-text-color);
            font-size: 0.85em;
            background-color: var(--card-bg-color);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
        }

        .tooltip {
            position: relative;
            display: inline-block;
        }
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 230px;
            background-color: var(--text-color);
            color: var(--card-bg-color);
            text-align: left;
            border-radius: 6px;
            padding: 10px 12px;
            position: absolute;
            z-index: 10;
            bottom: 135%;
            left: 50%;
            margin-left: -115px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 0.82em;
            line-height: 1.4;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: var(--text-color) transparent transparent transparent;
        }
        .tooltip:hover .tooltiptext, .tooltip:focus-within .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
        
        .info-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            background-color: var(--light-text-color);
            color: white;
            border-radius: 50%;
            font-size: 12px;
            font-weight: 700;
            font-family: var(--font-heading);
            cursor: help;
            margin-left: 5px;
            transition: background-color 0.2s;
            font-style: normal;
        }
        .info-icon:hover {
            background-color: var(--primary-color);
        }

        .input-fieldset {
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 20px 20px 20px 20px;
            margin-bottom: 20px;
        }
        .input-fieldset legend { /* SEO: Legends help structure forms, good for A11y */
            font-family: var(--font-heading);
            font-weight: 700;
            color: var(--primary-color);
            padding: 0 10px;
            font-size: 1.1em;
        }

        #chartPlaceholder {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%; 
            min-height: 300px; 
            color: var(--light-text-color);
            text-align: center;
            font-size: 0.95em;
        }
        @media (min-width: 768px) {
            #chartPlaceholder {
                 min-height: 380px;
            }
        }

        @media (max-width: 991px) { 
            .calculator-layout {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 767px) { 
            .container {
                padding-left: var(--mobile-padding);
                padding-right: var(--mobile-padding);
            }
            .calculator-article {
                 padding: var(--mobile-padding);
            }
            .input-fieldset {
                padding: 15px;
            }
             .input-fieldset legend {
                font-size: 1.05em;
            }
            button#calculateBtn {
                font-size: 1.1em;
                padding: 12px;
            }
            .results-summary h3 {
                font-size: 1.25em;
            }
            #retirementProjectionMessage {
                font-size: 1em;
            }
            header.site-header h1 {
                font-size: clamp(1.8em, 6vw, 2.6em);
            }
            header.site-header p {
                font-size: clamp(0.9em, 3vw, 1.05em);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="site-header">
            <h1>Retirement Calculator</h1>
            <p>Estimate your retirement savings, income, and see if you're on track for a secure financial future.</p>
        </header>

        <main>
            <article class="calculator-article">
                <div class="calculator-layout">
                    <section class="input-section" aria-labelledby="input-section-heading">
                        <h2 id="input-section-heading">Your Details & Goals</h2>

                        <fieldset class="input-fieldset">
                            <legend>Current Situation</legend>
                            <div class="input-group">
                                <label for="currentAge">Current Age 
                                    <span class="tooltip" tabindex="0">
                                        <span class="info-icon" aria-hidden="true">i</span>
                                        <!-- SEO A11y: Added role="tooltip" and unique ID for aria-describedby -->
                                        <span class="tooltiptext" id="currentAgeTooltipText" role="tooltip">Your current age in years. This helps determine your investment timeline.</span>
                                    </span>
                                </label>
                                <!-- SEO A11y: Linked aria-describedby to the specific tooltip text ID -->
                                <input type="number" id="currentAge" value="30" min="18" max="90" aria-describedby="currentAgeTooltipText">
                            </div>
                            <div class="input-group">
                                <label for="currentSavings">Current Retirement Savings 
                                    <span class="tooltip" tabindex="0">
                                        <span class="info-icon" aria-hidden="true">i</span>
                                        <span class="tooltiptext" id="currentSavingsTooltipText" role="tooltip">Total amount you've already saved specifically for retirement.</span>
                                    </span>
                                </label>
                                <div class="input-field-wrapper">
                                    <span class="prefix">$</span>
                                    <input type="text" id="currentSavings" value="50,000" oninput="formatCurrency(this)" class="no-left-radius" aria-describedby="currentSavingsTooltipText">
                                </div>
                            </div>
                        </fieldset>

                        <fieldset class="input-fieldset">
                            <legend>Savings Plan</legend>
                            <div class="input-group">
                                <label for="monthlyContribution">Monthly Contribution 
                                    <span class="tooltip" tabindex="0">
                                        <span class="info-icon" aria-hidden="true">i</span>
                                        <span class="tooltiptext" id="monthlyContributionTooltipText" role="tooltip">Amount you plan to save towards retirement each month.</span>
                                    </span>
                                </label>
                                <div class="input-field-wrapper">
                                    <span class="prefix">$</span>
                                    <input type="text" id="monthlyContribution" value="500" oninput="formatCurrency(this)" class="no-left-radius" aria-describedby="monthlyContributionTooltipText">
                                </div>
                            </div>
                            <div class="input-group">
                                <label for="contributionIncreaseRate">Annual Contribution Increase 
                                    <span class="tooltip" tabindex="0">
                                        <span class="info-icon" aria-hidden="true">i</span>
                                        <span class="tooltiptext" id="contributionIncreaseRateTooltipText" role="tooltip">Expected percentage your monthly contributions will increase each year (e.g., due to salary raises). Enter 2 for 2%.</span>
                                    </span>
                                </label>
                                <div class="input-field-wrapper">
                                    <input type="number" id="contributionIncreaseRate" value="2" step="0.1" min="0" max="20" class="no-right-radius" aria-describedby="contributionIncreaseRateTooltipText">
                                    <span class="suffix">%</span>
                                </div>
                            </div>
                        </fieldset>

                        <fieldset class="input-fieldset">
                            <legend>Retirement Goals</legend>
                            <div class="input-group">
                                <label for="retirementAge">Desired Retirement Age 
                                    <span class="tooltip" tabindex="0">
                                        <span class="info-icon" aria-hidden="true">i</span>
                                        <span class="tooltiptext" id="retirementAgeTooltipText" role="tooltip">The age you ideally want to stop working and start living off your savings.</span>
                                    </span>
                                </label>
                                <input type="number" id="retirementAge" value="65" min="40" max="90" aria-describedby="retirementAgeTooltipText">
                            </div>
                            <div class="input-group">
                                <label for="desiredMonthlyIncomeToday">Desired Monthly Income (Today's Dollars) 
                                    <span class="tooltip" tabindex="0">
                                        <span class="info-icon" aria-hidden="true">i</span>
                                        <span class="tooltiptext" id="desiredMonthlyIncomeTooltipText" role="tooltip">How much monthly income you'd like in retirement, expressed in today's purchasing power. This will be adjusted for future inflation.</span>
                                    </span>
                                </label>
                                <div class="input-field-wrapper">
                                    <span class="prefix">$</span>
                                    <input type="text" id="desiredMonthlyIncomeToday" value="4,000" oninput="formatCurrency(this)" class="no-left-radius" aria-describedby="desiredMonthlyIncomeTooltipText">
                                </div>
                            </div>
                            <div class="input-group">
                                <label for="otherMonthlyIncome">Other Monthly Retirement Income (Today's $) 
                                    <span class="tooltip" tabindex="0">
                                        <span class="info-icon" aria-hidden="true">i</span>
                                        <span class="tooltiptext" id="otherIncomeTooltipText" role="tooltip">Income from sources like Social Security, pensions, or rental properties, in today's dollars. Will be inflation-adjusted.</span>
                                    </span>
                                </label>
                                <div class="input-field-wrapper">
                                    <span class="prefix">$</span>
                                    <input type="text" id="otherMonthlyIncome" value="1500" oninput="formatCurrency(this)" class="no-left-radius" aria-describedby="otherIncomeTooltipText">
                                </div>
                            </div>
                            <div class="input-group">
                                <label for="retirementDuration">Retirement Duration (Years) 
                                    <span class="tooltip" tabindex="0">
                                        <span class="info-icon" aria-hidden="true">i</span>
                                        <span class="tooltiptext" id="retirementDurationTooltipText" role="tooltip">How many years you expect your retirement funds to last (e.g., life expectancy minus retirement age).</span>
                                    </span>
                                </label>
                                <input type="number" id="retirementDuration" value="25" min="1" max="50" aria-describedby="retirementDurationTooltipText">
                            </div>
                        </fieldset>

                        <fieldset class="input-fieldset">
                            <legend>Economic Assumptions</legend>
                            <div class="input-group">
                                <label for="preRetirementReturn">Investment Growth Rate (Before Retirement) 
                                    <span class="tooltip" tabindex="0">
                                        <span class="info-icon" aria-hidden="true">i</span>
                                        <span class="tooltiptext" id="preReturnTooltipText" role="tooltip">Your estimated average annual return on investments before you retire (e.g., 7 for 7%).</span>
                                    </span>
                                </label>
                                <div class="input-field-wrapper">
                                    <input type="number" id="preRetirementReturn" value="7" step="0.1" min="0" max="25" class="no-right-radius" aria-describedby="preReturnTooltipText">
                                    <span class="suffix">%</span>
                                </div>
                            </div>
                            <div class="input-group">
                                <label for="postRetirementReturn">Investment Growth Rate (During Retirement) 
                                    <span class="tooltip" tabindex="0">
                                        <span class="info-icon" aria-hidden="true">i</span>
                                        <span class="tooltiptext" id="postReturnTooltipText" role="tooltip">Your estimated average annual return on investments during retirement (often more conservative, e.g., 4 for 4%).</span>
                                    </span>
                                </label>
                                <div class="input-field-wrapper">
                                    <input type="number" id="postRetirementReturn" value="4" step="0.1" min="0" max="15" class="no-right-radius" aria-describedby="postReturnTooltipText">
                                    <span class="suffix">%</span>
                                </div>
                            </div>
                            <div class="input-group">
                                <label for="inflationRate">Expected Annual Inflation Rate 
                                    <span class="tooltip" tabindex="0">
                                        <span class="info-icon" aria-hidden="true">i</span>
                                        <span class="tooltiptext" id="inflationTooltipText" role="tooltip">The average rate at which prices are expected to rise per year (e.g., 2.5 for 2.5%). Affects future purchasing power.</span>
                                    </span>
                                </label>
                                <div class="input-field-wrapper">
                                    <input type="number" id="inflationRate" value="2.5" step="0.1" min="0" max="10" class="no-right-radius" aria-describedby="inflationTooltipText">
                                    <span class="suffix">%</span>
                                </div>
                            </div>
                        </fieldset>
                        
                        <button id="calculateBtn">Calculate My Retirement</button>
                    </section>

                    <section class="results-and-chart-section" aria-labelledby="results-section-heading">
                        <h2 id="results-section-heading">Retirement Projection</h2>
                        <div class="results-summary">
                            <h3 id="key-figures-heading">Key Figures</h3> <!-- SEO A11y: Added ID for potential aria-labelledby if this div were a region -->
                            <div class="result-item">
                                <span>Years to Retirement:</span>
                                <span id="yearsToRetirementVal">-</span>
                            </div>
                            <div class="result-item">
                                <span>Est. Nest Egg at Retirement:</span>
                                <span id="nestEggVal">-</span>
                            </div>
                            <div class="result-item">
                                <span>Desired Monthly Income (at Retirement):</span>
                                <span id="desiredMonthlyIncomeInflatedVal">-</span>
                            </div>
                            <div class="result-item">
                                <span>Other Monthly Income (at Retirement):</span>
                                <span id="otherMonthlyIncomeInflatedVal">-</span>
                            </div>
                            <div class="result-item">
                                <span>Age Funds May Be Depleted:</span>
                                <span id="fundsDepletedAgeVal">-</span>
                            </div>
                            <!-- SEO A11y: aria-live="polite" is good for announcing changes to screen readers -->
                            <div id="retirementProjectionMessage" class="status-info" aria-live="polite" role="status">Enter your details and click "Calculate My Retirement" to see your projection.</div>
                        </div>
                        <div class="chart-container">
                            <!-- SEO A11y: Canvas should have fallback content or aria-label/labelledby -->
                            <canvas id="growthChart" role="img" aria-label="Retirement Savings Growth Projection Chart"></canvas>
                            <div id="chartPlaceholder"><p>Your retirement savings growth and drawdown will appear here after calculation.</p></div>
                        </div>
                    </section>
                </div>
            </article>
        </main>
    </div>

    <footer class="site-footer">
        <p>© <script>document.write(new Date().getFullYear())</script> retirement-calculate.com. All Rights Reserved.</p>
        <!-- SEO: Clear disclaimer is good. Consider linking to more detailed 'Terms of Use' or 'Methodology' pages if they exist. -->
        <p>This calculator is for illustrative and educational purposes only. The results are estimates based on the information you provide and assumptions about future economic conditions. These projections are not financial advice. Consult a qualified financial advisor for personalized advice tailored to your specific situation.</p>
        <!-- SEO: Consider adding Privacy Policy and Terms of Use links if applicable for your site -->
        <!-- <p><a href="/privacy-policy">Privacy Policy</a> | <a href="/terms-of-service">Terms of Service</a></p> -->
    </footer>

    <!-- 
        SEO Technical Recommendation: robots.txt
        Create a 'robots.txt' file in your website's root directory (e.g., https://retirement-calculate.com/robots.txt)
        Example content:
        -----------------------------------
        User-agent: *
        Allow: /
        Disallow: /some-private-directory/  # If you have directories to block

        Sitemap: https://retirement-calculate.com/sitemap.xml
        -----------------------------------
    -->



    <script>
        // JavaScript remains the same as provided.
        // SEO: Ensure JavaScript is not blocking rendering (defer/async used for external scripts is good).
        // SEO: Consider minifying this script for production.
        let growthChartInstance = null;

        function formatCurrency(inputElement) {
            let value = inputElement.value;
            let numericValue = value.replace(/[^0-9]/g, ''); 
            if (numericValue) {
                inputElement.value = parseFloat(numericValue).toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0});
            } else {
                inputElement.value = '';
            }
        }

        function parseCurrencyValue(value) {
            if (typeof value !== 'string') value = String(value);
            return parseFloat(value.replace(/[^0-9.-]+/g,"")) || 0;
        }
        
        function toCurrency(value, withSymbol = true, fractionDigits = 0) {
            const options = { minimumFractionDigits: fractionDigits, maximumFractionDigits: fractionDigits };
            if (withSymbol) {
                options.style = 'currency';
                options.currency = 'USD';
            }
            return value.toLocaleString('en-US', options);
        }

        function validateInputs() {
            const inputs = [
                { id: 'currentAge', min: 18, max: 90, name: 'Current Age' },
                { id: 'retirementAge', min: 18, max: 100, name: 'Retirement Age' },
                { id: 'currentSavings', min: 0, name: 'Current Savings', isCurrency: true },
                { id: 'monthlyContribution', min: 0, name: 'Monthly Contribution', isCurrency: true },
                { id: 'contributionIncreaseRate', min: 0, max: 20, name: 'Contribution Increase Rate' },
                { id: 'desiredMonthlyIncomeToday', min: 1, name: 'Desired Monthly Income', isCurrency: true },
                { id: 'otherMonthlyIncome', min: 0, name: 'Other Monthly Income', isCurrency: true },
                { id: 'retirementDuration', min: 1, max: 50, name: 'Retirement Duration' },
                { id: 'preRetirementReturn', min: 0, max: 25, name: 'Pre-Retirement Return' },
                { id: 'postRetirementReturn', min: 0, max: 15, name: 'Post-Retirement Return' },
                { id: 'inflationRate', min: 0, max: 10, name: 'Inflation Rate' },
            ];

            let errors = [];
            let firstInvalidField = null;
            const dangerBorderColor = getComputedStyle(document.documentElement).getPropertyValue('--danger-color').trim() || 'red';


            inputs.forEach(inputInfo => {
                const el = document.getElementById(inputInfo.id);
                let value = inputInfo.isCurrency ? parseCurrencyValue(el.value) : parseFloat(el.value);
                
                el.style.borderColor = ''; 

                if (isNaN(value)) {
                    errors.push(`Please enter a valid number for ${inputInfo.name}.`);
                    el.style.borderColor = dangerBorderColor;
                    if (!firstInvalidField) firstInvalidField = el;
                    return;
                }
                if (inputInfo.min !== undefined && value < inputInfo.min) {
                    errors.push(`${inputInfo.name} must be at least ${inputInfo.min}.`);
                    el.style.borderColor = dangerBorderColor;
                    if (!firstInvalidField) firstInvalidField = el;
                }
                if (inputInfo.max !== undefined && value > inputInfo.max) {
                    errors.push(`${inputInfo.name} must be no more than ${inputInfo.max}.`);
                    el.style.borderColor = dangerBorderColor;
                    if (!firstInvalidField) firstInvalidField = el;
                }
            });

            const currentAgeEl = document.getElementById('currentAge');
            const retirementAgeEl = document.getElementById('retirementAge');
            const currentAge = parseInt(currentAgeEl.value);
            const retirementAgeVal = parseInt(retirementAgeEl.value);

            if (!isNaN(currentAge) && !isNaN(retirementAgeVal) && retirementAgeVal <= currentAge) {
                errors.push("Retirement Age must be greater than Current Age.");
                retirementAgeEl.style.borderColor = dangerBorderColor;
                 if (!firstInvalidField) firstInvalidField = retirementAgeEl;
            }
            
            if (firstInvalidField) {
                firstInvalidField.focus();
            }
            return errors;
        }


        function calculateRetirement() {
            const validationErrors = validateInputs();
            const projectionMessageEl = document.getElementById('retirementProjectionMessage');

            if (validationErrors.length > 0) {
                projectionMessageEl.innerHTML = "<strong>Please correct the following errors:</strong><br>" + validationErrors.join('<br>');
                projectionMessageEl.className = 'status-shortfall'; // Keep this for styling
                projectionMessageEl.setAttribute('role', 'alert'); // SEO A11y: Announce errors more assertively
                document.getElementById('yearsToRetirementVal').textContent = "-";
                document.getElementById('nestEggVal').textContent = "-";
                document.getElementById('desiredMonthlyIncomeInflatedVal').textContent = "-";
                document.getElementById('otherMonthlyIncomeInflatedVal').textContent = "-";
                document.getElementById('fundsDepletedAgeVal').textContent = "-";
                if (growthChartInstance) growthChartInstance.destroy();
                document.getElementById('chartPlaceholder').style.display = 'flex';
                document.getElementById('growthChart').style.display = 'none';
                return;
            }
            
            projectionMessageEl.setAttribute('role', 'status'); // Back to status for normal messages
            document.getElementById('chartPlaceholder').style.display = 'none';
            document.getElementById('growthChart').style.display = 'block';

            const currentAge = parseInt(document.getElementById('currentAge').value);
            const retirementAge = parseInt(document.getElementById('retirementAge').value);
            let currentSavings = parseCurrencyValue(document.getElementById('currentSavings').value);
            let monthlyContribution = parseCurrencyValue(document.getElementById('monthlyContribution').value);
            const contributionIncreaseRate = parseFloat(document.getElementById('contributionIncreaseRate').value) / 100;
            
            const desiredMonthlyIncomeToday = parseCurrencyValue(document.getElementById('desiredMonthlyIncomeToday').value);
            const otherMonthlyIncomeToday = parseCurrencyValue(document.getElementById('otherMonthlyIncome').value);
            const retirementDuration = parseInt(document.getElementById('retirementDuration').value);

            const preRetirementReturn = parseFloat(document.getElementById('preRetirementReturn').value) / 100;
            const postRetirementReturn = parseFloat(document.getElementById('postRetirementReturn').value) / 100;
            const inflationRate = parseFloat(document.getElementById('inflationRate').value) / 100;

            const yearsToRetirement = retirementAge - currentAge;
            const monthlyPreRetirementReturn = preRetirementReturn / 12;
            
            let balance = currentSavings;
            let ageData = [currentAge]; 
            let balanceData = [parseFloat(balance.toFixed(0))]; 

            let currentMonthlyContribution = monthlyContribution;
            for (let year = 0; year < yearsToRetirement; year++) {
                for (let month = 0; month < 12; month++) {
                    balance += currentMonthlyContribution;
                    balance *= (1 + monthlyPreRetirementReturn);
                }
                ageData.push(currentAge + year + 1);
                balanceData.push(parseFloat(balance.toFixed(0)));
                currentMonthlyContribution *= (1 + contributionIncreaseRate); 
            }
            const nestEggAtRetirement = balance;

            let desiredMonthlyIncomeAtRetirement = desiredMonthlyIncomeToday * Math.pow(1 + inflationRate, yearsToRetirement);
            let otherMonthlyIncomeAtRetirement = otherMonthlyIncomeToday * Math.pow(1 + inflationRate, yearsToRetirement);
            
            let annualWithdrawalNeededFromSavingsStart = (desiredMonthlyIncomeAtRetirement * 12) - (otherMonthlyIncomeAtRetirement * 12);
            annualWithdrawalNeededFromSavingsStart = Math.max(0, annualWithdrawalNeededFromSavingsStart); 

            let retirementBalance = nestEggAtRetirement;
            let fundsDepletedAge = retirementAge + retirementDuration; 
            let fundsLast = true;
            let surplusAmount = 0;

            let currentAnnualWithdrawalNeeded = annualWithdrawalNeededFromSavingsStart;

            for (let year = 0; year < retirementDuration; year++) {
                const ageInRetirement = retirementAge + year;
                
                if (retirementBalance <= 0 && currentAnnualWithdrawalNeeded > 0) {
                    fundsDepletedAge = ageInRetirement; 
                    fundsLast = false;
                    for (let fillYear = year; fillYear < retirementDuration; fillYear++) {
                        ageData.push(retirementAge + fillYear + 1);
                        balanceData.push(0);
                    }
                    break;
                }
                
                retirementBalance -= currentAnnualWithdrawalNeeded; 
                if (retirementBalance < 0) retirementBalance = 0; 
                retirementBalance *= (1 + postRetirementReturn); 
                
                ageData.push(ageInRetirement + 1); 
                balanceData.push(parseFloat(retirementBalance.toFixed(0)));
                currentAnnualWithdrawalNeeded *= (1 + inflationRate); 
            }
            
            if (fundsLast) { 
                if (retirementBalance > 0) {
                    surplusAmount = retirementBalance;
                    fundsDepletedAge = `> ${retirementAge + retirementDuration}`;
                } else { 
                    fundsDepletedAge = retirementAge + retirementDuration;
                    fundsLast = false; 
                }
            }

            document.getElementById('yearsToRetirementVal').textContent = yearsToRetirement;
            document.getElementById('nestEggVal').textContent = toCurrency(nestEggAtRetirement);
            document.getElementById('desiredMonthlyIncomeInflatedVal').textContent = `${toCurrency(desiredMonthlyIncomeAtRetirement)}/mo`;
            document.getElementById('otherMonthlyIncomeInflatedVal').textContent = `${toCurrency(otherMonthlyIncomeAtRetirement)}/mo`;
            
            const fundsDepletedValEl = document.getElementById('fundsDepletedAgeVal');
            fundsDepletedValEl.textContent = (surplusAmount > 0) ? `${fundsDepletedAge} (Surplus: ${toCurrency(surplusAmount)})` : fundsDepletedAge;
            fundsDepletedValEl.className = (surplusAmount > 0) ? 'positive' : 'negative';

            if (surplusAmount > 0) {
                projectionMessageEl.innerHTML = `<strong>Congratulations!</strong> Your funds are projected to last beyond your planned retirement duration with a surplus.`;
                projectionMessageEl.className = 'status-ontrack';
            } else if (fundsDepletedAge === (retirementAge + retirementDuration) && !fundsLast) {
                 projectionMessageEl.innerHTML = `<strong>Close Call!</strong> Your funds are projected to last approximately for the planned retirement duration, running out around age ${fundsDepletedAge}.`;
                 projectionMessageEl.className = 'status-caution';
            } else { 
                const shortfallYears = (retirementAge + retirementDuration) - fundsDepletedAge;
                projectionMessageEl.innerHTML = `<strong>Action May Be Needed:</strong> Your funds are projected to be depleted by age ${fundsDepletedAge}. This is ${shortfallYears} year(s) before the end of your planned ${retirementDuration}-year retirement.`;
                projectionMessageEl.className = 'status-shortfall';
            }
            
            updateGrowthChart(ageData, balanceData, retirementAge);
        }

        function updateGrowthChart(ages, balances, retirementAgeMarker) {
            const ctx = document.getElementById('growthChart').getContext('2d');
            const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim();
            const accentColor = getComputedStyle(document.documentElement).getPropertyValue('--accent-color').trim();
            
            function hexToRgba(hex, alpha) {
                const r = parseInt(hex.slice(1, 3), 16);
                const g = parseInt(hex.slice(3, 5), 16);
                const b = parseInt(hex.slice(5, 7), 16);
                return `rgba(${r}, ${g}, ${b}, ${alpha})`;
            }

            const data = {
                labels: ages,
                datasets: [{
                    label: 'Retirement Savings Balance',
                    data: balances,
                    borderColor: primaryColor,
                    backgroundColor: hexToRgba(primaryColor, 0.2),
                    fill: true,
                    tension: 0.1, 
                    pointRadius: balances.length > 60 ? 0 : (balances.length > 40 ? 1 : 2),
                    pointHitRadius: 10,
                    pointBackgroundColor: primaryColor,
                    pointHoverRadius: 5
                }]
            };

            const config = {
                type: 'line',
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'Age',
                                font: { size: 13, family: getComputedStyle(document.documentElement).getPropertyValue('--font-body').trim() }
                            },
                            ticks: {
                                maxRotation: 0,
                                minRotation: 0,
                                autoSkip: true,
                                maxTicksLimit: ages.length > 30 ? (ages.length > 50 ? 8 : 10) : 15,
                                font: { family: getComputedStyle(document.documentElement).getPropertyValue('--font-body').trim() }
                            }
                        },
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Savings Balance ($)',
                                font: { size: 13, family: getComputedStyle(document.documentElement).getPropertyValue('--font-body').trim() }
                            },
                            ticks: {
                                callback: function(value) {
                                    if (Math.abs(value) >= 1000000) return (value / 1000000).toFixed(1) + 'M';
                                    if (Math.abs(value) >= 1000) return (value / 1000).toFixed(0) + 'K';
                                    return value.toFixed(0);
                                },
                                font: { family: getComputedStyle(document.documentElement).getPropertyValue('--font-body').trim() }
                            }
                        }
                    },
                    plugins: {
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                            titleFont: { family: getComputedStyle(document.documentElement).getPropertyValue('--font-heading').trim() },
                            bodyFont: { family: getComputedStyle(document.documentElement).getPropertyValue('--font-body').trim() },
                            callbacks: {
                                label: function(context) {
                                    return ` Balance: ${toCurrency(context.parsed.y)}`;
                                },
                                title: function(context) {
                                    return `Age: ${context[0].label}`;
                                }
                            }
                        },
                        legend: {
                            position: 'bottom',
                            labels: {
                                usePointStyle: true,
                                padding: 20,
                                font: { family: getComputedStyle(document.documentElement).getPropertyValue('--font-body').trim() }
                            }
                        },
                        annotation: { 
                            annotations: {
                                retirementLine: {
                                    type: 'line',
                                    xMin: retirementAgeMarker,
                                    xMax: retirementAgeMarker,
                                    borderColor: accentColor,
                                    borderWidth: 2,
                                    borderDash: [6, 6],
                                    label: {
                                        content: 'Retirement Starts',
                                        display: true,
                                        position: 'start',
                                        backgroundColor: hexToRgba(accentColor, 0.85),
                                        color: '#FFFFFF',
                                        font: { weight: 'bold', size: 10, family: getComputedStyle(document.documentElement).getPropertyValue('--font-heading').trim() },
                                        padding: { x: 6, y: 4 },
                                        borderRadius: 4,
                                        yAdjust: -12
                                    }
                                }
                            }
                        }
                    },
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                }
            };

            if (growthChartInstance) {
                growthChartInstance.destroy();
            }
            growthChartInstance = new Chart(ctx, config);
        }
        
        document.getElementById('calculateBtn').addEventListener('click', calculateRetirement);
        
        document.addEventListener('DOMContentLoaded', () => {
            ['currentSavings', 'monthlyContribution', 'desiredMonthlyIncomeToday', 'otherMonthlyIncome'].forEach(id => {
                const input = document.getElementById(id);
                if (input && input.value) formatCurrency(input);
            });

            document.getElementById('chartPlaceholder').style.display = 'flex';
            document.getElementById('growthChart').style.display = 'none';

            const tooltips = document.querySelectorAll('.tooltip');
            tooltips.forEach(tooltip => {
                const tooltipText = tooltip.querySelector('.tooltiptext');
                tooltip.addEventListener('focus', () => {
                    tooltipText.style.visibility = 'visible';
                    tooltipText.style.opacity = '1';
                });
                tooltip.addEventListener('blur', () => {
                    tooltipText.style.visibility = 'hidden';
                    tooltipText.style.opacity = '0';
                });
                tooltip.addEventListener('keydown', (event) => {
                    if (event.key === 'Enter' || event.key === ' ') {
                        event.preventDefault(); 
                        const isVisible = tooltipText.style.visibility === 'visible';
                        tooltipText.style.visibility = isVisible ? 'hidden' : 'visible';
                        tooltipText.style.opacity = isVisible ? '0' : '1';
                    } else if (event.key === 'Escape') {
                         tooltipText.style.visibility = 'hidden';
                         tooltipText.style.opacity = '0';
                    }
                });
            });
        });

    </script>
</body>
</html>