/* Planet Sound — update 5 (loaded last).
   One page at a time (Map, Index, Archive, About) with the menu on every page; the selected menu item is red
   text without an underline; Index fits the screen, with the tags wrapping into two rows that open on demand;
   five spectrogram palettes (press and hold to change); clean play buttons; the recorder without helper texts. */

/* ---------- menu ---------- */
.views button[aria-pressed="true"],
.bar .views button[aria-pressed="true"],
.bar.open .views button[aria-pressed="true"] { box-shadow: none !important; text-decoration: none !important; color: var(--signal) !important; }

/* On the pages (everything but the map) the bar is a strip of glass, so the menu, search and
   Record stay readable while the page scrolls underneath. */
/* (drawn on a layer behind the bar: a backdrop-filter on the bar itself would pin the
   floating Record button and the phone menu to the bar instead of the screen) */
body:not([data-page="map"]) .bar { pointer-events: auto; }
body:not([data-page="map"]) .bar::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-line);
}
#map-view[hidden] .maplibregl-control-container { display: none !important; }
body:not([data-page="map"]) .bar .name,
body:not([data-page="map"]) .views button,
body:not([data-page="map"]) .search input { -webkit-text-stroke: 0 !important; }

/* phone menu: on a page it opens as a small glass panel; over the map it stays plain text */
@media (max-width: 860px) {
  body:not([data-page="map"]) .bar.open .views {
    background: var(--glass-strong) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important; backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-edge) !important; border-radius: 16px !important;
    box-shadow: var(--glass-shadow) !important; padding: 6px 6px !important; top: calc(var(--bar-h) + 6px) !important; right: 10px !important;
  }
  body:not([data-page="map"]) .bar.open .views button { padding: 11px 14px !important; }
  /* the Record button floats at the bottom on every page */
  body:not([data-page="map"]) .rec-btn { box-shadow: var(--glass-shadow); }
}

/* ---------- pages ---------- */
#map-view[hidden] { display: block !important; pointer-events: none; }
#index-view, #about-view, #archive-view {
  position: absolute; inset: 0; padding-top: var(--bar-h); overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--page-glass, color-mix(in srgb, var(--paper) 74%, transparent));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.index-wrap, .archive-wrap, .about { max-width: 100%; }
.archive-wrap { width: min(720px, 100%); margin: 0 auto; padding: 28px 24px 110px; }
.archive-wrap .index-head { margin-bottom: 8px; }
.archive-wrap .index-head h1 { font: 500 34px/1.1 var(--serif); margin: 0; }
#archive-view input:not([type="checkbox"]):not([type="radio"]) { background: var(--glass-field) !important; border-color: var(--glass-line) !important; }
#archive-view .seg { background: var(--glass-field); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: var(--glass-line); }
#archive-view .btn:not(.solid):not(.ghost):not(.quiet) { background: var(--glass-field); border-color: var(--glass-line); }
#archive-view .you-sec:first-child { border-top: 0; padding-top: 4px; }

/* ---------- Index fits the screen ---------- */
.index-wrap { width: min(1120px, 100%); box-sizing: border-box; }
.filters { width: 100%; min-width: 0; }
.filters > * { min-width: 0; }
#tag-filter {
  flex: 1 1 auto; flex-wrap: wrap !important; overflow: hidden !important; max-width: 100%; min-width: 0;
  gap: 6px; padding-bottom: 0;
}
#tag-filter .tag { flex: none; line-height: 18px; }
#tag-filter.fold:not(.open) { max-height: 58px; }          /* two rows of tags */
.tag-more {
  align-self: flex-start; border: 0; background: none; padding: 4px 0; margin: 2px 0 0;
  font: 500 13px/1.3 var(--sans); color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tag-more:hover { color: var(--ink); }
.tag-more[hidden] { display: none; }
@media (min-width: 861px) {
  .filters { flex-wrap: wrap; align-items: flex-start; }
  .filters .tag-wrap { flex: 1 1 520px; }
  .filter-right { flex: none; }
}
@media (max-width: 860px) {
  .filters { flex-direction: column; align-items: stretch; gap: 10px; }
  .filter-right { flex-wrap: wrap; gap: 10px 14px; }
}

/* ---------- play buttons: one icon, nothing else drawn ---------- */
.play, .mplay {
  -webkit-appearance: none; appearance: none; padding: 0; margin: 0; border: 0 !important; outline: 0;
  overflow: hidden; line-height: 0; font-size: 0; border-radius: 50% !important;
  -webkit-tap-highlight-color: transparent; background-clip: padding-box;
  display: grid; place-items: center;
}
.play svg, .mplay svg { display: block; overflow: visible; }
.play svg path, .mplay svg path { fill: var(--paper); stroke: none; }
.play:focus-visible, .mplay:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--sheet), 0 0 0 5px var(--focus); }

/* ---------- spectrogram palettes (press and hold the spectrogram) ---------- */
.sono-img:not(.empty) { background-color: var(--ink); }
.sono-img.heat:not(.empty) {
  background-color: #000; background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
  -webkit-mask: none; mask: none;
}
.sono { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
.sono.pal-flash .sono-img { animation: pal-flash .35s ease-out; }
@keyframes pal-flash { from { filter: brightness(1.35); } to { filter: none; } }
/* on the heat palettes the frequency labels sit on dark chips */
.sono:has(.sono-img.heat) .sono-axis span { background: rgba(0, 0, 0, .55); color: #E8ECEF; }
.sono:has(.sono-img.heat) .sono-axis span::after { background: #E8ECEF; }

/* ---------- recorder: no helper texts; the Gain knob sits centred in its band ---------- */
.fx-note:empty { display: none; }
.fx { padding: 16px 0 14px; }
.fx-knobs { align-items: center; }
.deck { margin-top: 14px; }
.tag-wrap { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
@media (max-width: 860px) { .tag-wrap { width: 100%; } }