/* ================================================================
   EDIT LAYER — production decoration system (rounded gradient +
   drop shadow painted behind modules). Loaded in BOTH view and edit
   mode because the layer is now visitor-facing decoration, not an
   edit-only debug overlay. JS in accid-edit-layer.js.

   Counterpart-CSS used to live in creator/creator.css but that file
   only loads in edit mode, so view-mode visitors got the divs
   without any styling. This file is linked from index.html so
   everyone gets the decoration.
   ================================================================ */

#accid-edit-layer {
    pointer-events: none;
    overflow: visible;
    opacity: 1;
}
#accid-edit-layer.edit-layer-bright {
    opacity: 1;
}

.edit-guide {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
}

/* ── Module shadow — rounded gradient card painted BEHIND the module,
   gives every module a modern card look without per-module styling. ── */
.edit-guide--module {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(248, 250, 252, 0.95) 100%
    );
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 10px 30px rgba(0, 0, 0, 0.08);
}

/* ── Container shadow — softer tint for container modules ── */
.edit-guide--container {
    background: linear-gradient(
        180deg,
        rgba(99, 102, 241, 0.02) 0%,
        rgba(168, 85, 247, 0.02) 100%
    );
    border-radius: 20px;
}

/* ── Slot guide — invisible; uncomment border to debug nesting ── */
.edit-guide--slot {
    /* border: 1px dashed rgba(102, 126, 234, 0.15); */
}