/**
 * gcc-draw.css — Lớp nét bút trên thiệp và bảng công cụ vẽ.
 * Nạp ở CẢ create.html lẫn card.html: người tạo và người nhận phải thấy y hệt.
 */

/* Lớp nét phủ kín thẻ, KHÔNG chặn chuột — chỉ khi bật chế độ vẽ mới nhận.
   Chọn theo CON TRỰC TIẾP của thẻ (0,2,0) chứ không chỉ .gcc-draw-layer (0,1,0):
   theme-switcher.css có luật `.gcc-preview-card > *` (0,1,1) đặt
   position: relative cho MỌI con của thẻ. Luật đó thắng thì lớp nét rơi vào
   dòng chảy, và vì nó cao 100% của một thẻ đang cao theo nội dung nên sinh vòng
   lặp phình ra — đo được trên trang thật: thẻ cao 16.790px. Lớp trang trí đã
   dính đúng bẫy này, ghi lại ở gcc-stickers.css. */
.gcc-preview-card > .gcc-draw-layer,
.gcc-preview-wedding-card > .gcc-draw-layer,
.gcc-wedding-card > .gcc-draw-layer,
.gcc-draw-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Trên hình trang trí hay dưới? DƯỚI: hình dán là vật thể có hình thù rõ,
       nét bút là ghi chú viết đè lên nền — nhưng nét vẫn phải nằm trên ảnh và
       chữ của thiệp. Lớp trang trí ở z-index 5 (gcc-stickers.css), nên 3 đặt
       lớp nét đúng giữa: trên nội dung, dưới hình dán. */
    z-index: 3;
    overflow: visible;
    border-radius: inherit;
}

/* Đang vẽ: con trỏ hình chữ thập và chặn kéo-chọn chữ trên thiệp, nếu không mỗi
   nét vẽ lại bôi đen một đoạn văn bản. */
.gcc-draw-active {
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
}

.gcc-draw-active * { cursor: crosshair; }

/* Trên cảm ứng phải tắt cuộn bằng ngón TRONG vùng thẻ, không thì kéo để vẽ
   thành kéo để cuộn trang. */
.gcc-draw-active { touch-action: none; }


/* ── Bảng công cụ ─────────────────────────────────────────────────────── */

.gcc-draw-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.gcc-draw-tools .gcc-draw-tool {
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(127, 127, 127, .12);
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.gcc-draw-tools .gcc-draw-tool:hover { background: rgba(127, 127, 127, .22); }

.gcc-draw-tools .gcc-draw-tool.is-active {
    background: rgba(127, 127, 127, .3);
    border-color: currentColor;
}

/* Tẩy tách khỏi ba kiểu bút bằng nét đứt: nó là hành động ngược, không phải
   kiểu bút thứ tư. */
.gcc-draw-eraser {
    border-style: dashed;
    border-color: var(--gcc-pnl-line, rgba(127, 127, 127, .35));
    margin-left: auto;
}

/* Độ dày: ô vuông đều nhau, chấm bên trong to nhỏ theo đúng nét sẽ vẽ — nhìn
   là biết, không phải đọc con số. */
.gcc-draw-w {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 9px;
    background: rgba(127, 127, 127, .12);
    color: inherit;
    cursor: pointer;
}

.gcc-draw-w:hover { background: rgba(127, 127, 127, .22); }
.gcc-draw-w.is-active { background: rgba(127, 127, 127, .3); border-color: currentColor; }

.gcc-draw-w-dot {
    display: block;
    border-radius: 50%;
    background: currentColor;
}

.gcc-draw-color {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(127, 127, 127, .35) inset;
}

.gcc-draw-color.is-active {
    border-color: currentColor;
    transform: scale(1.12);
}

.gcc-draw-actions { justify-content: flex-end; }

.gcc-draw-hint {
    font-size: 11px;
    opacity: .55;
    line-height: 1.4;
}