/* --- File Structure --- */
/*
 * 1. CSS Variables (:root) - Defines reusable values (spacing, colors, fonts).
 * 2. Basic Styles (html, body) - Global resets and base typography/background.
 * 3. Main Layout (.container, h1) - Core page structure and main heading.
 * 4. Utility Classes (.hidden, .visually-hidden) - General utility styles.
 * 5. UI Components - Styles for distinct interface elements:
 *    - Introductory Text Styles (.intro-block-container, .intro-text, .intro-disclaimer)
 *    - Form Styles (.input-form, .form-group, .calculate-btn)
 *    - Results & Disclaimer Styles (.results-area, .disclaimer)
 *    - Grid Guide Details Styles (.grid-guide-details, etc.) - Inside grid container
 *    - Grid Controls Header & View Switcher (#grid-controls-header, #view-switcher, .view-button) - Inside grid container
 * 6. Life Grid Styles - Styles for the visualization grid and its components:
 *    - Grid Container (.life-grid-container) - Main wrapper for header, guide, axis labels, and grid content.
 *    - Grid Axis Labels (#grid-axis-label-top, #grid-axis-label-left) - For X and Y axis labels.
 *    - Grid Content Wrapper (#grid-content-wrapper) - Contains left axis label and content area for layout.
 *    - Grid Content Area (#grid-content-area) - Holds the actual grid blocks
 *    - Row Styles (.year-row, etc.)
 *    - Block Base Styles (.week-block, .month-block, .year-block)
 *    - Life Stage Colors (.stage-*)
 *    - Block State Styles (.past, .present, .future, .out-of-bounds)
 *    - View-Specific Adjustments (Month/Year block sizing)
 * 7. Responsive Media Queries (@media) - Adjustments for different screen sizes.
 */

/* --- CSS Variables --- */
:root {
    /* Spacing Scale: Defines consistent spacing units from smallest (xxs) to largest (xl). */
    /* Use these variables for margins, padding, and gaps. */
    --space-xxs: 0.25rem; /* 4px (Extra Extra Small) */
    --space-xs:  0.5rem;  /* 8px (Extra Small) */
    --space-sm:  0.75rem; /* 12px (Small) */
    --space-md:  1rem;    /* 16px (Medium / Base) */
    --space-lg:  1.5rem;  /* 24px (Large) */
    --space-xl:  2rem;    /* 32px (Extra Large) */

    /* Typography */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem;   /* 16px */
    --font-size-md: 1.05rem;  /* 16.8px */
    --font-size-lg: 1.8rem;   /* 28.8px */
    --font-size-xl: 1.25rem;  /* 20px (For section headings) */

    /* Borders */
    --border-radius-sm: 3px;
    --border-radius-md: 5px;
    --border-radius-lg: 10px;
    --border-color-light: #e0e0e0; /* Light Border Gray */
    --border-color-medium: #ced4da; /* Medium Border Gray */

    /* Colors */
    --color-text-primary: #333;      /* Dark Gray */
    --color-text-secondary: #555;    /* Medium Gray */
    --color-text-muted: #777;        /* Light Gray */
    --color-background-body: #f4f7f9; /* Very Light Gray / Off-White */
    --color-background-container: #ffffff; /* White */
    --color-background-subtle: #f9f9f9; /* Subtle Gray / Off-White */
    --color-primary: #4a90e2;        /* Primary Blue */
    --color-primary-dark: #3a7ac0;    /* Darker Primary Blue (Hover) */
    --color-primary-light: #e0f0ff;   /* Lighter Primary Blue (Hover for non-active buttons) */
    --color-error: #e74c3c;           /* Error Red */
    --color-present-highlight: #FF4500; /* OrangeRed */

    /* Specific Colors as Variables */
    --color-heading: #2c3e50;           /* Dark Blue-Gray */
    --color-grid-background: #e9ecef;   /* Grid Background Gray */
    --color-key-swatch-border: rgba(0,0,0,0.2); /* Subtle Border */
}

/* --- Basic Styles --- */
html, body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    background: var(--color-background-body);
    color: var(--color-text-primary);
    display: flex; /* Used with justify-content to center container */
    justify-content: center;
    padding: 0; /* Remove all body padding */
    box-sizing: border-box;
}
.container {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); /* Subtle Shadow */
    background: var(--color-background-container);

    /* Layout: Limit width on large screens and center horizontally */
    max-width: 860px;
    width: 95vw;
    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Center items like form, results, grid container horizontally within the main container */
    align-items: center;
}
h1 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-lg);
    font-weight: 600;
    color: var(--color-heading);
}

/* Styles for introductory text block */
.intro-block-container {
    width: 100%;
    max-width: 684px; /* Align with results and grid container */
    margin-top: 0; /* Follows h1's margin-bottom */
    margin-bottom: var(--space-lg); /* Space before the form */
    box-sizing: border-box; /* Ensure padding is included in width/max-width */
    display: flex;
    flex-direction: column;
}

.intro-text {
    margin-top: 0; /* Remove top margin for the first child in this container */
    margin-bottom: 0.3em; /* Reduced space between main intro and disclaimer */
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-style: italic;
    text-align: left; /* Explicitly left-align text within the block */
}

.intro-disclaimer {
    margin-top: 0.2em; /* Reduced space from .intro-text above */
    margin-bottom: 0; /* Last child in container; parent handles overall bottom margin */
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: left; /* Explicitly left-align text within the paragraph */
}

.intro-disclaimer strong {
    color: var(--color-text-primary); /* Make "Important!" stand out more */
}

/* --- Utility Classes --- */
/* Add this class for accessible hiding */
.visually-hidden {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* prevent line breaks */
}
/* Utility class to hide elements (used for progressive reveal) */
.hidden {
    display: none !important; /* !important ensures override */
}

/* --- Form Styles --- */
.input-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md); /* Space between form elements */
    width: 100%;
    max-width: 350px; /* Limit form width */
    margin-bottom: var(--space-lg); /* Space below form */
}
.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align labels left */
    text-align: left;
}
.form-group label {
    font-weight: 500;
    margin-bottom: 0; /* Adjust margin as helper text is now between label and input */
    color: var(--color-text-primary); /* Emphasize label with primary text color */
    font-weight: 600; /* Emphasize label with bolder font */
    font-size: 0.95rem;
}
.form-group .label-supplement { /* Style for helper text above input */
    font-size: 0.8rem; /* Make it smaller */
    color: var(--color-text-muted); /* Keep it muted */
    margin-top: var(--space-xxs); /* Small space below label */
    margin-bottom: var(--space-xs); /* Space above input */
    line-height: 1.3;
}
.form-group input[type="date"],
.form-group select {
    width: 100%;
    padding: var(--space-sm) var(--space-xs);
    border: 1px solid var(--border-color-medium);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    box-sizing: border-box;
    background-color: var(--color-background-container);
}

.calculate-btn {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-background-container);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: background-color 0.2s;
}
.calculate-btn:hover {
    background-color: var(--color-primary-dark);
}
.calculate-btn:disabled {
    background-color: #cccccc;  /* Distinct visual style for disabled state */
    color: #666666;
    cursor: not-allowed;
    opacity: 0.7;
}

/* --- Results & Disclaimer Styles --- */
.results-area {
    /* Styles for the box displaying calculation results or errors */
    /* Initially hidden via .hidden class */
    margin-bottom: var(--space-lg); /* Space below results */
    padding: var(--space-md) 10px; /* Standardized horizontal padding, keep vertical */
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-md);
    background-color: var(--color-background-subtle);
    box-sizing: border-box;
    min-height: 50px;
    text-align: left;
    line-height: 1.6;
    font-size: var(--font-size-base);

    /* Constrain width to match grid */
    max-width: 684px;
    width: 100%; /* Allow shrinking below max-width */
}
.results-area p {
    margin: var(--space-xs) 0;
}
/* Styling for the introductory paragraph in results */
.results-area .results-intro {
    margin-bottom: var(--space-md); /* More space before the grid stats */
    font-size: var(--font-size-base); /* Consistent font size with stats */
    color: var(--color-text-muted);
    line-height: 1.5; /* Ensure good line height if it wraps */
}

/* Styles for the results grid */
.results-area .results-stats-grid {
    display: grid;
    /* Columns size to their content */
    grid-template-columns: auto auto;
    gap: var(--space-xs) var(--space-sm); /* Row gap, Column gap */
    align-items: baseline; /* Align text nicely */
    margin-top: var(--space-sm);
    margin-left: auto; /* Center the grid block if it's narrower than its container */
    margin-right: auto; /* Center the grid block if it's narrower than its container */
    width: fit-content; /* Grid is only as wide as its content */
}

.results-area .stat-label {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary); /* Slightly less prominent than value */
    text-align: right; /* Align labels to the right for neatness */
}

.results-area .stat-value {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    /* strong tag within will handle boldness */
}
/* Added dynamically by JS when an error occurs */
.error-message {
    color: var(--color-error);
    font-weight: bold;
}
.disclaimer {
    /* Always visible */
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: italic;
    max-width: 684px; /* Align with results and grid container */
    line-height: 1.5;
    box-sizing: border-box; /* Ensure padding is included in width */
    text-align: left; /* Ensure text within the disclaimer block is left-aligned */
    /* No margin needed as it's the last element */
}

/* "Start Over" Button Container, initially hidden */
#start-over-container {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
    width: 100%; /* Take full width of its alignment context within .container */
    max-width: 350px; /* Match form width for consistency */
    /* .container has align-items: center, so this will be centered */
    display: flex; /* To allow button inside to be centered if needed */
    justify-content: center; /* Center the button if it's narrower than container */
}

/* --- Grid Guide Details Styles --- */
/* Styles for the <details> element containing explanation and color key */
/* Now positioned INSIDE the grid container */
.grid-guide-details {
    box-sizing: border-box;
    margin-top: var(--space-md); /* Space above guide, below controls */
    margin-bottom: var(--space-md); /* Space below guide, above grid content */

    /* Appearance */
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-md);
    background-color: var(--color-background-subtle);
    text-align: left;
    transition: background-color 0.2s ease-in-out; /* Subtle transition */
}

/* Style the summary (clickable header) */
.grid-guide-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-primary);
    padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xl); /* Accommodate custom marker */
    position: relative; /* Needed for pseudo-element marker */
    list-style: none; /* Hide default browser marker */
}
/* Hide default marker for WebKit browsers */
.grid-guide-details summary::-webkit-details-marker {
    display: none;
}
/* Custom Marker (+/-) using ::before pseudo-element */
.grid-guide-details summary::before {
    content: '+'; /* Default marker (closed state) */
    position: absolute;
    left: var(--space-xs);
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    margin-right: var(--space-xs);
    display: inline-block;
    width: 1em; /* Ensure consistent spacing */
    text-align: center;
}

/* Change marker when details element is open */
.grid-guide-details[open] summary::before {
    content: '−'; /* Use the minus sign when open */
}

/* Add visual separation and spacing when open */
.grid-guide-details[open] summary {
    border-bottom: 1px solid var(--border-color-light);
    margin-bottom: var(--space-md); /* More space between summary and content wrapper */
}

/* Style the inner content wrapper */
.guide-content-wrapper {
    display: flex;
    flex-direction: row; /* Side-by-side columns */
    gap: var(--space-lg); /* Wider gap between columns */
    padding: 0 var(--space-md) var(--space-xs) var(--space-md); /* Padding for wrapper */
}

/* Style the columns */
.explanation-column {
    flex: 2; /* Takes 2/3 space */
    min-width: 0; /* Allow shrinking */
}
.color-key-column {
    flex: 1; /* Takes 1/3 space */
    min-width: 0; /* Allow shrinking */
}

/* Style internal headings */
.guide-content-wrapper h3 {
    font-size: var(--font-size-sm); /* Use smaller font size */
    font-weight: 600; /* Keep bold */
    color: var(--color-text-primary);
    margin-top: 0;
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color-light);
    padding-bottom: var(--space-xxs);
    text-align: left; /* Ensure left alignment */
}

/* Style content within columns */
.guide-content-wrapper p,
.guide-content-wrapper ul {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-top: 0;
    margin-bottom: var(--space-sm);
}

/* Specific margins for paragraphs directly within list items in the explanation column */
.guide-content-wrapper .explanation-column ul li > p {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}
/* Remove bottom margin from the last paragraph in such list items */
.guide-content-wrapper .explanation-column ul li > p:last-of-type {
    margin-bottom: 0;
}

.guide-content-wrapper ul {
    padding-left: var(--space-lg); /* Indent list */
}
/* Specific indentation for explanation list */
.explanation-column ul {
    padding-left: var(--space-lg);
}

.guide-content-wrapper li {
    margin-bottom: var(--space-xxs); /* Space between list items */
}
/* Remove bottom margin from last element in each column */
.guide-content-wrapper p:last-child,
.guide-content-wrapper ul:last-child {
     margin-bottom: 0;
}

/* Re-use existing color key list styles */
.color-key {
    padding: 0; /* Remove padding from inner div */
}
.color-key ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Stack color key items vertically */
}
.color-key li {
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: normal; /* Allow wrapping within list item */
    margin-bottom: var(--space-xxs); /* Consistent spacing between key items */
}
/* Ensure last item has no bottom margin */
.color-key li:last-child {
    margin-bottom: 0;
}

.key-color {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: var(--space-xs);
    border: 1px solid var(--color-key-swatch-border);
    border-radius: 2px;
    flex-shrink: 0;
}
/* Background colors for key swatches */
.key-color.stage-infancy { background-color: #FFB6C1; }
.key-color.stage-toddler { background-color: #FFA07A; }
.key-color.stage-earlychildhood { background-color: #FFDA63; }
.key-color.stage-middlechildhood { background-color: #9ACD32; }
.key-color.stage-adolescence { background-color: #48D1CC; }
.key-color.stage-youngadult { background-color: #6495ED; }
.key-color.stage-adulthood { background-color: #9370DB; }
.key-color.stage-middleadulthood { background-color: #DA70D6; }
.key-color.stage-earlysenior { background-color: #C0C0C0; }
.key-color.stage-midsenior { background-color: #B0C4DE; }
.key-color.stage-latesenior { background-color: #D8BFD8; }

/* Add specific styles for key swatches mimicking grid states */
.color-key .key-color.past {
    border-color: rgba(0, 0, 0, 0.3);
    opacity: 0.7;
}
.color-key .key-color.present {
    background-color: var(--color-present-highlight);
    border-color: rgba(0, 0, 0, 0.7);
}
.color-key .key-color.out-of-bounds {
    background-color: var(--color-grid-background);
    border-color: var(--color-grid-background);
    opacity: 0.5; /* Make it visible but distinct */
}


/* ==========================================================================
   Grid Controls Header & View Switcher
   ========================================================================== */

/* Controls header, inside grid container */
#grid-controls-header {
    display: flex;
    justify-content: center; /* Center-align switcher */
    align-items: center;
    padding: var(--space-sm) var(--space-xs); /* Add horizontal padding */
    border-bottom: 1px solid var(--border-color-light);
    gap: var(--space-md);
    flex-wrap: wrap;
    box-sizing: border-box;

    /* Make header sticky inside grid container */
    position: sticky;
    top: 0; /* Stick to the top of the scrolling container */
    z-index: 1; /* Ensure it stays above grid content */
    background-color: var(--color-grid-background); /* Match grid container background */
}
/* Style for when a child button in the tablist has keyboard focus */
#view-switcher:has(> .view-button:focus-visible) {
    outline: 3px solid var(--color-primary-dark);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm); /* Ensure outline follows potential border radius of the container */
}

#view-switcher {
    display: inline-flex; /* Group buttons together */
    border-radius: var(--border-radius-sm);
    overflow: hidden; /* Ensures children conform to border-radius */
}

.view-button {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-primary);
    background-color: var(--color-background-container);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    line-height: 1.4;
    white-space: normal; /* Allow wrapping */
    text-align: center; /* Center text horizontally */

    min-height: 56px; /* Ensure consistent height for wrapped text */
    /* Use flexbox to vertically center text within the button */
    display: inline-flex; /* Make button a flex container */
    align-items: center; /* Vertically center content */
}

/* Remove left border for adjacent buttons */
.view-button + .view-button {
    border-left: none;
}

/* Hover effect */
.view-button:not(.active):hover {
    background-color: var(--color-primary-light);
}

/* Active state */
.view-button.active {
    background-color: var(--color-primary);
    color: var(--color-background-container);
    cursor: default;
    font-weight: 600;
}

/* ========================================================================== */

/* --- Life Grid Styles --- */
/* Styles for the grid container */
/* Initially hidden via .hidden class */
.life-grid-container {
    width: 100%; /* Takes width from parent .container */

    max-width: 684px; /* Max width primarily determined by Week view's content */
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Stack header, guide, content area vertically */
    padding: 0 10px 10px 10px;
    overflow-x: auto; /* Enable horizontal scrolling if content overflows */
    background-color: var(--color-grid-background);
    border: 1px solid var(--border-color-medium);
    border-radius: var(--border-radius-md);
    -webkit-overflow-scrolling: touch; /* Improve scrolling on touch devices */
}

/* Container for the actual grid blocks */
#grid-content-area {
    display: flex;
    flex-direction: column;
    gap: 3px; /* Vertical gap between year rows */
    /* Add padding on the right to prevent blocks from bumping against the edge */
    padding-right: var(--space-xs);
    flex-grow: 1; /* Allow grid content to take remaining space */
    min-width: 0; /* Important for flex items to shrink properly */

}

/* --- Grid Axis Label Styles --- */
.grid-axis-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    /* text-align will be specific to top or left */
    font-style: italic;
    box-sizing: border-box; /* Ensure padding is included in width calculations */
    /* Initially hidden, JS will manage visibility */
}

#grid-axis-label-top {
    width: 100%; /* Span the width of its container */
    padding-bottom: var(--space-xs); /* Space between label and grid content wrapper */
    text-align: left; /* Align text to the left */
    /* Offset by the width of the left label + gap */
    padding-left: calc(1.0em + var(--space-xs)); /* Aligns with start of grid blocks */
    /* border-bottom: 1px dashed var(--border-color-light); */ /* Optional visual separator */
}

/* Wrapper for the left label and the main grid content area */
#grid-content-wrapper {
    display: flex; /* Arrange left label and grid content side-by-side */
    align-items: flex-start; /* Align items to the top of the container */
    gap: var(--space-xs); /* Gap between left label and grid content */
}

#grid-axis-label-left {
    /* Vertical text orientation */
    writing-mode: vertical-rl; /* Text flows vertically, right-to-left lines */
    transform: rotate(180deg); /* Makes text read top-to-bottom for LTR languages */
    
    /* Sizing and Alignment */
    display: flex; /* To use align-items and justify-content */
    align-items: center; /* Center text along the non-writing-mode axis */
    justify-content: flex-start; /* Align text to the top along the writing-mode axis (vertically) */
    /* border-right: 1px dashed var(--border-color-light); */ /* Optional visual separator */
    min-width: 1.0em; /* Ensure space for the label text */
}

#grid-content-area {
    flex-grow: 1; /* Allow grid content to take remaining space */
    min-width: 0; /* Important for flex items to shrink properly */
}

/* Base style for all rows (weeks, months, years) */
.year-row { /* Also used for month-row, decade-row */
    display: flex;
    flex-wrap: nowrap; /* Ensure blocks stay in a single horizontal line */
    gap: 2px; /* Default horizontal gap (used by week view) */
}

/* Base style for week blocks */
.week-block {
    width: 10px; /* Default block size */
    height: 10px; /* Default block size */
    flex-shrink: 0; /* Prevent blocks from shrinking */
    border-radius: 1px; /* Slight rounding */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    box-sizing: border-box;
    border: 1px solid transparent; /* Base border */
}

/* --- Life Stage Color Styles --- */
/* Applies background colors based on .stage-* classes */
/* Colors are defined directly here to match JS LIFE_STAGES for consistency. */
.week-block.stage-infancy, .month-block.stage-infancy, .year-block.stage-infancy { background-color: #FFB6C1; } /* LightPink */
.week-block.stage-toddler, .month-block.stage-toddler, .year-block.stage-toddler { background-color: #FFA07A; } /* LightSalmon */
.week-block.stage-earlychildhood, .month-block.stage-earlychildhood, .year-block.stage-earlychildhood { background-color: #FFDA63; } /* Medium Gold */
.week-block.stage-middlechildhood, .month-block.stage-middlechildhood, .year-block.stage-middlechildhood { background-color: #9ACD32; } /* YellowGreen */
.week-block.stage-adolescence, .month-block.stage-adolescence, .year-block.stage-adolescence { background-color: #48D1CC; } /* MediumTurquoise */
.week-block.stage-youngadult, .month-block.stage-youngadult, .year-block.stage-youngadult { background-color: #6495ED; } /* CornflowerBlue */
.week-block.stage-adulthood, .month-block.stage-adulthood, .year-block.stage-adulthood { background-color: #9370DB; } /* MediumPurple */
.week-block.stage-middleadulthood, .month-block.stage-middleadulthood, .year-block.stage-middleadulthood { background-color: #DA70D6; } /* Orchid */
.week-block.stage-earlysenior, .month-block.stage-earlysenior, .year-block.stage-earlysenior { background-color: #C0C0C0; } /* Silver */
.week-block.stage-midsenior, .month-block.stage-midsenior, .year-block.stage-midsenior { background-color: #B0C4DE; } /* LightSteelBlue */
.week-block.stage-latesenior, .month-block.stage-latesenior, .year-block.stage-latesenior { background-color: #D8BFD8; } /* Thistle */


/* --- Block State Styles (Past, Present, Future, Out-of-Bounds) --- */
/* Applied to all block types (.week-block, .month-block, .year-block) */
.week-block.past, .month-block.past, .year-block.past {
    /* Inherits stage background-color */
    border-color: rgba(0, 0, 0, 0.3); /* Subtle border for past blocks */
    opacity: 0.7; /* Fade past blocks */
}

.week-block.present, .month-block.present, .year-block.present {
    background-color: var(--color-present-highlight);
    border-color: rgba(0, 0, 0, 0.7); /* Stronger border for present block */
    /* White outline + Inner Shadow effect */
    box-shadow: 0 0 0 1px var(--color-background-container), inset 0 0 0 1px rgba(0,0,0,0.4);
    z-index: 1; /* Ensure it's above others if overlapping slightly */
    position: relative; /* Needed for z-index */
    opacity: 1; /* Ensure present block is fully opaque */
}

.week-block.future, .month-block.future, .year-block.future {
    /* Override stage color for a neutral future look */
    background-color: var(--color-background-container); /* White */
    border-color: var(--border-color-medium); /* Medium Border Gray */
    opacity: 1;
}

/* Specific to Calendar Week view */
.week-block.out-of-bounds {
    /* Overrides all other styles to indicate weeks outside the lifespan */
    /* !important is used here deliberately to ensure this style wins */
    background-color: var(--color-grid-background) !important;
    border-color: var(--color-grid-background) !important;
    opacity: 0.3 !important;
    box-shadow: none !important;
}

/* === Month Block Styles === */
.month-block {
    /* Base styles shared with other blocks */
    flex-shrink: 0;
    border-radius: 2px;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    box-sizing: border-box;
    border: 1px solid transparent;
    /* Dynamic width/height set via view-specific rules */
}

/* === Year Block Styles === */
.year-block {
    /* Base styles shared with other blocks */
    flex-shrink: 0;
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    box-sizing: border-box;
    border: 1px solid transparent;
    /* Dynamic width/height set via view-specific rules */
}

/* === View-Specific Layout Adjustments (Month & Year Views) === */

/* --- Month View --- */
/* Added dynamically to grid container when month view is active */
.life-grid-container.grid-view-months .month-row {
     gap: 2px; /* Horizontal gap between month blocks */
}
/* KEY TECHNIQUE: Calculate month block size to fill container width */
/* Target blocks within the content area */
.life-grid-container.grid-view-months #grid-content-area .month-block {
    /* Width = (100% container width - total gap space) / number of blocks */
    width: calc((100% - 22px) / 12);
    /* Force block to be square by setting aspect ratio */
    aspect-ratio: 1 / 1;
}

/* --- Year View --- */
/* Added dynamically to grid container when year view is active */
.life-grid-container.grid-view-years .decade-row {
     gap: 3px; /* Horizontal gap between year blocks */
}
/* KEY TECHNIQUE: Calculate year block size to fill container width */
/* Target blocks within the content area */
.life-grid-container.grid-view-years #grid-content-area .year-block {
    /* Width = (100% container width - total gap space) / number of blocks */
    width: calc((100% - 27px) / 10);
    /* Force block to be square by setting aspect ratio */
    aspect-ratio: 1 / 1;
}

/* --- Responsive Media Queries --- */
/* Tiered approach: Adjust grid container AND block sizes/gaps at breakpoints */

/* Tier 1.5: Adjust Grid Guide Details for smaller desktops/large tablets */
@media (max-width: 768px) {
    .guide-content-wrapper {
        flex-direction: column; /* Stack internal columns vertically */
        gap: var(--space-md); /* Adjust gap for vertical stacking */
    }
    /* Add margin below explanation column when stacked */
    .explanation-column {
        margin-bottom: var(--space-md);
    }

    /* Responsive styles for Grid Controls Header */
    #grid-controls-header {
        flex-direction: column; /* Stack title and switcher vertically */
        align-items: center; /* Center items horizontally when stacked */
        gap: var(--space-sm); /* Reduce gap when stacked */
    }

    .view-button {
        padding: var(--space-xs) var(--space-xs);
        font-size: calc(var(--font-size-sm) * 0.95);
    }

    /* Adjust axis label font size */
    .grid-axis-label {
        font-size: calc(var(--font-size-sm) * 0.9);
    }
}


/* Tier 2: Medium Screens (~Tablet) - Target width < 656px */
@media (max-width: 655px) {
    /* Adjust grid container for medium screens */
    .life-grid-container {
        max-width: 515px; /* Adjusted to fit 8px week blocks and padding */
        padding: 0 5px 5px 5px;
    }
    /* Adjust grid content area gap */
    #grid-content-area {
        gap: 2px; /* Vertical gap */
    }
    /* Adjust week row gap and block size for Week view */
    .life-grid-container .year-row {
        gap: 1px; /* Gap between blocks */
    }
    .life-grid-container .week-block {
        width: 8px; /* Block size */
        height: 8px; /* Block size */
    }
    /* Adjust overall page padding */
    .container {
        padding: var(--space-lg) var(--space-xs);
    }
    /* Adjust results width */
    .results-area { /* max-width adjusted to match grid container */
        max-width: 515px; /* Match updated grid */
    }

    /* Reduce vertical spacing in results area for medium screens */
    .results-area {
        padding-top: var(--space-sm);
        padding-bottom: var(--space-sm);
    }
    .results-area .results-intro {
        margin-bottom: var(--space-sm);
    }
    .results-area .results-stats-grid {
        margin-top: var(--space-xs);
    }
}

/* Tier 3: Smaller Screens (~Phone) - Target width < 487px */
@media (max-width: 486px) {
    /* Adjust grid container for smaller screens */
    /* Align intro and disclaimer max-width with form max-width on small screens */
    .intro-block-container,
    .disclaimer {
        max-width: 350px; /* Match .input-form max-width */
    }


    /* Remove body top/bottom padding to maximize vertical space */
    body {
        /* padding-top: 0; */ /* Body padding removed globally */
        /* padding-bottom: 0; */ /* Body padding removed globally */
    }
    .life-grid-container {
        max-width: 352px; /* Adjusted to fit 5px week blocks snugly */
        padding: 0 4px 4px 4px; /* Symmetrical padding */

    }
    /* Adjust grid content area gap */
    #grid-content-area {
        gap: 1.5px; /* Vertical gap */
    }
    /* Adjust week row gap and block size for Week view */
    .life-grid-container .year-row {
        gap: 1px; /* Gap between blocks */
    }
    .life-grid-container .week-block {
        width: 5px; /* Use 5px blocks for this tier */
        height: 5px; /* Use 5px blocks for this tier */
    }

    /* Make button full-width on small screens */
    .calculate-btn {
        width: 100%;
    }
    /* Adjust results width */
    .results-area {
        max-width: 352px; /* Match updated grid container max-width */
    }

    /* Further reduce vertical spacing and font sizes in results for smaller screens */
    .results-area {
        padding-top: var(--space-xs);
        padding-bottom: var(--space-xs);
    }
    .results-area .results-intro {
        margin-bottom: var(--space-xs);
        font-size: var(--font-size-sm); /* Reduce intro font size */
    }
    .results-area .results-stats-grid {
        margin-top: var(--space-xxs);
        gap: var(--space-xxs) var(--space-xs); /* Reduce grid internal gaps */
    }
    .results-area .stat-label,
    .results-area .stat-value {
        font-size: var(--font-size-sm); /* Reduce stats font size */
    }

    /* Further reduce axis label font size for smaller screens */
    .grid-axis-label {
        font-size: calc(var(--font-size-sm) * 0.75); /* Further reduce for small screens */
    }

    /* Adjustments for view buttons (previously in 480px tier) */
    .view-button {
        padding: var(--space-xs) calc(var(--space-xs) * 0.75);
        font-size: calc(var(--font-size-sm) * 0.9); /* Slightly smaller font for buttons */
    }
}
/* Tier 4: Smallest Screens - Target width < 379px */
@media (max-width: 378px) {
    /* Adjust grid container for smallest screens */
    .life-grid-container {
        max-width: 350px; /* Further adjustment for 5px blocks and labels */
        padding: 0 3px 3px 3px; /* Symmetrical padding */
    }
    /* Adjust grid content area gap */
    #grid-content-area {
        gap: 1px; /* Vertical gap */
    }
    /* Adjust week row gap and block size for Week view */
    .life-grid-container .year-row {
        gap: 1px; /* Gap between blocks */
    }
    .life-grid-container .week-block {
        width: 5px; /* Increased back from 4px */
        height: 5px; /* Increased back from 4px */
    }
     /* Adjust container padding and font sizes for very small screens */
    .container {
        padding: var(--space-md) var(--space-xxs);
    }
    h1 { font-size: 1.6rem; }
    .calculate-btn { font-size: var(--font-size-base); }
     /* Adjust results width */
    .results-area {
        max-width: 350px; /* Match updated grid */
    }
}

/* If content exceeds the smallest max-width (~350px), overflow-x: auto on .life-grid-container handles scrolling. */

/* --- Responsive Adjustments for Month/Year Block Sizes/Gaps --- */
/* These adjust how month/year blocks fill the container at smaller sizes */

/* Month View Responsiveness */
@media (max-width: 400px) {
    .life-grid-container.grid-view-months .month-row {
        gap: 1px; /* Reduce gap between month blocks */
    }
    .life-grid-container.grid-view-months #grid-content-area .month-block {
        /* Recalculate width for 12 blocks with 1px gaps (11 gaps total) */
        width: calc((100% - 11px) / 12); /* Aspect ratio is inherited */
    }
}
@media (max-width: 300px) {
    /* Keep gap at 1px, width recalculates automatically */
}

/* Year View Responsiveness */
@media (max-width: 300px) {
    .life-grid-container.grid-view-years .decade-row {
        gap: 2px; /* Reduce gap between year blocks */
    }
    .life-grid-container.grid-view-years #grid-content-area .year-block {
        /* Recalculate width for 10 blocks with 2px gaps (9 gaps total) */
        width: calc((100% - 18px) / 10); /* Aspect ratio is inherited */
    }
}

@media (max-width: 250px) {
    .life-grid-container.grid-view-years .decade-row {
        gap: 1px; /* Further reduce gap between year blocks */
    }
    .life-grid-container.grid-view-years #grid-content-area .year-block {
       /* Recalculate width for 10 blocks with 1px gaps (9 gaps total) */
        width: calc((100% - 9px) / 10); /* Aspect ratio is inherited */
    }
}

/* If year blocks cause content to exceed container max-width, overflow-x handles scrolling. */

/* --- Unified Focus Styles --- */
/* Apply a consistent focus style to all interactive elements for keyboard navigation */
/* :focus-visible ensures styles only apply for keyboard focus */
.form-group input[type="date"]:focus-visible,
.form-group select:focus-visible,
.calculate-btn:focus-visible, /* Includes #start-over-btn */
.grid-guide-details summary:focus-visible,
#grid-content-area:focus-visible {
    outline: 3px solid var(--color-primary-dark);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--color-background-body), 0 0 0 5px var(--color-primary-dark); /* Creates a 'border' around the outline */
    border-color: var(--color-primary-dark); /* Ensure border color changes if element has one */
}
/* For elements that shouldn't have the inner box-shadow part (like buttons) */
.calculate-btn:focus-visible,
.view-button:focus-visible {
    /* Individual view buttons should not have their own outline;
       parent #view-switcher handles focus indication. */
    box-shadow: none; /* Override the general focus-visible box-shadow */
    outline: none; /* Suppress browser's default outline for the button itself */
}