/* =====================================================================
   Drawing Tool (drawing_tool) — стили. Каркас Bootstrap + локальные токены НА .dwt;
   сайтовые токены/шапку/меню/H1 не трогаем (см. image_tools.md, _common.md).
   Концепция [[toolster-paint-trio]]: навороченный комбайн — цвет/HSV слева,
   инструменты сверху, фиолетовый творческий акцент.
   ===================================================================== */

.dwt {
    --dwt-accent:   #7c3aed;
    --dwt-bar:      #f4f3f8;
    --dwt-bar2:     #fbfafe;
    --dwt-border:   #d9d6e3;
    --dwt-ink:      #2b2733;
    --dwt-active:   #ece7fb;
    --dwt-stage-bg: #e7e5ef;
    --dwt-muted:    #6b6878;
    --dwt-grip:     #b3aec6;
    --dwt-radius:   13px;
    --dwt-radius-sm:10px;
    --dwt-radius-xs:7px;

    max-width: 1080px;
    margin-inline: auto;
    background: #fff;
    border: 1px solid var(--dwt-border);
    border-radius: var(--dwt-radius);
    box-shadow: 0 2px 14px rgba(40, 20, 70, .07);
    padding: 14px;
    color: var(--dwt-ink);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    line-height: 1.4;
}
.dwt *, .dwt *::before, .dwt *::after { box-sizing: border-box; }

.dwt button:focus, .dwt .dwt__select:focus, .dwt .dwt__grip:focus, .dwt canvas:focus { outline: none; box-shadow: none; }
.dwt button:focus-visible, .dwt .dwt__select:focus-visible, .dwt .dwt__grip:focus-visible, .dwt canvas:focus-visible {
    outline: 2px solid var(--dwt-accent); outline-offset: 2px;
}

/* =====================================================================
   ВЕРХНЯЯ ПАНЕЛЬ
   ===================================================================== */
.dwt__top {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: 7px 8px; margin-bottom: 10px;
    background: var(--dwt-bar); border: 1px solid var(--dwt-border); border-radius: var(--dwt-radius-sm);
}
.dwt__group { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dwt__cap { font-size: .8rem; font-weight: 600; color: var(--dwt-muted); }

.dwt__tool, .dwt__icon-btn, .dwt__toggle, .dwt__screen-btn {
    width: 36px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--dwt-border); background: #fff; color: var(--dwt-ink);
    border-radius: var(--dwt-radius-xs); cursor: pointer;
}
.dwt__tool i, .dwt__icon-btn i, .dwt__toggle i, .dwt__screen-btn i { font-size: 1.04rem; }
.dwt__tool:hover, .dwt__icon-btn:hover, .dwt__toggle:hover, .dwt__screen-btn:hover { background: var(--dwt-bar2); }
.dwt__tool.is-active, .dwt__toggle.is-active, .dwt__screen-btn.is-active { background: var(--dwt-active); border-color: #c3b3f4; color: #4c1d95; }
.dwt__icon-btn:disabled { opacity: .4; cursor: default; }
.dwt__icon-btn:disabled:hover { background: #fff; }
.dwt__tools { gap: 4px; }

.dwt__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 34px; padding: 0 11px; border: 1px solid var(--dwt-border); background: #fff; color: var(--dwt-ink);
    border-radius: var(--dwt-radius-xs); cursor: pointer; font-weight: 600; font-size: .9rem;
}
.dwt__btn:hover { background: var(--dwt-bar2); }
.dwt__btn--save { margin-left: auto; background: var(--dwt-accent); color: #fff; border-color: var(--dwt-accent); }
.dwt__btn--save:hover { background: #6b2fd6; color: #fff; }

.dwt__select {
    width: auto; min-width: 76px; padding: 5px 26px 5px 9px; font-size: .86rem; font-weight: 600;
    border-radius: var(--dwt-radius-xs); border: 1px solid var(--dwt-border); color: var(--dwt-ink); background-color: #fff;
}

/* =====================================================================
   ОСНОВНАЯ ОБЛАСТЬ: цвет слева + холст
   ===================================================================== */
.dwt__main { display: flex; gap: 12px; align-items: flex-start; }

.dwt__side {
    flex: 0 0 186px;
    display: flex; flex-direction: column; gap: 12px;
    padding: 11px; background: var(--dwt-bar); border: 1px solid var(--dwt-border); border-radius: var(--dwt-radius-sm);
}
.dwt__color { display: flex; flex-direction: column; gap: 8px; }
.dwt__color-row { display: flex; gap: 8px; align-items: stretch; }
.dwt__preview { flex: 0 0 28px; width: 28px; border-radius: 6px; border: 1px solid #00000026; box-shadow: inset 0 0 0 2px #fff; }
.dwt__sv { flex: 1 1 auto; width: 100%; height: 110px; border-radius: 6px; cursor: crosshair; display: block; }

.dwt__hue {
    -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: 7px; cursor: pointer;
    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.dwt__hue::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #0006; cursor: pointer; }
.dwt__hue::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #0006; cursor: pointer; }

.dwt__slider { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.dwt__slider .dwt__cap b { color: var(--dwt-ink); }
.dwt__slider input[type="range"] { width: 100%; accent-color: var(--dwt-accent); cursor: pointer; }

.dwt__swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.dwt__swatch {
    width: 100%; aspect-ratio: 1 / 1; padding: 0; cursor: pointer;
    border: 1px solid #0000002e; border-radius: 5px; background: var(--sw, #000);
}
.dwt__swatch:hover { outline: 2px solid var(--dwt-accent); outline-offset: 1px; }

/* холст */
.dwt__stage {
    flex: 1 1 auto;
    display: flex; justify-content: center; align-items: flex-start;
    overflow: auto; background: var(--dwt-stage-bg);
    border: 1px solid var(--dwt-border); border-radius: var(--dwt-radius-sm);
    padding: 18px; min-height: 340px;
}
.dwt__wrap { position: relative; flex: 0 0 auto; box-shadow: 0 3px 16px rgba(40, 20, 70, .2); }
.dwt__layer { position: absolute; top: 0; left: 0; }
.dwt__layer--bg { z-index: 1; background: #fff; }
.dwt__layer--draw { z-index: 2; touch-action: none; cursor: crosshair; }
.dwt__layer--preview { z-index: 3; pointer-events: none; }

/* хваталки */
.dwt__grip {
    position: absolute; z-index: 5; background: var(--dwt-grip); border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3); opacity: .7; transition: opacity .12s ease, background .12s ease;
}
.dwt__grip:hover, .dwt__grip:focus-visible { opacity: 1; background: var(--dwt-accent); }
.dwt__grip--se { width: 16px; height: 16px; right: -9px; bottom: -9px; border-radius: 5px; cursor: nwse-resize; }
.dwt__grip--e  { top: 50%; right: -8px; width: 12px; height: 46px; transform: translateY(-50%); border-radius: 6px; cursor: ew-resize; }
.dwt__grip--s  { left: 50%; bottom: -8px; width: 46px; height: 12px; transform: translateX(-50%); border-radius: 6px; cursor: ns-resize; }
.dwt.is-drawing .dwt__grip { opacity: 0; pointer-events: none; }
.dwt.is-resizing .dwt__grip { opacity: 1; background: var(--dwt-accent); }
.dwt.is-resizing { cursor: nwse-resize; user-select: none; }

.dwt__hint { margin: 8px 2px 0; font-size: .8rem; color: var(--dwt-muted); text-align: center; }

/* =====================================================================
   ШИРОКИЙ / ФУЛЛСКРИН
   ===================================================================== */
.dwt[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);
}
.dwt[data-screen="theater"] .dwt__stage { min-height: 62vh; }

.dwt:fullscreen {
    width: 100vw; height: 100vh; max-width: none; margin: 0; padding: 12px;
    border-radius: 0; border: 0; background: #fff; display: flex; flex-direction: column;
}
.dwt:fullscreen .dwt__top { position: sticky; top: 0; z-index: 10; }
.dwt:fullscreen .dwt__main { flex: 1 1 auto; min-height: 0; }
.dwt:fullscreen .dwt__hint { display: none; }

/* =====================================================================
   МОБАЙЛ — цвет/HSV строкой над холстом
   ===================================================================== */
@media (max-width: 700px) {
    .dwt { padding: 10px; }
    .dwt__main { flex-direction: column; }
    .dwt__side { flex: 1 1 auto; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
    .dwt__color { flex: 1 1 200px; }
    .dwt__slider { flex: 1 1 140px; }
    .dwt__swatches { flex: 1 1 100%; grid-template-columns: repeat(8, 1fr); }
    .dwt__btn-lbl { display: inline; }
    .dwt__stage { padding: 12px; }
}
@media (max-width: 420px) {
    .dwt__btn .dwt__btn-lbl { display: none; }
    .dwt__btn--save .dwt__btn-lbl { display: inline; }
}