/* MetaHub identity surface: quiet, task-first entry into the product. */
:root {
  --identity-ds-ink: var(--glass-text);
  --identity-ds-muted: var(--glass-muted);
  --identity-ds-accent: var(--glass-accent);
  --identity-ds-border: var(--glass-line);
  --identity-ds-soft: var(--glass-surface-soft);
}

.identity-app .identity-account-loading { max-width:760px; margin:0 auto; padding:32px 24px; color:var(--glass-text); }
.identity-app .identity-account-loading p { color:var(--glass-muted); margin:12px 0 24px; }
.identity-app .identity-account-skeleton {
  max-width:none; height:72px; margin:16px 0; border:1px solid var(--glass-line);
  border-radius:var(--glass-radius-md); background:var(--glass-surface);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 10%);
}

.identity-app,
.identity-access-visual {
  font-family: Inter, "Segoe UI", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}
.identity-app :is(button, input, select, textarea) { min-height: 44px; border-radius: 6px; }
.identity-app :is(input, select, textarea) { border-color: var(--identity-ds-border); background: var(--glass-input); color: var(--identity-ds-ink); }
.identity-app :is(input, select, textarea):focus { border-color: var(--identity-ds-accent); box-shadow: 0 0 0 3px rgb(3 105 161 / 16%); outline: 0; }
.identity-app :is(button, .identity-primary) { border-color: var(--identity-ds-border); background: var(--glass-button); color: var(--identity-ds-ink); font-weight: 700; }
.identity-app :is(button, .identity-primary):hover { border-color: var(--identity-ds-accent); color: var(--identity-ds-accent); }
.identity-app .identity-primary { border-color: var(--identity-ds-accent); background: var(--identity-ds-accent); color: #fff; }
.identity-app .identity-primary:hover { border-color: #075985; background: #075985; color: #fff; }
.identity-app :is(.identity-login-panel, .identity-account-preference, .identity-membership-panel, .identity-session-panel, .identity-onboarding-panel) {
  border-color: var(--identity-ds-border);
  border-radius: 10px;
  background: var(--glass-surface);
  box-shadow: 0 14px 36px rgb(15 23 42 / 8%);
}
.identity-app :is(.identity-login-panel, .identity-account-preference, .identity-membership-panel, .identity-session-panel, .identity-onboarding-panel) h1,
.identity-app :is(.identity-login-panel, .identity-account-preference, .identity-membership-panel, .identity-session-panel, .identity-onboarding-panel) h2 { color: var(--identity-ds-ink); letter-spacing: -.025em; }
.identity-app :is(.identity-login-welcome, .identity-brand-message, .identity-login-assurance, .identity-account-preference-note, .identity-onboarding-heading p) { color: var(--identity-ds-muted); }
.identity-app :is(.identity-error, .identity-form-error, .identity-feedback-error, [role="alert"]) { border-radius: 6px; border-color: #fecaca; background: #fff7f7; color: #991b1b; }
.identity-app a { color: var(--identity-ds-accent); text-underline-offset: 3px; }
.identity-app :is(.identity-account-preference-form, .identity-membership-form, .identity-onboarding-form, .identity-registration-fields) { gap: 16px; }
.identity-app :is(.identity-session-row, .identity-membership-row, .identity-summary-list dd) { border-color: var(--identity-ds-border); }

@media (max-width: 860px) {
  .identity-app :is(.identity-login-shell, .identity-account-shell, .identity-onboarding-shell) { padding-inline: 20px; }
  .identity-app :is(.identity-login-panel, .identity-account-preference, .identity-membership-panel, .identity-session-panel, .identity-onboarding-panel) { box-shadow: 0 8px 24px rgb(15 23 42 / 7%); }
}
@media (prefers-reduced-motion: reduce) {
  .identity-app *, .identity-app *::before, .identity-app *::after { transition: none !important; animation: none !important; }
}

/* Shared glass entry surface: the public/auth pages use the same language as the workspaces. */
body:has(.identity-app) {
  --entry-bg: var(--glass-bg);
  --entry-surface: var(--glass-surface);
  --entry-line: var(--glass-line);
  --entry-text: var(--glass-text);
  --entry-muted: var(--glass-muted);
  --identity-text: var(--glass-text);
  --identity-muted: var(--glass-muted);
  --identity-line: var(--glass-line);
  --identity-soft: var(--glass-surface-soft);
  --identity-danger: var(--glass-danger);
  color: var(--entry-text);
  background: radial-gradient(circle at 8% 0%, rgb(46 143 178 / 26%), transparent 34rem), linear-gradient(145deg, var(--glass-bg), var(--glass-bg-2));
}
body:has(.identity-app) .identity-app,
body:has(.identity-app) .identity-access-visual { color: var(--entry-text); }
body:has(.identity-app) .identity-login-shell,
body:has(.identity-app) .identity-account-shell,
body:has(.identity-app) .identity-security-shell,
body:has(.identity-app) .identity-organization-shell,
body:has(.identity-app) .identity-onboarding-shell { background: transparent; }
body:has(.identity-app) .identity-login-panel,
body:has(.identity-app) .identity-account-preference,
body:has(.identity-app) .identity-membership-panel,
body:has(.identity-app) .identity-session-panel,
body:has(.identity-app) .identity-onboarding-panel {
  border: 1px solid var(--entry-line);
  border-radius: 22px;
  background: var(--glass-surface);
  color: var(--entry-text);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
body:has(.identity-app) .identity-app :is(h1,h2,h3,strong,label,legend) { color: var(--entry-text); }
body:has(.identity-app) .identity-app :is(p,small,.identity-login-welcome,.identity-brand-message,.identity-login-assurance,.identity-account-preference-note,.identity-onboarding-heading p) { color: var(--entry-muted); }
body:has(.identity-app) .identity-app :is(input,select,textarea) { border-color: var(--glass-line-strong); background: var(--glass-input); color: var(--entry-text); }
body:has(.identity-app) .identity-app :is(input,select,textarea)::placeholder { color: var(--glass-subtle); opacity: 1; }
body:has(.identity-app) .identity-app :is(button,.identity-primary) { border-color: var(--glass-line-strong); background: var(--glass-button); color: var(--entry-text); border-radius: var(--glass-radius-sm); }
body:has(.identity-app) .identity-app .identity-primary { border-color: #45bad1; background: #167e96; color: #fff; }
body:has(.identity-app) .identity-app :is(.identity-error,.identity-form-error,.identity-feedback-error,[role="alert"]) { border-color: var(--glass-danger); background: var(--red-soft); color: var(--glass-danger); }
body:has(.identity-app) .identity-app a { color: var(--glass-accent); }
/* Link commands need the same theme tokens as buttons, including in the topbar. */
body:has(.identity-app) .identity-app :is(a.identity-quiet-command, a.identity-danger-command) {
  border-color: var(--glass-line-strong);
  background: var(--glass-button);
  color: var(--entry-text);
  border-radius: var(--glass-radius-sm);
}
body:has(.identity-app) .identity-app a.identity-danger-command { color: var(--glass-danger); }
body:has(.identity-app) .identity-app :is(a.identity-quiet-command, a.identity-danger-command):is(:hover, :focus-visible) {
  border-color: var(--glass-accent);
  color: var(--glass-accent);
}
body:has(.identity-app) .identity-workspace-mark {
  border-color: var(--glass-line-strong);
  background: var(--glass-button);
  color: var(--entry-text);
}

/* Access cards need their own inset: the former borderless layout used padding: 0. */
body.identity-is-access .identity-login-panel {
  width: min(460px, 100%);
  min-width: 0;
  padding: 32px;
  border-radius: 20px;
}
body.identity-is-access .identity-login-form { min-width: 0; gap: 20px; }
body.identity-is-access .identity-login-form input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
  height: 56px;
}
body.identity-is-access .identity-password-toggle {
  width: 44px;
  height: 44px;
  min-height: 44px;
  top: 6px;
  right: 6px;
}
body.identity-is-access .identity-app .identity-access-actions button {
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--glass-accent);
}
body.identity-is-access .identity-login-assurance {
  margin-top: 28px;
  padding-top: 20px;
  border-top-color: var(--entry-line);
  flex-wrap: wrap;
}
body.identity-is-access .identity-access-home { color: var(--glass-muted); }
body.identity-is-access .identity-access-home:hover { color: var(--glass-accent); }
@media (max-width: 860px) {
  /* The home link sits on the evergreen brand panel at this breakpoint. */
  body.identity-is-access .identity-access-home { color: #d8eee6; }
  body.identity-is-access .identity-access-home:is(:hover, :focus-visible) { color: #fff; }
}
body.identity-is-access .identity-error { overflow-wrap: anywhere; }

/* Account pages must switch surfaces and foregrounds together. */
body:has(.identity-app) .identity-topbar,
body:has(.identity-app) .identity-organization-topbar {
  background: var(--glass-topbar);
  border-color: var(--glass-line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body:has(.identity-app) .identity-account-layout { gap: 24px; padding-top: 24px; }
body:has(.identity-app) .identity-account-navigation {
  padding: 16px; border: 1px solid var(--glass-line);
  border-radius: var(--glass-radius-lg); background: var(--glass-sidebar);
  box-shadow: var(--glass-shadow-soft); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
body:has(.identity-app) .identity-account-navigation a {
  color: var(--glass-muted); border-radius: var(--glass-radius-sm);
}
body:has(.identity-app) .identity-account-navigation a:hover {
  color: var(--glass-text); background: var(--surface-hover);
}
body:has(.identity-app) .identity-account-navigation a[aria-current="page"] {
  color: var(--glass-text); background: var(--glass-selected);
  border-color: var(--glass-accent);
}
body:has(.identity-app) .identity-account-layout > .identity-account-main { padding-top: 0; }
body:has(.identity-app) .identity-security-main > section:not(.identity-heading) {
  padding: 24px; border: 1px solid var(--glass-line);
  border-radius: var(--glass-radius-md); background: var(--glass-surface);
  box-shadow: var(--glass-shadow-soft); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body:has(.identity-app) .identity-app :is(dt,small,.identity-empty,.identity-heading > span) { color: var(--glass-muted); }
body:has(.identity-app) .identity-app :is(.identity-workspace-selector:not(details),
  .identity-workspace-selector > summary,.identity-workspace-popover) {
  background: var(--glass-input); color: var(--glass-text); border-color: var(--glass-line-strong);
}
body:has(.identity-app) .identity-app .identity-feedback {
  background: var(--glass-selected); color: var(--glass-text); border-color: var(--glass-accent);
}
body:has(.identity-app) .identity-topbar-actions > :is(button,a) {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 12px; font-size: 13px;
}
body:has(.identity-app) .identity-app .identity-brand-mark:not(.has-image) {
  background: #167e96; color: #fff;
}
body:has(.identity-app) .identity-app button:hover:not(:disabled) {
  border-color: var(--glass-accent); background: var(--surface-hover); color: var(--glass-text);
}
body:has(.identity-app) .identity-app .identity-primary:hover:not(:disabled) { background: #0f6c83; color: #fff; }
body:has(.identity-app) .identity-app button:disabled { opacity: .65; }
body:has(.identity-app) .identity-app option { background: var(--glass-option); color: var(--glass-text); }
body:has(.identity-app) .identity-app :is(dialog,.identity-account-dialog) {
  background: var(--glass-dialog); color: var(--glass-text); border-color: var(--glass-line-strong);
}
body:has(.identity-app) .identity-app dialog::backdrop { background: var(--glass-backdrop); backdrop-filter: blur(8px); }
@media (max-width: 760px) {
  body:has(.identity-app) .identity-account-layout { padding-top: 16px; gap: 16px; }
  body:has(.identity-app) .identity-security-main > section:not(.identity-heading) { padding: 18px; }
}
@media (max-width: 540px) {
  body:has(.identity-app) .identity-topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 860px) {
  body.identity-is-access .identity-login-panel { padding: 24px; }
}
@media (max-width: 360px) {
  body.identity-is-access .identity-login-shell { padding-inline: 16px; }
  body.identity-is-access .identity-login-panel { padding: 20px; }
  body.identity-is-access .identity-captcha-control { grid-template-columns: minmax(0, 1fr) 110px 36px; }
  body.identity-is-access .identity-captcha-control img { width: 110px; }
}