/* ═══════════════════════════════════════════════════════════════════════
   MUJIX — SHARED STRUCTURAL BASE
   Always loaded, before the selected theme. Themes should NEVER need to
   redeclare anything in this file — only colors, fonts, and decoration.

   Why this file exists: bauhaus/neon/postmodern/renaissance were each
   independently missing box-sizing, the body/#app scroll model, and PWA
   safe-area handling, which is what caused overlapping buttons and
   misaligned inputs. Rather than re-audit every theme by hand again next
   time a new one is added, this file makes the correct box model and
   scroll container the DEFAULT — a new theme.css that only sets colors
   and fonts will still lay out correctly with zero extra effort.

   Cascade order note: this file loads first, so any rule a theme.css DOES
   declare (even without !important) wins normally. These rules only take
   effect when a theme leaves them out entirely.
   ═══════════════════════════════════════════════════════════════════════ */

[x-cloak] { display: none !important }

/* x-show overlays: Alpine strips the inline `display` property when it
   shows an element (it expects the shown display to come from CSS, not the
   style attribute). Without this fallback the modal backdrops collapsed to
   display:block and pinned their card to the top-left corner. The class
   supplies display:flex only while the element is visible; Alpine's inline
   `display:none` still wins when it hides one. */
.modal-ov {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.alpine-flex { display: flex }

/* ── Primary publish/CTA button — shared by Drop Studio, screen cards and
   the per-screen Remote Control button, so every theme's .pub-btn override
   styles them all consistently. ── */
.pub-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 10px 20px; border-radius: 50px;
  background: linear-gradient(135deg, var(--pk, #ff3cac), var(--ac, #a259ff));
  border: none; color: #fff; font-size: .84rem; font-weight: 800;
  cursor: pointer; font-family: inherit; text-decoration: none;
  transition: opacity .18s, transform .18s, box-shadow .18s, background .18s, border-color .18s;
  letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 4px 16px var(--glow, rgba(0,0,0,.2));
}
.pub-btn:hover {
  opacity: .88; transform: translateY(-1px);
  box-shadow: 0 6px 22px var(--glow, rgba(0,0,0,.25));
}

@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}
@media (display-mode:standalone), (display-mode:fullscreen), (display-mode:window-controls-overlay) {
  body { height: 100vh; padding-top: 0; padding-bottom: 0 }
}

@media (min-width:1280px) { :focus-visible { outline: 3px solid var(--ac, #a259ff) !important; outline-offset: 3px !important } }

/* ═══════════════════════════════════════════════════════════════════════
   CANONICAL LOGO — the SAME lockup in every theme.
   Mnemonic mark (concentric sound rings + play chevrons) + MUJIX wordmark.
   One shape, one typeface, identical everywhere. Themes may ONLY change
   colours via --logo-mark (the mnemonic) and --logo-fg (the word).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --logo-mark: var(--ac, currentColor);
  --logo-fg:   var(--tx, currentColor);
}
.mjx-logo {
  display: inline-flex; align-items: center; gap: .55em;
  line-height: 1; white-space: nowrap;
  color: var(--logo-fg);
}
.mjx-logo .mjx-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1em; height: 1em; flex-shrink: 0;
  color: var(--logo-mark);
}
.mjx-logo .mjx-mark svg { width: 100%; height: 100%; display: block }
.mjx-logo .mjx-word {
  display: inline-flex; align-items: center;
  height: .44em; flex-shrink: 0;
  color: inherit;
}
.mjx-logo .mjx-word svg { height: 100%; width: auto; display: block }
.mjx-logo.is-stack { flex-direction: column; gap: .5em }
.mjx-logo.is-mark .mjx-word { display: none }
.mjx-logo.is-word .mjx-mark { display: none }
@media (max-width: 760px) {
  .mjx-logo.is-adaptive .mjx-word { display: none }
  .mjx-logo.is-adaptive { gap: 0 }
}

/* ═══════════════════════════════════════════════════════════════════════
   SHARED FORM INPUT — every theme gets a styled .inp.
   Only bauhaus/rams/rand previously shipped .inp, so on the other seven
   themes text fields fell back to raw white browser controls on dark
   cards. Themes may keep/override their own .inp; those rules load after
   this file and win.
   ═══════════════════════════════════════════════════════════════════════ */
.inp {
  font-family: var(--font-body, inherit);
  font-size: .9rem;
  letter-spacing: -.01em;
  background: var(--s1, rgba(255,255,255,.05));
  color: var(--tx, inherit);
  border: 1px solid var(--b1, rgba(255,255,255,.1));
  border-radius: var(--r, 10px);
  outline: none;
  box-shadow: none;
  transition: border-color var(--anim-dur, .2s), background var(--anim-dur, .2s), box-shadow var(--anim-dur, .2s);
  padding: 11px 15px;
  width: 100%;
  box-sizing: border-box;
}
.inp:focus {
  border-color: var(--ac, #a259ff);
  background: var(--s1, rgba(255,255,255,.05));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac, #a259ff) 22%, transparent);
}
.inp::placeholder { color: var(--mt, rgba(255,255,255,.4)) }
[data-theme="light"] .inp { background: var(--s2, #fff); color: var(--tx) }
[data-theme="light"] .inp:focus { background: var(--s2, #fff) }
[data-theme="light"] .inp::placeholder { color: var(--mt, rgba(0,0,0,.4)) }