/* css/canvas.css */
#artboard {
    width: var(--canvas-width);
    height: var(--canvas-height);
    background-color: var(--canvas-bg);
    position: relative;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
    overflow: hidden;
}
#grid-overlay {
    --gutter: var(--gutter-width, 20px);
    --column-width: calc((var(--canvas-width) - ((var(--grid-columns) - 1) * var(--gutter))) / var(--grid-columns));
    --step: calc(var(--column-width) + var(--gutter));
    --bl: color-mix(in srgb, var(--grid-baseline-color) 40%, transparent);
    --col: color-mix(in srgb, var(--grid-column-color) 12%, transparent);
    position: absolute; inset: 0; pointer-events: none; z-index: 9997;
    background-image:
        linear-gradient(to bottom, var(--bl) 1px, transparent 1px),
        repeating-linear-gradient(to right,
            var(--col) 0px, var(--col) 1px, transparent 1px,
            transparent var(--column-width), var(--col) var(--column-width),
            var(--col) calc(var(--column-width) + 1px), transparent calc(var(--column-width) + 1px), transparent var(--step)
        );
    background-size: 100% var(--baseline-grid), 100% 100%;
}
#margin-overlay { position: absolute; inset: var(--canvas-margin); border: 1px solid color-mix(in srgb, var(--grid-margin-color) 40%, transparent); pointer-events: none; z-index: 9998; display: none; }
body.show-margins #margin-overlay { display: block; }
/* Hide Guides (G): the sheet as it prints */
body.preview #grid-overlay, body.preview #margin-overlay, body.preview #selection-box { display: none !important; }
#fold-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 9998; }
.fold-bleed { position: absolute; border: 1px dashed rgba(200, 131, 106, .7); }
.fold-line { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--guide); }
.fold-label { position: absolute; top: 4px; text-align: center; font: 500 9px/1 var(--ui-font); letter-spacing: .12em; text-transform: uppercase; color: var(--guide); opacity: .6; }
body.preview #fold-overlay { display: none !important; }
/* proof view: the sheet as the paper will print it, laid over the live DOM */
#proof-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9996; image-rendering: auto; }
body.preview #proof-overlay { display: block; }
#selection-box { position: absolute; border: 1px solid var(--verdigris-deep); pointer-events: none; z-index: 9999; }
.element.multi { outline: 1px dashed var(--verdigris-deep); outline-offset: 1px; }
#marquee { position: absolute; border: 1px dashed var(--verdigris-deep); background: color-mix(in srgb, var(--verdigris) 10%, transparent); pointer-events: none; z-index: 9999; }
.resize-handle { position: absolute; width: 10px; height: 10px; background-color: #ffffff; border: 1px solid var(--verdigris-deep); pointer-events: auto; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.resize-handle.e { top: 50%; right: -5px; transform: translateY(-50%); cursor: ew-resize; }
.resize-handle.s { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.rotate-stem { position: absolute; left: 50%; top: -22px; width: 0; height: 22px; border-left: 1px solid var(--verdigris-deep); pointer-events: none; }
.rotate-handle { position: absolute; left: 50%; top: -30px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 1px solid var(--verdigris-deep); box-shadow: 0 1px 3px rgba(0,0,0,.2); pointer-events: auto; cursor: grab; }
.rotate-handle:active { cursor: grabbing; }
.rotate-readout { position: absolute; left: 50%; top: -52px; transform: translateX(-50%); background: #1c1a16; color: var(--ink); font: 11px/1 var(--ui-font); padding: 4px 7px; border-radius: 5px; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .rotate-handle { width: 18px; height: 18px; margin-left: -9px; top: -36px; } .rotate-stem { top: -28px; height: 28px; } }
.element {
    position: absolute; cursor: grab; user-select: none;
    transform: rotate(var(--rot, 0deg)) scaleX(var(--flipX, 1)) scaleY(var(--flipY, 1));
    transform-origin: center center;
}
.element.locked { pointer-events: none !important; }
.element.hidden-layer { display: none !important; }      /* hidden from the Layers tab: not drawn, not exported, not proofed */
.shape { transition: border-radius 0.2s ease; overflow: hidden; }
.shape.halftone { background-color: transparent !important; }
.shape.halftone::before {
    content: ''; position: absolute; inset: -100%;
    background-image: radial-gradient(var(--shape-color, #000) var(--ht-dot, 40%), transparent var(--ht-dot, 40%));
    background-size: var(--ht-size, 10px) var(--ht-size, 10px); transform: rotate(var(--ht-angle, 0deg)); pointer-events: none;
}
.canvas-text { color: #1a1a1a; outline: none; white-space: pre-wrap; word-break: break-word; transform-origin: center center; }
.canvas-text[contenteditable="true"] { background-color: rgba(0, 255, 255, 0.1); border: 1px dashed rgba(0, 255, 255, 0.5); }
.canvas-image, .canvas-svg {
    display: block; object-fit: cover;
    filter: brightness(var(--img-br, 1)) contrast(var(--img-con, 1)) saturate(var(--img-sat, 1)) grayscale(var(--img-gray, 0));
}
.canvas-svg svg { width: 100%; height: 100%; fill: currentColor; }
@keyframes flashWarning {
    0% { outline: 3px solid var(--rust); background-color: rgba(200, 131, 106, 0.25); transform: scale(1.02); }
    100% { outline: 3px solid transparent; background-color: transparent; transform: scale(1); }
}
.inspect-flash { animation: flashWarning 0.8s ease-out; }