/* ============================================================
   WORKSPACE (canvas + right rail + panels)
   ============================================================ */

.workspace {
    flex: 1;
    min-height: 0;
    position: relative; /* positioning context for absolute panels */
    display: grid;
    grid-template-columns: 1fr var(--rail-width);
}

/* ===== CANVAS CENTRAL (pan + zoom) ===== */

.canvas-area {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg);
    cursor: grab;
    touch-action: none;
}

.canvas-area::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    --grid-size: 32px;
    --grid-x: 0px;
    --grid-y: 0px;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent 0 calc(var(--grid-size) - 1px),
            var(--grid-line) calc(var(--grid-size) - 1px) var(--grid-size)
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 calc(var(--grid-size) - 1px),
            var(--grid-line) calc(var(--grid-size) - 1px) var(--grid-size)
        );
    transform: translate(var(--grid-x), var(--grid-y));
    will-change: transform;
}
.canvas-area > .world,
.canvas-area > .canvas-empty {
    z-index: 1;
}

.canvas-area.is-dragging {
    cursor: grabbing;
}
.canvas-area.is-zooming {
    cursor: zoom-in;
}


/* World pans (translate), svg-stage scales (zoom). max-content prevents SVG squish when source declares width="100%". */
.world {
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    height: max-content;
    transform-origin: 0 0;
    will-change: transform;
}
.svg-stage {
    transform-origin: 0 0;
    will-change: transform;
    display: inline-block;
    line-height: 0;
}
.svg-stage > svg {
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    border: dashed var(--color-border);
}

/* Canvas empty-state card — frosted glass drop zone */
.canvas-empty {
    --ph-dx: 0px;
    --ph-dy: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + var(--ph-dx)), calc(-50% + var(--ph-dy)));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: min(360px, 80vw);
    padding: var(--space-6) var(--space-5);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-xl);
    background: light-dark(
        oklch(95% 0.02 90 / 0.72),
        oklch(15% 0.01 250 / 0.65)
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: center;
    cursor: grab;
    user-select: none;
    touch-action: none;
    z-index: 1;
    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.canvas-empty:hover {
    border-color: var(--color-primary);
    background: light-dark(
        oklch(95% 0.02 90 / 0.88),
        oklch(15% 0.01 250 / 0.82)
    );
    box-shadow: var(--shadow-md);
}

.canvas-empty:focus-visible {
    box-shadow: var(--focus-ring);
    border-color: var(--color-primary);
}

.canvas-empty.is-dragging-placeholder {
    cursor: grabbing;
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.canvas-empty-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: light-dark(
        oklch(from var(--color-primary) l c h / 0.14),
        oklch(from var(--color-primary) l c h / 0.16)
    );
    color: var(--color-primary);
    flex-shrink: 0;
}

.canvas-empty-icon {
    width: 28px;
    height: 28px;
    opacity: 0.85;
}

.canvas-empty-title {
    font-size: clamp(1.05rem, 3vw, 1.2rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}

.canvas-empty-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.canvas-empty-sub b {
    color: var(--color-text);
    font-weight: 600;
}

/* ===== CROP OVERLAY ===== */

.crop-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    display: none;
    opacity: 0;
    transition: opacity 180ms var(--ease-out);
}

.crop-overlay.is-active {
    display: block;
    opacity: 1;
}

.crop-dim {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
    cursor: default;
    transition: opacity 180ms var(--ease-out);
}

.crop-dim--top {
    left: 0;
    right: 0;
    top: 0;
    height: var(--crop-top, 0px);
}

.crop-dim--bottom {
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--crop-bottom, 0px);
}

.crop-dim--left {
    left: 0;
    top: var(--crop-top, 0px);
    bottom: var(--crop-bottom, 0px);
    width: var(--crop-left, 0px);
}

.crop-dim--right {
    right: 0;
    top: var(--crop-top, 0px);
    bottom: var(--crop-bottom, 0px);
    width: var(--crop-right, 0px);
}

.crop-area {
    position: absolute;
    left: var(--crop-left, 0px);
    top: var(--crop-top, 0px);
    right: var(--crop-right, 0px);
    bottom: var(--crop-bottom, 0px);
    outline: 2px solid var(--color-primary);
    outline-offset: -1px;
    pointer-events: auto;
    --crop-hit-margin: 12px;
    cursor: move;
}

.crop-area:focus-visible {
    outline-color: var(--color-text);
}

/* Rule of thirds guides */
.crop-rule--thirds-h,
.crop-rule--thirds-v {
    position: absolute;
    pointer-events: none;
    opacity: 0.35;
}

.crop-rule--thirds-h {
    left: 0;
    right: 0;
    top: 33.333%;
    border-block-start: 1px dashed rgba(255, 255, 255, 0.6);
}

.crop-rule--thirds-v {
    top: 0;
    bottom: 0;
    left: 33.333%;
    border-inline-start: 1px dashed rgba(255, 255, 255, 0.6);
}

/* Corner indicators — purely decorative, sit outside the crop area on the dim mask */
.crop-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--color-surface);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-sm);
    pointer-events: auto;
    box-shadow: 0 0 0 2px var(--color-bg);
    transition: box-shadow 120ms var(--ease-out);
}

.crop-corner--nw { left: 0; top: 0; transform: translate(-100%, -100%); cursor: nwse-resize; }
.crop-corner--ne { right: 0; top: 0; transform: translate(100%, -100%); cursor: nesw-resize; }
.crop-corner--sw { left: 0; bottom: 0; transform: translate(-100%, 100%); cursor: nesw-resize; }
.crop-corner--se { right: 0; bottom: 0; transform: translate(100%, 100%); cursor: nwse-resize; }

/* Active corner glow during drag — applied via JS data attribute on crop-area */
.crop-area[data-dragging="nw"] .crop-corner--nw,
.crop-area[data-dragging="ne"] .crop-corner--ne,
.crop-area[data-dragging="sw"] .crop-corner--sw,
.crop-area[data-dragging="se"] .crop-corner--se {
    box-shadow: 0 0 0 3px var(--color-primary-hover), 0 0 12px rgba(from var(--color-primary) r g b / 0.4);
}

/* ===== CROP ACTION BAR ===== */

.crop-actions {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    z-index: 25;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    opacity: 0;
    transition:
        opacity 180ms var(--ease-out) 40ms,
        transform 180ms var(--ease-out) 40ms;
}

.crop-overlay.is-active .crop-actions {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.crop-actions-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.crop-actions-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.crop-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.crop-action-btn--cancel {
    color: var(--color-text-muted);
    background: transparent;
    border-color: var(--color-border);
}

.crop-action-btn--cancel:hover {
    color: var(--color-text);
    background: var(--color-surface-offset);
}

.crop-action-btn--apply {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.crop-action-btn--apply:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.crop-action-btn--apply:active {
    transform: scale(0.97);
}

.crop-action-btn:focus-visible {
    box-shadow: var(--focus-ring);
}

/* ===== RESPONSIVE: larger hit margin for touch ===== */

@media (pointer: coarse) {
    .crop-area {
        --crop-hit-margin: 18px;
    }
}