/* =====================================================================
   Crop image (cut_photo) — стили инструмента.
   Каркас на Bootstrap + локальные токены НА КОНТЕЙНЕРЕ инструмента (.cph),
   сайтовые токены/шапку/меню/H1 не трогаем (см. .tool_conventions/image_tools.md,
   _common.md «Подложка инструмента и шрифт тела»). Акцент инструмента — синий из макета.
   Цвета сняты пипеткой из макета (.tmp/photoCropper).
   ===================================================================== */

.cph {
    /* палитра из макета */
    --cph-accent:        #0352f1;
    --cph-accent-hover:  #0344cc;
    --cph-accent-soft:   #f2f7fe;
    --cph-work-bg:       #f4f7fb;
    --cph-drop-bg:       #f9fbfe;
    --cph-drop-border:   #b9cdf9;
    --cph-card-border:   #e6e8ec;
    --cph-line:          #dde1e8;
    --cph-text:          #1f2733;
    --cph-muted:         #6b7480;
    --cph-btn-outline:   #d7dbe2;
    --cph-err:           #b21e1f;
    --cph-err-bg:        #feefef;
    --cph-err-border:    #f6d2d2;
    /* Ручки рамки обрезки. --cph-h — видимый квадрат ручки; на сенсорном экране он
       крупнее (переопределяется ниже в @media (pointer: coarse)). --cph-hit / --cph-hit-line —
       НЕВИДИМЫЕ зоны захвата: по ним палец попадает в ручку, не задевая холст. */
    --cph-h:             7px;
    --cph-hit:           44px;
    --cph-hit-line:      26px;

    /* Высота рабочей области. На телефоне её пересчитывает JS под конкретный экран
       (см. fitStage в js_originals/cut-photo.js) — здесь только исходное значение. */
    --cph-stage-h:       400px;
    --cph-preview-h:     360px;
    --cph-edge-pad:      16px;   /* боковые поля карточки на телефоне */

    --cph-radius:        16px;
    --cph-radius-sm:     12px;
    --cph-radius-xs:     10px;

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

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

/* Фокус: убираем раздражающий ring при клике мышью, оставляем аккуратный — только с клавиатуры
   (см. CLAUDE.md «без bootstrap/браузерного обрамления поля при нажатии» + _common.md доступность).
   .btn покрыт глобальным focus-reset темы; здесь — кастомные не-.btn контролы инструмента. */
.cph__drop:focus, .cph__shape:focus, .cph__zoom-btn:focus, .cph__zoom-val:focus,
.cph__info:focus, .cph__alert-close:focus { outline: none; }
.cph__drop:focus-visible, .cph__shape:focus-visible, .cph__zoom-btn:focus-visible,
.cph__zoom-val:focus-visible, .cph__info:focus-visible, .cph__alert-close:focus-visible {
    outline: 2px solid var(--cph-accent); outline-offset: 2px;
}

/* центрированный «узкий» контент состояний загрузки/результата/ошибки */
.cph__upload,
.cph__errstate { max-width: 480px; margin-inline: auto; }

/* ---------------- общие кнопки (поверх Bootstrap .btn) ---------------- */
.cph .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
            font-weight: 600; border-radius: var(--cph-radius-xs); border: 1px solid transparent;
            padding: .6rem 1.05rem; font-size: .95rem; line-height: 1.2; }
.cph .btn i { font-size: 1.05em; line-height: 0; }

.cph__btn-primary { background: var(--cph-accent); color: #fff; border-color: var(--cph-accent); }
.cph__btn-primary:hover,
.cph__btn-primary:focus-visible { background: var(--cph-accent-hover); color: #fff; border-color: var(--cph-accent-hover); }

.cph__btn-outline { background: #fff; color: var(--cph-text); border-color: var(--cph-btn-outline); }
.cph__btn-outline:hover,
.cph__btn-outline:focus-visible { background: #f5f7fa; color: var(--cph-text); border-color: #c7ccd6; }

.cph__btn-ghost { background: #fff; color: var(--cph-text); border-color: var(--cph-btn-outline);
                  padding: .42rem .8rem; font-size: .9rem; border-radius: var(--cph-radius-xs); }
.cph__btn-ghost:hover,
.cph__btn-ghost:focus-visible { background: #f5f7fa; }

/* ---------------- подписи секций (не заголовки: H1 страницы печатает движок) ---------------- */
.cph__title { font-size: 1.4rem; font-weight: 700; text-align: center; margin: 0 0 .35rem; color: var(--cph-text); }
.cph__title--left { text-align: left; }

/* =====================================================================
   СОСТОЯНИЕ 1: ЗАГРУЗКА  (и дропзона в состоянии ошибки)
   ===================================================================== */
.cph__drop {
    border: 2px dashed var(--cph-drop-border);
    background: var(--cph-drop-bg);
    border-radius: 14px;
    padding: 30px 20px;
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    text-align: center;
    transition: border-color .15s, background .15s;
    cursor: pointer;
}
.cph__drop.is-drag { border-color: var(--cph-accent); background: var(--cph-accent-soft); }
.cph__drop-icon { font-size: 2.1rem; color: var(--cph-accent); line-height: 1; margin-bottom: .15rem; }
.cph__drop-title { font-size: .98rem; color: var(--cph-text); margin: 0; font-weight: 500; }
.cph__drop-or { font-size: .88rem; color: var(--cph-muted); margin: 0 0 .35rem; }
.cph__drop .cph__choose { margin-top: .1rem; }

.cph__formats { text-align: center; color: var(--cph-muted); font-size: .82rem; margin: 1rem 0 0; }
.cph__formats-dot { margin: 0 .4rem; }

/* =====================================================================
   СОСТОЯНИЕ 2: РЕДАКТОР
   ===================================================================== */
.cph__toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }

/* zoom-контрол: сегментированная пилюля − [100% ▾] + */
.cph__zoom { display: inline-flex; align-items: stretch; border: 1px solid var(--cph-btn-outline);
             border-radius: var(--cph-radius-xs); overflow: hidden; background: #fff; }
.cph__zoom-btn { border: 0; background: #fff; color: var(--cph-text); padding: .35rem .6rem; cursor: pointer;
                 display: inline-flex; align-items: center; }
.cph__zoom-btn:hover { background: #f2f4f7; }
.cph__zoom-val { border: 0; background: #fff; color: var(--cph-text); font-weight: 600; font-size: .9rem;
                 padding: .35rem .7rem; min-width: 62px; cursor: pointer; display: inline-flex;
                 align-items: center; justify-content: center; gap: .3rem;
                 border-inline: 1px solid var(--cph-line); }
.cph__zoom-caret { font-size: .7rem; display: none; }
.cph__zoom-menu { font-size: .9rem; }

/* рабочая область: слева сцена с картинкой, справа панель параметров */
.cph__work { display: flex; gap: 1rem; align-items: stretch; }
.cph__stage { flex: 1 1 auto; min-width: 0; background: var(--cph-work-bg); border-radius: var(--cph-radius-sm);
              overflow: hidden; }
/* размер контейнера, в который Cropper встраивает картинку */
.cph__image { display: block; width: 100%; height: var(--cph-stage-h); max-width: 100%; }

.cph__params { flex: 0 0 210px; display: flex; flex-direction: column; gap: .9rem; }
.cph__param { display: flex; flex-direction: column; gap: .1rem; }
.cph__param-cap { font-size: .82rem; font-weight: 700; color: var(--cph-text); }
.cph__param-main { font-size: .92rem; color: var(--cph-text); }
.cph__param-sub { font-size: .85rem; color: var(--cph-muted); }

/* форма обрезки */
.cph__shapes-wrap { margin-top: 1.1rem; }
.cph__shapes-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .55rem; }
.cph__shapes-title { font-size: .92rem; font-weight: 700; }
.cph__info { color: var(--cph-muted); cursor: help; font-size: .95rem; }
.cph__info:hover { color: var(--cph-accent); }

.cph__shapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.cph__shape { display: flex; flex-direction: column; align-items: center; gap: .35rem;
              background: #fff; border: 1px solid var(--cph-btn-outline); border-radius: var(--cph-radius-sm);
              padding: .7rem .4rem; cursor: pointer; color: var(--cph-text); transition: border-color .12s, background .12s; }
.cph__shape:hover { border-color: #c2c8d2; }
.cph__shape.is-active { border-color: var(--cph-accent); background: var(--cph-accent-soft); color: var(--cph-accent); }
.cph__shape-lbl { font-size: .8rem; }

/* CSS-иконки пропорций (Bootstrap не рисует прямоугольники нужных пропорций) */
.cph__shape-ic { height: 30px; display: flex; align-items: center; justify-content: center; color: #5b6470; }
.cph__shape.is-active .cph__shape-ic { color: var(--cph-accent); }
.cph__shape-ic::before { content: ""; display: block; }
.cph__shape-ic--square::before   { width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 3px; }
.cph__shape-ic--wide::before     { width: 26px; height: 16px; border: 2px solid currentColor; border-radius: 3px; }
.cph__shape-ic--vertical::before { width: 16px; height: 26px; border: 2px solid currentColor; border-radius: 3px; }
.cph__shape-ic--free::before {
    width: 24px; height: 24px; --t: 2px; --l: 8px;
    background:
        linear-gradient(currentColor 0 0) 0 0     / var(--l) var(--t),
        linear-gradient(currentColor 0 0) 0 0     / var(--t) var(--l),
        linear-gradient(currentColor 0 0) 100% 0   / var(--l) var(--t),
        linear-gradient(currentColor 0 0) 100% 0   / var(--t) var(--l),
        linear-gradient(currentColor 0 0) 0 100%   / var(--l) var(--t),
        linear-gradient(currentColor 0 0) 0 100%   / var(--t) var(--l),
        linear-gradient(currentColor 0 0) 100% 100%/ var(--l) var(--t),
        linear-gradient(currentColor 0 0) 100% 100%/ var(--t) var(--l);
    background-repeat: no-repeat;
}

/* действия редактора */
.cph__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.cph__do-crop { flex: 0 0 auto; }

/* =====================================================================
   СОСТОЯНИЕ 3: РЕЗУЛЬТАТ
   ===================================================================== */
.cph__preview { background: var(--cph-work-bg); border-radius: var(--cph-radius-sm); padding: 14px;
                text-align: center; margin-bottom: 1rem; }
.cph__preview-img { max-width: 100%; max-height: var(--cph-preview-h); border-radius: 8px; display: inline-block; }

.cph__resmeta { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--cph-card-border);
                border-radius: var(--cph-radius-sm); overflow: hidden; margin-bottom: 1rem; }
.cph__resmeta-cell { padding: .7rem .8rem; display: flex; flex-direction: column; gap: .2rem; }
.cph__resmeta-cell + .cph__resmeta-cell { border-left: 1px solid var(--cph-card-border); }
.cph__resmeta-cap { font-size: .8rem; color: var(--cph-muted); }
.cph__resmeta-val { font-size: .95rem; font-weight: 600; color: var(--cph-text); }
/* мобайл-строка результата (скрыта на десктопе) */
.cph__resline { display: none; text-align: center; font-weight: 600; color: var(--cph-text);
                margin: 0 0 1rem; font-size: .92rem; }

/* короткие подписи параметров — только на мобайле */
.cph__cap-short { display: none; }

.cph__download { display: flex; width: 100%; margin-bottom: .9rem; }
.cph__dl-main { flex: 1 1 auto; }
.cph__dl-split { flex: 0 0 auto; }
.cph__dl-main, .cph__dl-split { border-radius: 0; }
.cph__dl-main { border-top-left-radius: var(--cph-radius-xs); border-bottom-left-radius: var(--cph-radius-xs); }
.cph__dl-split { border-top-right-radius: var(--cph-radius-xs); border-bottom-right-radius: var(--cph-radius-xs);
                 border-left: 1px solid rgba(255,255,255,.35); }
.cph__dl-menu { width: 100%; font-size: .92rem; }
.cph__dl-menu.disabled, .cph__copy[disabled] { pointer-events: none; opacity: .5; }

.cph__actions--result { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 0; }

/* =====================================================================
   СОСТОЯНИЕ 4: ОШИБКА
   ===================================================================== */
.cph__alert { display: flex; align-items: flex-start; gap: .7rem; background: var(--cph-err-bg);
              border: 1px solid var(--cph-err-border); border-radius: var(--cph-radius-sm);
              padding: .9rem 1rem; margin-bottom: 1.1rem; color: var(--cph-err); }
.cph__alert-icon { font-size: 1.25rem; line-height: 1.3; flex: 0 0 auto; }
.cph__alert-text { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 auto; }
.cph__alert-title { font-size: .98rem; }
.cph__alert-hint { color: #8a4b4b; font-size: .88rem; font-weight: 400; }
.cph__alert-close { background: none; border: 0; color: var(--cph-err); opacity: .6; cursor: pointer;
                    padding: .1rem; line-height: 1; flex: 0 0 auto; }
.cph__alert-close:hover { opacity: 1; }
.cph__actions--error { justify-content: center; margin-top: 1.1rem; }

/* =====================================================================
   Cropper.js — мелкие правки под макет (белая рамка, видимые ручки).
   Затемнение вне области (.cropper-modal) и сетка 3×3 (.cropper-dashed) — дефолтные.
   ===================================================================== */
.cph .cropper-view-box { outline: 1px solid rgba(255, 255, 255, .92); outline-color: rgba(255, 255, 255, .92); }
.cph .cropper-point { background-color: #fff; opacity: 1; width: var(--cph-h); height: var(--cph-h); }
.cph .cropper-line { background-color: rgba(255, 255, 255, .35); }

/* Ручка сидит ЦЕНТРОМ на грани рамки — смещение всегда половина её размера.
   Вендор зашивает 5px/-3px по месту, поэтому позиции пересчитываем от токена. */
.cph .cropper-point.point-n  { top:    calc(var(--cph-h) / -2); margin-left: calc(var(--cph-h) / -2); }
.cph .cropper-point.point-s  { bottom: calc(var(--cph-h) / -2); margin-left: calc(var(--cph-h) / -2); }
.cph .cropper-point.point-e  { right:  calc(var(--cph-h) / -2); margin-top:  calc(var(--cph-h) / -2); }
.cph .cropper-point.point-w  { left:   calc(var(--cph-h) / -2); margin-top:  calc(var(--cph-h) / -2); }
.cph .cropper-point.point-ne { top:    calc(var(--cph-h) / -2); right: calc(var(--cph-h) / -2); }
.cph .cropper-point.point-nw { top:    calc(var(--cph-h) / -2); left:  calc(var(--cph-h) / -2); }
.cph .cropper-point.point-sw { bottom: calc(var(--cph-h) / -2); left:  calc(var(--cph-h) / -2); }
.cph .cropper-point.point-se { bottom: calc(var(--cph-h) / -2); right: calc(var(--cph-h) / -2);
                               width: var(--cph-h); height: var(--cph-h); }

/* -----------------------------------------------------------------
   Сенсорный экран: палец — не курсор. Ручка видимо крупнее, а вокруг неё
   лежит невидимая зона захвата (--cph-hit): промах в пределах этой зоны
   всё равно считается попаданием ПО РУЧКЕ, а не по холсту.
   У граней зона растёт НАРУЖУ рамки — там, где палец промахивается чаще
   всего, и где раньше начиналось перетаскивание картинки.
   ----------------------------------------------------------------- */
@media (pointer: coarse) {
    .cph { --cph-h: 14px; }

    .cph .cropper-point { border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
    .cph .cropper-point::after { content: ''; position: absolute; left: 50%; top: 50%;
                                 width: var(--cph-hit); height: var(--cph-hit);
                                 transform: translate(-50%, -50%); }

    .cph .cropper-line::after { content: ''; position: absolute; }
    .cph .cropper-line.line-n::after { left: 0; right: 0; bottom: 0; height: var(--cph-hit-line); }
    .cph .cropper-line.line-s::after { left: 0; right: 0; top: 0;    height: var(--cph-hit-line); }
    .cph .cropper-line.line-e::after { top: 0; bottom: 0; left: 0;   width:  var(--cph-hit-line); }
    .cph .cropper-line.line-w::after { top: 0; bottom: 0; right: 0;  width:  var(--cph-hit-line); }
}

/* =====================================================================
   Всплывающая подсказка ⓘ — отдельный fixed-элемент (см. _common.md).
   Создаётся JS, прижимается к окну.
   ===================================================================== */
.cph-tip { position: fixed; z-index: 1080; max-width: 260px; background: #1f2733; color: #fff;
           font-size: .82rem; line-height: 1.4; padding: .6rem .75rem; border-radius: 8px;
           box-shadow: 0 6px 20px rgba(0,0,0,.18); white-space: pre-line; pointer-events: none;
           opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s; }
.cph-tip.is-open { opacity: 1; transform: translateY(0); }

/* тост «скопировано» */
.cph__toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
              background: #1f2733; color: #fff; font-size: .88rem; padding: .5rem .9rem;
              border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.2); z-index: 1085; }

/* =====================================================================
   Адаптив. Узкая колонка/планшет → одна колонка; мобайл 360 без гор.скролла.
   ===================================================================== */
@media (max-width: 720px) {
    .cph { padding: var(--cph-edge-pad); --cph-stage-h: 320px; }
    .cph__work { flex-direction: column; }
    /* параметры — строкой из трёх под картинкой; короткие подписи */
    .cph__params { flex-basis: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
    .cph__param-cap { font-size: .78rem; }
    .cph__param-main { font-size: .8rem; }
    .cph__param-sub { font-size: .78rem; }
    .cph__cap-full { display: none; }
    .cph__cap-short { display: inline; }

    /* результат: компактная строка вместо таблицы (ТЗ 9.2) */
    .cph__resmeta { display: none; }
    .cph__resline { display: block; }

    /* zoom: на мобайле прячем −/+, показываем 100% ▾ (dropdown) */
    .cph__zoom-out, .cph__zoom-in { display: none; }
    .cph__zoom-val { border-inline: 0; }
    .cph__zoom-caret { display: inline-block; }

    /* действия редактора: главная — на всю ширину, вторичные — текстовые в ряд */
    .cph__do-crop { flex: 1 0 100%; }
    .cph__actions { gap: .5rem; }
    .cph__actions .cph__btn-outline { flex: 1 1 0; background: none; border-color: transparent;
                                      color: var(--cph-accent); white-space: nowrap; font-size: .9rem; }
    .cph__actions .cph__btn-outline:hover { background: #f5f7fa; }
    .cph__actions--result .cph__btn-outline { white-space: nowrap; font-size: .9rem; }

    /* результат: вторичные действия в ряд (уже grid 2) */
    .cph__resmeta-cell { padding: .55rem .5rem; }
}

@media (max-width: 380px) {
    .cph__shape-lbl { font-size: .74rem; }
    .cph__shape { padding: .6rem .25rem; }
    .cph { --cph-stage-h: 280px; }
}

/* =====================================================================
   Телефон: рабочая область во всю ширину экрана.
   Класс вешает JS, когда раскладка телефонная и открыт редактор (или результат) —
   карточка отдаёт свои боковые поля картинке, а текстовые блоки забирают их себе,
   чтобы подписи не липли к кромке. Высоту сцены считает fitStage().
   ===================================================================== */
@media (max-width: 720px) {
    /* Карточка выходит за поля сайтовой колонки на всю ширину экрана: сцене нужен
       каждый пиксель, а поля колонки съедали по 16 px с каждой стороны. */
    /* Нижнее поле карточки на телефоне вдвое меньше: под ней и так идёт следующий блок
       страницы, а каждый её пиксель отнят у снимка. Верхнее поле трогать нельзя —
       им карточка и упирается в кромку экрана. */
    .cph.is-wide-stage { padding-left: 0; padding-right: 0;
                         padding-bottom: calc(var(--cph-edge-pad) / 2);
                         border-left: 0; border-right: 0; border-radius: 0;
                         margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
                         max-width: 100vw; }
    .cph.is-wide-stage .cph__toolbar,
    .cph.is-wide-stage .cph__params,
    .cph.is-wide-stage .cph__shapes-wrap,
    .cph.is-wide-stage .cph__resmeta,
    .cph.is-wide-stage .cph__resline,
    .cph.is-wide-stage .cph__title,
    .cph.is-wide-stage .cph__download,
    .cph.is-wide-stage .cph__actions { padding-left: var(--cph-edge-pad); padding-right: var(--cph-edge-pad); }
    .cph.is-wide-stage .cph__stage,
    .cph.is-wide-stage .cph__preview { border-radius: 0; }

    /* Служебные блоки под сценой ужимаются: каждый их пиксель — это пиксель, отнятый
       у снимка. Кнопки форм при этом остаются выше 44 px — иначе в них не попасть пальцем
       (см. .tool_conventions/image_tools.md, «Рамка выделения на сенсорном экране»). */
    .cph.is-wide-stage .cph__work { gap: .5rem; }
    .cph.is-wide-stage .cph__params { gap: .45rem; }
    /* Значения оставляем в столбик: «900 × 1600 px» и вес в одну строку не влезают
       в треть экрана и налезают на соседнюю колонку. Экономим на межстрочье, не на строках. */
    .cph.is-wide-stage .cph__param-cap  { font-size: .72rem; line-height: 1.15; }
    .cph.is-wide-stage .cph__param-main { font-size: .78rem; line-height: 1.2; }
    .cph.is-wide-stage .cph__param-sub  { font-size: .72rem; line-height: 1.15; }
    .cph.is-wide-stage .cph__shapes-wrap { margin-top: .55rem; }
    .cph.is-wide-stage .cph__shapes-head { margin-bottom: .3rem; }
    .cph.is-wide-stage .cph__shape { padding: .45rem .25rem; }
    .cph.is-wide-stage .cph__actions { margin-top: .6rem; }
    .cph.is-wide-stage .cph__preview { padding-left: 0; padding-right: 0; }
}