/* login, forgot/reset/invite password, privacy, error pages — screen styles. Owner: the agent of that screen (docs/DESIGN.md "File ownership").
   Scope every rule under the screen's page class (e.g. .pg-auth); shared patterns belong in
   components.css (ask the lead). Port from FMeter-redesign/admin-center/src/app.css. */

/* Sign-in card (centred 440 px card on the canvas, Microsoft account style) */
.pg-auth .login-card, .pg-error .error-page {
  width: 100%; max-width: 440px; margin: 0 auto; padding: 40px 44px 36px; background: var(--fm-card);
  border-radius: var(--borderRadiusXLarge); box-shadow: var(--shadow4); border: 1px solid var(--fm-card-stroke);
}
.pg-auth .login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.pg-auth .login-brand .logo { width: 32px; height: 32px; border-radius: var(--borderRadiusLarge); }
.pg-auth .login-brand .logo .i { width: 20px; height: 20px; }
.pg-auth .login-brand b { font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); }
.pg-auth .login-card h1 { margin-bottom: 4px; }
.pg-auth .purpose { color: var(--colorNeutralForeground3); margin-bottom: 24px; }
.pg-auth .login-card form { display: grid; gap: 16px; }
.pg-auth .login-card .field { max-width: none; }
.pg-auth .login-card fluent-text-input, .pg-auth .login-card input[type="password"] { width: 100%; }
.pg-auth .login-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
@media (max-width: 767px) {
  .pg-auth .login-card, .pg-error .error-page { padding: 28px 20px 24px; box-shadow: var(--shadow2); }
  .pg-auth .login-row { flex-direction: column-reverse; align-items: stretch; }
  .pg-auth .login-row fluent-button { width: 100%; }
}

/* forgot / set-password reuse the sign-in card */
.pg-auth .login-row.end { justify-content: flex-end; }
.pg-auth .login-card .field { display: grid; gap: 4px; }
.pg-auth .login-card fluent-message-bar { margin: 0; }
.pg-auth .login-card .form-error { color: inherit; font-weight: var(--fontWeightRegular); }

/* Min konto: two cards, one column (admin and tenant shell) */
.pg-account .acct { max-width: 720px; }
.pg-account .acct .card-head h2 .i { color: var(--colorNeutralForeground3); }
.pg-account .acct-form { display: grid; gap: 16px; padding-top: 4px; }
.pg-account .acct-form p { margin: 0; }
.pg-account .field { max-width: 32rem; }
.pg-account .form-actions { display: flex; }

/* Privatlivspolitik */
.pg-doc .doc { max-width: 720px; margin: 0 auto; padding: 32px 36px 36px; }
.pg-doc .doc h1 { font-size: var(--fontSizeBase600); line-height: var(--lineHeightBase600); font-weight: var(--fontWeightSemibold); margin-bottom: 8px; }
.pg-doc .doc .lead { color: var(--colorNeutralForeground2); margin-bottom: 8px; }
.pg-doc .doc h2 { margin: 24px 0 6px; }
.pg-doc .doc p { margin: 0 0 8px; }
.pg-doc .doc ul { margin: 0 0 8px; padding-left: 20px; list-style: disc; }
.pg-doc .doc li { margin: 2px 0; }

/* Error pages (404, 403, 500, expired link ...) in every shell */
.pg-error .error-page { text-align: center; display: grid; justify-items: center; gap: 8px; margin: 48px auto 0; }
.pg-error .error-page .ring { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--colorNeutralBackground3); color: var(--colorNeutralForeground3); margin-bottom: 8px; }
.pg-error .error-page .ring .i { width: 32px; height: 32px; }
.pg-error .error-page p { margin: 0; color: var(--colorNeutralForeground2); }
.pg-error .error-page p + p { margin-top: 12px; }
.shell-anon .error-fragment, .error-fragment { margin-bottom: 0; }

@media (max-width: 767px) {
  .pg-doc .doc { padding: 24px 20px 28px; }
  .pg-error .error-page { margin-top: 24px; }
  .pg-account .field { max-width: none; }
}
.pg-error .error-page h1 { font-size: var(--fontSizeBase600); line-height: var(--lineHeightBase600); font-weight: var(--fontWeightSemibold); }