/**
 * NOW Agent Portal — layouts/blank.css
 * Template A chrome: centered auth column (login, register, workspace
 * picker, invite, reset, error / no-access pages).
 * Mirrors app/views/layouts/blank.html.php (Style Guide v1.6 §4/§9).
 * Loaded after main.css, which owns every token used here.
 **/

@layer layout {
  .auth-page {
    /* vh fallback first: an unparseable dvh line is dropped cleanly, so the
       fallback survives. Never hide dvh behind a custom property (§9). */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Mobile: a tight top offset and --space-4 gutters. §4A's "starts ~15-20%
       from the top" wastes a phone screen, so the desktop block restores it. */
    padding-block-start: var(--space-5);
    padding-inline: var(--space-4);
  }

  .auth-column {
    width: min(var(--auth-max-width), 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
  }

  /* Brand block: logo mark → app name → tagline (Style Guide §4 A) */
  .auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-2);
  }

  .logo-mark {
    width: 60px;
    height: 60px;
    background-color: var(--color-black);
    border-radius: var(--radius-lg);
    color: var(--color-bg);
    display: grid;
    place-items: center;
    font-size: 26px; /* logo letter — no type-scale token applies */
    font-weight: 700;
  }

  .auth-app-name {
    font-size: var(--text-section);
    font-weight: 700;
  }

  .auth-tagline {
    font-size: var(--text-small);
    color: var(--color-text-muted);
  }

  /* Action row below the card — navigation links may be styled as
     buttons here (pure GET), per Style Guide §5.1 */
  .auth-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Footer identity line ("You are logged in as …") */
  .auth-footer {
    font-size: var(--text-small);
    color: var(--color-text-muted);
  }

  /* Eyebrow line on error pages ("Error 404") — error pages are part
     of the template A family (Style Guide §4 A) */
  .error-code {
    font-size: var(--text-small);
    color: var(--color-text-faint);
    letter-spacing: 1px;
    margin-block-end: var(--space-2);
  }

  /* --- Non-mobile (>1024px). One block, last in file (§9). --- */
  @media (min-width: 1025px) {
    .auth-page {
      padding-block-start: calc(var(--space-5) * 2);
      padding-inline: var(--space-5);
    }
  }
}