/**
 * pwa-install.css — "Installér app" affordances for the player portal,
 * and the transient in-app notice banner (.hd-notice-banner).
 *
 * Modules:
 *   public/js/pwa-install.js        (window.PwaInstall)      — .hd-pwa__* / .hd-pwa-banner__*
 *   public/js/player-notice-banner.js (window.PlayerNoticeBanner) — .hd-notice-banner
 *
 * Token-only — no hardcoded colors/sizes/motion.
 *
 * @layer components
 */

@layer components {

  /* ===== Indstillinger section ===== */

  .hd-pwa__note {
    margin: 0;
    font-size: var(--hd-text-ui);
    color: var(--hd-text-secondary);
    line-height: var(--hd-leading-relaxed);
  }

  .hd-pwa__install-btn,
  .hd-pwa-banner__action {
    appearance: none;
    border: 1px solid var(--hd-border-accent, var(--hd-border-subtle));
    border-radius: var(--hd-radius-md);
    padding: var(--hd-space-2) var(--hd-space-4);
    min-height: 44px; /* WCAG 2.5.5 touch target */
    background: var(--hd-accent-primary);
    color: var(--hd-text-on-accent, var(--hd-surface-base));
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui);
    cursor: pointer;
  }

  /* ===== One-time install banner ===== */

  .hd-pwa-banner {
    position: fixed;
    inset-inline: 0;
    inset-block-start: 0;
    z-index: var(--hd-z-toast);
    display: flex;
    align-items: center;
    gap: var(--hd-space-3);
    padding: var(--hd-space-2) var(--hd-space-4);
    padding-block-start: calc(var(--hd-space-2) + env(safe-area-inset-top, 0px));
    background: var(--hd-surface-1);
    color: var(--hd-text-primary);
    border-block-end: 1px solid var(--hd-border-subtle);
    box-shadow: var(--hd-shadow-md);
    font-family: var(--hd-font-ui);
  }

  body.hd-player-mode-player-portal .hd-pwa-banner,
  body.hd-player-mode-anonymous .hd-pwa-banner {
    inset-inline-start: var(--hd-visual-viewport-offset-left, 0px);
    inset-inline-end: calc(
      100vw
      - var(--hd-visual-viewport-offset-left, 0px)
      - var(--hd-visual-viewport-width, 100vw)
    );
    inset-block-start: calc(
      var(--hd-visual-viewport-offset-top, 0px)
      + var(--player-top-bar-height, 0px)
    );
  }

  @media (min-aspect-ratio: 1/1) {
    body.hd-player-mode-player-portal .hd-pwa-banner,
    body.hd-player-mode-anonymous .hd-pwa-banner {
      inset-inline-end: calc(
        100vw
        - var(--hd-visual-viewport-offset-left, 0px)
        - var(--hd-visual-viewport-width, 100vw)
        + var(--player-tab-bar-size, 0px)
      );
    }
  }

  .hd-pwa-banner__msg {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--hd-text-ui);
  }

  .hd-pwa-banner__dismiss {
    margin-inline-start: var(--hd-space-1);
  }

  /* ===== Transient in-app notice banner (PlayerNoticeBanner) ===== */
  /*
   * Fixed top-center toast shown when a notification-worthy event arrives
   * while the portal is in the foreground. Slides down + fades in via the
   * --in modifier. Click to dismiss early; auto-dismisses after 5 s.
   *
   * Enter-transition: translate(-50%, -100%) opacity:0 → translate(-50%, 0) opacity:1
   * controlled by adding .hd-notice-banner--in (done by JS on next rAF).
   */

  .hd-notice-banner {
    position: fixed;
    top: calc(var(--hd-space-3) + env(safe-area-inset-top, 0px));
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-120%);
    transform: translateX(-50%) translateY(-120%);
    z-index: var(--hd-z-toast);
    max-width: min(90vw, 480px);
    width: -webkit-max-content;
    width: max-content;
    padding: var(--hd-space-2) var(--hd-space-5);
    background: var(--hd-surface-2);
    color: var(--hd-text-primary);
    border: 1px solid var(--hd-border-accent);
    border-radius: var(--hd-radius-md);
    box-shadow: var(--hd-shadow-md);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui);
    line-height: var(--hd-leading-snug);
    opacity: 0;
    pointer-events: auto;
    cursor: pointer;
    -webkit-transition:
      -webkit-transform var(--hd-motion-normal) var(--hd-ease-spring),
      opacity           var(--hd-motion-normal) var(--hd-ease-page-turn);
    transition:
      transform var(--hd-motion-normal) var(--hd-ease-spring),
      opacity   var(--hd-motion-normal) var(--hd-ease-page-turn);
    white-space: normal;
  }

  /* --in modifier: slide into view + fully opaque */
  .hd-notice-banner--in {
    -webkit-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }

  /* Respect prefers-reduced-motion: skip slide, just fade */
  @media (prefers-reduced-motion: reduce) {
    .hd-notice-banner {
      -webkit-transform: translateX(-50%) translateY(0);
      transform: translateX(-50%) translateY(0);
      -webkit-transition: opacity var(--hd-motion-fast) var(--hd-ease-page-turn);
      transition: opacity var(--hd-motion-fast) var(--hd-ease-page-turn);
    }
  }
}