/**
 * player-login.css — Session-based player login and profile UI.
 *
 * Item 8 — folded into the portal design system: panels carry .hd-portal-fg-card
 * (papir + guld-bånd foroven, Item 7) and in anonymous mode the form renders into
 * the inline .hd-player-content-mount under the tab-bar (shared parchment shell),
 * so login is no longer a separately-styled surface. This file is now token-only —
 * the previously hardcoded fonts/sizes/spacing have been replaced with --hd-* tokens,
 * and the titles adopt the portal's display/eyebrow voice (jf. .hd-settings__section-title).
 */
@layer components {
  .hd-player-login {
    width: min(58rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    max-height: calc((var(--vh, 1vh) * 100) - 2rem);
    margin: auto;
    padding: var(--hd-space-4);
    color: var(--hd-text-primary);
    overflow: auto;
  }

  .hd-player-login__shell {
    display: grid;
    gap: var(--hd-space-4);
  }

  /* Hoved-titel: portalens display-stemme (jf. .hd-settings__title). */
  .hd-player-login__title {
    margin: 0;
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h2);
    font-weight: var(--hd-weight-bold);
    line-height: var(--hd-leading-tight);
    color: var(--hd-text-primary);
  }

  .hd-player-login__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--hd-space-3);
  }

  /* Baggrund + kant leveres af .hd-portal-fg-card (papir + guld-bånd foroven,
   * Item 7) som markup'en sætter på panelerne; her beholdes kun padding. */
  .hd-player-login__panel,
  .hd-player-login__pending,
  .hd-player-login__characters {
    padding: var(--hd-space-4);
  }

  /* Panel-titler følger portalens eyebrow/sektionstitel-stemme. */
  .hd-player-login__panel-title {
    margin: 0 0 var(--hd-space-1);
    font-size: var(--hd-text-ui);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hd-text-secondary);
  }

  .hd-player-login__help,
  .hd-player-login__status,
  .hd-player-login__error {
    margin: var(--hd-space-1) 0 0;
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-body-small);
    line-height: var(--hd-leading-snug);
  }

  .hd-player-login__error {
    color: var(--hd-accent-error);
  }

  /* "glemt kode?" — reuses the magic-link flow (no dedicated reset endpoint). */
  .hd-player-login__link {
    display: inline-block;
    align-self: start;
    margin-top: var(--hd-space-2);
    padding: var(--hd-space-2) 0;
    min-height: 44px;          /* WCAG 2.5.5 touch target */
    background: none;
    border: 0;
    color: var(--hd-accent-primary);
    font: inherit;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
  }

  .hd-player-login__link:focus-visible {
    outline: var(--hd-focus-ring);
    outline-offset: 2px;
  }

  .hd-player-login__forgot-help {
    margin: var(--hd-space-1) 0 0;
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-body-small);
    line-height: var(--hd-leading-snug);
  }

  .hd-player-login__form {
    display: grid;
    gap: var(--hd-space-2);
    margin-top: var(--hd-space-2);
  }

  .hd-player-login input {
    width: 100%;
    min-height: 44px;          /* WCAG 2.5.5 touch target */
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
    background: var(--hd-surface-1);
    color: var(--hd-text-primary);
    padding: var(--hd-space-2) var(--hd-space-3);
    font: inherit;
  }

  .hd-player-login input:focus {
    outline: 2px solid var(--hd-focus-ring);
    outline-offset: 2px;
  }

  .hd-player-login button {
    min-height: 44px;          /* WCAG 2.5.5 touch target */
    border: 1px solid var(--hd-border-strong);
    border-radius: var(--hd-radius-sm);
    background: var(--hd-accent-primary);
    color: var(--hd-text-on-accent);
    padding: var(--hd-space-2) var(--hd-space-3);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body);
    font-weight: var(--hd-weight-bold);
    line-height: var(--hd-leading-snug);
    cursor: pointer;
  }

  .hd-player-login button:hover {
    filter: brightness(1.05);
  }

  .hd-player-login button:focus {
    outline: 2px solid var(--hd-focus-ring);
    outline-offset: 2px;
  }

  .hd-player-login__pending {
    text-align: center;
  }

  .hd-player-login__pin {
    display: inline-grid;
    min-width: 8rem;
    margin: var(--hd-space-2) 0;
    padding: var(--hd-space-2) var(--hd-space-4);
    border-radius: var(--hd-radius-md);
    border: 1px solid var(--hd-border-strong);
    background: var(--hd-surface-1);
    color: var(--hd-accent-warning);
    font-family: var(--hd-font-mono);
    font-size: var(--hd-text-h2);
    font-weight: var(--hd-weight-bold);
    line-height: var(--hd-leading-icon);
    letter-spacing: 0;
  }

  .hd-player-login__character-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--hd-space-2);
    margin-top: var(--hd-space-3);
  }

  .hd-player-login__character-btn {
    display: grid;
    gap: var(--hd-space-1);
    text-align: left;
    /* override the accent-filled .hd-player-login button default — character picks
     * read as quiet surface cards, not primary actions. */
    background: var(--hd-surface-2) !important;
    color: var(--hd-text-primary) !important;
  }

  .hd-player-login__character-name {
    font-weight: var(--hd-weight-bold);
  }

  .hd-player-login__character-meta {
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-body-small);
  }

  @media (max-width: 42em) {
    .hd-player-login {
      width: calc(100vw - 1rem);
      max-height: calc(100vh - 1rem);
      max-height: calc((var(--vh, 1vh) * 100) - 1rem);
      padding: var(--hd-space-2);
    }
  }
}