/* ====================================================================================================
 *  FILE        : changelog.css
 *  PURPOSE     : Styles the changelog modal overlay, panel surface, header, and readable changelog typography.
 *  SCOPE       :
 *    - Applies to the changelog modal UI only (overlay, modal panel, header, and injected changelog content).
 *    - Must NOT style or unintentionally influence the host application UI outside the modal surface.
 *
 *  STRUCTURE (DOM map / conceptual map):
 *    - #changelogModal                 → Full-screen overlay/backdrop; controls modal visibility and stacking.
 *    - #changelogModal.show            → Open state trigger; enables visibility, interaction, and scrolling.
 *    - #changelogModal .modal-content  → Modal panel surface; fixed container that holds header + scroll area.
 *    - .modal-header                   → Sticky header bar; remains visible above scrolling content.
 *    - .header-branding                → Title/subtitle stack; centred header branding layout.
 *    - .close-button                   → Close control affordance (hover/focus feedback).
 *    - .changelog-content              → The ONLY intended scroll container for long changelog content.
 *    - .changelog-content h2 / ul / li → Changelog typography and list spacing.
 *
 *  BEHAVIOUR NOTES:
 *    - State model:
 *        • Default (closed): visibility: hidden + pointer-events: none + opacity: 0
 *        • Open (.show):     visibility: visible + pointer-events: auto + opacity: 1
 *      The overlay remains display: grid so opacity transitions can animate smoothly.
 *
 *    - Transition model:
 *        • opacity fades over 0.22s
 *        • visibility switches to hidden after the fade completes (prevents premature “pop” on close)
 *
 *    - Scroll model (invariant):
 *        • Primary reading scroll surface is .changelog-content
 *        • Overlay scroll (overflow-y) is enabled only while open as a safety valve for extreme layouts
 *
 *    - Layering:
 *        • Overlay uses a high z-index to sit above application UI
 *        • Header uses sticky + z-index to stay above the scrolling content region
 *
 *  BROWSER / PLATFORM NOTES:
 *    - Backdrop blur: uses backdrop-filter (and -webkit-backdrop-filter) where supported.
 *    - Firefox: @-moz-document disables backdrop-filter on the header and increases opacity for a consistent fallback.
 *    - Scrollbars:
 *        • WebKit/Blink use ::-webkit-scrollbar rules.
 *        • Firefox uses scrollbar-width / scrollbar-color.
 *
 *  AUTHOR      : Adrian Ramon
 *  MODIFICATION: 6 February 2026
 * ==================================================================================================== */


/* ============================================= */
/* SECTION: Changelog Modal – Overlay & Backdrop */
/* ============================================= */
/*
 * Purpose:
 * - Provides a full-viewport overlay that hosts the modal panel and visually separates it from the app UI.
 *
 * Interaction states:
 * - Default (closed):
 *   - visibility: hidden + pointer-events: none prevents interaction and click-through surprises.
 *   - opacity: 0 keeps the overlay visually absent while still allowing smooth fade transitions.
 *
 * - Open (.show):
 *   - visibility/pointer-events re-enabled, opacity fades to 1.
 *
 * Scroll model:
 * - overflow-y is disabled by default and enabled only when open.
 * - Intended reading scroll surface remains .changelog-content (inside the panel).
 *
 * Layering:
 * - High z-index ensures the modal sits above the host application UI.
 */
#changelogModal {
    position: fixed;
    inset: 0;
    
    /* Centre the modal panel */
    display: grid;
    place-items: center;

    /* Backdrop */
    background: rgba(0, 0, 0, 0.65);

    /* Ensure overlay sits above app UI */
    z-index: 9999;

    /* Closed by default: do not capture page scroll */
    overflow-y: hidden;

    /* Backdrop softening (best-effort; varies by browser) */
    backdrop-filter: blur(3px);

    /* Closed state visuals */
    opacity: 0;

    /* Smooth open/close (visibility is delayed so fade-out completes before hide) */
    transition:
        opacity 0.22s ease-out,
        visibility 0s linear 0.22s;

    /* Closed state interaction contract */
    pointer-events: none;
    visibility: hidden;
}

/*
 * Open state:
 * - Restores interaction and makes the overlay visible.
 * - Enables overlay overflow as a fallback (primary scroll surface remains .changelog-content).
 * - Removes the visibility delay so the overlay is immediately visible on open.
 */
#changelogModal.show {
    opacity: 1;

    overflow-y: auto;

    transition:
        opacity 0.22s ease-out,
        visibility 0s;

    pointer-events: auto;
    visibility: visible;
}


/* ====================================================================================================
 *  SECTION: Modal Panel Surface — fixed container for header + scrollable content
 * ==================================================================================================== */
/*
 * Purpose:
 * - Creates the modal “panel” surface users read within, with an isolated dim-mode palette and typography.
 *
 * Behaviour:
 * - The panel itself does NOT scroll; it constrains height and clips overflow.
 * - The scrollable region is the inner .changelog-content container (kept separate for predictable UX).
 *
 * Layout:
 * - Uses flex column so the header sits above and the content area expands to fill remaining space.
 */
#changelogModal .modal-content {
    position: relative;

    /* Size constraints: responsive width, capped height */
    width: min(90vw, 820px);
    max-height: 90vh;

    /* Space around the panel so it doesn’t touch viewport edges */
    margin: 2rem auto;

    /* No internal padding here: header/content manage their own spacing */
    padding: 0;

    /* Panel shape + elevation */
    border-radius: 12px;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.52);

    /* Dim-mode surface colours (easier on the eyes than near-black) */
    background: #1b1c1f;
    border: 1px solid #2a2c33;

    /* Global typography baseline for modal */
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 16px;
    line-height: 1.6;
    color: rgba(233, 233, 238, 0.88);

    /* Text rendering polish (best-effort; varies by browser) */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Prevent panel from creating its own scrollbar */
    overflow: hidden;
    
    opacity: 0.96;
    display: flex;
    flex-direction: column;
    
}


/* =================================================== */
/* SECTION: Sticky Modal Header – Title + Close Button */
/* =================================================== */
/*
 * Purpose:
 * - Keeps the header visible while the changelog content scrolls beneath it.
 *
 * Scroll boundary:
 * - position: sticky anchors the header to the top of the panel scroll viewport.
 * - z-index ensures the header remains above the scrolling content region.
 *
 * Visual model:
 * - Semi-transparent header background with blur creates separation without a harsh divider.
 * - Shadow reinforces the sense of a floating header layer over the content.
 */
.modal-header {
    position: sticky;
    top: 0;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 1.2rem 1.6rem 1rem;

    background: rgba(22, 23, 26, 0.65); 
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 4px 12px rgba(42, 44, 51, 0.95);

    border-radius: 12px;
}

/*
 * Firefox fallback:
 * - Firefox does not reliably render backdrop-filter in this layout.
 * - This override disables blur and increases background opacity for a consistent, readable header surface.
 */
@-moz-document url-prefix() {
    .modal-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(22, 23, 26, 0.95);
    }
}


/* ======================================= */
/* SECTION: Close Control – Button Styling */
/* ======================================= */
/*
 * Purpose:
 * - Provides a clear close affordance without introducing heavy visual noise.
 *
 * Interaction states:
 * - Hover/focus increases opacity and slightly scales to confirm interactivity.
 * - Transitions provide a small, polished response to user intent.
 */
.close-button {
    background: transparent;
    border: none;
    padding: 0.35rem 0.45rem;
    cursor: pointer;

    font-size: 2rem;
    line-height: 1;

    color: #f2f2f2;
    opacity: 0.75;

    transition: opacity 0.18s ease, transform 0.12s ease;
}

.close-button:hover,
.close-button:focus {
    opacity: 1;
    transform: scale(1.25);
}


/* ===================================== */
/* SECTION: Scrollable Changelog Content */
/* ===================================== */
/*
 * Purpose:
 * - Dedicated reading/scroll surface for the changelog body.
 *
 * Scroll model (invariant):
 * - Scrolling is intended to happen here (overflow-y: auto), not on the panel surface.
 *
 * Layout:
 * - flex: 1 allows this region to expand and fill remaining height beneath the header.
 * - padding provides comfortable reading margins for long-form content.
 *
 * Note on scrollbars:
 * - Scrollbar styling is defined in the dedicated Scrollbar Styling section below.
 *
 * Safari / macOS note:
 * - When macOS is configured to show scrollbars "Automatically based on mouse or trackpad",
 *   Safari uses system overlay scrollbars that ignore most ::-webkit-scrollbar track styling.
 * - Without an explicit colour context, Safari may render a light (white) scrollbar gutter
 *   even on dark surfaces.
 * - `color-scheme: dark` explicitly declares this as a dark UI surface, allowing Safari/macOS
 *   to render appropriate dark system scrollbars while respecting user accessibility settings.
 */
.changelog-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem 2.2rem;
    padding-top: 0.5rem;
    background-color: #1b1c1f;
    color-scheme: dark;
}


/* ====================================================================================================
 *  SECTION: Version Headings — “vX.Y.Z (date)” blocks
 * ==================================================================================================== */
/*
 * Purpose:
 * - Separates versions clearly for rapid scanning.
 * - Uses a subtle divider to structure long histories without heavy visual separators.
 */
.changelog-content h2 {
    font-weight: 650;
    font-size: 1.2rem;

    margin: 2rem 0 0.75rem;
    padding-bottom: 0.35rem;

    border-bottom: 1px solid #2a2a2f;
    color: #f2f2f2;
}


/* ====================================================================================================
 *  SECTION: Lists — primary bullets and nested detail bullets
 * ==================================================================================================== */
/*
 * Purpose:
 * - Primary list items represent the main change bullets.
 * - Nested lists represent supporting detail and are slightly softer to keep emphasis on the primary items.
 *
 * Readability:
 * - Spacing and line-height are tuned for long-form reading at the modal’s baseline font size.
 */
.changelog-content ul {
    margin: 0.75rem 0 0;
    padding-left: 1.25rem;
}

.changelog-content li {
    font-size: 0.98rem;
    margin: 0.45rem 0;
    line-height: 1.62;
    color: rgba(233, 233, 238, 0.80);
    opacity: 0.80;
}

/* Nested list container spacing */
.changelog-content li > ul {
    margin-top: 0.4rem;
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
}

/* Nested list items: supporting detail (softer contrast) */
.changelog-content li > ul > li {
    font-size: 0.96rem;
    color: rgba(233, 233, 238, 0.70);
}


/* ====================================================================================================
 *  SECTION: Scrollbar Styling — applies ONLY to the scroll container
 * ==================================================================================================== */
/*
 * Purpose:
 * - Styles the .changelog-content scrollbar to better match the dim modal palette.
 *
 * Cascade note:
 * - This block is intentionally placed after the main .changelog-content definition to keep layout/scroll
 *   behaviour separate from browser-specific scrollbar presentation.
 *
 * Browser support:
 * - WebKit/Blink browsers use ::-webkit-scrollbar rules.
 * - Firefox uses scrollbar-width / scrollbar-color.
 */
/* WebKit */
.changelog-content::-webkit-scrollbar {
    width: 10px;
}

.changelog-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
}

.changelog-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
}

.changelog-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
}

.changelog-content::-webkit-scrollbar-corner {
    background-color: #1b1c1f;
}

/* Firefox (additive layer: does not affect layout/overflow/padding above) */
.changelog-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) rgba(255, 255, 255, 0.06);
}


/* =============================================================== */
/* SECTION: Modal Header Title – Heavy shadow project name display */
/* =============================================================== */
/*
 * Purpose:
 * - Styles the primary project title within the header for strong branding and legibility.
 *
 * Visual model:
 * - Large type and multi-layer text-shadow produce depth against the dim header surface.
 *
 * Containment note:
 * - !important is used to protect header branding against inherited host styles (embedded/injected contexts).
 */
.modal-header .project-title {
    /* Purpose: Reset margins and sizing */
    margin: 0;
    margin-bottom: 0.25em !important;
    font-size: 3.2rem !important;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    
    /* Purpose: Force white text colour */
    color: rgba(255, 255, 255, 0.98) !important; /* ← White */
    background: none !important;
    -webkit-text-fill-color: initial !important;
    
    /* Purpose: Heavy multi-layer shadow stack for depth */
    text-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.8), /* ← Black */
        0 4px 8px rgba(0, 0, 0, 0.6), /* ← Black */
        0 8px 16px rgba(0, 0, 0, 0.4), /* ← Black */
        0 0 30px rgba(255, 255, 255, 0.5) !important;  /* ← White */
}


/* ============================================================ */
/* SECTION: Modal Header Subtitle – Pill-shaped changelog label */
/* ============================================================ */
/*
 * Purpose:
 * - Styles the “Changelog” label as a subtle, pill-shaped badge beneath the project title.
 *
 * Visual model:
 * - Uppercase + wide letter-spacing creates a distinct, “label-like” tone.
 * - Semi-transparent background and border keep emphasis on the main title.
 *
 * Containment note:
 * - !important is used to ensure consistent presentation within embedded/injected environments.
 */
.modal-header .changelog-subtitle {
    /* Purpose: Typography and casing */
    font-size: 1.0rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    
    /* Purpose: Colour and transparency */
    color: rgba(255, 255, 255, 0.5) !important; /* ← White */
    
    /* Purpose: Pill-shaped container styling */
    background: rgba(255, 255, 255, 0.08) !important; /* ← White */
    padding: 0.3rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* ← White */
    
    /* Purpose: Depth shadow for consistency */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; /* ← Black */
}


/* ========================================================================= */
/* SECTION: Header Branding Container – Flex layout for centered title stack */
/* ========================================================================= */
/*
 * Purpose:
 * - Provides a centred container for the title/subtitle stack within the header.
 *
 * Layout contract:
 * - Column stacking keeps title above subtitle.
 * - align-items + text-align ensure visual centring regardless of available width.
 * - flex: 1 allows branding to occupy remaining header space alongside the close button.
 */
.header-branding {
    /* Purpose: Flex container setup */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    
    /* Purpose: Layout fill */
    flex: 1;
}