/* === css/intel-building/components/app-modal.css === v1.0.0 ===
   Intel Building — "Download App" store-picker modal, opened from the hero
   "Download App" buttons (data-plx-app-modal-open) via
   js/intel-building/components/app-modal.js. Theme-matched to the dark
   header/footer surfaces; built entirely from existing design tokens. */

.plx-app-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

/* Stays mounted/painted (opacity only, no visibility/display swap) so the
   backdrop's blur layer is already composited before it's shown — toggling
   visibility instead made the browser build that layer from scratch on
   open, which is what showed up as the blur "arriving" a beat late. */
.plx-app-modal[data-plx-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

/* blur(6px) stays constant in every state (never toggled) so its
   compositing layer exists from first paint, not created on open — only
   opacity (a cheap, already-composited property) animates, and it's given
   its own transition here rather than relying solely on the parent's, so
   the backdrop's fade is never dependent on/delayed by anything else. */
.plx-app-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 9, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  will-change: opacity;
  transition: opacity var(--transition-base);
}

.plx-app-modal[data-plx-open="true"] .plx-app-modal-backdrop {
  opacity: 1;
}

.plx-app-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--color-dark-elevated);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  padding: var(--space-8) var(--space-6) var(--space-6);
  transform: translateY(12px) scale(0.97);
  transition: transform var(--transition-base);
}

.plx-app-modal[data-plx-open="true"] .plx-app-modal-panel {
  transform: translateY(0) scale(1);
}

.plx-app-modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border-dark);
  background: transparent;
  color: var(--color-text-inverse-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.plx-app-modal-close svg {
  width: 16px;
  height: 16px;
}

.plx-app-modal-close:hover {
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.plx-app-modal-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.plx-app-modal-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-2);
}

.plx-app-modal-desc {
  font-size: var(--text-sm);
  color: var(--color-text-inverse-secondary);
}

.plx-app-modal-stores {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Scoped to .plx-app-modal-panel (0,2,0) rather than just the button's own
   class (0,1,0): the base ".plx-ib a { color: inherit }" rule is (0,1,1),
   which otherwise wins and lets the anchor fall back to the page's dark
   default text color on this dark panel — same fix as .plx-btn.plx-btn-primary
   above. */
.plx-app-modal-panel .plx-app-modal-store {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  color: var(--color-text-inverse);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.plx-app-modal-store:hover {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

.plx-app-modal-store img {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

.plx-app-modal-store span {
  display: flex;
  flex-direction: column;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
}

.plx-app-modal-store small {
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  color: var(--color-text-inverse-secondary);
}

@media (max-width: 480px) {
  .plx-app-modal-panel {
    padding: var(--space-6) var(--space-4) var(--space-5);
  }
}