/* =========================================================
   Athenian Print Forge — Canvas System (dark/glass + sticky + rulers)
   ========================================================= */

:root {
    --canvas-bg: rgba(9,14,22,.6);
    --canvas-max-w: 100%;
    --canvas-min-h: 440px;
    --canvas-w: auto;
    --canvas-h: auto;
    --anchor: center center;
    --fit: contain;
    --radius: 14px;
    --layer-outline: 2px;
    --toolbar-gap: 12px;
    --border: rgba(255,255,255,.10);
    --ring: 0 0 0 1px rgba(255,255,255,.04) inset;
    /* rulers */
    --ppi-current: 96; /* set by JS */
    --ruler-inch: 96px; /* set by JS, fallback 96px */
    --ruler-color: rgba(255,255,255,.28);
    --ruler-sub: rgba(255,255,255,.18);
    --ruler-bg: rgba(0,0,0,.18);
    /* sticky */
    --stage-sticky-top-desktop: clamp(28px, 18vh, 140px);
    --stage-sticky-top-mobile: 10px;
}

/* Wrapper */
.mid-canvas-wrapper {
    position: relative;
    width: 100%;
    max-width: var(--canvas-max-w);
    min-height: clamp(320px, var(--canvas-min-h), 3000px);
    background: radial-gradient(120% 120% at 110% -10%, rgba(99,179,237,.12), transparent 60%), radial-gradient(90% 80% at -10% 0%, rgba(139,208,255,.10), transparent 60%), var(--canvas-bg);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 18px 65px -28px rgba(0,0,0,.7), var(--ring);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%);
}

/* Viewport */
.mid-preview-area, .mid-canvas {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    min-height: inherit;
    position: relative;
}

/* Stage sized by JS */
.mid-stage {
    position: relative;
    z-index: 0;
    line-height: 0;
    width: var(--canvas-w);
    height: var(--canvas-h);
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    will-change: transform;
}

/* Ensure stage can’t collapse before JS sets --canvas-w/--canvas-h */
.mid-stage {
    min-height: inherit; /* <- keeps it at least the wrapper’s min-height */
}

.mid-canvas-wrapper:not([style*="--canvas-w"]) .mid-stage {
    width: 100%;
    height: auto; /* <- avoid % height when parent has no explicit height */
    min-height: inherit; /* <- guarantees initial visible size */
}


.mid-canvas-wrapper.has-ratio .mid-stage {
    aspect-ratio: auto;
}

/* Layers */
canvas.apf-contour-base,
canvas.apf-contour-ants,
svg.apf-contour-svg,
.mid-stage img.mid-preview-img,
.mid-stage img.mid-preview-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

canvas.apf-contour-base {
    z-index: 1 !important;
    background: transparent !important;
}

.mid-stage img.mid-preview-bg {
    z-index: 1;
    object-fit: var(--fit,contain);
    object-position: var(--anchor,center center);
}

.mid-stage img.mid-preview-img {
    z-index: 2 !important;
    object-fit: var(--fit,contain);
    object-position: var(--anchor,center center);
}

canvas.apf-contour-ants, svg.apf-contour-svg {
    z-index: 3 !important;
}

/* Overlays */
.mid-spinner-overlay {
    position: absolute;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.45);
    z-index: 4;
}

.mid-overlay {
    position: absolute;
    inset: 0;
    display: none;
    z-index: 5;
}

.mid-canvas-wrapper.is-busy .mid-spinner-overlay {
    display: flex;
}

.mid-canvas-wrapper.show-overlay .mid-overlay {
    display: block;
}

/* Fit reflection */
.mid-canvas-wrapper[data-preview-mode="fit"] .mid-stage img.mid-preview-img,
.mid-canvas-wrapper[data-preview-mode="fit"] .mid-stage img.mid-preview-bg {
    object-fit: contain;
}

/* Sticky */
.apf-stage--sticky {
    position: sticky;
    top: var(--stage-sticky-top-desktop);
    z-index: 40;
    scroll-margin-top: calc(var(--stage-sticky-top-desktop) + 12px);
}

@media (max-width:900px) {
    .apf-stage--sticky {
        top: var(--stage-sticky-top-mobile);
        scroll-margin-top: calc(var(--stage-sticky-top-mobile) + 10px);
        background: rgba(17,23,34,.75);
        -webkit-backdrop-filter: blur(12px) saturate(130%);
        backdrop-filter: blur(12px) saturate(130%);
        border-radius: var(--radius);
        border: 1px solid rgba(255,255,255,.12);
        box-shadow: 0 14px 40px -18px rgba(0,0,0,.55), var(--ring);
    }
}

/* Toolbar */
.mid-canvas-toolbar {
    position: absolute;
    top: var(--toolbar-gap);
    right: var(--toolbar-gap);
    z-index: 6;
    display: flex;
    gap: .5rem;
    pointer-events: auto;
}

    .mid-canvas-toolbar .mid-fit-toggle {
        background: linear-gradient(180deg, #2a7ddf, #1d5dac);
        border: 1px solid #2a7ddf;
        color: #fff;
        font-weight: 700;
        font-size: 12px;
        height: 32px;
        padding: 0 12px;
        border-radius: 8px;
        cursor: pointer;
        box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
    }

        .mid-canvas-toolbar .mid-fit-toggle[aria-pressed="false"] {
            background: linear-gradient(180deg, #1d2430, #151b25);
            border-color: rgba(255,255,255,.14);
        }

/* Title badge (top-left) */
.mid-title-badge {
    position: absolute;
    top: var(--toolbar-gap);
    left: var(--toolbar-gap);
    z-index: 6;
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px 10px;
    border-radius: 8px;
    color: #e7ecf4;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .2px;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
    border: 1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%);
}

/* Size badge (bottom-right) */
.mid-dim-badges {
    position: absolute;
    right: var(--toolbar-gap);
    bottom: var(--toolbar-gap);
    z-index: 7;
    display: inline-flex;
    gap: .25rem;
    align-items: center;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    color: #dfe7f3;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.12);
}

/* Preview label (bottom-left) */
.mid-preview-label {
    position: absolute;
    left: var(--toolbar-gap);
    bottom: var(--toolbar-gap);
    z-index: 7;
    color: #fff;
    background: rgba(0,0,0,.35);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,.12);
}

/* Rulers (outside stage edges, glassy) */
.mid-ruler {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    background-color: var(--ruler-bg);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    backdrop-filter: blur(4px) saturate(120%);
}

/* Horizontal ruler (top) */
.mid-ruler-h {
    left: 0;
    right: 0;
    top: 0;
    height: 24px;
    background-image:
    /* 0.25" ticks */
    repeating-linear-gradient(to right, transparent, transparent calc(var(--ruler-inch)/4 - 1px), var(--ruler-sub) calc(var(--ruler-inch)/4 - 1px), var(--ruler-sub) calc(var(--ruler-inch)/4)),
    /* 0.5" ticks */
    repeating-linear-gradient(to right, transparent, transparent calc(var(--ruler-inch)/2 - 1px), var(--ruler-sub) calc(var(--ruler-inch)/2 - 1px), var(--ruler-sub) calc(var(--ruler-inch)/2)),
    /* 1" ticks */
    repeating-linear-gradient(to right, transparent, transparent calc(var(--ruler-inch) - 1px), var(--ruler-color) calc(var(--ruler-inch) - 1px), var(--ruler-color) var(--ruler-inch));
}

/* Vertical ruler (left) */
.mid-ruler-v {
    top: 0;
    bottom: 0;
    left: 0;
    width: 24px;
    background-image:
    /* 0.25" ticks */
    repeating-linear-gradient(to bottom, transparent, transparent calc(var(--ruler-inch)/4 - 1px), var(--ruler-sub) calc(var(--ruler-inch)/4 - 1px), var(--ruler-sub) calc(var(--ruler-inch)/4)),
    /* 0.5" ticks */
    repeating-linear-gradient(to bottom, transparent, transparent calc(var(--ruler-inch)/2 - 1px), var(--ruler-sub) calc(var(--ruler-inch)/2 - 1px), var(--ruler-sub) calc(var(--ruler-inch)/2)),
    /* 1" ticks */
    repeating-linear-gradient(to bottom, transparent, transparent calc(var(--ruler-inch) - 1px), var(--ruler-color) calc(var(--ruler-inch) - 1px), var(--ruler-color) var(--ruler-inch));
}

/* When JS has concrete size */
.mid-canvas-wrapper.has-size .mid-preview-area,
.mid-canvas-wrapper.has-size .mid-canvas {
    height: auto;
    min-height: 0;
}

.mid-canvas-wrapper.has-size .mid-stage {
    width: var(--canvas-w);
    height: var(--canvas-h);
    aspect-ratio: auto;
    margin: 0 auto;
}

/* Debug helpers (optional) */
.mid-canvas-wrapper.is-debug-layers .mid-stage {
    outline: var(--layer-outline) solid #f00;
}

.mid-canvas-wrapper.is-debug-layers .apf-contour-base {
    outline: var(--layer-outline) solid #0f0;
}

.mid-canvas-wrapper.is-debug-layers .mid-preview-img {
    outline: var(--layer-outline) dashed #00f;
}

.mid-canvas-wrapper.is-debug-layers .apf-contour-ants,
.mid-canvas-wrapper.is-debug-layers .apf-contour-svg {
    outline: var(--layer-outline) dashed #ff0;
}
/* Toolbar */
.mid-canvas-toolbar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    display: flex;
    gap: .5rem;
    pointer-events: auto;
}

.mid-fit-toggle {
    background: linear-gradient(180deg,#2a7ddf,#1d5dac);
    border: 1px solid #2a7ddf;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}

    .mid-fit-toggle[aria-pressed="false"] {
        background: linear-gradient(180deg,#1d2430,#151b25);
        border-color: rgba(255,255,255,.14);
    }

/* Dimension pills (no rulers) */
.mid-dim-pill {
    position: absolute;
    z-index: 7;
    padding: 4px 8px;
    border-radius: 999px;
    font: 600 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    letter-spacing: .2px;
    color: #e7ecf4;
    background: linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.08));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%);
    pointer-events: none;
}

    .mid-dim-pill.mid-dim-w {
        left: 50%;
        bottom: 8px;
        transform: translateX(-50%);
    }

    .mid-dim-pill.mid-dim-h {
        top: 50%;
        right: 8px;
        transform: translateY(-50%) rotate(90deg);
    }