/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — Colour Picker — style.css
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Preview swatch ──────────────────────────────────────────────────────── */
.cp-swatch {
    width:            100%;
    height:           100px;
    border-radius:    var(--radius, 14px) var(--radius, 14px) 0 0;
    background-color: #E8472F;
    transition:       background-color 0.12s ease;
    display:          block;
}

/* ── Colour input area ───────────────────────────────────────────────────── */
.cp-picker-row {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1.25rem 1.5rem 0.5rem;
    gap:             1rem;
    flex-wrap:       wrap;
}

.cp-color-input-wrap {
    position:    relative;
    flex-shrink: 0;
}

/* Remove default browser chrome; show as large coloured circle */
#color-wheel {
    appearance:    none;
    -webkit-appearance: none;
    width:         80px;
    height:        80px;
    border-radius: 50%;
    border:        3px solid #E2E4E8;
    padding:       0;
    cursor:        pointer;
    display:       block;
    box-shadow:    0 2px 8px rgba(0,0,0,0.12);
    transition:    border-color 0.15s, box-shadow 0.15s;
    overflow:      hidden;
    background:    none;
}
#color-wheel:hover,
#color-wheel:focus {
    border-color: var(--accent, #E8472F);
    box-shadow:   0 0 0 3px rgba(232, 98, 42, 0.18);
    outline:      none;
}

/* Chromium / Safari: the inner swatch part */
#color-wheel::-webkit-color-swatch-wrapper {
    padding:       0;
    border-radius: 50%;
}
#color-wheel::-webkit-color-swatch {
    border:        none;
    border-radius: 50%;
}

/* Firefox */
#color-wheel::-moz-color-swatch {
    border:        none;
    border-radius: 50%;
}

.cp-picker-hint {
    font-size:   0.8125rem;
    color:       var(--muted, #64748B);
    line-height: 1.4;
    max-width:   180px;
}

/* ── Output rows ─────────────────────────────────────────────────────────── */
.cp-outputs {
    padding:        0 1.5rem 1.25rem;
    display:        flex;
    flex-direction: column;
    gap:            0.625rem;
}

.cp-output-row {
    display:     flex;
    align-items: center;
    gap:         0.625rem;
}

.cp-output-label {
    font-size:    0.75rem;
    font-weight:  700;
    color:        var(--muted, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    min-width:    42px;
    flex-shrink:  0;
}

.cp-output-input {
    flex:          1;
    min-width:     0;
    font-family:   'SFMono-Regular', 'Consolas', 'IBM Plex Sans', monospace;
    font-size:     0.875rem;
    color:         var(--text, #0D1B2A);
    background:    var(--bg, #FFFFFF);
    border:        1.5px solid var(--border, #E2E4E8);
    border-radius: 8px;
    padding:       0.45rem 0.75rem;
    transition:    border-color 0.15s, background 0.15s;
    outline:       none;
}
.cp-output-input:focus {
    border-color: var(--accent, #E8472F);
    background:   #fff;
    box-shadow:   0 0 0 3px rgba(232, 98, 42, 0.12);
}
.cp-output-input.cp-input-error {
    border-color: #d94f3d;
    background:   #fff8f7;
    animation:    cp-shake 0.3s ease;
}

@keyframes cp-shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-4px); }
    75%       { transform: translateX(4px); }
}

.cp-copy-btn {
    font-size:     0.75rem;
    font-weight:   600;
    color:         var(--accent, #E8472F);
    background:    transparent;
    border:        1.5px solid var(--accent, #E8472F);
    border-radius: 6px;
    padding:       0.35rem 0.65rem;
    cursor:        pointer;
    flex-shrink:   0;
    transition:    background 0.15s, color 0.15s, transform 0.1s;
    line-height:   1;
}
.cp-copy-btn:hover {
    background: var(--accent, #E8472F);
    color:      #fff;
}
.cp-copy-btn:active {
    transform: scale(0.95);
}
.cp-copy-btn.copied {
    background: #2a9d5c;
    border-color: #2a9d5c;
    color:      #fff;
}

/* ── Colour history ──────────────────────────────────────────────────────── */
.cp-section-title {
    font-size:    0.75rem;
    font-weight:  700;
    color:        var(--muted, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    display:      block;
}

.cp-history-bar {
    padding: 0 1.5rem 1.25rem;
}

.cp-history-swatches {
    display:   flex;
    gap:       0.5rem;
    flex-wrap: wrap;
    align-items: center;
    min-height: 36px;
}

.cp-history-swatch {
    width:         28px;
    height:        28px;
    border-radius: 6px;
    border:        2px solid rgba(0,0,0,0.08);
    cursor:        pointer;
    padding:       0;
    transition:    transform 0.15s, box-shadow 0.15s;
    flex-shrink:   0;
}
.cp-history-swatch:hover {
    transform:  scale(1.18);
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    border-color: var(--accent, #E8472F);
}
.cp-history-empty {
    font-size: 0.8125rem;
    color:     var(--muted, #64748B);
    font-style: italic;
}

/* ── Harmonies ───────────────────────────────────────────────────────────── */
.cp-harmonies-bar {
    padding: 0 1.5rem 1.25rem;
}

.cp-harmony-swatches {
    display:   flex;
    gap:       0.75rem;
    flex-wrap: wrap;
}

.cp-harmony-swatch {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.25rem;
    border:         none;
    background:     none;
    cursor:         pointer;
    padding:        0;
}

.cp-harmony-circle {
    width:         40px;
    height:        40px;
    border-radius: 50%;
    border:        2px solid rgba(0,0,0,0.10);
    transition:    transform 0.15s, box-shadow 0.15s;
    display:       block;
}
.cp-harmony-swatch:hover .cp-harmony-circle {
    transform:  scale(1.15);
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}

.cp-harmony-label {
    font-size:   0.6875rem;
    font-weight: 600;
    color:       var(--muted, #64748B);
    text-align:  center;
    max-width:   72px;
    line-height: 1.2;
}

.cp-harmony-hex {
    font-family: 'SFMono-Regular', 'Consolas', monospace;
    font-size:   0.6875rem;
    color:       var(--text, #0D1B2A);
    text-align:  center;
}

/* ── WCAG section ────────────────────────────────────────────────────────── */
.cp-wcag-section {
    padding:    0 1.5rem 1.5rem;
    border-top: 1.5px solid var(--border, #E2E4E8);
    margin-top: 0.25rem;
    padding-top: 1rem;
}

.cp-wcag-rows {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}

.cp-wcag-row {
    font-size:   0.875rem;
    color:       var(--text, #0D1B2A);
    line-height: 1.5;
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    flex-wrap:   wrap;
}

.wcag-ratio {
    font-family:  'SFMono-Regular', 'Consolas', monospace;
    font-weight:  700;
    margin-right: 0.25rem;
}

.wcag-badge {
    font-size:     0.6875rem;
    font-weight:   700;
    border-radius: 999px;
    padding:       0.15rem 0.55rem;
    letter-spacing: 0.04em;
}
.wcag-pass {
    background: #d4edda;
    color:      #1a5c32;
}
.wcag-fail {
    background: #fde8e8;
    color:      #8b2020;
}

/* ── Card section dividers ───────────────────────────────────────────────── */
.cp-divider {
    height:       1.5px;
    background:   var(--border, #E2E4E8);
    margin:       0 1.5rem 1.25rem;
}

/* ── Responsive adjustments ──────────────────────────────────────────────── */
@media (max-width: 480px) {
    .cp-outputs {
        padding-left:  1rem;
        padding-right: 1rem;
    }
    .cp-history-bar,
    .cp-harmonies-bar,
    .cp-wcag-section {
        padding-left:  1rem;
        padding-right: 1rem;
    }
    .cp-swatch {
        height: 80px;
    }
    #color-wheel {
        width:  64px;
        height: 64px;
    }
    .cp-output-label {
        min-width: 36px;
    }
}

/* cache-buster: 2026-05-24T05:06:05Z */