/**
 * portal-questionnaire.css — Fase 2 portal-native level-up/character questionnaire CTA.
 *
 * Module: public/js/portal-questionnaire-launcher.js (window.PortalQuestionnaireLauncher).
 * Renders a banner CTA into #portal-questionnaire-mount when the player has a
 * pending questionnaire; the wizard itself uses questionnaire-steps.css inside a
 * ModalManager <dialog>.
 *
 * BEM-ish: .hd-portal-questionnaire-* (flat — single small surface).
 * Token-only — no hardcoded colors, font-sizes, radii, or motion values.
 *
 * @layer components — after base + tokens, before utilities + overrides.
 */

@layer components {

  /* Banner mount — takes no space until the launcher injects a CTA. */
  .hd-portal-questionnaire-mount:empty {
    display: none;
  }

  /* Pinned below the top-bar height so the pill clears the HP-bar area at page
     top. pointer-events:none on the strip means only
     the pill itself intercepts clicks — the rest stays transparent to the
     content beneath it. */
  .hd-portal-questionnaire-mount {
    position: fixed;
    top: var(--player-top-bar-height);
    left: 0;
    right: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
    padding: var(--hd-space-2) var(--hd-space-3);
    pointer-events: none;
  }

  .hd-portal-questionnaire-cta-wrap,
  .hd-portal-questionnaire-cta,
  .hd-portal-questionnaire-error {
    pointer-events: auto;
  }

  /* CTA-pill + ✕-afvis-knap side om side. ✕ skjuler banneret for sessionen
     uden at åbne skemaet (topbar-badge bliver som påmindelse). */
  .hd-portal-questionnaire-cta-wrap {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
  }

  .hd-portal-questionnaire-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;            /* WCAG 2.5.5 touch target */
    flex-shrink: 0;
    border: none;
    border-radius: var(--hd-radius-full);
    background: var(--hd-surface-2);
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-body);
    line-height: var(--hd-leading-icon);
    cursor: pointer;
    box-shadow: var(--hd-shadow-sm);
  }

  .hd-portal-questionnaire-dismiss:hover,
  .hd-portal-questionnaire-dismiss:focus-visible {
    background: var(--hd-surface-1);
    color: var(--hd-text-primary);
    outline: none;
  }

  .hd-portal-questionnaire-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-2);
    padding: var(--hd-space-2) var(--hd-space-4);
    border: none;
    border-radius: var(--hd-radius-full);
    background: var(--hd-accent-primary);
    color: var(--hd-surface-base);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body);
    font-weight: var(--hd-weight-semibold);
    cursor: pointer;
    box-shadow: var(--hd-shadow-sm);
    min-height: 44px; /* WCAG 2.5.5 touch target */
  }

  .hd-portal-questionnaire-cta:hover,
  .hd-portal-questionnaire-cta:focus-visible {
    background: var(--hd-accent-warning);
    outline: none;
  }

  .hd-portal-questionnaire-error {
    padding: var(--hd-space-2) var(--hd-space-3);
    color: var(--hd-accent-error);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body-small);
    text-align: center;
  }

  .hd-portal-questionnaire-loading {
    display: block;
    max-width: 100%;
    padding: var(--hd-space-6) var(--hd-space-3);
    color: var(--hd-text-tertiary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
  }

  /* ----------------------------------------------------------------------- */
  /* Fase 2 Task 10 — Characterless first-character CTA banner.
   * Module: public/js/characterless-cta.js (window.CharacterlessCta).
   * A logged-in player with zero characters sits in 'anonymous' mode and only
   * sees the public landing; this banner sits above it (the landing stays
   * visible) and offers a prominent "create your first character" action.
   * Pinned below the top-bar height — same strategy as the launcher CTA. */

  .hd-characterless-cta-mount[hidden] {
    display: none;
  }

  .hd-characterless-cta-mount {
    position: fixed;
    top: var(--player-top-bar-height);
    left: 0;
    right: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
    padding: var(--hd-space-3);
    pointer-events: none; /* only the banner card intercepts clicks */
  }

  .hd-characterless-cta__banner {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hd-space-2);
    max-width: 32rem;
    padding: var(--hd-space-4) var(--hd-space-5);
    border-radius: var(--hd-radius-lg);
    background: var(--hd-accent-primary);
    color: var(--hd-text-on-accent);
    box-shadow: var(--hd-shadow-md);
    text-align: center;
  }

  .hd-characterless-cta__msg {
    margin: 0;
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h3);
    font-weight: var(--hd-weight-bold);
    color: var(--hd-text-on-accent);
  }

  .hd-characterless-cta__sub {
    margin: 0;
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body-small);
    color: var(--hd-text-on-accent);
    opacity: 0.85;
  }

  .hd-characterless-cta__btn {
    margin-top: var(--hd-space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* WCAG 2.5.5 touch target */
    padding: var(--hd-space-2) var(--hd-space-5);
    border: none;
    border-radius: var(--hd-radius-full);
    background: var(--hd-surface-base);
    color: var(--hd-text-primary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body);
    font-weight: var(--hd-weight-semibold);
    cursor: pointer;
    box-shadow: var(--hd-shadow-sm);
  }

  .hd-characterless-cta__btn:hover,
  .hd-characterless-cta__btn:focus-visible {
    background: var(--hd-surface-overlay);
    outline: none;
  }
}