/* ====================================================================================================
 *  FILE        : css/harmony.css
 *  PURPOSE     : Styles for the colour harmony panel (CR-030).
 *
 *  SCOPE:
 *    - All styles scoped to .harmony-panel and its children
 *    - No modifications to main.css except input padding (handled separately)
 *    - Reuses CSS custom properties from :root (main.css)
 *    - Toggle button extends the .eyedropper-btn / .contrast-toggle-btn pattern
 *
 *  LAYOUT OVERVIEW:
 *    - Toggle button: absolute-positioned inside .input-container
 *    - Panel: block-level in <main>, between .hero-swatch and .contrast-panel
 *    - Tab bar: horizontal pill-style scheme selector
 *    - Swatch row: horizontally scrollable, fade mask at right edge
 *    - Each swatch: chip + hex + RGB + named colour beneath
 *
 *  AUTHOR      : Adrian Ramon
 *  LAST UPDATE : 31-Mar-2026
 * ==================================================================================================== */


/* =================================================== */
/* SECTION: Toggle Button                              */
/* =================================================== */
/*
 * Purpose: Trigger button to show/hide the harmony panel
 * - Positioned left of the contrast toggle button
 * - Follows the same absolute-positioning pattern as .eyedropper-btn
 *   and .contrast-toggle-btn
 */
.harmony-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 */
    color: var(--text-muted);
    opacity: 0.75;

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

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

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

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


/* =================================================== */
/* SECTION: Panel Container                            */
/* =================================================== */
/*
 * Purpose: Outer container for the harmony panel
 * - Matches width of .input-container for visual alignment
 * - Hidden by default; revealed by .visible class
 * - NOTE: overflow intentionally NOT set here — would clip
 *   absolutely-positioned children (dropdowns, tooltips)
 */
.harmony-panel {
    /* Purpose: Slightly wider than input-container to give swatches room to breathe */
    width: min(90vw, 510px);

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

    /* Purpose: Surface styling */
    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);

    /* Purpose: Hidden by default */
    max-height: 0;
    opacity: 0;
    pointer-events: none;   /* Prevent invisible panel intercepting clicks below */

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

.harmony-panel.visible {
    max-height: 1100px;
    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                         */
/* =================================================== */
.harmony-panel__inner {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}


/* =================================================== */
/* SECTION: Panel Header                               */
/* =================================================== */
.harmony-panel__header {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}


/* =================================================== */
/* SECTION: Tab Bar                                    */
/* =================================================== */
/*
 * Purpose: Horizontal pill-style scheme selector
 * - Six tabs, one per harmony scheme
 * - Active tab uses accent colour fill
 * - Wraps on very narrow viewports
 */
.harmony-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    role: tablist;
    justify-content: center;
}

.harmony-tab {
    /* Purpose: Pill shape */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.65rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    cursor: pointer;

    /* Purpose: Typography */
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    font-family: inherit;

    /* Purpose: Smooth state transitions */
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.harmony-tab:hover {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.2);
}

.harmony-tab:focus {
    outline: none;
}

.harmony-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Active tab */
.harmony-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #000000;
    font-weight: 600;
}


/* =================================================== */
/* SECTION: Swatch Row                                 */
/* =================================================== */
/*
 * Purpose: Horizontally scrollable row of colour swatches
 * - Scrollable to accommodate 5-swatch schemes within panel width
 * - Fade mask at right edge signals scrollability
 * - Each swatch is equal width regardless of scheme swatch count
 */
.harmony-swatches-wrap {
    position: relative;
}

/* Right-edge fade mask */
.harmony-swatches-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2rem;
    background: linear-gradient(to right, transparent, var(--surface));
    pointer-events: none;
    border-radius: 0 var(--radius) var(--radius) 0;

    /* Only show when content overflows — JS adds .overflowing class */
    opacity: 0;
    transition: opacity 0.2s ease;
}

.harmony-swatches-wrap.overflowing::after {
    opacity: 1;
}

.harmony-swatches {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding-top: 0.25rem;    /* Room for base swatch accent ring */
    padding-bottom: 0.25rem;

    justify-content: center;

    /* Hide scrollbar visually but keep it functional */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.harmony-swatches::-webkit-scrollbar {
    display: none;
}


/* =================================================== */
/* SECTION: Individual Swatch                          */
/* =================================================== */
/*
 * Purpose: Single swatch — chip + colour data beneath
 * - Fixed minimum width so all swatches are equal
 * - Chip is the dominant visual element
 * - Text beneath is secondary, muted
 */
.harmony-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    min-width: 80px;
    cursor: pointer;

    /* Purpose: Subtle hover state */
    transition: transform 0.15s ease;
}

.harmony-swatch:hover {
    transform: translateY(-2px);
}

/* Base swatch: no special ring — the position (leftmost) is sufficient identification */


/* =================================================== */
/* SECTION: Swatch Chip                                */
/* =================================================== */
/*
 * Purpose: The colour chip — the dominant visual element
 * - Taller than the contrast chips to give harmony swatches prominence
 * - Rounded corners consistent with app aesthetic
 */
.harmony-swatch__chip {
    width: 100%;
    height: 56px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.15s ease;
}


/* =================================================== */
/* SECTION: Swatch Labels                              */
/* =================================================== */
/*
 * Purpose: Colour data beneath each chip
 * - Hex value: prominent, monospace
 * - RGB value: smaller, muted
 * - Named colour: smallest, muted, italic
 * - All centred beneath the chip
 */
.harmony-swatch__hex {
    font-size: 0.7rem;
    font-weight: 600;
    font-family: monospace;
    color: var(--text);
    letter-spacing: 0.02em;
    text-align: center;
}

.harmony-swatch__rgb {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.3;
}

.harmony-swatch__name {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    line-height: 1.3;

    /* Prevent long names from blowing out layout */
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Loading state for name lookup */
.harmony-swatch__name.loading {
    opacity: 0.4;
    font-style: normal;
}


/* =================================================== */
/* SECTION: Copy Tooltip                               */
/* =================================================== */
/*
 * Purpose: Brief tooltip on swatch click confirming hex copied
 * - Appears above the chip, fades out automatically
 * - Positioned relative to .harmony-swatch
 */
.harmony-copy-tip {
    position: absolute;
    bottom: calc(100% + 0.4rem);
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #000;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10;
}

.harmony-copy-tip.visible {
    opacity: 1;
}


/* =================================================== */
/* SECTION: Panel Header Row                           */
/* =================================================== */
/*
 * Purpose: Flex row containing the panel title and action buttons
 * - Title left-aligned, action buttons right-aligned as a group
 * - Actions group: help (?) button and wheel toggle button side by side
 */
.harmony-panel__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.harmony-panel__header-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}


/* =================================================== */
/* SECTION: Wheel Toggle Button                        */
/* =================================================== */
/*
 * Purpose: Small text+icon button to show/hide the colour wheel
 * - Sits in the panel header row, right-aligned
 * - Subtle by default, accent on hover/active
 */
.harmony-wheel-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    line-height: 1;
    color: var(--text-muted);
    opacity: 0.75;
    transition: opacity 0.2s ease, color 0.2s ease;
}

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

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

.harmony-wheel-toggle.active {
    color: var(--accent);
    opacity: 1;
}


/* =================================================== */
/* SECTION: Wheel Container                            */
/* =================================================== */
/*
 * Purpose: Container for the SVG colour wheel
 * - Hidden by default, revealed by .hidden removal
 * - Centres the SVG within the panel
 * - Smooth reveal via opacity + max-height transition
 */
.harmony-wheel-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /*padding: 0.5rem 0 0.25rem;*/
    padding: 0.0rem 0 0;
    max-height: 240px;
    opacity: 1;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    overflow: hidden;
}

.harmony-wheel-container.hidden {
    max-height: 0;
    opacity: 0;
    padding: 0;
}


/* =================================================== */
/* SECTION: Wheel SVG                                  */
/* =================================================== */
/*
 * Purpose: The SVG element itself
 * - Fixed size, never overflows container
 */
.harmony-wheel-svg {
    width: 220px;
    height: 220px;
    flex-shrink: 0;
}


/* =================================================== */
/* SECTION: Help Toggle Button                         */
/* =================================================== */
/*
 * Purpose: ? button in panel header — opens/closes help section
 * - Circular pill shape, consistent with contrast panel pattern
 * - Sits left of the wheel toggle in the header actions group
 */
.harmony-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;
}

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

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

.harmony-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
 */
.harmony-help {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.85rem;
    margin-top: 0.5rem;
    max-height: 45vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    opacity: 1;
}

.harmony-help::-webkit-scrollbar {
    width: 4px;
}

.harmony-help::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
}

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

.harmony-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;
}

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

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

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

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

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

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