/* Planet Sound — glass panels.
   The sound panel, dialogs, "Your archive" and the recorder are frosted glass: the map behind
   shows through, blurred, instead of a dark or solid backdrop. Loaded after app.css.
   To go back to the old look, remove the <link> to this file in index.html. */

:root {
  --glass: rgba(250, 251, 249, .56);
  --glass-strong: rgba(250, 251, 249, .72);
  --glass-field: rgba(255, 255, 255, .50);
  --glass-edge: rgba(255, 255, 255, .70);
  --glass-line: rgba(30, 43, 77, .12);
  --glass-hi: rgba(255, 255, 255, .75);
  --glass-shadow: 0 1px 1px rgba(30, 43, 77, .06), 0 22px 50px -16px rgba(30, 43, 77, .40);
  --glass-blur: blur(30px) saturate(190%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass: rgba(24, 33, 44, .52);
    --glass-strong: rgba(22, 30, 39, .70);
    --glass-field: rgba(255, 255, 255, .07);
    --glass-edge: rgba(255, 255, 255, .16);
    --glass-line: rgba(255, 255, 255, .12);
    --glass-hi: rgba(255, 255, 255, .14);
    --glass-shadow: 0 1px 1px rgba(0, 0, 0, .30), 0 24px 56px -16px rgba(0, 0, 0, .65);
  }
}
:root[data-theme="dark"] {
  --glass: rgba(24, 33, 44, .52);
  --glass-strong: rgba(22, 30, 39, .70);
  --glass-field: rgba(255, 255, 255, .07);
  --glass-edge: rgba(255, 255, 255, .16);
  --glass-line: rgba(255, 255, 255, .12);
  --glass-hi: rgba(255, 255, 255, .14);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, .30), 0 24px 56px -16px rgba(0, 0, 0, .65);
}

/* ---------- the panels ---------- */
.card, dialog.sheet, .picker-bar, .seg, .tool {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
.card { border-radius: 24px; }
dialog.sheet { border-radius: 24px; }
.picker-bar { border-radius: 20px; }
.tool, .seg { border-radius: 12px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
dialog .seg { background: var(--glass-field); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: var(--glass-line); }

/* no dark veil behind a dialog: the page stays visible, only softened */
dialog::backdrop, dialog.sheet::backdrop {
  background: color-mix(in srgb, var(--paper) 6%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(125%); backdrop-filter: blur(8px) saturate(125%);
}

/* "Your archive" is a full page: glass over the whole app */
#you { background: var(--glass-strong); border: 0; border-radius: 0; box-shadow: none; }
#you .sheet-head { background: transparent; border-bottom: 1px solid var(--glass-line); }
#you input { background: var(--glass-field) !important; border-color: var(--glass-line) !important; }

/* the recorder */
.studio { background: var(--glass-strong); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
.studio-head { background: transparent; border-bottom-color: var(--glass-line); }

/* ---------- things on the glass ---------- */
:where(.card, dialog.sheet, .picker-bar, .studio) .btn:not(.solid):not(.ghost):not(.quiet) {
  background: var(--glass-field); border-color: var(--glass-line);
}
:where(.card, dialog.sheet, .picker-bar, .studio) .btn:not(.solid):not(.ghost):not(.quiet):hover { border-color: var(--graphite); }
:where(.card, dialog.sheet, .picker-bar, .studio) .btn.quiet { background: none; border-color: transparent; }
:where(.card, dialog.sheet, .studio) .field input,
:where(.card, dialog.sheet, .studio) .field textarea,
:where(.card, dialog.sheet, .studio) .sel select { background-color: var(--glass-field); border-color: var(--glass-line); }
:where(dialog.sheet, .studio) .choice label { background: var(--glass-field); border-color: var(--glass-line); }
:where(dialog.sheet, .studio) .choice label:has(input:checked) { border-color: var(--ink); }
.keybox { background: var(--glass-field); border-color: var(--glass-line); }
.card .facts, .card .c-owner, .you-sec, .you-more, .coll, .y-item, .spot-list li button { border-color: var(--glass-line); }
.sono-axis span { background: color-mix(in srgb, var(--paper) 55%, transparent); }
.tag { border-color: var(--glass-line); }
.tag[aria-pressed="true"] { border-color: var(--ink); }

/* Share WAV dialog and the footer of a shared collection */
#wav-dlg .field { margin-bottom: 12px; }
#wav-dlg .hint { font-size: 13px; margin-bottom: 10px; }
#wav-dlg .progress { margin: 0 0 8px; }
#wav-dlg .row.end { margin-top: 8px; }
.spot-foot { margin-top: 14px; }
.spot-foot .hint { margin: 0 0 8px; font-size: 13px; }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .card { border-radius: 26px 26px 0 0; border-bottom: 0; }
  dialog.sheet { border-radius: 26px 26px 0 0; border-bottom: 0; }
  #you { border-radius: 0; }
  .card-grip::before { background: color-mix(in srgb, var(--ink) 22%, transparent); }
}

/* ---------- when glass is not possible: back to solid panels ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .card, dialog.sheet, .picker-bar, .seg, .tool, #you, .studio { background: var(--sheet); }
  :root { --glass-field: var(--paper); }
}
@media (prefers-reduced-transparency: reduce) {
  .card, dialog.sheet, .picker-bar, .seg, .tool, #you, .studio {
    background: var(--sheet); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  dialog::backdrop, dialog.sheet::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}