/* Planet Sound — finishing touches (loaded last).
   Red for the selected menu item, a plain "Planet Sound" title, the same frosted-glass background on the
   full-screen entry, Index, About and Your archive as on the normal entry panel, and an app that fills the whole
   screen — including the strip behind the iPhone's clock and battery. */

/* ---------- menu ---------- */
.views button[aria-pressed="true"] { color: var(--signal) !important; box-shadow: inset 0 -2px 0 var(--signal) !important; }
.views button:not([aria-pressed="true"]):hover, .views .you:hover { color: var(--ink); }
.brand .name { -webkit-text-stroke: 0 !important; paint-order: normal !important; text-shadow: none !important; }

/* ---------- the glass look everywhere ---------- */
:root { --page-glass: color-mix(in srgb, var(--paper) 74%, transparent); }
/* The map stays rendered (but untouchable) behind Index and About, so the glass has something to blur,
   exactly as the entry panel does. */
#map-view[hidden] { display: block !important; pointer-events: none; }
#map-view[hidden] > :not(#space):not(#map) { display: none !important; }
#index-view, #about-view, #you {
  background: var(--page-glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.card.expanded {
  background: linear-gradient(var(--glass), var(--glass)), color-mix(in srgb, var(--paper) 62%, transparent);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}

/* ---------- the whole screen, edge to edge ---------- */
:root { --safe-t: env(safe-area-inset-top, 0px); --bar-h: calc(56px + var(--safe-t)); }
@media (max-width: 860px) { :root { --bar-h: calc(52px + var(--safe-t)); } }
html { background: var(--paper); }
.bar { padding-top: var(--safe-t); }
.studio-head { padding-top: calc(12px + var(--safe-t)); }
/* installed on the home screen the status bar is see-through (white clock and battery): a faint dark veil keeps them readable */
@media (display-mode: standalone) {
  body::before {
    content: ''; position: fixed; left: 0; right: 0; top: 0; height: calc(var(--safe-t) + 6px); z-index: 90; pointer-events: none;
    background: linear-gradient(rgba(10, 14, 20, .55), rgba(10, 14, 20, 0));
  }
}