/* SECTION: Character-to-Index Mapping (CtIM) - Styles for CtIM output */
/*
 * Styles the Character-to-Index Mapping (CtIM) output for displaying character positions in both light and dark modes.
 * - **Displays** characters and indices in a structured, tiled layout with flexbox wrapping.
 * - **Applies** monospaced fonts for consistent spacing across characters.
 * - **Enhances** readability with color-coding (uppercase, lowercase, etc.) and alternating backgrounds.
 * - **Supports** zoom controls and dragging for interactive exploration.
 * - **Adapts** colors and shadows for dark mode compatibility.
 */

/* Purpose: CtIM Output Container - Main container for CtIM output */
#ctimOutput {
    /* Purpose: Typography */
    font-family: 'Source Code Pro', monospace; /* Monospaced font for even spacing */
    font-size: 20px; /* Readable font size for desktop */
    
    /* Purpose: Layout */
    display: flex; /* Flexbox for wrapping */
    flex-wrap: wrap; /* Enforce wrapping */
    justify-content: center; /* Centers content horizontally */
    align-items: flex-start; /* Align tops of tiles */
    text-align: center; /* Maintains consistent text alignment */
    
    /* Purpose: Sizing */
    min-height: 180px; /* Ensures consistent layout height */
    min-width: 100%; /* Prevents content cutoff */
    max-width: 100%; /* Fits within parent container */
    
    /* Purpose: Spacing */
    line-height: 2; /* Improves readability with line spacing */
    padding: 4px; /* Minimal padding for spacing */
    gap: 10px; /* Space between word containers */
    
    /* Purpose: Behavior */
    overflow: visible; /* Show all tiles, no clipping */
    
    /* Purpose: Appearance */
    border: none !important; /* Removes border for seamless look */
    background: transparent; /* Blends with UI background */
}

/* Purpose: Dark Mode CtIM Output - Updates for dark mode */
body.dark-mode #ctimOutput {
    /* Purpose: Appearance */
    background: transparent; /* Maintains transparency */
}

/* Purpose: CtIM Output on Mobile - Adjusts layout for mobile portrait mode */
@media (max-width: 767px) and (orientation: portrait) {
    #ctimOutput {
        /* Purpose: Layout */
        display: flex; /* Enables flexbox for mobile layout */
        flex-wrap: wrap; /* Allows characters to wrap */
        justify-content: flex-start; /* Aligns content to the left */
        align-items: flex-start; /* Aligns content to the top */
        
        /* Purpose: Sizing */
        max-width: 100%; /* Fits within screen width */
        
        /* Purpose: Behavior */
        overflow: visible; /* No clipping on mobile */
        
        /* Purpose: Spacing */
        gap: 4px; /* Spacing between elements */
        padding: 4px; /* Minimal padding for mobile */
    }
}

/* Purpose: CtIM Character Tile - Styles individual character tiles on desktop */
.ctim-char {
    /* Purpose: Layout */
    display: inline-block; /* Inline layout for tiles */
    text-align: center; /* Centers content within tile */
    
    /* Purpose: Spacing */
    margin: 2px; /* Reduced from 4px to bring tiles closer */
    padding: 6px; /* Internal padding for tile */
    
    /* Purpose: Appearance */
    background-color: #ffffff; /* White background for tiles in light mode */
    border-radius: 5px; /* Rounded corners for tiles */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    
    /* Purpose: Typography */
    font-size: 20px; /* Readable font size for characters */
    font-family: 'Source Code Pro', monospace; /* Monospaced font for spacing */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Adds subtle shadow to text */
    
    /* Purpose: Sizing */
    height: 45px; /* Fixed height for consistency */
    min-width: 40px; /* Minimum width for readability */
    line-height: 1.2; /* Adjusts text alignment within tile */
}

/* Purpose: Dark Mode CtIM Character Tile - Updates for dark mode */
body.dark-mode .ctim-char {
    /* Purpose: Appearance */
    background-color: #333; /* Dark gray background */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); /* Darker shadow for depth */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Darker text shadow */
}

/* Purpose: Even CtIM Character Tile - Alternates background color for even tiles in light mode */
.ctim-char:nth-child(even) {
    /* Purpose: Appearance */
    background-color: #FAFAFA; /* Light gray background for even tiles */
}

/* Purpose: Odd CtIM Character Tile - Alternates background color for odd tiles in light mode */
.ctim-char:nth-child(odd) {
    /* Purpose: Appearance */
    background-color: #FFFFFF; /* White background for odd tiles */
}

/* Purpose: Dark Mode Even CtIM Character Tile - Alternates background for even tiles */
body.dark-mode .ctim-char:nth-child(even) {
    /* Purpose: Appearance */
    background-color: #3A3A3A; /* Slightly lighter gray for even tiles */
}

/* Purpose: Dark Mode Odd CtIM Character Tile - Alternates background for odd tiles */
body.dark-mode .ctim-char:nth-child(odd) {
    /* Purpose: Appearance */
    background-color: #333; /* Dark gray for odd tiles */
}

/* Purpose: CtIM Lowercase Letters - Styles lowercase characters in light mode */
.ctim-lowercase {
    /* Purpose: Appearance */
    color: black; /* Black text for lowercase */
}

/* Purpose: Dark Mode CtIM Lowercase - Updates for dark mode */
body.dark-mode .ctim-lowercase {
    /* Purpose: Appearance */
    color: #d3d3d3; /* Light gray text for contrast */
}

/* Purpose: CtIM Uppercase Letters - Styles uppercase characters in light mode */
.ctim-uppercase {
    /* Purpose: Appearance */
    color: darkblue; /* Dark blue for uppercase */
    font-weight: normal; /* Normal weight, no bold */
}

/* Purpose: Dark Mode CtIM Uppercase - Updates for dark mode */
body.dark-mode .ctim-uppercase {
    /* Purpose: Appearance */
    color: #66b3ff; /* Light blue for uppercase */
}

/* Purpose: CtIM Numbers - Styles numeric characters in light mode */
.ctim-number {
    /* Purpose: Appearance */
    color: blue; /* Blue for numbers */
    font-weight: normal; /* Normal weight, no bold */
}

/* Purpose: Dark Mode CtIM Numbers - Updates for dark mode */
body.dark-mode .ctim-number {
    /* Purpose: Appearance */
    color: #3399FF; /* Lighter blue for numbers */
}

/* Purpose: CtIM Punctuation - Styles punctuation characters in light mode */
.ctim-punctuation {
    /* Purpose: Appearance */
    color: green; /* Green for punctuation */
    font-style: italic; /* Italic style for distinction */
}

/* Purpose: Dark Mode CtIM Punctuation - Updates for dark mode */
body.dark-mode .ctim-punctuation {
    /* Purpose: Appearance */
    color: #4CAF50; /* Muted green for punctuation */
}

/* Purpose: CtIM Symbols - Styles symbol characters in light mode */
.ctim-symbol {
    /* Purpose: Appearance */
    color: red; /* Red for symbols */
    font-style: italic; /* Italic style for distinction */
}

/* Purpose: Dark Mode CtIM Symbols - Updates for dark mode */
body.dark-mode .ctim-symbol {
    /* Purpose: Appearance */
    color: #FF4444; /* Softer red for symbols */
}

/* Purpose: CtIM Character Tile on Mobile - Adjusts tile styles for mobile portrait mode */
@media (max-width: 767px) and (orientation: portrait) {
    .ctim-char {
        /* Purpose: Sizing */
        width: 24px; /* Smaller width for mobile */
        height: 32px; /* Smaller height for mobile */
        font-size: 14px; /* Smaller font size for mobile */
        
        /* Purpose: Spacing */
        padding: 4px; /* Reduced padding for mobile */
        margin: 1px; /* Reduced from 2px to maintain proportion */
        
        /* Purpose: Layout */
        text-align: center; /* Centers content within tile */
        overflow: hidden; /* Prevents content overflow */
        flex-shrink: 0; /* Prevents shrinking in flex layout */
        display: flex; /* Enables flexbox for mobile layout */
        flex-direction: column; /* Stacks content vertically */
        align-items: center; /* Centers content horizontally */
        justify-content: center; /* Centers content vertically */
    }
}

/* Purpose: CtIM Word Container - Arranges character tiles within a word */
.ctim-word-container {
    /* Purpose: Layout */
    display: flex; /* Flexbox for tile arrangement */
    flex-wrap: wrap; /* Allow tiles to wrap within words */
    align-items: center; /* Vertically centers tiles */
    
    /* Purpose: Sizing */
    width: auto; /* Fits content width */
    height: 100%; /* Matches parent height */
    
    /* Purpose: Spacing */
    padding: 0px 6px; /* Horizontal padding for spacing */
    margin-right: 10px; /* Reduced spacing between words */
    gap: 2px; /* Reduced from 4px to bring tiles closer */
    
    /* Purpose: Appearance */
    border-radius: 6px; /* Rounded corners for container */
}

/* Purpose: Odd CtIM Word Container - Alternates background for odd words in light mode */
.ctim-word-container:nth-child(odd) {
    /* Purpose: Appearance */
    background-color: rgba(224, 247, 250, 0.8); /* Light cyan background for odd words */
}

/* Purpose: Even CtIM Word Container - Alternates background for even words in light mode */
.ctim-word-container:nth-child(even) {
    /* Purpose: Appearance */
    background-color: rgba(255, 243, 224, 0.8); /* Light orange background for even words */
}

/* Purpose: Dark Mode Odd CtIM Word Container - Updates for dark mode */
body.dark-mode .ctim-word-container:nth-child(odd) {
    /* Purpose: Appearance */
    background-color: rgba(60, 90, 100, 0.8); /* Darker cyan for odd words */
}

/* Purpose: Dark Mode Even CtIM Word Container - Updates for dark mode */
body.dark-mode .ctim-word-container:nth-child(even) {
    /* Purpose: Appearance */
    background-color: rgba(90, 70, 50, 0.8); /* Darker orange for even words */
}

/* Purpose: CtIM Word Container on Mobile - Adjusts word container for mobile portrait mode */
@media (max-width: 767px) and (orientation: portrait) {
    .ctim-word-container {
        /* Purpose: Layout */
        display: flex; /* Flexbox for mobile */
        flex-wrap: wrap; /* Allows wrapping within words */
        justify-content: flex-start; /* Aligns tiles to the left */
        align-items: center; /* Vertically centers tiles */
        
        /* Purpose: Sizing */
        max-width: 100%; /* Fits within screen width */
        
        /* Purpose: Behavior */
        overflow: hidden; /* Prevents content overflow */
        
        /* Purpose: Spacing */
        gap: 1px; /* Reduced from 3px to maintain proportion */
        margin-bottom: 6px; /* Space below each word */
        padding: 4px; /* Minimal padding for mobile */
        
        /* Purpose: Appearance */
        border-radius: 6px; /* Rounded corners for container */
    }
}

/* Purpose: CtIM Index Number - Displays character position below each tile */
.ctim-index {
    /* Purpose: Appearance */
    color: grey; /* Gray text for indices in light mode */
    
    /* Purpose: Spacing */
    margin-top: 6px; /* Space between character and index */
    
    /* Purpose: Typography */
    font-size: 12px; /* Smaller font size for non-intrusive display */
}

/* Purpose: Dark Mode CtIM Index - Updates for dark mode */
body.dark-mode .ctim-index {
    /* Purpose: Appearance */
    color: #888; /* Lighter gray for indices in dark mode */
}

/* Purpose: CtIM Zoom Controls Container - Arranges zoom buttons */
.citm-zoom-controls {
    /* Purpose: Layout */
    display: flex; /* Flexbox for horizontal arrangement */
    justify-content: center; /* Centers buttons horizontally */
    
    /* Purpose: Spacing */
    gap: 10px; /* Spacing between buttons */
    margin-bottom: 10px; /* Space below controls */
    
    /* Purpose: Positioning */
    position: relative; /* Ensures proper positioning */
    z-index: 1000; /* Stays above zoomed content */
}

/* Purpose: CtIM Zoom Button - Styles zoom in/out buttons in light mode */
.citm-zoom-controls button {
    /* Purpose: Spacing */
    padding: 6px 12px; /* Comfortable padding */
    
    /* Purpose: Typography */
    font-size: 12px; /* Readable font size */
    
    /* Purpose: Behavior */
    cursor: pointer; /* Indicates clickability */
    
    /* Purpose: Appearance */
    background-color: #007BFF; /* Blue background in light mode */
    color: white; /* White text */
    border: none; /* No border */
    border-radius: var(--button-border-radius); /* Rounds corners from :root (default 5px) */
    transition: background-color 0.2s; /* Smooth hover transition */
}

/* Purpose: Dark Mode CtIM Zoom Button - Updates for dark mode */
body.dark-mode .citm-zoom-controls button {
    /* Purpose: Appearance */
    background-color: #007BFF; /* Keep blue background */
    color: #d3d3d3; /* Light gray text */
}

/* Purpose: CtIM Zoom Button Hover - Darkens button on hover in light mode */
.citm-zoom-controls button:hover {
    /* Purpose: Appearance */
    background-color: #0056b3; /* Darker blue on hover in light mode */
}

/* Purpose: Dark Mode CtIM Zoom Button Hover - Updates for dark mode */
body.dark-mode .citm-zoom-controls button:hover {
    /* Purpose: Appearance */
    background-color: #3399FF; /* Lighter blue on hover in dark mode */
}

/* Purpose: Prevent Zoom on Controls - Ensures zoom controls are unaffected by scaling */
#citmZoomControls {
    /* Purpose: Behavior */
    transform: none !important; /* Prevents scaling */
}

/* Purpose: CtIM Wrapper - Container for CtIM output with scrolling */
#ctimWrapper {
    /* Purpose: Behavior */
    overflow-x: hidden; /* No horizontal scroll */
    overflow-y: auto; /* Enables vertical scrolling */
    
    /* Purpose: Positioning */
    position: relative; /* Contains CtIM content */
    
    /* Purpose: Sizing */
    max-height: 400px; /* Limits vertical growth */
    width: 100%; /* Fits parent width */
    min-width: 100%; /* Prevents content cutoff */
    
    /* Purpose: Layout */
    display: block; /* Prevents flexbox issues */
    text-align: left; /* Natural text alignment */
    
    /* Purpose: Appearance */
    border: none !important; /* Removes border */
    background: transparent; /* Clean appearance */
    
    /* Purpose: Spacing */
    padding: 0; /* No padding */
    margin: 0 auto; /* Centers the wrapper */
}

/* Purpose: Dark Mode CtIM Wrapper - Updates for dark mode */
body.dark-mode #ctimWrapper {
    /* Purpose: Appearance */
    background: transparent; /* Maintains transparency */
}

/* Purpose: CtIM Wrapper Dragging - Changes cursor during drag */
#ctimWrapper.dragging {
    /* Purpose: Behavior */
    cursor: grabbing !important; /* Grabbing cursor during drag */
}

/* Purpose: CtIM Wrapper Interaction - Default cursor and selection behavior */
#ctimWrapper {
    /* Purpose: Behavior */
    cursor: grab; /* Grab cursor for draggable content */
    user-select: none; /* Prevents text selection during drag */
}

/* Purpose: CtIM Tooltip - Styles the NATO phonetic tooltip popup in light mode */
.ctim-tooltip {
    /* Purpose: Positioning */
    position: absolute; /* Positions relative to tile via JS */
    
    /* Purpose: Appearance */
    background-color: #333; /* Dark gray background for contrast in light mode */
    color: #fff; /* White text for readability */
    border-radius: 4px; /* Rounded corners */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    
    /* Purpose: Typography */
    padding: 4px 8px; /* Compact padding */
    font-family: 'Source Code Pro', monospace; /* Matches CtIM font */
    font-size: 14px; /* Readable but unobtrusive */
    font-weight: 500; /* Slight bold for clarity */
    
    /* Purpose: Behavior */
    z-index: 2000; /* Above footer and other content */
    pointer-events: none; /* Prevents interference with hover */
    white-space: nowrap; /* Keeps tooltip text on one line */
}

/* Purpose: Dark Mode CtIM Tooltip - Updates for dark mode */
body.dark-mode .ctim-tooltip {
    /* Purpose: Appearance */
    background-color: #444; /* Slightly lighter gray for contrast */
    color: #d3d3d3; /* Light gray text */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); /* Darker shadow */
}

/* Purpose: CtIM Tooltip on Mobile - Adjusts tooltip for smaller screens */
@media (max-width: 767px) and (orientation: portrait) {
    .ctim-tooltip {
        /* Purpose: Typography */
        font-size: 12px; /* Smaller font for mobile */
        
        /* Purpose: Spacing */
        padding: 3px 6px; /* Reduced padding */
    }
}