/* W5AWW operations wall; based on Hamdash by VA3HDL (MIT). */
:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #000; color: #eee; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
a { color: #8cd5ff; }
button, summary, a { touch-action: manipulation; }
button { cursor: pointer; font: inherit; color: inherit; background: #26323d; border: 1px solid #63717e; border-radius: .3rem; padding: .3rem .6rem; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #ffcd57; outline-offset: 2px; }
.top-bar { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: .3rem; padding: .4rem; background: #333; }
.child { border: 1px solid #758594; border-radius: .3rem; background: #2b333c; padding: .3rem; font: clamp(.65rem, 1.3vw, 1.1rem) ui-monospace, monospace; }
#topBarCenter { text-align: center; color: #8fc7ff; }
#topBarRight { text-align: right; color: aquamarine; }
.toolbar { display: flex; flex-wrap: wrap; gap: .4rem; padding: .35rem .5rem; align-items: center; background: #111; }
.toolbar .hint { margin-left: auto; color: #aaa; font-size: .75rem; }
.menu-panel { position: relative; }
.menu-panel summary { cursor: pointer; border: 1px solid #63717e; padding: .3rem .6rem; border-radius: .3rem; }
.menu { position: absolute; z-index: 4; display: grid; gap: .25rem; min-width: 12rem; max-height: 80vh; overflow-y: auto; padding: .4rem; background: #1d252d; box-shadow: 0 3px 12px #000; }
.menu a, .menu button { display: block; text-decoration: none; padding: .5rem; text-align: left; }
.dashboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.image-container { min-width: 0; height: calc((100vh - 7rem) / 3); min-height: 10rem; background: #0b0b0b; display: flex; flex-direction: column; position: relative; }
.image-title { font-size: clamp(.65rem, 1vw, 1rem); text-align: center; padding: .2rem; background: #181818; margin: 0; }
.media-slot { flex: 1; min-height: 0; position: relative; }
.media { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.tile-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem; padding: .2rem .4rem; font-size: .65rem; background: #151515; }
.tile-status { color: #bbb; }
.image-container[data-status="stale"] .tile-status, .image-container[data-status="unavailable"] .tile-status { color: #ffbd58; }
.placeholder { position: absolute; inset: 0; display: grid; place-content: center; color: #b9b9b9; font-size: .8rem; text-align: center; padding: .5rem; }
.image-container[data-status="stale"] { outline: 1px solid #c99036; outline-offset: -1px; }
dialog { max-width: 94vw; max-height: 94vh; color: #eee; background: #171c21; border: 1px solid #63717e; border-radius: .4rem; }
dialog::backdrop { background: rgb(0 0 0 / .85); }
.dialog-toolbar { display: flex; gap: 1rem; align-items: center; margin-bottom: .4rem; }
.dialog-toolbar button { margin-left: auto; }
.image-large { display: block; max-width: 88vw; max-height: 80vh; object-fit: contain; }
#sourcesList { max-width: 80vw; overflow-wrap: anywhere; }
#sourcesList li { margin-bottom: .6rem; }
.weather-note { font-size: .7rem; color: #aaa; padding: .3rem .5rem; margin: 0; }
@media (max-width: 800px) {
  .dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .image-container { height: 31vh; }
  .toolbar .hint { display: none; }
}
@media (max-width: 450px) {
  .dashboard { grid-template-columns: 1fr; }
  .image-container { height: 45vh; }
  .top-bar { grid-template-columns: 1fr; }
  #topBarLeft, #topBarRight { text-align: center; }
}