/* ====================================================================================================
 *  FILE        : css/wcag-contrast.css
 *  PURPOSE     : Styles for the WCAG contrast panel (CR-024 / CR-031).
 *
 *  SCOPE:
 *    - All styles are scoped to .contrast-panel and its children
 *    - No modifications to main.css required
 *    - Reuses CSS custom properties from :root (main.css)
 *    - Toggle button styles extend the .eyedropper-btn pattern
 *
 *  LAYOUT OVERVIEW:
 *    - Toggle button: absolute-positioned inside .input-container
 *    - Panel: block-level element in <main>, between .hero-swatch and .input-container
 *    - Each contrast row: swatch colour chip + ratio + AA/AAA badges
 *
 *  AUTHOR      : Adrian Ramon
 *  LAST UPDATE : 31-Mar-2026
 * ==================================================================================================== */


/* =================================================== */
/* SECTION: Toggle Button                              */
/* =================================================== */
/*
 * Purpose: Trigger button to show/hide the contrast panel
 * - Positioned inside .input-container, left of the eyedropper button
 * - Uses the same pattern as .eyedropper-btn for visual consistency
 * - SVG icon (scales icon) conveys WCAG/accessibility intent
 */
.contrast-toggle-btn {
    /* Purpose: Flex child of .input-btn-group — no absolute positioning needed */
    background: transparent;
    border: none;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    line-height: 1;

    /* Purpose: Icon colour — muted by default, accent on hover */
    color: var(--text-muted);
    opacity: 0.75;

    /* Purpose: Smooth transitions */
    transition: opacity 0.2s ease, color 0.2s ease;
}

.contrast-toggle-btn:hover,
.contrast-toggle-btn:focus {
    color: var(--accent);
    opacity: 1;
    outline: none;
}

.contrast-toggle-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Active state: panel is open */
.contrast-toggle-btn.active {
    color: var(--accent);
    opacity: 1;
}


/* =================================================== */
/* SECTION: Panel Container                            */
/* =================================================== */
/*
 * Purpose: Outer container for the contrast panel
 * - Matches the width of .input-container for visual alignment
 * - Hidden by default; revealed by JS adding .visible class
 * - Smooth expand/collapse via max-height transition
 */
.contrast-panel {
    /* Purpose: Width matches input-container */
    width: min(90vw, 500px);

    /* Purpose: Centre within main's flex column */
    margin-left: auto;
    margin-right: auto;

    /* Purpose: Surface styling consistent with the app */
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);

    /* Purpose: Dynamic border matching swatch colour */
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;

    /* Purpose: Hidden by default — collapsed via max-height */
    /* NOTE: overflow is intentionally NOT hidden here. Setting overflow:hidden
     * would clip the absolutely-positioned autocomplete dropdown inside the
     * custom comparison input. The inner container manages its own overflow. */
    max-height: 0;
    opacity: 0;
    pointer-events: none;   /* Prevent invisible panel intercepting clicks below */

    /* Purpose: Smooth reveal transition */
    transition: max-height 0.35s ease, opacity 0.25s ease,
                border-color 0.3s ease, box-shadow 0.3s ease;
}

.contrast-panel.visible {
    /* Purpose: Expanded state — generous height to accommodate dropdown overflow and help section */
    max-height: 1200px;
    opacity: 1;
    pointer-events: auto;   /* Restore interactivity when panel is open */

    /* Purpose: Swatch-colour glow border when open */
    border-color: transparent;
    box-shadow: var(--shadow-sm),
                0 0 0 2px var(--swatch-glow-colour-alpha, rgba(76, 201, 240, 0.25));
}


/* =================================================== */
/* SECTION: Panel Inner Layout                         */
/* =================================================== */
/*
 * Purpose: Inner padding and spacing for panel content
 * - Separates the structural container from its content
 *   so the overflow:hidden clip does not cut off padding
 */
.contrast-panel__inner {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}


/* =================================================== */
/* SECTION: Panel Header Row                           */
/* =================================================== */
/*
 * Purpose: Flex row containing the panel title and help toggle button
 * - Title left-aligned, help button right-aligned
 * - Matches harmony panel header row pattern
 */
.contrast-panel__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* =================================================== */
/* SECTION: Panel Header                               */
/* =================================================== */
/*
 * Purpose: Section label at the top of the panel
 * - Small, muted typography — subordinate to the hero swatch
 */
.contrast-panel__header {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}


/* =================================================== */
/* SECTION: Help Toggle Button                         */
/* =================================================== */
/*
 * Purpose: ? button in panel header — opens/closes help section
 * - Matches .harmony-wheel-toggle sizing and colour pattern
 * - Circular pill shape to distinguish from icon buttons
 */
.contrast-help-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 0.75;
    transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
    margin-bottom: 0.2rem;
}

.contrast-help-toggle:hover,
.contrast-help-toggle:focus {
    color: var(--accent);
    border-color: var(--accent);
    opacity: 1;
    outline: none;
}

.contrast-help-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.contrast-help-toggle.active {
    color: var(--accent);
    border-color: var(--accent);
    opacity: 1;
}


/* =================================================== */
/* SECTION: Help Section                               */
/* =================================================== */
/*
 * Purpose: Inline explainer for novice users (CR-035)
 * - Appears at the bottom of the panel, below all controls
 * - Smooth reveal via max-height transition
 * - Close button top-right of the section
 * - Plain, accessible language — readable by a 12-year-old
 */
.contrast-help {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.85rem;
    margin-top: 0.5rem;
    overflow: hidden;
    max-height: 1000px;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    opacity: 1;
}

.contrast-help.hidden {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    margin-top: 0;
    border-top-color: transparent;
}

.contrast-help__close {
    position: absolute;
    top: 0.6rem;
    right: 0;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1;
    padding: 0.1rem 0.3rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.contrast-help__close:hover,
.contrast-help__close:focus {
    color: var(--text);
    outline: none;
}

.contrast-help__close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.contrast-help__title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
    margin: 0.65rem 0 0.2rem;
    letter-spacing: 0.01em;
}

.contrast-help__title:first-of-type {
    margin-top: 0;
}

.contrast-help__body {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 0.4rem;
    padding-right: 1.2rem;
}

.contrast-help__tip {
    margin-top: 0.5rem;
    font-style: italic;
    color: var(--text);
}


/* =================================================== */
/* SECTION: Contrast Row                               */
/* =================================================== */
/*
 * Purpose: Single comparison row (swatch colour vs one other colour)
 * - Colour chips left, ratio centre-left, badges right
 * - Vertically centred
 */
.contrast-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 2.4rem;
}


/* =================================================== */
/* SECTION: Colour Chips                               */
/* =================================================== */
/*
 * Purpose: Small rectangular chips showing the two colours being compared
 * - Paired side-by-side to give immediate visual context
 * - Fixed size for consistent layout across rows
 */
.contrast-chips {
    display: flex;
    flex-shrink: 0;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.contrast-chip {
    width: 1.5rem;
    height: 2rem;
    flex-shrink: 0;
}


/* =================================================== */
/* SECTION: Ratio Display                              */
/* =================================================== */
/*
 * Purpose: The contrast ratio label (e.g. "4.53:1")
 * - Prominent, monospace for numeric alignment
 * - Grows to fill available space before badges
 */
.contrast-ratio {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    letter-spacing: 0.01em;
}


/* =================================================== */
/* SECTION: WCAG Badges                                */
/* =================================================== */
/*
 * Purpose: Pass/fail indicators for AA and AAA, normal and large text
 * - Grouped as two pairs (AA and AAA), each containing normal + large
 * - Compact pill shape, colour-coded pass/fail
 */
.contrast-badges {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.contrast-badge-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
}

.contrast-badge-group__label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1;
}

.contrast-badge-group__pills {
    display: flex;
    gap: 0.2rem;
}

.contrast-badge {
    /* Purpose: Compact pill shape */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    line-height: 1;
    white-space: nowrap;
}

/* Pass state */
.contrast-badge.pass {
    background: rgba(52, 199, 89, 0.18);
    color: #34c759;
}

/* Fail state */
.contrast-badge.fail {
    background: rgba(255, 59, 48, 0.15);
    color: #ff6b6b;
}


/* =================================================== */
/* SECTION: Luminance Row                              */
/* =================================================== */
/*
 * Purpose: Displays relative luminance of the swatch colour (CR-031)
 * - Subtle, secondary information beneath the contrast rows
 * - Separated by a thin rule
 */
.contrast-luminance {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0.1rem;
}

.contrast-luminance__label {
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.contrast-luminance__value {
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}


/* =================================================== */
/* SECTION: Divider between baseline and custom rows   */
/* =================================================== */
/*
 * Purpose: Visual separator between the white/black rows and the custom input section
 */
.contrast-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0.2rem 0;
}


/* =================================================== */
/* SECTION: Custom Comparison Input                    */
/* =================================================== */
/*
 * Purpose: Optional second colour input row for user-defined comparison
 * - Hidden until the user activates the "Compare with…" toggle
 * - Reuses app input styling patterns
 */
.contrast-custom {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contrast-custom__toggle {
    /* Purpose: Subtle text-style button to reveal the custom input */
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: left;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.contrast-custom__toggle:hover,
.contrast-custom__toggle:focus-visible {
    color: var(--accent);
    outline: none;
}

.contrast-custom__toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Arrow indicator — rotates when expanded */
.contrast-custom__toggle-arrow {
    display: inline-block;
    font-size: 0.65rem;
    transition: transform 0.2s ease;
    line-height: 1;
}

.contrast-custom__toggle.expanded .contrast-custom__toggle-arrow {
    transform: rotate(90deg);
}

/* Input wrapper — position:relative anchors the autocomplete dropdown */
.contrast-custom__input-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
}

.contrast-custom__input-wrap.hidden {
    display: none;
}

.contrast-custom__input {
    /* Purpose: Styled consistently with the main colour input */
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contrast-custom__input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.contrast-custom__input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--focus-colour-alpha, rgba(76, 201, 240, 0.25));
}

.contrast-custom__input.invalid {
    border-color: rgba(255, 107, 107, 0.6);
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.15);
}

/* Custom result row — same layout as baseline rows */
.contrast-row--custom {
    /* Purpose: Slight indent to visually associate with the custom input */
    padding-left: 0.1rem;
}