/* =====================================================================
   Color picker (color_picker) — стили инструмента.
   Каркас на Bootstrap + локальные токены НА КОНТЕЙНЕРЕ инструмента (.clp);
   сайтовые токены/шапку/меню/H1 не трогаем (см. .tool_conventions/image_tools.md,
   _common.md «Подложка инструмента и шрифт тела»). Палитра — общая с семейством
   image_tools (синий акцент, как у cut_photo / rotate_photo / resize_photo).
   ===================================================================== */

.clp {
    --clp-accent:       #0352f1;
    --clp-accent-hover: #0344cc;
    --clp-accent-soft:  #f2f7fe;
    --clp-work-bg:      #f4f7fb;
    --clp-card-border:  #e6e8ec;
    --clp-line:         #dde1e8;
    --clp-text:         #1f2733;
    --clp-muted:        #6b7480;
    --clp-btn-outline:  #d7dbe2;
    --clp-warn:         #7a5b00;
    --clp-warn-bg:      #fff8e5;
    --clp-warn-border:  #f2e0ad;
    --clp-err:          #b21e1f;
    --clp-radius:       16px;
    --clp-radius-sm:    12px;
    --clp-radius-xs:    10px;

    /* размеры, вынесенные из «магических чисел» по месту */
    --clp-swatch-h:     168px;
    --clp-swatch-w:     236px;
    --clp-chipsw:       34px;

    max-width: 720px;
    margin-inline: auto;
    background: #fff;
    border: 1px solid var(--clp-card-border);
    border-radius: var(--clp-radius);
    box-shadow: 0 2px 14px rgba(20, 30, 60, .06);
    padding: 24px;
    color: var(--clp-text);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    line-height: 1.45;
}

.clp *,
.clp *::before,
.clp *::after { box-sizing: border-box; }

/* Фокус: без bootstrap/браузерного обрамления (CLAUDE.md). .btn и .form-* покрыты
   глобальным focus-reset темы; здесь — свои не-.btn контролы. */
.clp__fmt-copy:focus,
.clp__chipswatch:focus { outline: none; }

/* ============================ ПИПЕТКА ============================ */
.clp__pickzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.clp__pick {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 26px 10px 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #1f6bff 0%, var(--clp-accent) 60%, #0246cf 100%);
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(3, 82, 241, .28);
    transition: background .12s ease, box-shadow .12s ease, transform .06s ease;
}

.clp__pick:hover:not(:disabled) { background: var(--clp-accent-hover); color: #fff; }
.clp__pick:active:not(:disabled) { transform: translateY(1px); }

.clp__pick:disabled {
    background: #e9edf3;
    color: #98a1ad;
    box-shadow: none;
}

.clp__pick-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    font-size: 20px;
}

.clp__pick:disabled .clp__pick-ic { background: rgba(0, 0, 0, .05); }

/* пока пипетка активна — кнопка «занята» */
.clp[data-picking] .clp__pick { background: #0246cf; }

.clp__pick-hint {
    margin: 0;
    max-width: 460px;
    color: var(--clp-muted);
    font-size: 13px;
}

/* Второй путь: пипетка в мини-окне поверх других приложений (для цвета из другой программы) */
.clp__mini-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.clp__mini-open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border: 1px solid var(--clp-btn-outline);
    border-radius: 999px;
    background: #fff;
    color: var(--clp-text);
    font-size: 14px;
}

.clp__mini-open:hover:not(:disabled) {
    border-color: var(--clp-accent);
    color: var(--clp-accent);
}

.clp__mini-open:disabled { opacity: .55; }

.clp__mini-hint {
    margin: 0;
    max-width: 460px;
    color: var(--clp-muted);
    font-size: 12.5px;
}

/* Браузер не умеет / страница не по https */
.clp__nosupport {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--clp-warn-border);
    border-radius: var(--clp-radius-sm);
    background: var(--clp-warn-bg);
    color: var(--clp-warn);
    font-size: 13.5px;
}

.clp__nosupport-ic { font-size: 18px; line-height: 1.2; }
.clp__nosupport-body { display: flex; flex-direction: column; gap: 2px; }
.clp__nosupport-title { font-size: 14px; }

/* ============================ РЕЗУЛЬТАТ ============================ */
.clp__result {
    display: grid;
    grid-template-columns: var(--clp-swatch-w) minmax(0, 1fr);
    gap: 16px;
    margin-top: 22px;
}

.clp__swatch {
    position: relative;
    min-height: var(--clp-swatch-h);
    border: 1px solid var(--clp-line);
    border-radius: var(--clp-radius-sm);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
    overflow: hidden;
}

/* пустое состояние — светлая шахматка, чтобы блок не выглядел «сломанным» */
.clp[data-state="empty"] .clp__swatch {
    background:
        repeating-conic-gradient(#eef1f6 0% 25%, #ffffff 0% 50%) 0 0 / 20px 20px;
}

.clp__swatch-hex {
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    color: #1f2733;
    font-family: var(--tls-font-mono, Consolas, Menlo, monospace);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .04em;
}

.clp[data-state="empty"] .clp__swatch-hex {
    background: transparent;
    color: var(--clp-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
}

/* на тёмной заливке подпись становится светлой */
.clp__swatch[data-on-dark="true"] .clp__swatch-hex {
    background: rgba(0, 0, 0, .45);
    color: #fff;
}

.clp__formats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.clp__fmt {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
    padding: 5px 6px 5px 10px;
    border: 1px solid var(--clp-line);
    border-radius: var(--clp-radius-xs);
    background: var(--clp-work-bg);
    min-height: 40px;
}

.clp__fmt-cap {
    color: var(--clp-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.clp__fmt-val {
    font-family: var(--tls-font-mono, Consolas, Menlo, monospace);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clp__fmt[data-empty] .clp__fmt-val { color: var(--clp-muted); }
.clp__fmt--name .clp__fmt-val { font-family: inherit; font-size: 14px; }

.clp__fmt-copy {
    width: 30px;
    height: 30px;
    border: 1px solid var(--clp-btn-outline);
    border-radius: 8px;
    background: #fff;
    color: var(--clp-muted);
    font-size: 14px;
    line-height: 1;
    padding: 0;
    transition: color .12s ease, border-color .12s ease;
}

.clp__fmt-copy:hover { color: var(--clp-accent); border-color: var(--clp-accent); }
.clp[data-state="empty"] .clp__fmt-copy { opacity: .5; pointer-events: none; }

/* ============================ НАСТРОЙКИ + РУЧНОЙ ВВОД ============================ */
.clp__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--clp-line);
}

.clp__opt {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.clp__check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 13.5px;
    cursor: pointer;
}

.clp__check .form-check-input { margin: 0; cursor: pointer; }

.clp__opt-lbl {
    margin: 0;
    color: var(--clp-muted);
    font-size: 13px;
    white-space: nowrap;
}

.clp__select {
    width: auto;
    min-width: 88px;
    padding: 4px 26px 4px 10px;
    font-size: 13.5px;
    border-color: var(--clp-btn-outline);
}

.clp__manual-input {
    width: 128px;
    padding: 5px 10px;
    font-size: 14px;
    font-family: var(--tls-font-mono, Consolas, Menlo, monospace);
    border-color: var(--clp-btn-outline);
}

/* плейсхолдер-пример не должен читаться как введённое значение (_common.md) */
.clp__manual-input::placeholder {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-style: italic;
    color: #9aa3ae;
}

.clp__manual-go {
    padding: 5px 14px;
    border: 1px solid var(--clp-btn-outline);
    border-radius: 8px;
    background: #fff;
    color: var(--clp-text);
    font-size: 13.5px;
}

.clp__manual-go:hover { border-color: var(--clp-accent); color: var(--clp-accent); }

.clp__manual-err {
    margin: 8px 0 0;
    color: var(--clp-err);
    font-size: 13px;
}

/* ============================ ПАЛИТРА ============================ */
.clp__palette {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--clp-line);
}

.clp__palette-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.clp__palette-title { font-size: 15px; font-weight: 600; }

.clp__palette-count {
    color: var(--clp-muted);
    font-size: 12px;
    margin-right: auto;
}

.clp__palette-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--clp-btn-outline);
    border-radius: 8px;
    background: #fff;
    color: var(--clp-text);
    font-size: 13px;
}

.clp__palette-clear:hover:not(:disabled) { border-color: var(--clp-accent); color: var(--clp-accent); }
.clp__palette-clear:disabled { opacity: .5; }

.clp__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.clp__swatches:empty { margin-top: 0; }

.clp__chipswatch {
    width: var(--clp-chipsw);
    height: var(--clp-chipsw);
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 9px;
    box-shadow: 0 1px 3px rgba(20, 30, 60, .12);
    transition: transform .1s ease, box-shadow .1s ease;
}

.clp__chipswatch:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(20, 30, 60, .2);
}

.clp__palette-empty {
    margin: 10px 0 0;
    color: var(--clp-muted);
    font-size: 13px;
}

/* ============================ ПЛАШКА У КУРСОРА ============================ */
.clp__chip {
    position: fixed;
    z-index: 1080; /* выше контента, ниже offcanvas Bootstrap (1045+) в пределах инструмента */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 7px;
    border-radius: 999px;
    background: rgba(24, 30, 40, .92);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    pointer-events: none;
}

.clp__chip-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85);
}

.clp__chip-hex {
    font-family: var(--tls-font-mono, Consolas, Menlo, monospace);
    font-weight: 700;
    letter-spacing: .04em;
}

/* ============================ ТОСТ ============================ */
.clp__toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 1080;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(24, 30, 40, .92);
    color: #fff;
    font-size: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    pointer-events: none;
}

/* ============================ МОБАЙЛ ============================ */
@media (max-width: 640px) {
    .clp { padding: 16px; }

    .clp__pick { font-size: 17px; min-height: 52px; padding: 8px 20px 8px 12px; }
    .clp__pick-ic { width: 34px; height: 34px; font-size: 18px; }

    /* свотч и форматы — стопкой: узкая колонка не держит две зоны */
    .clp__result {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-top: 18px;
    }

    .clp__swatch { min-height: 116px; }
    .clp__swatch-hex { font-size: 18px; }

    .clp__fmt { grid-template-columns: 56px minmax(0, 1fr) 32px; padding-left: 8px; }
    .clp__fmt-cap { font-size: 11px; letter-spacing: .04em; }

    /* В узкой колонке значение НЕ обрезаем троеточием (иначе cmyk(…) виден не целиком) —
       разрешаем перенос: строка станет выше, зато код читается полностью (_common.md, мобайл). */
    .clp__fmt-val {
        white-space: normal;
        overflow-wrap: anywhere;
        text-overflow: clip;
        line-height: 1.25;
    }

    /* настройки: две строки, каждая на всю ширину — иначе селект и поле сжимаются в полоску */
    .clp__opts { flex-direction: column; align-items: stretch; gap: 12px; }
    .clp__opt--copy { justify-content: space-between; }
    .clp__opt--manual { flex-wrap: wrap; }
    /* подпись — отдельной строкой, поле и кнопка — рядом в одну */
    .clp__opt--manual .clp__opt-lbl { flex: 1 0 100%; }
    .clp__manual-input { flex: 1 1 110px; width: auto; }
}

@media (max-width: 360px) {
    .clp__pick { font-size: 16px; }
    .clp__opt--copy { flex-wrap: wrap; }
}