* { box-sizing: border-box; }

/* `hidden` is an attribute, and the UA rule [hidden]{display:none} is the weakest
   selector there is -- ANY explicit `display` on an id or class silently outranks
   it. #panel-stack sets display:flex, so the pager's buttons stayed on screen for
   a lone pin even though the element was correctly marked hidden: the JS was
   right and the cascade was wrong. Guarding it once covers every element that
   toggles `hidden`, including ones added later. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; font: 15px/1.5 system-ui, -apple-system, sans-serif; }
body { display: flex; flex-direction: column; background: #0b1020; color: #e8ecf5; }

#bar { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; background: #131a30; }
#bar h1 { font-size: 1rem; font-weight: 600; margin: 0; }
#notice, #error { margin: 0 0 0 auto; font-size: .8rem; }
#notice { color: #ffd48a; }
#error { color: #ff9b9b; }

#map { flex: 1; min-height: 0; }

#panel {
    /* Centred overlay rather than a right-hand rail: at ~900px the image is
       roughly 3x its old size, which no side panel can hold without squeezing
       the map to nothing. Relies on the global [hidden] guard in this file --
       an id selector with `display` beats the UA rule, which is what left the
       stack pager visible for lone pins. */
    position: fixed; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
    background: rgba(6, 10, 22, .72);
}

#panel-card {
    position: relative;
    width: min(56rem, 94vw);
    max-height: 92vh; overflow-y: auto;
    padding: 1rem 1.25rem 1.25rem;
    background: #131a30; border-radius: 8px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
#panel h2 { font-size: 1rem; margin: .4rem 0; overflow-wrap: anywhere; }
#panel p { margin: .35rem 0; font-size: .85rem; color: #b9c2d6; overflow-wrap: anywhere; }
#panel img { width: 100%; height: auto; max-height: 68vh; object-fit: contain;
    border-radius: 4px; background: #0b1020; }
#panel a { color: #8ab4ff; }
#panel-close { position: absolute; top: .4rem; right: .6rem; background: none; border: 0;
    color: #b9c2d6; font-size: 1.4rem; cursor: pointer; }

@media (max-width: 40rem) {
    #panel { padding: .75rem; }
    #panel-card { padding: .75rem .9rem 1rem; }
}

#panel-stack { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; }
#panel-stack button {
    background: #24304f; border: 0; border-radius: 4px; color: #e8ecf5;
    font-size: 1rem; line-height: 1; padding: .2rem .55rem; cursor: pointer;
}
#panel-stack button:hover { background: #32406a; }
#panel-position { font-size: .8rem; color: #b9c2d6; }