/* =====================================================================
   Sketchpad (sketchpad) — стили. Каркас на Bootstrap + локальные токены
   НА КОНТЕЙНЕРЕ инструмента (.skp); сайтовые токены/шапку/меню/H1 не трогаем
   (см. .tool_conventions/image_tools.md, _common.md «Подложка инструмента»).
   Концепция [[toolster-paint-trio]]: предельно простой блокнот, тёплая «бумага».
   ===================================================================== */

.skp {
    --skp-ink:        #2b2f38;   /* графит — основной цвет UI */
    --skp-ink-soft:   #4a4f59;
    --skp-active:     #2b2f38;   /* заливка активной кнопки */
    --skp-bar-bg:     #f6f5f1;   /* панель — светло-кремовая, перекликается с бумагой */
    --skp-stage-bg:   #eceae3;   /* фон вокруг «листа» */
    --skp-paper:      #fffdf7;   /* цвет листа (дублирует config.paper.bg) */
    --skp-border:     #dcd9d0;
    --skp-line:       #e3e1d8;
    --skp-muted:      #6b7280;
    --skp-accent:     #e8590c;   /* тёплый «карандашный» акцент (выделение/фокус) */
    --skp-radius:     14px;
    --skp-radius-sm:  10px;
    --skp-radius-xs:  8px;
    --skp-grip:       #b9b3a3;

    max-width: 980px;
    margin-inline: auto;
    background: #fff;
    border: 1px solid var(--skp-border);
    border-radius: var(--skp-radius);
    box-shadow: 0 2px 14px rgba(30, 28, 20, .06);
    padding: 16px;
    color: var(--skp-ink);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    line-height: 1.4;
}

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

/* focus: убрать ring при мыши, аккуратный — только с клавиатуры
   (CLAUDE.md «без bootstrap/браузерного обрамления поля при нажатии») */
.skp button:focus, .skp .skp__select:focus, .skp .skp__grip:focus,
.skp .skp__color-input:focus { outline: none; box-shadow: none; }
.skp button:focus-visible, .skp .skp__select:focus-visible,
.skp .skp__grip:focus-visible {
    outline: 2px solid var(--skp-accent); outline-offset: 2px;
}

/* =====================================================================
   ПАНЕЛЬ ИНСТРУМЕНТОВ
   ===================================================================== */
.skp__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 8px;
    background: var(--skp-bar-bg);
    border: 1px solid var(--skp-border);
    border-radius: var(--skp-radius-sm);
    margin-bottom: 12px;
}

.skp__group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: #fff;
    border: 1px solid var(--skp-border);
    border-radius: var(--skp-radius-xs);
}
.skp__actions { margin-left: auto; }

/* --- кнопки кистей --- */
.skp__tool, .skp__act {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--skp-ink);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1;
    padding: 7px 10px;
    border-radius: var(--skp-radius-xs);
    cursor: pointer;
}
.skp__tool i, .skp__act i { font-size: 1.05rem; line-height: 0; }
.skp__tool:hover, .skp__act:hover { background: #efeee9; }
.skp__tool.is-active { background: var(--skp-active); color: #fff; }

/* --- толщина (точки) --- */
.skp__size {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; border-radius: var(--skp-radius-xs); cursor: pointer;
}
.skp__size:hover { background: #efeee9; }
.skp__size.is-active { background: var(--skp-active); }
.skp__dot {
    display: block;
    width: var(--d); height: var(--d);
    max-width: 18px; max-height: 18px;
    background: var(--skp-ink);
    border-radius: 50%;
}
.skp__size.is-active .skp__dot { background: #fff; }

/* --- палитра --- */
.skp__colors { gap: 5px; }
.skp__swatch {
    width: 26px; height: 26px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--skp-border);
    border-radius: 50%;
    background: var(--sw, #000);
    padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.skp__swatch.is-active { box-shadow: 0 0 0 2px var(--skp-accent); }
.skp__swatch--custom { position: relative; background: #fff; color: var(--skp-ink-soft); overflow: hidden; }
.skp__swatch--custom i { font-size: .8rem; }
.skp__color-input {
    position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
    border: 0; padding: 0; cursor: pointer;
}

/* --- поле «бумага» --- */
.skp__field { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.skp__field-cap { font-size: .82rem; color: var(--skp-muted); font-weight: 600; }
.skp__select {
    width: auto; min-width: 96px;
    padding: 6px 28px 6px 10px;
    font-size: .88rem; font-weight: 600;
    border-radius: var(--skp-radius-xs);
    border: 1px solid var(--skp-border);
    color: var(--skp-ink);
    background-color: #fff;
}

/* --- режим экрана --- */
.skp__screen-btn {
    width: 36px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--skp-ink);
    border-radius: var(--skp-radius-xs); cursor: pointer;
}
.skp__screen-btn i { font-size: 1rem; }
.skp__screen-btn:hover { background: #efeee9; }
.skp__screen-btn.is-active { background: var(--skp-active); color: #fff; }

/* --- действия --- */
.skp__act--dl { background: var(--skp-active); color: #fff; }
.skp__act--dl:hover { background: #1f2329; }
.skp__act:disabled { opacity: .4; cursor: default; }
.skp__act:disabled:hover { background: transparent; }

/* =====================================================================
   ХОЛСТ
   ===================================================================== */
.skp__stage {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: auto;
    background: var(--skp-stage-bg);
    border: 1px solid var(--skp-border);
    border-radius: var(--skp-radius-sm);
    padding: 22px;
    min-height: 300px;
}

.skp__wrap {
    position: relative;
    flex: 0 0 auto;
    background: var(--skp-paper);
    box-shadow: 0 4px 18px rgba(30, 28, 20, .14);
    border-radius: 3px;
}

.skp__layer {
    position: absolute;
    top: 0; left: 0;
    border-radius: 3px;
}
.skp__layer--bg   { z-index: 1; }
.skp__layer--draw { z-index: 2; touch-action: none; cursor: crosshair; }
.skp__layer--ink  { z-index: 3; pointer-events: none; }

.skp[data-tool="eraser"] .skp__layer--draw { cursor: cell; }

/* --- хваталки-ресайзеры --- */
.skp__grip {
    position: absolute;
    z-index: 5;
    background: var(--skp-grip);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    opacity: .6;
    transition: opacity .12s ease, background .12s ease;
}
.skp__grip:hover, .skp__grip:focus-visible { opacity: 1; background: var(--skp-accent); }

.skp__grip--se {
    width: 16px; height: 16px;
    right: -9px; bottom: -9px;
    border-radius: 5px;
    cursor: nwse-resize;
}
.skp__grip--e {
    top: 50%; right: -8px;
    width: 12px; height: 46px;
    transform: translateY(-50%);
    border-radius: 6px;
    cursor: ew-resize;
}
.skp__grip--s {
    left: 50%; bottom: -8px;
    width: 46px; height: 12px;
    transform: translateX(-50%);
    border-radius: 6px;
    cursor: ns-resize;
}

/* грипы не мешают рисованию: прячутся во время штриха */
.skp.is-drawing .skp__grip { opacity: 0; pointer-events: none; }
.skp.is-resizing .skp__grip { opacity: 1; background: var(--skp-accent); }
.skp.is-resizing { cursor: nwse-resize; user-select: none; }

/* --- подсказка под холстом --- */
.skp__hint {
    margin: 8px 2px 0;
    font-size: .8rem;
    color: var(--skp-muted);
    text-align: center;
}

/* =====================================================================
   РЕЖИМ «ШИРОКИЙ» (theater) — рабочая зона во всю ширину окна
   ===================================================================== */
.skp[data-screen="theater"] {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    border-left: 0; border-right: 0;
    padding-inline: clamp(12px, 4vw, 48px);
}
.skp[data-screen="theater"] .skp__stage { min-height: 60vh; }

/* =====================================================================
   РЕЖИМ «ФУЛЛСКРИН» — нативный Fullscreen API
   ===================================================================== */
.skp:fullscreen {
    width: 100vw; height: 100vh; max-width: none;
    margin: 0; padding: 14px;
    border-radius: 0; border: 0;
    background: #fff;
    display: flex; flex-direction: column;
}
.skp:fullscreen .skp__bar { position: sticky; top: 0; z-index: 10; }
.skp:fullscreen .skp__stage { flex: 1 1 auto; min-height: 0; }
.skp:fullscreen .skp__hint { display: none; }

/* =====================================================================
   МОБАЙЛ — компактная панель, иконки кистей без подписей
   ===================================================================== */
@media (max-width: 560px) {
    .skp { padding: 10px; }
    .skp__bar { gap: 6px; padding: 6px; }
    .skp__tool-lbl,
    .skp__act--undo .skp__act-lbl,
    .skp__act--clear .skp__act-lbl { display: none; }  /* download-подпись остаётся (главное действие) */
    .skp__tool, .skp__act { padding: 8px; }
    .skp__field-cap { display: none; }                 /* select сам подписан опциями */
    .skp__actions { margin-left: 0; }
    .skp__stage { padding: 14px; }
}

@media (max-width: 380px) {
    .skp__group { gap: 2px; padding: 2px; }
    .skp__swatch { width: 24px; height: 24px; }
    .skp__size { width: 30px; height: 30px; }
}