/* Sign in, create account, and the account area. */

@layer pages {
  /* Sign in / create account */
  .auth {
    display: grid;
    gap: var(--space-6);
    align-items: start;
    margin-block: var(--space-4) 0;
  }

  @media (min-width: 900px) {
    .auth { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: var(--space-10); margin-block-start: var(--space-8); }
  }

  .auth-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: 28px 20px;
    border: 1px solid var(--bp-line);
    border-radius: var(--radius-xl);
    background: var(--bp-surface);
    box-shadow: var(--shadow-sm);
  }

  @media (min-width: 560px) {
    .auth-card { padding: 40px; }
  }

  .auth-card__header { display: flex; flex-direction: column; gap: var(--space-1); }
  .auth-card__title { font-size: var(--fs-3xl); }
  .auth-card__lead { margin-top: 6px; color: var(--bp-ink-2); }

  .auth-card__switch {
    padding-top: var(--space-5);
    border-top: 1px solid var(--bp-line);
    color: var(--bp-ink-2);
    text-align: center;
  }

  .auth-card__switch a { font-weight: 600; }

  .auth-card__note { font-size: var(--fs-sm); color: var(--bp-ink-2); }

  /* "Check your inbox" after creating an account or asking for a new link (_ConfirmEmailSent). */
  .auth-sent { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .auth-sent__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bp-brand-100); color: var(--bp-brand-800); }
  .auth-sent__icon .icon { font-size: 28px; }
  .auth-sent__title { font-size: var(--fs-xl); }
  .auth-sent__note { font-size: var(--fs-sm); color: var(--bp-ink-2); }

  .auth-aside {
    position: relative;
    display: none;
    overflow: hidden;
    padding: var(--space-10);
    border-radius: var(--radius-xl);
    background: var(--bp-brand-50);
  }

  @media (min-width: 900px) {
    .auth-aside { display: flex; flex-direction: column; gap: var(--space-6); min-height: 100%; }
  }

  .auth-aside__title { font-size: var(--fs-3xl); max-width: 16ch; }

  .perks { display: flex; flex-direction: column; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }

  .perk { display: flex; gap: var(--space-4); align-items: flex-start; }

  .perk__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%;
    background: var(--bp-surface);
    color: var(--bp-brand-600);
    box-shadow: var(--shadow-sm);
  }

  .perk__title { font-weight: 700; color: var(--bp-ink); }
  .perk__text { color: var(--bp-ink-2); font-size: 15px; }

  .auth-aside__blob {
    position: absolute;
    inset-inline-end: -60px;
    bottom: -60px;
    width: 240px;
    height: 240px;
    border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%;
    background: var(--bp-brand-100);
    opacity: .7;
  }

  .auth-aside__blob--leaf {
    inset-inline-end: 120px;
    bottom: -90px;
    width: 140px;
    height: 140px;
    background: var(--bp-leaf-50);
  }

  /* Account area */
  .account-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-5);
    margin-block: var(--space-4) var(--space-8);
  }

  .account-hero__avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%;
    background: var(--bp-brand-600);
    color: var(--bp-on-primary);
    font-family: var(--font-display);
    font-size: 32px;
  }

  .account-hero__text { flex: 1 1 240px; display: flex; flex-direction: column; gap: 2px; }
  .account-hero__eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bp-ink-2); }
  .account-hero__meta { color: var(--bp-ink-2); font-size: 15px; }

  .role-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 6px 0 0; padding: 0; }

  .role-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    background: var(--bp-brand-50);
    color: var(--bp-brand-800);
    font-size: var(--fs-xs);
    font-weight: 700;
  }

  .role-chip .icon { font-size: 16px; }

  .account {
    display: grid;
    gap: var(--space-6);
  }

  @media (min-width: 900px) {
    .account { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-10); align-items: start; }
  }

  .account-nav { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }

  .account-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--control-h);
    padding: 0 14px;
    border-radius: var(--radius-pill);
    color: var(--bp-ink);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
  }

  .account-nav a:hover { background: var(--bp-brand-50); color: var(--bp-brand-600); }
  .account-nav a[aria-current="true"] { background: var(--bp-brand-600); color: var(--bp-on-primary); }
  .account-nav .icon { font-size: 20px; }

  @media (min-width: 900px) {
    .account-nav { position: sticky; top: var(--space-6); flex-direction: column; overflow: visible; }
  }

  .account__sections { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }

  .panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6) var(--space-5);
    border: 1px solid var(--bp-line);
    border-radius: var(--radius-xl);
    background: var(--bp-surface);
    scroll-margin-top: var(--space-6);
  }

  @media (min-width: 560px) {
    .panel { padding: var(--space-8); }
  }

  .panel__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
  .panel__title { font-size: var(--fs-2xl); }
  .panel__lead { color: var(--bp-ink-2); font-size: 15px; }

  .panel .form { max-width: 480px; }

  .panel__loading { color: var(--bp-ink-2); }

  /* Appearance choice, reusing the welcome dialog's previews */
  .appearance-choice { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); max-width: 560px; }

  .theme-preview--system {
    --pv-line: var(--preview-light-line);
    --pv-accent: var(--preview-light-accent);
    background-image: linear-gradient(135deg, var(--preview-light-paper) 50%, var(--preview-dark-paper) 50%);
  }

  .theme-preview--system .theme-preview__bar { background: linear-gradient(90deg, var(--preview-light-ink), var(--preview-dark-ink)); }
  .theme-preview--system .theme-preview__card { background: var(--preview-light-card); }
  .theme-preview--system .theme-preview__card + .theme-preview__card { background: var(--preview-dark-card); }

  .wishlist-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); color: var(--bp-ink-2); }
}