/* ============================================================================
   Life Command Center — Authentication portal
   ----------------------------------------------------------------------------
   Mobile layout deliberately splits into two zones: the brand block floats in
   the upper space, and the form is anchored to the BOTTOM of the viewport so
   the inputs and the sign-in button sit inside the natural thumb arc. On a
   6.1" phone a vertically centred form puts the submit button around the
   midpoint, which is the hardest part of the screen to reach one-handed.

   From 600px up the two zones collapse into a single centred card.
   ========================================================================== */

@layer components {

  .auth {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding-block-start: var(--safe-top);
    padding-block-end: var(--safe-bottom);
    padding-inline: max(var(--space-5), var(--safe-left), var(--safe-right));
    background: var(--surface-0);
  }

  /* Subtle depth behind the brand mark — a single soft accent wash, not a
     gradient wallpaper. */
  .auth::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 60dvh;
    background:
      radial-gradient(
        70% 55% at 50% 0%,
        var(--accent-subtle) 0%,
        transparent 72%
      );
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
  }

  .auth > * { position: relative; z-index: 1; }

  /* ------------------------------------------------------------- top bar -- */
  .auth__bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: var(--appbar-height);
  }

  /* -------------------------------------------------------------- brand --- */
  .auth__brand {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    text-align: center;
    padding-block: var(--space-8);
  }

  .auth__mark {
    width: 4.5rem;
    height: 4.5rem;
    color: var(--accent);
    animation: mark-in var(--dur-slower) var(--ease-spring) both;
  }

  .auth__mark-arc {
    transform-origin: center;
    animation: mark-sweep 1100ms var(--ease-out) both;
  }

  @keyframes mark-in {
    from { opacity: 0; scale: 0.82; }
    to   { opacity: 1; scale: 1; }
  }

  @keyframes mark-sweep {
    from { stroke-dashoffset: 176; }
    to   { stroke-dashoffset: 46; }
  }

  .auth__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  .auth__subtitle {
    font-size: var(--text-base);
    color: var(--text-secondary);
    max-width: 22ch;
    text-wrap: balance;
  }

  /* --------------------------------------------------------------- form --- */
  .auth__panel {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
    padding-block-end: var(--space-6);
  }

  .auth__form { display: grid; gap: var(--space-4); }

  .auth__error { animation: banner-in var(--dur-base) var(--ease-out) both; }

  @keyframes banner-in {
    from { opacity: 0; translate: 0 -6px; }
    to   { opacity: 1; translate: 0 0; }
  }

  .auth__submit { margin-block-start: var(--space-2); }

  .auth__footnote {
    margin-block-start: var(--space-5);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-align: center;
    text-wrap: balance;
  }

  /* The theme toggle lives in components.css — it is used on every page, and
     keeping it here meant it was unstyled everywhere except this one. */

  /* ------------------------------------------------------------ desktop --- */
  @media (min-width: 600px) {
    .auth {
      justify-content: center;
      padding-block: var(--space-10);
    }

    .auth__bar {
      position: absolute;
      inset-block-start: var(--safe-top);
      inset-inline-end: var(--space-5);
    }

    .auth__brand {
      flex: none;
      padding-block: var(--space-6) var(--space-8);
    }

    .auth__panel {
      padding: var(--space-8);
      background: var(--surface-1);
      border-radius: var(--radius-2xl);
      box-shadow: var(--elev-3);
    }
  }
}