/* Solar Shadows – layout */

#sketch-holder {
    position: relative !important;
    width: 100% !important;
    height: 600px !important;
    overflow: hidden;
}

/* Leaflet map sits behind the p5 canvas */
#leaflet-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* p5 canvas floats on top, transparent, click-through */
#sketch-holder canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* Custom floating control bar inside sketch-holder */
#shadow-controls {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 8px;
    padding: 6px 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-family: sans-serif;
    font-size: 13px;
    color: #555;
}

/* Override Leaflet z-index clashes */
.leaflet-control-zoom {
    z-index: 5 !important;
}