@layer components {
  /* Topbar + login-hero logo. The server renders the theme-matching src
     via appTenantLogoUrl($theme) / appAuthLogoUrl() — no CSS swap needed. */
  .app-tenant-logo {
    max-width: 160px;
    height: 32px;
    width: auto;
    object-fit: contain;
  }

  .login-logo .app-tenant-logo {
    max-width: 320px;
    height: auto;
    max-height: 96px;
  }

  .app-topbar-brand .app-tenant-logo {
    max-height: calc(var(--app-topbar-height) - 1rem);
  }

  /* Tenant-edit "Tenant logos" slots — two Pico .grid columns.
     The slot's <label> uses the standard form-label rule (block,
     margin-bottom, --app-color, text-sm) so it matches other inputs. */
  .tenant-logo-slot {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .tenant-logo-actions {
    display: flex;
    justify-content: flex-end;
  }

  .tenant-logo-actions button {
    margin: 0;
  }

  .tenant-logo-readonly-preview {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
  }
}