/* SECTION: Global Variables - Custom properties for Help Mode */
/*
 * Defines global CSS variables for Help Mode styling within the :root scope.
 * - **Purpose**: Centralizes reusable values for colors, sizes, and transitions in both light and dark modes.
 * - **Features**: Enables consistent theming across Help Mode components with dark mode support.
 * - **Behavior**: Variables are globally available unless overridden locally.
 *
 * Version 1.4
 * 2025-04-08
 *
 */
:root {
    /* Purpose: Define color tokens for light mode */
    --help-tooltip-bg: #fff; /* White background for tooltips */
    --help-tooltip-border: #FF9800; /* Orange border matching #helpButton glow */
    --help-tooltip-text: #333; /* Dark text for readability */
    --help-glow-green: #4CAF50; /* Green glow for interactive elements */
    --help-glow-orange: #FF9800; /* Orange glow for #helpButton */
    --help-icon-color: #4CAF50; /* Green accent for help icon */
    --help-desc-color: #555; /* Medium gray for descriptions */
    --help-example-bg: #ecf0f5; /* Light gray for example backgrounds */
    --help-example-text: #5f6a6a; /* Darker gray for example text */
    
    /* Purpose: Define sizing and spacing */
    --help-tooltip-padding: 10px 12px; /* Roomier padding for content */
    --help-tooltip-max-width: 350px; /* Constrain tooltip width */
    --help-font-size: 14px; /* Default font size for desktop */
    --help-font-size-mobile: 12px; /* Smaller font size for mobile */
    
    /* Purpose: Define animation properties */
    --help-transition: opacity 0.3s ease-in-out; /* Smooth fade transition */
    --help-pulse-start: 0 0 5px var(--help-glow-green); /* Pulse animation start with green */
    --help-pulse-peak: 0 0 15px var(--help-glow-green); /* Pulse animation peak with green */
    --help-counter-radius: 3px; /* Rounded corners for counters in Help Mode */
}

/* Purpose: Dark Mode Global Variables - Updates for dark mode */
body.dark-mode {
    /* Purpose: Update color tokens for dark mode */
    --help-tooltip-bg: #333; /* Dark gray background for tooltips */
    --help-tooltip-border: #FF4444; /* Softer red border for emphasis */
    --help-tooltip-text: #d3d3d3; /* Light gray text for readability */
    --help-glow-green: #4CAF50; /* Keep green glow for consistency */
    --help-glow-orange: #FF4444; /* Softer red glow for #helpButton */
    --help-icon-color: #4CAF50; /* Keep green accent for help icon */
    --help-desc-color: #d3d3d3; /* Light gray for descriptions */
    --help-example-bg: #444; /* Mid-gray for example backgrounds */
    --help-example-text: #d3d3d3; /* Light gray for example text */
}

/* SECTION: Help Tooltip - Styles for Help Mode Tooltips */
/*
 * Styles the .help-tooltip class for displaying contextual help content in Help Mode.
 * - **Purpose**: Defines the appearance and behavior of tooltips triggered in Help Mode for both light and dark modes.
 * - **Features**: Matches undo/redo tooltip styling with orange accents in light mode, red in dark mode, and includes fade animations.
 * - **Behavior**: Positions absolutely above target elements with responsive font sizing.
 */
.help-tooltip {
    /* Purpose: Appearance - Base styling for light mode */
    background-color: var(--help-tooltip-bg); /* White base in light mode */
    border: 2px solid var(--help-tooltip-border); /* Orange border in light mode */
    color: var(--help-tooltip-text); /* Dark text in light mode */
    font-weight: 500; /* Slight bold for clarity */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Stronger shadow for depth */
    border-radius: 6px; /* Rounded corners for softness */
    
    /* Purpose: Positioning and animation */
    position: absolute; /* Positions relative to target element */
    padding: var(--help-tooltip-padding); /* Slightly roomier for guide content */
    max-width: var(--help-tooltip-max-width); /* Keep constrained */
    z-index: 1000; /* Above buttons, below dropdowns */
    opacity: 0; /* Hidden for fade-in */
    transition: var(--help-transition); /* Smooth fade */
    pointer-events: none; /* Non-interactive */
    
    /* Purpose: Typography */
    font-size: var(--help-font-size); /* Default for desktop */
}

/* Purpose: Dark Mode Help Tooltip - Updates for dark mode */
body.dark-mode .help-tooltip {
    /* Purpose: Appearance */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Darker shadow for depth */
}

/* Purpose: Shrink font on mobile like undo/redo */
@media (max-width: 991px) {
    .help-tooltip {
        /* Purpose: Typography */
        font-size: var(--help-font-size-mobile); /* Smaller for mobile fit */
        line-height: 1.2; /* Keeps text readable */
    }
}

/* Purpose: Style tooltip title in light mode */
.help-tooltip strong {
    /* Purpose: Layout */
    display: flex; /* Aligns icon and text horizontally */
    align-items: center; /* Vertically centers content */
    
    /* Purpose: Typography */
    font-size: 16px; /* Keep larger header */
    font-weight: 700; /* Bold for emphasis */
    color: #2c3e50; /* Darker blue-gray in light mode */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Adds subtle shadow to text */
    
    /* Purpose: Spacing */
    margin-bottom: 8px; /* Space below title */
}

/* Purpose: Dark Mode Tooltip Title - Updates for dark mode */
body.dark-mode .help-tooltip strong {
    /* Purpose: Appearance */
    color: #d3d3d3; /* Light gray text for contrast */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Darker shadow for depth */
}

/* Purpose: Style help icon in light mode */
.help-tooltip .help-icon {
    /* Purpose: Spacing */
    margin-right: 6px; /* Space between icon and text */
    
    /* Purpose: Appearance */
    color: var(--help-icon-color); /* Green accent */
}

/* Purpose: Dark Mode Help Icon - Updates for dark mode */
body.dark-mode .help-tooltip .help-icon {
    /* Purpose: Appearance */
    color: #4CAF50; /* Keep green accent for consistency */
}

/* Purpose: Style description text in light mode */
.help-tooltip .help-description {
    /* Purpose: Typography */
    line-height: 1.5; /* Improves readability */
    color: var(--help-desc-color); /* Medium gray in light mode */
    
    /* Purpose: Spacing */
    margin-bottom: 8px; /* Space below description */
}

/* Purpose: Dark Mode Description Text - Updates for dark mode */
body.dark-mode .help-tooltip .help-description {
    /* Purpose: Appearance */
    color: var(--help-desc-color); /* Light gray in dark mode */
}

/* Purpose: Style example text in light mode */
.help-tooltip small {
    /* Purpose: Layout */
    display: block; /* Takes full width */
    
    /* Purpose: Typography */
    font-family: 'Courier New', Courier, monospace; /* Monospace for code-like examples */
    font-size: 13px; /* Slightly smaller than body */
    color: var(--help-example-text); /* Darker gray in light mode */
    
    /* Purpose: Appearance */
    background: var(--help-example-bg); /* Light gray background in light mode */
    border-radius: 4px; /* Rounded corners */
    
    /* Purpose: Spacing */
    padding: 4px 8px; /* Internal spacing */
}

/* Purpose: Dark Mode Example Text - Updates for dark mode */
body.dark-mode .help-tooltip small {
    /* Purpose: Appearance */
    color: var(--help-example-text); /* Light gray in dark mode */
    background: var(--help-example-bg); /* Mid-gray background in dark mode */
}

/* Purpose: Style timer display in light mode */
.help-tooltip .help-timer {
    /* Purpose: Positioning */
    position: absolute; /* Positions relative to tooltip */
    top: 5px; /* Distance from top */
    right: 10px; /* Distance from right */
    
    /* Purpose: Typography */
    font-size: 12px; /* Smaller for subtlety */
    color: #666; /* Gray for low contrast in light mode */
    
    /* Purpose: Appearance */
    opacity: 0.8; /* Slightly faded */
}

/* Purpose: Dark Mode Timer Display - Updates for dark mode */
body.dark-mode .help-tooltip .help-timer {
    /* Purpose: Appearance */
    color: #888; /* Lighter gray for contrast in dark mode */
}

/* SECTION: Help Mode Cursor - Defines cursor behavior in Help Mode */
/*
 * Styles the cursor for all elements when Help Mode is active.
 * - **Purpose**: Indicates Help Mode with a distinct cursor style in both light and dark modes.
 * - **Features**: Overrides default cursors with a help cursor across all elements.
 * - **Behavior**: Ensures consistent feedback during Help Mode interactions.
 */
.help-mode-active,
.help-mode-active * {
    /* Purpose: Behavior */
    cursor: help !important; /* Enforce help cursor everywhere in Help mode */
}

/* SECTION: Help Mode Animations - Defines glow animations for Help Mode */
/*
 * Defines the pulse animation and glow effects for interactive elements in Help Mode.
 * - **Purpose**: Provides visual feedback with animated glows for buttons, counters, and textarea in both light and dark modes.
 * - **Features**: Uses keyframes for pulsing green glow and steady orange (light mode) or red (dark mode) glow for #helpButton.
 * - **Behavior**: Applies green pulse to most elements, mode-specific glow to #helpButton when active.
 */
@keyframes pulse {
    0% { box-shadow: var(--help-pulse-start); } /* Starting small green glow */
    50% { box-shadow: var(--help-pulse-peak); } /* Peak green glow intensity */
    100% { box-shadow: var(--help-pulse-start); } /* Return to small green glow */
}

/* Purpose: Animate interactive elements in Help Mode with green glow */
.help-mode-active button:not(#helpButton),
.help-mode-active #dateTimeDisplay,
.help-mode-active #positionDisplay,
.help-mode-active #inputText {
    /* Purpose: Animation */
    animation: pulse 1.5s infinite; /* Pulse green glow */
}

/* Purpose: Animate counters in Help Mode with green glow and rounded corners */
.help-mode-active #charLabel,
.help-mode-active #wordLabel,
.help-mode-active #lineLabel,
.help-mode-active #sentenceLabel,
.help-mode-active #numberLabel,
.help-mode-active #digitLabel,
.help-mode-active #symbolLabel,
.help-mode-active #punctuationLabel,
.help-mode-active #paragraphLabel,
.help-mode-active #vowelLabel,
.help-mode-active #consonantLabel,
.help-mode-active #blankLineLabel,
.help-mode-active #spaceLabel {
    /* Purpose: Animation */
    animation: pulse 1.5s infinite; /* Pulse green glow */
    
    /* Purpose: Appearance */
    border-radius: var(--help-counter-radius); /* Apply rounded corners for smoother glow */
}

/* Purpose: Style #helpButton in Help Mode with orange glow in light mode */
body.help-mode-active #helpButton {
    /* Purpose: Appearance */
    box-shadow: 0 0 10px var(--help-glow-orange); /* Steady orange glow in light mode */
}

/* Purpose: Dark Mode #helpButton Glow - Updates for dark mode */
body.dark-mode.help-mode-active #helpButton {
    /* Purpose: Appearance */
    box-shadow: 0 0 10px var(--help-glow-orange); /* Steady red glow in dark mode */
}

/* SECTION: Button Cursors - Ensures proper cursor behavior outside Help Mode */
/*
 * Styles the default cursor states for buttons when not in Help Mode.
 * - **Purpose**: Maintains consistent cursor feedback for button states in both light and dark modes.
 * - **Features**: Sets pointer for enabled buttons and not-allowed for disabled ones.
 * - **Behavior**: Applies globally to all button elements unless overridden.
 */
button {
    /* Purpose: Behavior */
    cursor: pointer; /* Default for enabled buttons */
}

/* Purpose: Style disabled buttons in light mode */
button:disabled {
    /* Purpose: Behavior */
    cursor: not-allowed; /* Default for disabled buttons */
}

/* Purpose: Dark Mode Disabled Buttons - Updates for dark mode */
body.dark-mode button:disabled {
    /* Purpose: Behavior */
    cursor: not-allowed; /* Maintain not-allowed cursor */
}